Draft admin + crude JS for notices

templates/vocab_func_context/index.html.twig

@@ -9,13 +9,14 @@
 
     <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>
+        <div class="notification is-success is-hidden" id="ajax-success">
+            <button class="delete"></button>
+          </div>
         {% for message in app.flashes('notice') %}
-            <article class="message is-success">
-                <div class="message-body">{{ message }}</div>
-            </article>
+            <div class="notification is-success" id="server-success">
+                <button class="delete"></button>
+                {{ message }}
+            </div>
         {% endfor %}
         <form method="post" action="{{ path('app_vocab_func_context_add') }}">
             <label class="label">Add new term</label>
@@ -66,6 +67,13 @@
 </div>
 <script type="text/javascript" defer>
     const terms = document.querySelector('#terms');
+    const serverNotice = document.querySelector('#server-success');
+
+    if (serverNotice) {
+        serverNotice.querySelector('.delete').addEventListener('click', () => {
+            serverNotice.remove();
+        });
+    }
 
     terms.addEventListener('click', async (event) => {
         const clicked = event.target;
@@ -84,8 +92,11 @@
             const notice = document.querySelector('#ajax-success');
 
             if (res.status === 200) {
-                notice.firstElementChild.innerHTML = 'Term deleted successfully';
+                notice.innerHTML += 'Term deleted successfully';
                 notice.classList.remove('is-hidden');
+                notice.querySelector('.delete').addEventListener('click', () => {
+                    notice.classList.add('is-hidden');
+                });
                 const row = document.querySelector(`tr[data-row-id="${termId}"]`);
                 row.remove();
             }