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

Clear form and display temporary notification when adding users/exercises on settings page

Browse Source
This commit is contained in:
Peter Stockings
2023-07-24 09:45:33 +10:00
parent ea1877a2ab
commit 650a3879a2
3 changed files with 81 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
templates/base.html
View File

@@ -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>