update

Took 15 hours 7 minutes

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();
+    }
 }