x/web-app-template
Archived
Template
2
0
Fork 0
Code Issues 13 Pull Requests 4 Actions Packages 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"), Reps: r.FormValue("reps"),
} }
w.Header().Set("HX-Trigger", `{"toast": "none|Workout added"}`)
workout.WorkoutItemComp(wo, true).Render(r.Context(), w) 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} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: ["./template/**/*.templ"], content: ["./template/**/*.templ", "./static/**/*.js"],
theme: { theme: {
extend: {}, extend: {
animation: {
fade: 'fadeOut 0.25s ease-in',
},
keyframes: _ => ({
fadeOut: {
'0%': { opacity: '1' },
'100%': { opacity: '0' },
},
}),
},
}, },
plugins: [ plugins: [
require('daisyui'), 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"/> <link rel="stylesheet" href="/static/css/tailwind.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/> <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 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> </head>
<body> <body>
<div class="h-screen flex flex-col"> <div class="h-screen flex flex-col">
@@ -27,6 +28,11 @@ templ Layout(slot templ.Component, user templ.Component) {
} }
</div> </div>
</div> </div>
<div class="toast" id="toasts">
<div class="hidden alert" id="toast">
New message arrived.
</div>
</div>
</body> </body>
</html> </html>
} }