peterstockings/workout
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Minor refactor for notification function, switch to hyperscript?

Browse Source
This commit is contained in:
Peter Stockings
2023-07-24 21:44:00 +10:00
parent 8e86a0dcaf
commit 27ba4d096b
1 changed files with 10 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
templates/base.html
View File

@@ -154,9 +154,9 @@
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
const notifications_container_el = document.getElementById('notifications-container');
const displayNotification = (message) => { const displayNotification = (message) => {
const notifications_container_el = document.getElementById('notifications-container');
const notificiation_html = `<div class="bg-white rounded shadow-md w-64"> 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" <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"> role="alert">
@@ -174,7 +174,7 @@
<div class="ml-3 text-sm font-normal">${message}</div> <div class="ml-3 text-sm font-normal">${message}</div>
<button type="button" <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" 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> <span class="sr-only">Close</span>
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 14 14"> viewBox="0 0 14 14">
@@ -190,26 +190,20 @@
} }
const createAndRemoveElement = (html, parentElement, delay) => { const createAndRemoveElement = (html, parentElement, delay) => {
// Generate a random id
var id = 'id' + Math.random().toString(16).slice(2);
// Create new element // Create new element
var newElement = document.createElement('div'); var newElement = document.createElement('div');
newElement.innerHTML = html; 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 // Add the new element to the DOM
if (parentElement) { parentElement.appendChild(newElement);
parentElement.appendChild(newElement);
}
// Remove the new element after 'delay' seconds // Remove the new element after 'delay' seconds
setTimeout(function () { setTimeout(() => newElement?.parentNode?.removeChild(newElement), delay * 1000); // Convert delay from seconds to milliseconds
var elementToRemove = document.getElementById(id);
if (elementToRemove) {
elementToRemove.parentNode.removeChild(elementToRemove);
}
}, delay * 1000); // Convert delay from seconds to milliseconds
} }
</script> </script>