jason/cpolis
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases 58 Wiki Activity

Add ability to display notifications other than HTTP errors

Browse Source
This commit is contained in:
Jason Streifling
2025-03-08 10:24:25 +01:00
parent 7da98fb2ab
commit dd689e0dfd
4 changed files with 39 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
web/templates/index.html
View File

@ -29,7 +29,8 @@
<main class="mx-4">
<div class="hidden bg-slate-950 dark:bg-slate-50 fixed font-bold p-4 right-8 rounded-lg shadow-lg text-slate-100 dark:text-slate-900 top-8 z-50"
id="notification">
id="notification" hx-swap="innerHTML">
<span id="notification-content"></span>
</div>
<div id="page-content">
@ -74,12 +75,26 @@
</script>
<script>
htmx.on('htmx:afterSwap', function (event) {
var notificationContent = document.getElementById('notification-content');
if (notificationContent.textContent.trim() !== "") {
var notification = document.getElementById('notification');
notification.classList.remove('hidden');
setTimeout(function () {
notification.classList.add('hidden');
notificationContent.textContent = "";
}, 5000);
}
});
htmx.on('htmx:responseError', function (event) {
var notificationContent = document.getElementById('notification-content');
var notification = document.getElementById('notification');
notification.innerText = event.detail.xhr.responseText;
notificationContent.textContent = event.detail.xhr.responseText;
notification.classList.remove('hidden');
setTimeout(function () {
notification.classList.add('hidden');
notificationContent.textContent = "";
}, 5000);
});
</script>