add huuuge stuff

src/web/Modal.ts

@@ -0,0 +1,105 @@
+import {ButtonType} from "./ButtonType";
+
+export class Modal {
+
+    private static currentModalId = "";
+
+    private _title: string = "iTender";
+    private _content: string | undefined = "";
+    private _id: string = "";
+    private _loader: boolean = false;
+    private _buttons: { type: string, content: string, onclick: Function }[] = [];
+
+
+    constructor(id, title: string, content?: string) {
+        this._id = id;
+        this._title = title;
+        this._content = content;
+    }
+
+
+    set title(value: string) {
+        this._title = value;
+    }
+
+    set content(value: string | undefined) {
+        this._content = value;
+    }
+
+    set id(value: string) {
+        this._id = value;
+    }
+
+    set loader(value: boolean) {
+        this._loader = value;
+    }
+
+    public addButton( type: ButtonType, content: string, onclick: Function )
+    {
+        this._buttons.push({type: type, content: content, onclick: onclick});
+    }
+
+    public open() {
+        if (!this._content)
+            this._content = "";
+
+        if (this._loader)
+            this._content += "<br><div class=\"lds-ellipsis\">\n" +
+                "  <div></div><div></div><div></div><div></div>\n" +
+                "</div>";
+
+        for (let btn of this._buttons) {
+            this._content += `<button class="btn btn-${btn.type}" onclick="${btn.onclick}">${btn.content}</button>`;
+        }
+
+        Modal.open(this._title, this._content, this._id);
+    }
+
+    /**
+     * @param title
+     * @param content
+     * @param id
+     */
+    public static open(title: string, content: string, id?: string): void {
+        const modal = document.getElementById("modal");
+        const modalContent = document.getElementById("modalInnerContent");
+
+        if (!modal || !modalContent)
+            return;
+
+        modalContent.classList.add("modalBlendIn");
+        modal.classList.add("modalBlendIn");
+
+        setTimeout(() => {
+            modalContent.classList.remove("modalBlendIn");
+            modal.classList.remove("modalBlendIn");
+        }, 800);
+
+        modalContent.innerHTML = `<h1 id="modalTitle">${title}</h1>${content}`;
+        modal.style.display = "block";
+
+        this.currentModalId = id ? id : "null";
+    }
+
+    public static close(id?: string): void {
+        if (this.currentModalId != id)
+            return;
+
+        const modal = document.getElementById("modal");
+        const modalContent = document.getElementById("modal-content");
+        const modalInnerContent = document.getElementById("modalInnerContent");
+
+        if (!modal || !modalContent || !modalInnerContent)
+            return;
+
+        modalContent.classList.add("modalBlendOut");
+        modal.classList.add("modalBlendOut");
+
+        setTimeout(() => {
+            modal.style.display = "none";
+            modalInnerContent.innerHTML = "";
+            modalContent.classList.remove("modalBlendOut");
+            modal.classList.remove("modalBlendOut");
+        }, 800);
+    }
+}