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 {

src/web/Pane.ts

@@ -0,0 +1,6 @@
+export enum Pane {
+    MAIN= "Main",
+    MENU = "Menü",
+    SETTINGS = "Einstellungen",
+    SETUP = "Setup"
+}

src/web/Settings.ts

@@ -0,0 +1,3 @@
+export class Settings {
+
+}

src/web/Setup.ts

@@ -0,0 +1,7 @@
+export class Setup {
+    public static onSetupUpdate()
+    {
+        // Setup containers updated
+        
+    }
+}

src/web/WebHandler.ts

@@ -1,11 +1,15 @@
 import {WebSocketPayload} from "../WebSocketPayload";
 import {IDrink} from "../database/IDrink";
 import {Modal} from "./Modal";
+import {ButtonType} from "./ButtonType";
+import {Pane} from "./Pane";
+import {setup} from "rpi-gpio";
 
 export class WebHandler {
+    private static containers = [];
+
     public static onDrinkUpdate(payload: WebSocketPayload) {
         if (!payload.data) return;
-
         let drinks: IDrink[] = payload.data;
 
         const main = document.getElementById("main");
@@ -13,6 +17,8 @@ export class WebHandler {
 
         main.style.gridTemplateRows = `repeat(${Math.round(drinks.length / 3)}, calc(90%/2))`;
 
+        main.innerHTML = "";
+
         for (let drink of drinks) {
             let drinkEle = document.createElement("div");
             drinkEle.classList.add("drink");
@@ -30,25 +36,560 @@ export class WebHandler {
             drinkImg.src = "/images/" + drink.name + ".png";
             drinkName.innerText = drink.name;
 
+            /*
             let ingredients = "<ul style='list-style-type: disc;'>";
-            for( let i of drink.ingredients )
-            {
+            for (let i of drink.ingredients) {
                 ingredients += "<li>" + i.amount + "ml " + i.type.name + "</li>";
             }
-            ingredients+="</ul>"
+            ingredients += "</ul>"
 
             drinkEle.onclick = () => {
-                let modal = new Modal("drink", drink.name );
-                modal.content = `<strong>Zutaten</strong><br>
-${ingredients}`
-                modal.leftCentered = true;
-                modal.open();
-            };
+                let modal = new Modal("drink", drink.name);
 
-            main.append(drinkEle);
+                modal.content = `<strong>Zutaten</strong><br>
+${ingredients}`*/ //todo
+            //modal.leftCentered = true;
+            // modal.open();
+            //};
+
+            //main.append(drinkEle);
         }
 
     }
 
 
+    public static onContainerUpdate(payload: WebSocketPayload) {
+
+    }
+
+    static async openSetup() {
+        // new
+        this.openPane(Pane.SETUP);
+        let menuBtn = document.getElementById("menuBtn") as HTMLButtonElement;
+        let setupContainers = document.getElementById("setupContainers") as HTMLDivElement;
+        menuBtn.disabled = true;
+
+        const containerAddBtn = document.getElementById("containerAddBtn") as HTMLButtonElement;
+        containerAddBtn.onclick = () => {
+
+
+            let con = document.createElement("div");
+
+            let containerName = document.createElement("p");
+            containerName.innerText = "Behälter " + (setupContainers.getElementsByTagName("div").length + 1);
+            con.classList.add("setupContainer");
+            con.append(containerName);
+
+            let sensorTypeLabel = document.createElement("label");
+            sensorTypeLabel.innerText = "Art des Sensors ";
+            con.append(sensorTypeLabel);
+
+            let sensorType = document.createElement("select");
+            sensorType.classList.add("input");
+            let sensorTypeNone = document.createElement("option") as HTMLOptionElement;
+            sensorTypeNone.innerText = "Keiner";
+            sensorTypeNone.value = "0";
+            sensorType.append(sensorTypeNone);
+            let sensorTypeUltrasound = document.createElement("option") as HTMLOptionElement;
+            sensorTypeUltrasound.innerText = "Ultraschall";
+            sensorTypeUltrasound.value = "1";
+            sensorType.append(sensorTypeUltrasound);
+            let sensorTypeScale = document.createElement("option") as HTMLOptionElement;
+            sensorTypeScale.innerText = "Wägezelle";
+            sensorTypeScale.value = "2";
+            sensorType.append(sensorTypeScale);
+            con.append(sensorType);
+
+            con.append(document.createElement("br"));
+
+
+            let selectPin = document.createElement("select");
+            selectPin.style.display = "none";
+            selectPin.classList.add("input");
+            selectPin.style.display = "inline";
+
+            let noSel = document.createElement("option") as HTMLOptionElement;
+            noSel.innerText = "Bitte wählen";
+            noSel.value = "-1";
+            noSel.disabled = true;
+
+            selectPin.append(noSel.cloneNode(true));
+            selectPin.selectedIndex = 0;
+
+            const pins = [3, 5, 7, 8, 10, 11, 12, 13, 14, 15, 16, 18, 19, 21, 22, 23, 24, 26, 29, 31, 32, 33, 34, 35, 36, 37, 38, 40];
+            for (let pin of pins) {
+                let pinEle = document.createElement("option") as HTMLOptionElement;
+                pinEle.innerText = "" + pin;
+                pinEle.value = "" + pin;
+                selectPin.append(pinEle);
+            }
+
+            let pumpLabel = document.createElement("label");
+            pumpLabel.innerText = "Pumpen Pin";
+            con.append(pumpLabel);
+            con.append(selectPin.cloneNode(true));
+
+            con.append(document.createElement("br"));
+
+            let sensor1Label = document.createElement("label");
+            sensor1Label.innerText = "Sensor 1 Pin";
+            con.append(sensor1Label);
+            con.append(selectPin.cloneNode(true));
+
+            con.append(document.createElement("br"));
+
+            let sensor2Label = document.createElement("label");
+            sensor2Label.innerText = "Sensor 2 Pin";
+            con.append(sensor2Label);
+            con.append(selectPin.cloneNode(true));
+
+            con.append(document.createElement("br"));
+
+            let removeBtn = document.createElement("button");
+            removeBtn.classList.add("btn", "btn-danger");
+            removeBtn.onclick = () => {
+                con.classList.add("removeSlowly");
+                setTimeout(() => {
+                    con.remove();
+                    let i = 1;
+                    for (let elementsByTagNameElement of setupContainers.getElementsByTagName("div")) {
+                        let e = elementsByTagNameElement.getElementsByTagName("p")[0] as HTMLParagraphElement;
+                        e.innerText = "Behälter " + i;
+                        i++;
+                    }
+                }, 750);
+
+            }
+            removeBtn.style.float = "right";
+            removeBtn.innerText = "Entfernen";
+            con.append(removeBtn);
+
+            setupContainers.append(con);
+
+        };
+        return;
+
+        // old
+        Modal.close();
+        let modal = new Modal("setup", "Setup 1/2");
+
+        let containers: { container: HTMLDivElement, slot: number, pumpPin: HTMLSelectElement, sensorType: HTMLSelectElement, sensorPin1: HTMLSelectElement, sensorPin2: HTMLSelectElement, volume: HTMLSelectElement }[] = [];
+
+        let onchange = () => {
+            let containerEle = document.getElementById("setup_containers") as HTMLDivElement;
+            let containerNumber = document.getElementById("setup_slots") as HTMLInputElement;
+            if (!containerEle || !containerNumber) return;
+
+            let i = 1;
+            let oldElements = containerEle.getElementsByTagName("div");
+            for (let e of oldElements) {
+                if (i > containerNumber.valueAsNumber) {
+                    e.remove();
+                    containers.pop();
+                }
+                i++;
+            }
+
+            for (let i = containerEle.getElementsByTagName("div").length; i < containerNumber.valueAsNumber; i++) {
+                let con = document.createElement("div");
+                let thisContainer = {};
+                thisContainer["container"] = con;
+                con.classList.add("setupContainer");
+
+                let containerName = document.createElement("p");
+                containerName.innerText = "Container " + (i + 1);
+                thisContainer["slot"] = i + 1;
+
+                con.append(containerName);
+
+                let sensorTypeLabel = document.createElement("label");
+                sensorTypeLabel.innerText = "Art des Sensors ";
+                con.append(sensorTypeLabel);
+
+                let sensorType = document.createElement("select");
+                sensorType.classList.add("input");
+                let sensorTypeNone = document.createElement("option") as HTMLOptionElement;
+                sensorTypeNone.innerText = "Keiner";
+                sensorTypeNone.value = "0";
+                sensorType.append(sensorTypeNone);
+                let sensorTypeUltrasound = document.createElement("option") as HTMLOptionElement;
+                sensorTypeUltrasound.innerText = "Ultraschall";
+                sensorTypeUltrasound.value = "1";
+                sensorType.append(sensorTypeUltrasound);
+                let sensorTypeScale = document.createElement("option") as HTMLOptionElement;
+                sensorTypeScale.innerText = "Wägezelle";
+                sensorTypeScale.value = "2";
+                sensorType.append(sensorTypeScale);
+
+
+                con.append(sensorType);
+                thisContainer["sensorType"] = sensorType;
+
+                con.append(document.createElement("br"));
+
+
+                let changeWhenTypeOfSensor: HTMLElement[] = [];
+                let list = ["Pumpen Port ", "Sensor 1 ", "Sensor 2 "];
+                for (let t of list) {
+                    let labelElement = document.createElement("label");
+                    labelElement.innerText = t;
+                    changeWhenTypeOfSensor.push(labelElement);
+                    con.append(labelElement);
+
+                    let selectElement = document.createElement("select");
+                    labelElement.style.display = "none";
+                    selectElement.style.display = "none";
+                    selectElement.classList.add("input");
+                    if (t == "Sensor 1 ") {
+                        thisContainer["sensorPin1"] = selectElement;
+                    } else if (t == "Sensor 2 ") {
+                        thisContainer["sensorPin2"] = selectElement;
+                    } else {
+                        thisContainer["pumpPin"] = selectElement;
+                        labelElement.style.display = "inline";
+                        selectElement.style.display = "inline";
+                    }
+
+                    let noSel = document.createElement("option") as HTMLOptionElement;
+                    noSel.innerText = "Bitte wählen";
+                    noSel.value = "-1";
+                    noSel.disabled = true;
+
+                    selectElement.append(noSel); //loveyou
+                    selectElement.selectedIndex = 0;
+
+                    const pins = [3, 5, 7, 8, 10, 11, 12, 13, 14, 15, 16, 18, 19, 21, 22, 23, 24, 26, 29, 31, 32, 33, 34, 35, 36, 37, 38, 40];
+                    for (let pin of pins) {
+                        let pinEle = document.createElement("option") as HTMLOptionElement;
+                        pinEle.innerText = "" + pin;
+                        pinEle.value = "" + pin;
+                        selectElement.append(pinEle);
+                    }
+                    con.append(selectElement);
+
+                    let br = document.createElement("br");
+                    con.append(br);
+                }
+
+                sensorType.onchange = () => {
+                    // 0 => ultrasound; 1 => scale
+                    if (sensorType.value == "1") {
+                        thisContainer["sensorPin1"].style.display = "inline";
+                        thisContainer["sensorPin2"].style.display = "inline";
+                        changeWhenTypeOfSensor[1].style.display = "inline";
+                        changeWhenTypeOfSensor[2].style.display = "inline";
+                        changeWhenTypeOfSensor[1].innerText = "Trigger Pin ";
+                        changeWhenTypeOfSensor[2].innerText = "Echo Pin ";
+                    } else if (sensorType.value == "2") {
+                        thisContainer["sensorPin1"].style.display = "inline";
+                        thisContainer["sensorPin2"].style.display = "inline";
+                        changeWhenTypeOfSensor[1].style.display = "inline";
+                        changeWhenTypeOfSensor[2].style.display = "inline";
+                        changeWhenTypeOfSensor[1].innerText = "Clock Pin ";
+                        changeWhenTypeOfSensor[2].innerText = "Data Pin ";
+                    } else {
+                        thisContainer["sensorPin1"].style.display = "none";
+                        thisContainer["sensorPin2"].style.display = "none";
+                        changeWhenTypeOfSensor[1].style.display = "none";
+                        changeWhenTypeOfSensor[2].style.display = "none";
+                        changeWhenTypeOfSensor[1].innerText = "Sensor 1 ";
+                        changeWhenTypeOfSensor[2].innerText = "Sensor 2 ";
+                    }
+                };
+
+                let labelElement = document.createElement("label");
+                labelElement.innerText = "Gesamtvolumen (ml) ";
+                con.append(labelElement);
+
+                let selectElement = document.createElement("select");
+                selectElement.classList.add("input");
+                const mls = [50, 100, 200, 250, 300, 330, 500, 750, 1000, 1250, 1500, 2000, 2500, 5000, 10000];
+                for (let ml of mls) {
+                    let pinEle = document.createElement("option") as HTMLOptionElement;
+                    pinEle.innerText = "" + ml;
+                    pinEle.value = "" + ml;
+                    selectElement.append(pinEle);
+                    thisContainer["volume"] = selectElement;
+                }
+                selectElement.selectedIndex = 7;
+
+                con.append(selectElement);
+
+                let br = document.createElement("br");
+                con.append(br);
+
+                containerEle.append(con);
+                let cast = thisContainer as { container: HTMLDivElement, slot: number, pumpPin: HTMLSelectElement, sensorType: HTMLSelectElement, sensorPin1: HTMLSelectElement, sensorPin2: HTMLSelectElement, volume: HTMLSelectElement };
+                containers.push(cast);
+                console.log(cast);
+            }
+        };
+
+        let div1 = document.createElement("div");
+        div1.style.marginBottom = "2%";
+        modal.addContent(div1);
+        let labelElement = document.createElement("label");
+        labelElement.innerText = "Anzahl Slots";
+        div1.append(labelElement);
+
+        let numberInputElement = document.createElement("input") as HTMLInputElement;
+        numberInputElement.type = "number";
+        numberInputElement.id = "setup_slots";
+        numberInputElement.classList.add("input");
+        numberInputElement.style.width = "20%;"
+        numberInputElement.value = "0";
+        numberInputElement.min = "0";
+        numberInputElement.max = "30";
+        numberInputElement.onchange = () => {
+            onchange();
+        };
+        div1.append(numberInputElement);
+
+        let divContainers = document.createElement("div");
+        divContainers.id = "setup_containers";
+        modal.addContent(divContainers);
+
+        let status = document.createElement("p");
+        status.style.color = "black";
+        status.innerHTML = "Drücke 'Weiter' zum Speichern";
+        modal.addContent(status);
+
+        modal.addButton(ButtonType.SUCCESS, "Weiter", () => {
+            status.innerHTML = "...";
+            status.style.color = "gray";
+            if (numberInputElement.valueAsNumber < 0 || numberInputElement.valueAsNumber > 30) {
+                numberInputElement.value = "0";
+                status.style.color = "black";
+                status.innerHTML = "Automatische Änderungen überprüfen!";
+                return;
+            }
+
+            // Check
+            if (numberInputElement.valueAsNumber != containers.length) {
+                onchange();
+                status.style.color = "black";
+                status.innerHTML = "Automatische Änderungen überprüfen!";
+                return;
+            }
+
+            if (containers.length == 0) {
+                status.style.color = "red";
+                status.innerHTML = "Es muss mindestens ein Container hinzugefügt werden!";
+                return;
+            }
+
+            let newContainers: { slot: number, pumpPin: number, sensorPin1: number, sensorPin2: number, volume: number }[] = [];
+            let ok = true;
+            for (let c of containers) {
+                for (let c2 of containers) {
+                    if (c.slot == c.slot) continue;
+
+                    let pins = [c.sensorPin1.value, c.sensorPin2.value, c.pumpPin.value, c2.sensorPin1.value, c2.sensorPin2.value, c2.pumpPin.value];
+
+                    let i = 0;
+                    for (let pin of pins) {
+                        let j = 0;
+                        if (pin == "-1") {
+                            console.log("Skip ", pin);
+                            continue;
+                        }
+
+                        for (let pin2 of pins) {
+                            // Wenn index derselbe ist, ignorieren
+                            if (j == i) {
+                                console.log("Index skip ", pin);
+                                continue;
+                            }
+
+                            if (pin2 == "-1") {
+                                console.log("Skip ", pin);
+                                continue;
+                            }
+
+                            if (pin == pin2) {
+                                console.log("Pin same error", pin, pin2, c, c2)
+                                ok = false;
+                                c.container.classList.add("error");
+                                c2.container.classList.add("error");
+                                setTimeout(() => {
+                                    c.container.classList.remove("error");
+                                    c2.container.classList.remove("error");
+                                }, 2000);
+                                break;
+                            }
+
+                            j++;
+                        }
+                        i++;
+                        if (!ok) break;
+                    }
+                    if (!ok) break;
+
+                    /*console.log(c, c2);
+                    console.log(c.sensorPin2.value == c2.sensorPin2.value);
+                    if (
+                        c.pumpPin.value == c2.pumpPin.value ||
+                        (c.sensorType.value != "0" && (
+                            (c.sensorPin1.value == c2.sensorPin1.value)
+                            || (c.sensorPin2.value == c2.sensorPin2.value)
+                            || (c.sensorPin1.value == c2.sensorPin2.value)
+                            || (c.sensorPin2.value == c2.sensorPin1.value)))
+                    ) {
+                        console.log("Check not ok")
+                        ok = false;
+                        c.container.classList.add("error");
+                        c2.container.classList.add("error");
+                        setTimeout(() => {
+                            c.container.classList.remove("error");
+                            c2.container.classList.remove("error");
+                        }, 2000);
+                        break;
+                    }*/
+                }
+                if (!ok) break;
+
+                if (c.pumpPin.value == "-1" || (c.sensorType.value != "0" && (c.sensorPin1.value == "-1" || c.sensorPin2.value == "-1"))) {
+                    console.log("Local check invalid", c);
+                    ok = false;
+                    c.container.classList.add("error");
+
+                    setTimeout(() => {
+                        c.container.classList.remove("error");
+
+                    }, 1000);
+                }
+
+
+                let pins = [c.sensorPin1.value, c.sensorPin2.value, c.pumpPin.value];
+
+                let i = 0;
+                for (let pin of pins) {
+                    let j = 0;
+                    if (pin == "-1") {
+                        console.log("Skip ", pin);
+                        continue;
+                    }
+                    for (let pin2 of pins) {
+                        // Wenn index derselbe ist, ignorieren
+                        if (j == i) {
+                            console.log("Index skip ", pin);
+                            continue;
+                        }
+
+                        if (pin2 == "-1") {
+                            console.log("Skip ", pin);
+                            continue;
+                        }
+
+                        if (pin == pin2) {
+                            console.log("Pin same error", pin, pin2, c)
+                            ok = false;
+                            c.container.classList.add("error");
+                            setTimeout(() => {
+                                c.container.classList.remove("error");
+                            }, 2000);
+                            break;
+                        }
+
+                        j++;
+                    }
+                    i++;
+                }
+
+                /*if (c.pumpPin.value == c.sensorPin1.value || c.pumpPin.value == c.sensorPin2.value || c.sensorPin1.value == c.sensorPin2.value) {
+                    ok = false;
+                    c.container.classList.add("error");
+
+                    setTimeout(() => {
+                        c.container.classList.remove("error");
+
+                    }, 1000);
+                    break;
+                }*/
+
+                newContainers.push({
+                    slot: c.slot,
+                    sensorPin1: parseInt(c.sensorPin1.value),
+                    sensorPin2: parseInt(c.sensorPin2.value),
+                    pumpPin: parseInt(c.pumpPin.value),
+                    volume: parseInt(c.volume.value)
+                });
+            }
+            if (!ok) {
+                status.style.color = "red";
+                status.innerHTML = "Problem erkannt<br>Bitte überprüfen, ob alle benötigten Felder gesetzt sind<br>und ob Pins nicht mehrfach belegt sind!"
+                return;
+            }
+
+            // todo Hier konfiguration an Server senden und speichern
+
+            // zurück und hinsenden mittels function die hier in der WebHandler.ts gespeichert wird maybe?
+
+            status.style.color = "green";
+            status.innerHTML = "Konfiguration gespeichert!";
+
+            let tareModal = new Modal("setup", "Setup 2/2");
+
+            let container = document.createElement("div");
+            tareModal.addContent(container);
+
+            let txt = document.createElement("p");
+            txt.innerHTML = `Um das Setup abzuschließen, müssen die Sensoren eingestellt werden.<br>
+Bitte zunächst jegliche Behälter von/unter den Sensoren entfernen.<br>Zum fortfahren "Messen"-Schaltfläche berühren.<br>`;
+            tareModal.addContent(txt);
+
+
+            let btn = tareModal.addButton(ButtonType.SUCCESS, "Messen", () => {
+                txt.innerHTML = "<strong>Messung läuft...</strong><br><span style='text-decoration: underline'>Gerät nicht berühren!</span><br><div class=\"lds-ellipsis\">\n" +
+                    "  <div></div><div></div><div></div><div></div>\n" +
+                    "</div>";
+                btn.disabled = true;
+                btn.innerText = "Bitte warten";
+            });
+            // todo send messung to server to start
+
+            tareModal.open();
+        });
+
+        //await modal.open();
+
+        let setupNumber = document.getElementById("setup_slots") as HTMLInputElement;
+        setupNumber.focus();
+    }
+
+    public static openPane(pane: Pane): void {
+        let mainPanel = document.getElementById("main") as HTMLDivElement;
+        let setupPanel = document.getElementById("setup") as HTMLDivElement;
+        let menuPanel = document.getElementById("menu") as HTMLDivElement;
+        let settingsPanel = document.getElementById("settings") as HTMLDivElement;
+
+
+        mainPanel.classList.add("hiddenPane");
+        setupPanel.classList.add("hiddenPane");
+        menuPanel.classList.add("hiddenPane");
+        settingsPanel.classList.add("hiddenPane");
+
+
+        switch (pane) {
+            case Pane.MAIN: {
+                mainPanel.classList.remove("hiddenPane");
+                break;
+            }
+            case Pane.MENU: {
+                menuPanel.classList.remove("hiddenPane");
+                break;
+            }
+            case Pane.SETUP: {
+                setupPanel.classList.remove("hiddenPane");
+                break;
+            }
+            case Pane.SETTINGS: {
+                settingsPanel.classList.remove("hiddenPane");
+                break;
+            }
+        }
+
+        let title = document.getElementById("title") as HTMLTitleElement;
+        title.innerText = pane.toString();
+    }
 }

src/web/WebWebSocketHandler.ts

@@ -42,20 +42,29 @@ export class WebWebSocketHandler {
                     case iTenderStatus.READY: {
                         Modal.close("start");
                         Modal.close("refreshing");
+                        Modal.close("setup");
                         break;
                     }
                     case iTenderStatus.STARTING: {
-                        let modal = new Modal("start", "Willkommen!", `Einen Augenblick bitte<br>iTender startet...`);
+                        let modal = new Modal("start", "Willkommen!");
+                        let txt = document.createElement("p");
+                        txt.innerHTML = `Einen Augenblick bitte<br>iTender startet...`;
+                        modal.addContent(txt);
                         modal.loader = true;
                         modal.open();
                         break;
                     }
                     case iTenderStatus.REFRESHING: {
-                        let modal = new Modal("refreshing", "Aktualisieren...", `Einen Augenblick bitte<br>iTender aktualisiert die Getränke...`);
+                        let modal = new Modal("refreshing", "Aktualisieren...");
+                        let txt = document.createElement("p");
+                        txt.innerHTML = `Einen Augenblick bitte<br>iTender aktualisiert die Getränke...`;
+                        modal.addContent(txt);
                         modal.loader = true;
                         modal.open();
                         break;
-
+                    }
+                    case iTenderStatus.SETUP: {
+                        WebHandler.openSetup();
                     }
                 }
                 break;
@@ -65,18 +74,22 @@ export class WebWebSocketHandler {
                 WebHandler.onDrinkUpdate(payload);
                 break;
             }
+
+            case WebSocketEvent.CONTAINERS: {
+                WebHandler.onContainerUpdate(payload);
+                break;
+            }
         }
     }
 
     private onOpen(event) {
         console.log("[WS] Connected", event);
 
-        let connectionElement = document.getElementById("right");
-        if (connectionElement)
-        {
+        /*let connectionElement = document.getElementById("right");
+        if (connectionElement) {
             connectionElement.innerText = "Verbunden";
             connectionElement.style.color = "green";
-        }
+        }*/
 
     }
 
@@ -84,14 +97,18 @@ export class WebWebSocketHandler {
         console.error("[WS] Closed!", event);
         if (event.wasClean) {
             let modal = new Modal("socketClosed", "Sitzung beendet!");
-            modal.content = `Diese Sitzung wurde beendet, da der iTender nun an einem anderen Gerät bzw. an dem Hauptgerät gesteuert wird.<br><br>`;
+            let txt = document.createElement("p");
+            txt.innerHTML = `Diese Sitzung wurde beendet, da der iTender nun an einem anderen Gerät bzw. an dem Hauptgerät gesteuert wird.<br><br>`;
+            modal.addContent(txt);
             modal.addButton(ButtonType.SUCCESS, "Sitzung wiederherstellen", () => {
                 window.location.reload();
             });
             modal.open();
         } else {
             let modal = new Modal("socketClosed", "Verbindungsproblem!");
-            modal.content = `Die Benutzeroberfläche hat die Verbindung mit dem Gerät verloren.<br>Die Verbindung wird wiederhergestellt...<br>`;
+            let txt = document.createElement("p");
+            txt.innerHTML = `Die Benutzeroberfläche hat die Verbindung mit dem Gerät verloren.<br>Die Verbindung wird wiederhergestellt...<br>`;
+            modal.addContent(txt);
             modal.loader = true;
             modal.open();
             setInterval(() => {
@@ -99,19 +116,18 @@ export class WebWebSocketHandler {
             }, 5000);
         }
 
-        let connectionElement = document.getElementById("right");
-        if (connectionElement)
-        {
+       /* let connectionElement = document.getElementById("right");
+        if (connectionElement) {
             connectionElement.innerText = "Getrennt";
             connectionElement.style.color = "red";
-        }
+        }*/
     }
 
     private onError(event) {
         console.error("[WS] Error", event);
-        let connectionElement = document.getElementById("right");
+        /*let connectionElement = document.getElementById("right");
         if (connectionElement)
-            connectionElement.innerText = "Fehler";
+            connectionElement.innerText = "Fehler";*/
         //openModal("Einen Augenblick...", `Es wurde ein kritischer Fehler festgestellt.\nBitte warten Sie, während der Prozess neu gestartet wird...` );
         //window.location.reload();
     }

src/web/main.ts

@@ -1,14 +1,19 @@
 import {WebWebSocketHandler} from "./WebWebSocketHandler";
 import {Modal} from "./Modal";
+import {WebHandler} from "./WebHandler";
+import {Pane} from "./Pane";
 
 const main = document.getElementById("main");
-const time = document.getElementById("title");
+const time = document.getElementById("right");
 
 document.addEventListener("DOMContentLoaded", () => {
    console.log("DOM Loaded");
+   WebHandler.openPane(Pane.MAIN);
 
    let modal = new Modal("start", "iTender");
-   modal.content = "Willkommen";
+   let txt = document.createElement("p");
+   txt.innerText = "Willkommen"
+   modal.addContent(txt);
    modal.loader = true;
    //modal.open();
    connect();