dev: automated commit - 2025-06-16 09:37:04
This commit is contained in:
parent
682f25edcd
commit
d71a7e37c5
7 changed files with 1513 additions and 430 deletions
|
@ -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>
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue