feat: added notification system with toasts #160

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);
+});