Added code to save edited database to disk

client/src/popups/popup.ts

@@ -1,31 +1,58 @@
 import { Panel } from "../panels/panel";
 
-export class Popup extends Panel {
+export class PopupMessage {
+    #element: HTMLDivElement;
+    #fadeTime: number = 2000; // Milliseconds
 
-    constructor( elementId:string ) {
-        super( elementId );
+    constructor(text: string, fateTime: number) {
+        this.#element = document.createElement("div");
+
+        this.#fadeTime = fateTime;
+        this.#element.innerText = text;
+        this.#element.classList.remove("invisible");
+        this.#element.classList.add("visible");
+
+        window.setTimeout(() => {
+            this.#element.classList.remove("visible");
+            this.#element.classList.add("invisible");
+            window.setTimeout(() => {
+                this.#element.dispatchEvent(new Event("removed"));
+                this.#element.remove();
+            }, 2000);
+        }, this.#fadeTime);
+    }
+
+    getElement() {
+        return this.#element;
+    }
+}
+
+export class Popup extends Panel {
+    #messages: PopupMessage[] = [];
+    #stackAfter: number;
+
+    constructor(ID: string, stackAfter: number = 5) {
+        super(ID);
+        this.show();
+        this.#stackAfter = stackAfter;
     }
 
     #fadeTime: number = 2000; // Milliseconds
-    #hideTimer: number | undefined = undefined;
-    #visibilityTimer: number | undefined = undefined;
-
     setFadeTime(fadeTime: number) {
         this.#fadeTime = fadeTime;
     }
-    
-    setText(text: string) {
-        (<HTMLElement> this.getElement().querySelector("div")).innerText = text;
-        this.show();
-        this.getElement().classList.remove("invisible");
-        this.getElement().classList.add("visible");
 
-        clearTimeout(this.#visibilityTimer);
-        clearTimeout(this.#hideTimer);
-        this.#visibilityTimer = window.setTimeout(() => {
-            this.getElement().classList.remove("visible");
-            this.getElement().classList.add("invisible");
-            this.#hideTimer = window.setTimeout(() => this.hide(), 2000);
-        }, this.#fadeTime);
+    setText(text: string) {
+        var message = new PopupMessage(text, this.#fadeTime);
+        message.getElement().addEventListener("removed", () => {
+            var index = this.#messages.indexOf(message);
+            if (index !== -1)
+                this.#messages.splice(index, 1);
+        })
+        this.getElement().appendChild(message.getElement());
+        this.#messages.push(message);
+        if (this.#messages.length > this.#stackAfter) {
+            this.#messages[this.#messages.length - this.#stackAfter].getElement().classList.add("ol-popup-stack");
+        }
     }
 }