slidein notification

show error message to user

src/stores/notification.ts

@@ -0,0 +1,46 @@
+import { defineStore } from "pinia";
+
+export interface Notification {
+  id: number;
+  title: string;
+  text: string;
+  type: NotificationType;
+  indicator: boolean;
+}
+
+export type NotificationType = "info" | "warning" | "error";
+
+export const useNotificationStore = defineStore("notification", {
+  state: () => {
+    return {
+      notifications: [] as Array<Notification>,
+      timeouts: {} as { [key: string]: any },
+    };
+  },
+  actions: {
+    push(title: string, text: string, type: NotificationType, timeout: number = 5000) {
+      let id = Date.now();
+      this.notifications.push({
+        id,
+        title,
+        text,
+        type,
+        indicator: false,
+      });
+      setTimeout(() => {
+        this.notifications[this.notifications.findIndex((n) => n.id === id)].indicator = true;
+      }, 100);
+      this.timeouts[id] = setTimeout(() => {
+        this.revoke(id);
+      }, timeout);
+    },
+    revoke(id: number) {
+      this.notifications.splice(
+        this.notifications.findIndex((n) => n.id === id),
+        1
+      );
+      clearTimeout(this.timeouts[id]);
+      delete this.timeouts[id];
+    },
+  },
+});