From 27ba4d096b7fcc67fbcf60acae1306cbb3031e98 Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Mon, 24 Jul 2023 21:44:00 +1000
Subject: [PATCH] Minor refactor for notification function, switch to
 hyperscript?

---
 templates/base.html | 26 ++++++++++----------------
 1 file changed, 10 insertions(+), 16 deletions(-)

diff --git a/templates/base.html b/templates/base.html
index baf60c9..497af7b 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -154,9 +154,9 @@
 
     </div>
     <script type="text/javascript">
-        const notifications_container_el = document.getElementById('notifications-container');
-
         const displayNotification = (message) => {
+            const notifications_container_el = document.getElementById('notifications-container');
+
             const notificiation_html = `<div class="bg-white rounded shadow-md w-64">
             <div class="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
                 role="alert">
@@ -174,7 +174,7 @@
                 <div class="ml-3 text-sm font-normal">${message}</div>
                 <button type="button"
                     class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
-                    data-dismiss-target="#toast-success" aria-label="Close" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">
+                    data-dismiss-target="#toast-success" aria-label="Close">
                     <span class="sr-only">Close</span>
                     <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                         viewBox="0 0 14 14">
@@ -190,26 +190,20 @@
         }
 
         const createAndRemoveElement = (html, parentElement, delay) => {
-            // Generate a random id
-            var id = 'id' + Math.random().toString(16).slice(2);
-
             // Create new element
             var newElement = document.createElement('div');
             newElement.innerHTML = html;
-            newElement.id = id;
+
+            // Add click handler that deletes the element
+            newElement.addEventListener('click', function () {
+                newElement.parentNode.removeChild(newElement);
+            });
 
             // Add the new element to the DOM
-            if (parentElement) {
-                parentElement.appendChild(newElement);
-            }
+            parentElement.appendChild(newElement);
 
             // Remove the new element after 'delay' seconds
-            setTimeout(function () {
-                var elementToRemove = document.getElementById(id);
-                if (elementToRemove) {
-                    elementToRemove.parentNode.removeChild(elementToRemove);
-                }
-            }, delay * 1000); // Convert delay from seconds to milliseconds
+            setTimeout(() => newElement?.parentNode?.removeChild(newElement), delay * 1000); // Convert delay from seconds to milliseconds
         }
     </script>