Brutal vocabulary interaction (draft)

templates/vocab_func_context/index.html.twig

@@ -0,0 +1,95 @@
+{% extends 'data_entry.html.twig' %}
+
+{% block title %}Vocab - Functional context | ArCOA{% endblock %}
+
+{% block rightpanel %}
+<div class="container" style="max-width: 50vw">
+    <h1 class="is-size-1 mt-0 has-text-centered">Edit vocabulary</h1>
+    <h2 class="is-size-3 mt-4 has-text-centered">Functional context</h2>
+
+    <div class="container mt-6">
+        <!-- For AJAX calls... TODO: not working from controller? -->
+        <article class="message is-success is-hidden" id="ajax-success">
+            <div class="message-body"></div>
+        </article>
+        {% for message in app.flashes('notice') %}
+            <article class="message is-success">
+                <div class="message-body">{{ message }}</div>
+            </article>
+        {% endfor %}
+        <form method="post" action="{{ path('app_vocab_func_context_add') }}">
+            <label class="label">Add new term</label>
+            <div class="field has-addons">
+                <div class="control">
+                    <input class="input" name="_term" type="text" placeholder="Add new term">
+                </div>
+                <div class="control">
+                    <button type="submit" class="button is-link">
+                        Add
+                        <span class="icon ml-3">
+                            <i class="fa fa-plus"></i>
+                        </span>
+                    </button>
+                </div>
+            </div>
+        </form>
+
+        <h3 class="mt-6 mb-5 is-size-5"><strong>Terms in vocabulary</strong></h3>
+        <table class="table is-fullwidth" id="terms">
+            <tr><th>Term</th><th>Actions</th></tr>
+        {% for term in terms %}
+            <tr data-row-id="{{ term.id }}">
+                <td>
+                    <input class="input" type="text" value="{{ term.term }}" disabled data-term-id="{{ term.id }}" />
+                </td>
+                <td>
+                    <div class="buttons">
+                        <button class="button is-link" data-id-edit="{{ term.id }}">
+                            Edit
+                            <span class="icon ml-2">
+                                <i class="fa fa-pencil"></i>
+                            </span>
+                        </button>
+                        <button class="button is-danger" data-id-delete="{{ term.id }}">
+                            Delete
+                            <span class="icon ml-2">
+                                <i class="fa fa-trash"></i>
+                            </span>
+                        </button>
+                    </div>
+                </td>
+            </tr>
+        {% endfor %}
+        </table>
+
+    </div>
+</div>
+<script type="text/javascript" defer>
+    const terms = document.querySelector('#terms');
+
+    terms.addEventListener('click', async (event) => {
+        const clicked = event.target;
+
+        if (clicked.classList.contains('is-danger')) {
+            const termId = clicked.getAttribute('data-id-delete');
+
+            const data = new FormData;
+            data.append("_id", termId);
+
+            const res = await fetch("{{ path('app_vocab_func_context_del') }}", {
+                method: "POST",
+                body: data,
+            });
+
+            const notice = document.querySelector('#ajax-success');
+
+            if (res.status === 200) {
+                notice.firstElementChild.innerHTML = 'Term deleted successfully';
+                notice.classList.remove('is-hidden');
+                const row = document.querySelector(`tr[data-row-id="${termId}"]`);
+                row.remove();
+            }
+        }
+    });
+</script>
+{% endblock %}