dev: automated commit - 2025-06-16 09:37:04

This commit is contained in:
Mariano Z. 2025-06-16 09:37:04 -03:00
parent 682f25edcd
commit d71a7e37c5
7 changed files with 1513 additions and 430 deletions

View file

@ -24,6 +24,7 @@ templ Layout(title string) {
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"
/>
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<style>
body {
padding-top: 20px;
@ -46,11 +47,62 @@ templ Layout(title string) {
font-size: 0.8em;
margin-left: 10px;
}
.htmx-indicator {
opacity: 0;
transition: opacity 300ms ease-in;
}
.htmx-request .htmx-indicator {
opacity: 1;
}
.htmx-request.htmx-indicator {
opacity: 1;
}
</style>
</head>
<body>
{ children... }
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Simple toast function for HTMX responses
document.body.addEventListener('htmx:afterRequest', function(evt) {
const xhr = evt.detail.xhr;
if (xhr.status >= 200 && xhr.status < 300) {
const successMessage = xhr.getResponseHeader('HX-Success-Message');
if (successMessage) {
showToast(successMessage, 'success');
}
} else {
const errorMessage = xhr.getResponseHeader('HX-Error-Message') || 'An error occurred';
showToast(errorMessage, 'danger');
}
});
function showToast(message, type = "success") {
const toastContainer = document.querySelector(".toast-container");
const toast = document.createElement("div");
toast.className = `toast align-items-center text-white bg-${type}`;
toast.setAttribute("role", "alert");
toast.setAttribute("aria-live", "assertive");
toast.setAttribute("aria-atomic", "true");
toast.innerHTML = `
<div class="d-flex">
<div class="toast-body">${message}</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
`;
toastContainer.appendChild(toast);
const bsToast = new bootstrap.Toast(toast);
bsToast.show();
toast.addEventListener("hidden.bs.toast", () => {
toast.remove();
});
}
</script>
</body>
</html>
}