From cab949f8a6bfff38bc954305c71650f004ab52ba Mon Sep 17 00:00:00 2001 From: jordi fita mas Date: Wed, 26 Jul 2023 18:52:32 +0200 Subject: [PATCH] Show request errors as a toast Or at least they will once we add the required CSS, but there is at least the JavaScript behaviour in place now. --- web/static/camper.js | 68 +++++++++++++++++++++++++++++++++++++ web/templates/layout.gohtml | 1 + 2 files changed, 69 insertions(+) create mode 100644 web/static/camper.js diff --git a/web/static/camper.js b/web/static/camper.js new file mode 100644 index 0000000..c6a8e8b --- /dev/null +++ b/web/static/camper.js @@ -0,0 +1,68 @@ +function ready(fn) { + if (document.readyState !== 'loading') { + fn(); + } else { + document.addEventListener('DOMContentLoaded', fn); + } +} + +ready(function () { + const snackBar = Object.assign( + document.body.appendChild(document.createElement('section')), + { + id: 'snackbar', + } + ); + + const errorMessage = snackBar.appendChild(document.createElement('div')); + errorMessage.setAttribute('role', 'alert'); + + const openClass = 'open'; + const toasts = []; + let timeoutId = null; + + function showError(message) { + toasts.push(message); + popUp(); + } + + function popUp() { + if (toasts.length === 0) { + return; + } + if (errorMessage.classList.contains(openClass)) { + dismiss(); + return; + } + if (errorMessage.innerText !== "") { + // it will show after remove calls popUp again. + return; + } + errorMessage.innerText = toasts[0]; + errorMessage.classList.add(openClass); + timeoutId = setTimeout(dismiss, 4000); + } + + function dismiss() { + if (!errorMessage.classList.contains(openClass)) { + // already dismissed + return; + } + errorMessage.classList.remove(openClass); + clearTimeout(timeoutId); + timeoutId = setTimeout(remove, 350); + } + + function remove() { + clearTimeout(timeoutId); + toasts.splice(0, 1); + errorMessage.innerText = ""; + popUp(); + } + + document.body.addEventListener('htmx:error', function (evt) { + const errorInfo = evt.detail.errorInfo; + const error = errorInfo.xhr && errorInfo.xhr.responseText || errorInfo.error; + showError(error); + }); +}) diff --git a/web/templates/layout.gohtml b/web/templates/layout.gohtml index 3cb8da8..d3dd90c 100644 --- a/web/templates/layout.gohtml +++ b/web/templates/layout.gohtml @@ -9,6 +9,7 @@ {{ template "title" . }} — Camper +