Use hyperscript for rendering notifications

templates/base.html

@@ -150,17 +150,12 @@
     </div>
 
     <div class="absolute top-16 right-4 m-4">
-
         <div class="bg-white rounded shadow-md w-64" id="notifications-container">
 
         </div>
-
     </div>
-    <script type="text/javascript">
-        const displayNotification = (message) => {
-            const notifications_container_el = document.getElementById('notifications-container');
-
-            const notificiation_html = `<div class="bg-white rounded shadow-md w-64">
+    <template id="notification-template">
+        <div class="bg-white rounded shadow-md w-64" _="init wait 2s then remove me end on click remove me">
             <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">
                 <div
@@ -187,28 +182,8 @@
                     </svg>
                 </button>
             </div>
-        </div>`
-
-            createAndRemoveElement(notificiation_html, notifications_container_el, 3);
-        }
-
-        const createAndRemoveElement = (html, parentElement, delay) => {
-            // Create new element
-            var newElement = document.createElement('div');
-            newElement.innerHTML = html;
-
-            // Add click handler that deletes the element
-            newElement.addEventListener('click', function () {
-                newElement.parentNode.removeChild(newElement);
-            });
-
-            // Add the new element to the DOM
-            parentElement.appendChild(newElement);
-
-            // Remove the new element after 'delay' seconds
-            setTimeout(() => newElement?.parentNode?.removeChild(newElement), delay * 1000); // Convert delay from seconds to milliseconds
-        }
-    </script>
+        </div>
+    </template>
 
     <script src="/static/js/htmx.min.js"></script>
     <script src="/static/js/hyperscript.min.js"></script>

templates/partials/workout_modal.html

@@ -87,9 +87,8 @@
                     hx-post="{{ url_for('create_topset', person_id=workout['PersonId'], workout_id=workout['WorkoutId']) }}"
                     hx-swap="beforeend" hx-target="#new-workout" _="on htmx:afterOnLoad if #no-workouts add .hidden to #no-workouts end
                     on htmx:afterRequest
-                    js
-                        displayNotification('Topset added')
-                    end
+                    render #notification-template with (message: 'Topset added') then append it to #notifications-container
+                    then call _hyperscript.processNode(#notifications-container)
                     then reset() me">
 
                     <div class="flex flex-wrap -mx-3 mb-2">

templates/settings.html

@@ -61,10 +61,9 @@
 
         <form class="w-full mt-3" hx-post="{{ url_for('create_person') }}" hx-swap="beforeend" hx-target="#new-person"
             _="on htmx:afterRequest
-        js
-            displayNotification('User added')
-        end
-        then reset() me">
+            render #notification-template with (message: 'User added') then append it to #notifications-container
+            then call _hyperscript.processNode(#notifications-container)
+            then reset() me">
             <div class="flex flex-wrap -mx-3 mb-2">
                 <div class="grow px-3">
                     <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
@@ -151,9 +150,8 @@
 
         <form class="w-full mt-8" hx-post="{{ url_for('create_exercise') }}" hx-swap="beforeend"
             hx-target="#new-exercise" _="on htmx:afterRequest
-                js
-                    displayNotification('Exercise added')
-                end
+                render #notification-template with (message: 'Exercise added') then append it to #notifications-container
+                then call _hyperscript.processNode(#notifications-container)
                 then reset() me">
             <div class="flex flex-wrap -mx-3 mb-2">
                 <div class="grow px-3">