First version with CCNA 2 questions and answers

src/modals.ts

@@ -0,0 +1,70 @@
+import { writable } from "svelte/store";
+// import { SvelteComponent } from "svelte/internal";
+
+export const ModalStore = writable<Modal<any> | undefined>(undefined);
+
+
+abstract class Modal<T> {
+    constructor(private title) { }
+
+    private onResult: (result: T | null) => void;
+    private closeOnResult: boolean;
+    private noClose: boolean = false;
+
+    abstract component: any;
+
+    protected result(value: T | null) {
+        if (this.closeOnResult)
+            this.close()
+        if (this.onResult)
+            this.onResult(value);
+    }
+
+    /**
+    * This function shows the modal
+    * Do not call when using getResult()
+    */
+    public show(noClose = true) {
+        this.noClose = noClose;
+        ModalStore.set(this)
+    }
+
+    /**
+     * Shows the modal and waits for result.
+     * 
+     * Call close when successful
+     */
+    public async getResult(close = true) {
+        this.closeOnResult = close;
+        this.show(false);
+        return new Promise<T | null>((yes) => this.onResult = yes);
+    }
+
+    public close() {
+        ModalStore.set(undefined);
+    }
+}
+
+import YesNoComponent from "./components/modals/YesNo.svelte";
+class YesNoModal extends Modal<boolean> {
+    component = YesNoComponent;
+}
+
+import InputComponent from "./components/modals/Input.svelte";
+class InputModal extends Modal<string> {
+    component = InputComponent;
+
+    constructor(title: string, private fieldname: string, private type: "text" | "password") {
+        super(title);
+    }
+}
+
+
+export const Modals = {
+    YesNoModal: (title: string) => {
+        return new YesNoModal(title);
+    },
+    InputModal: (title: string, fieldname: string, type: "text" | "password") => {
+        return new InputModal(title, fieldname, type);
+    }
+}