update

Took 15 hours 7 minutes

src/web/Modal.ts

@@ -5,21 +5,25 @@ export class Modal {
     private static currentModalId: string | undefined = "";
 
     private _title: string = "iTender";
-    private _content: string | undefined = "";
     private _id: string = "";
     private _loader: boolean = false;
     private _buttons: { type: string, content: string, onclick: Function }[] = [];
     private _leftCentered: boolean = false;
+    private _elements: HTMLElement[] = [];
+
     set leftCentered(value: boolean) {
         this._leftCentered = value;
     }
 
     private static modalInClose = false;
 
-    constructor(id, title: string, content?: string) {
+    constructor(id, title: string) {
         this._id = id;
         this._title = title;
-        this._content = content;
+
+        let t = document.createElement("h1");
+        t.innerText = title;
+        this._elements.push(t);
     }
 
     public static isModalOpen(): boolean {
@@ -27,13 +31,10 @@ export class Modal {
     }
 
 
-    set title(value: string) {
-        this._title = value;
+    public addContent(element: HTMLElement) {
+        this._elements.push(element);
     }
 
-    set content(value: string | undefined) {
-        this._content = value;
-    }
 
     set id(value: string) {
         this._id = value;
@@ -43,74 +44,79 @@ export class Modal {
         this._loader = value;
     }
 
-    public addButton(type: ButtonType, content: string, onclick: Function) {
-        this._buttons.push({type: type, content: content, onclick: onclick});
+    public addButton(type: ButtonType, content: string, onclick: Function): HTMLButtonElement {
+        let btn = document.createElement("button");
+        btn.classList.add("btn", "btn-" + type);
+        btn.onclick = () => onclick(btn);
+        btn.innerText = content;
+        btn.value = content;
+
+        this._elements.push(btn);
+        return btn;
     }
 
-    public open() {
-        if (!this._content)
-            this._content = "";
+    public open(): Promise<void> {
+        return new Promise(async (resolve) => {
+            /* if (this._leftCentered) {
+                 this._content = "<div style='text-align: left; padding-left: 2%;'>" + this._content;
+             }*/ //todo
 
-        if( this._leftCentered )
-        {
-            this._content = "<div style='text-align: left; padding-left: 2%;'>" + this._content;
-        }
+            /* if (this._loader)
+                 this._content += "<br><div class=\"lds-ellipsis\">\n" +
+                     "  <div></div><div></div><div></div><div></div>\n" +
+                     "</div>";*/ // todo
 
-        if (this._loader)
-            this._content += "<br><div class=\"lds-ellipsis\">\n" +
-                "  <div></div><div></div><div></div><div></div>\n" +
-                "</div>";
+            /*if (this._leftCentered) {
+                this._content += "</div>";
+            }*/
 
-        for (let btn of this._buttons) {
-            this._content += `<button class="btn btn-${btn.type}" onclick="(${btn.onclick})();">${btn.content}</button>`;
-        }
+            let elements = this._elements;
+            let id = this._id;
 
-        if( this._leftCentered )
-        {
-            this._content+= "</div>";
-        }
-
-        let title = this._title;
-        let content = this._content;
-        let id = this._id;
-        function tryOpen()
-        {
-            if( Modal.modalInClose )
-            {
-                setTimeout( tryOpen, 50 );
-                return;
+            function tryOpen() {
+                if (Modal.modalInClose) {
+                    setTimeout(tryOpen, 50);
+                    return;
+                }
+                resolve();
+                Modal.open(elements, id);
             }
-            Modal.open(title, content, id );
-        }
 
-        tryOpen();
+            tryOpen();
+        });
     }
 
     /**
-     * @param title
-     * @param content
+     * @param elements
      * @param id
      */
-    public static open(title: string, content: string, id?: string): void {
+    private static open(elements: HTMLElement[], id?: string): Promise<void> {
+        return new Promise((resolve, reject) => {
+            const modal = document.getElementById("modal");
+            const modalContent = document.getElementById("modalInnerContent");
 
-        const modal = document.getElementById("modal");
-        const modalContent = document.getElementById("modalInnerContent");
+            if (!modal || !modalContent) {
+                reject();
+                return;
+            }
 
-        if (!modal || !modalContent)
-            return;
+            modalContent.classList.add("modalBlendIn");
+            modal.classList.add("modalBlendIn");
 
-        modalContent.classList.add("modalBlendIn");
-        modal.classList.add("modalBlendIn");
+            setTimeout(() => {
+                modalContent.classList.remove("modalBlendIn");
+                modal.classList.remove("modalBlendIn");
+                resolve();
+            }, 800);
 
-        setTimeout(() => {
-            modalContent.classList.remove("modalBlendIn");
-            modal.classList.remove("modalBlendIn");
-        }, 800);
+            modalContent.innerHTML = "";
+            elements.forEach((val) => modalContent.append(val));
+            //modalContent.innerHTML = `<h1 id="modalTitle">${title}</h1>${content}`;
+            modal.style.display = "block";
 
-        modalContent.innerHTML = `<h1 id="modalTitle">${title}</h1>${content}`;
-        modal.style.display = "block";
+            this.currentModalId = id ? id : "null";
+        });
 
-        this.currentModalId = id ? id : "null";
     }
 
     public static close(id?: string): void {