diff --git a/service/static_ui.go b/service/index_and_404.go
similarity index 100%
rename from service/static_ui.go
rename to service/index_and_404.go
diff --git a/service/workout.go b/service/workout.go
index 479da55..3c67e09 100644
--- a/service/workout.go
+++ b/service/workout.go
@@ -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)
}
}
diff --git a/static/js/toast.js b/static/js/toast.js
new file mode 100644
index 0000000..582976a
--- /dev/null
+++ b/static/js/toast.js
@@ -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);
+});
diff --git a/tailwind.config.js b/tailwind.config.js
index 5ae080b..dc3ead1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -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'),
diff --git a/template/layout.templ b/template/layout.templ
index b81cf36..e5b6d36 100644
--- a/template/layout.templ
+++ b/template/layout.templ
@@ -10,7 +10,8 @@ templ Layout(slot templ.Component, user templ.Component) {
-
+
+
@@ -27,6 +28,11 @@ templ Layout(slot templ.Component, user templ.Component) {
}
+
+
+ New message arrived.
+
+