x/spend-sparrow
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: added notification system with toasts #160

Browse Source
This commit is contained in:
Tim Wundenberg
2024-09-11 15:04:40 +02:00
parent b7cda2db35
commit 0e186940cc
5 changed files with 62 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
service/static_ui.go → service/index_and_404.go
View File

1
service/workout.go
View File

@@ -78,6 +78,7 @@ func HandleWorkoutNewComp(db *sql.DB) http.HandlerFunc {
Reps: r.FormValue("reps"),
}
w.Header().Set("HX-Trigger", `{"toast": "none|Workout added"}`)
workout.WorkoutItemComp(wo, true).Render(r.Context(), w)
}
}

40
static/js/toast.js Normal file
View File

@@ -0,0 +1,40 @@
function getClass(type) {
switch (type) {
case "error":
return "alert-error";
case "warning":
return "alert-warning";
case "success":
return "alert-success";
// case "info":
default:
return "alert-info";
}
}
htmx.on("toast", (e) => {
const values = e.detail.value.split("|");
const type = values[0];
const message = values[1];
const template = document.getElementById("toast");
const toast = template.cloneNode(true);
const parent = document.getElementById("toasts");
toast.id = ""
toast.classList.remove("hidden");
toast.classList.add(getClass(type));
toast.innerText = message;
parent.appendChild(toast);
setTimeout(() => {
toast.classList.add("animate-fade");
toast.classList.add("opacity-0");
setTimeout(() => {
parent.removeChild(toast);
}, 250);
}, 5000);
});

16
tailwind.config.js
View File

@@ -1,8 +1,20 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./template/**/*.templ"],
content: ["./template/**/*.templ", "./static/**/*.js"],
theme: {
extend: {},
extend: {
animation: {
fade: 'fadeOut 0.25s ease-in',
},
keyframes: _ => ({
fadeOut: {
'0%': { opacity: '1' },
'100%': { opacity: '0' },
},
}),
},
},
plugins: [
require('daisyui'),

8
template/layout.templ
View File

@@ -10,7 +10,8 @@ templ Layout(slot templ.Component, user templ.Component) {
<link rel="stylesheet" href="/static/css/tailwind.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script defer src="https://umami.me-fit.eu/script.js" data-website-id="3c8efb09-44e4-4372-8a1e-c3bc675cd89a"></script>
<script src="/static/js/htmx.min.js" data-website-id="3c8efb09-44e4-4372-8a1e-c3bc675cd89a"></script>
<script src="/static/js/htmx.min.js"></script>
<script src="/static/js/toast.js"></script>
</head>
<body>
<div class="h-screen flex flex-col">
@@ -27,6 +28,11 @@ templ Layout(slot templ.Component, user templ.Component) {
}
</div>
</div>
<div class="toast" id="toasts">
<div class="hidden alert" id="toast">
New message arrived.
</div>
</div>
</body>
</html>
}