From 650a3879a2e1eb03a77c7fd8a4103dcd8ad1565d Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Mon, 24 Jul 2023 09:45:33 +1000
Subject: [PATCH] Clear form and display temporary notification when adding
 users/exercises on settings page

---
 templates/base.html                 | 71 ++++++++++++++++++++++++++++-
 templates/partials/people_link.html |  2 +-
 templates/settings.html             | 13 +++++-
 3 files changed, 81 insertions(+), 5 deletions(-)

diff --git a/templates/base.html b/templates/base.html
index adfb430..baf60c9 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -102,7 +102,7 @@
                     <div class="flex-1 px-3 bg-white divide-y space-y-1">
                         <div class="space-y-2 pt-2">
                             <a hx-get="{{ url_for('dashboard') }}" hx-push-url="true" hx-target="#container"
-                                class="text-base text-gray-900 font-normal rounded-lg flex items-center p-2 hover:bg-gray-100 group cursor-pointer {{ is_selected_page(url_for('dashboard')) }}">
+                                class="text-base text-gray-900 font-normal rounded-lg flex items-center p-2 hover:bg-gray-100 group cursor-pointer {{ is_selected_page(url_for('dashboard')) }} page-link">
                                 <svg class="w-6 h-6 text-gray-500 group-hover:text-gray-900 transition duration-75"
                                     fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                     <path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path>
@@ -119,7 +119,7 @@
                         </ul>
                         <div class="space-y-2 pt-2">
                             <a hx-get="{{ url_for('settings') }}" hx-push-url="true" hx-target="#container"
-                                class="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 group transition duration-75 flex items-center p-2 cursor-pointer {{ is_selected_page(url_for('settings')) }}">
+                                class="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 group transition duration-75 flex items-center p-2 cursor-pointer {{ is_selected_page(url_for('settings')) }} page-link">
                                 <svg class="w-6 h-6 text-gray-500 group-hover:text-gray-900 transition duration-75"
                                     fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
                                     data-darkreader-inline-fill="" style="--darkreader-inline-fill:currentColor;">
@@ -146,6 +146,73 @@
         </div>
     </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 notifications_container_el = document.getElementById('notifications-container');
+
+        const displayNotification = (message) => {
+            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">
+                <div
+                    class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
+                    <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                        viewBox="0 0 20 20" data-darkreader-inline-fill=""
+                        style="--darkreader-inline-fill: currentColor;">
+                        <path
+                            d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z">
+                        </path>
+                    </svg>
+                    <span class="sr-only">Check icon</span>
+                </div>
+                <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);">
+                    <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">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" data-darkreader-inline-stroke=""
+                            style="--darkreader-inline-stroke: currentColor;"></path>
+                    </svg>
+                </button>
+            </div>
+        </div>`
+
+            createAndRemoveElement(notificiation_html, notifications_container_el, 3);
+        }
+
+        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 the new element to the DOM
+            if (parentElement) {
+                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
+        }
+    </script>
+
     <script src="/static/js/htmx.min.js"></script>
     <script src="/static/js/hyperscript.min.js"></script>
     <script src="/static/js/sweetalert2@11.js"></script>
diff --git a/templates/partials/people_link.html b/templates/partials/people_link.html
index d1b326c..c0c69ed 100644
--- a/templates/partials/people_link.html
+++ b/templates/partials/people_link.html
@@ -1,7 +1,7 @@
 {% for p in people %}
 <li>
     <a hx-get="{{ url_for('get_calendar' ,person_id=p['PersonId']) }}" hx-push-url="true" hx-target="#container"
-        class="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 flex items-center p-2 group cursor-pointer">
+        class="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 flex items-center p-2 group cursor-pointer page-link">
         <svg class="w-6 h-6 text-gray-500 flex-shrink-0 group-hover:text-gray-900 transition duration-75"
             fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
             <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd">
diff --git a/templates/settings.html b/templates/settings.html
index a5712fd..3fa5d30 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -75,7 +75,12 @@
             </div>
         </div>
 
-        <form class="w-full mt-3" hx-post="{{ url_for('create_person') }}" hx-swap="beforeend" hx-target="#new-person">
+        <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">
             <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">
@@ -177,7 +182,11 @@
         </div>
 
         <form class="w-full mt-8" hx-post="{{ url_for('create_exercise') }}" hx-swap="beforeend"
-            hx-target="#new-exercise">
+            hx-target="#new-exercise" _="on htmx:afterRequest
+                js
+                    displayNotification('Exercise added')
+                end
+                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">