update
Took 3 hours 30 minutes
This commit is contained in:
@ -1,14 +1,14 @@
|
||||
import {WebSocketPayload} from "../WebSocketPayload";
|
||||
import {IDrink} from "../database/IDrink";
|
||||
import {Modal} from "./Modal";
|
||||
import {ButtonType} from "./ButtonType";
|
||||
import {Pane} from "./Pane";
|
||||
import {IContainer} from "../database/IContainer";
|
||||
import {Setup} from "./Setup";
|
||||
import * as Events from "events";
|
||||
import {SensorType} from "../SensorType";
|
||||
|
||||
export class WebHandler {
|
||||
static get currentPane(): Pane {
|
||||
return this._currentPane;
|
||||
}
|
||||
private static containers = [];
|
||||
|
||||
public static onDrinkUpdate(payload: WebSocketPayload) {
|
||||
@ -78,9 +78,9 @@ ${ingredients}`*/ //todo
|
||||
|
||||
(selects[0] as HTMLSelectElement).value = c.pumpPin.toString();
|
||||
let type;
|
||||
if( c.sensorType == SensorType.NONE )
|
||||
if (c.sensorType == SensorType.NONE)
|
||||
type = "-1";
|
||||
else if( c.sensorType == SensorType.ULTRASOUND )
|
||||
else if (c.sensorType == SensorType.ULTRASOUND)
|
||||
type = "0";
|
||||
else
|
||||
type = "1";
|
||||
@ -88,440 +88,74 @@ ${ingredients}`*/ //todo
|
||||
(selects[2] as HTMLSelectElement).value = c.sensorPin1.toString();
|
||||
(selects[3] as HTMLSelectElement).value = c.sensorPin2.toString();
|
||||
(selects[4] as HTMLSelectElement).value = c.volume.toString();
|
||||
let event = new Event('change', { bubbles: true });
|
||||
selects[1].dispatchEvent( event );
|
||||
let event = new Event('change', {bubbles: true});
|
||||
selects[1].dispatchEvent(event);
|
||||
|
||||
i++;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
static async openSetup() {
|
||||
|
||||
|
||||
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();
|
||||
}
|
||||
private static _currentPane: Pane;
|
||||
|
||||
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;
|
||||
console.log("Opening pane " + pane);
|
||||
|
||||
if (!this._currentPane) {
|
||||
mainPanel.classList.add("hiddenPane");
|
||||
setupPanel.classList.add("hiddenPane");
|
||||
menuPanel.classList.add("hiddenPane");
|
||||
settingsPanel.classList.add("hiddenPane");
|
||||
}
|
||||
|
||||
mainPanel.classList.add("hiddenPane");
|
||||
setupPanel.classList.add("hiddenPane");
|
||||
menuPanel.classList.add("hiddenPane");
|
||||
settingsPanel.classList.add("hiddenPane");
|
||||
|
||||
|
||||
switch (pane) {
|
||||
switch (this._currentPane) {
|
||||
case Pane.MAIN: {
|
||||
mainPanel.classList.remove("hiddenPane");
|
||||
mainPanel.classList.add("hiddenPane");
|
||||
break;
|
||||
}
|
||||
case Pane.MENU: {
|
||||
menuPanel.classList.remove("hiddenPane");
|
||||
menuPanel.classList.add("hiddenPane");
|
||||
break;
|
||||
}
|
||||
case Pane.SETUP: {
|
||||
setupPanel.classList.remove("hiddenPane");
|
||||
setupPanel.classList.add("hiddenPane");
|
||||
break;
|
||||
}
|
||||
case Pane.SETTINGS: {
|
||||
settingsPanel.classList.remove("hiddenPane");
|
||||
settingsPanel.classList.add("hiddenPane");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let title = document.getElementById("title") as HTMLTitleElement;
|
||||
title.innerText = pane.toString();
|
||||
switch (pane) {
|
||||
case Pane.MAIN: {
|
||||
mainPanel.classList.remove("hiddenPane");
|
||||
title.innerText = "iTender";
|
||||
break;
|
||||
}
|
||||
case Pane.MENU: {
|
||||
menuPanel.classList.remove("hiddenPane");
|
||||
title.innerText = "Menü";
|
||||
break;
|
||||
}
|
||||
case Pane.SETUP: {
|
||||
setupPanel.classList.remove("hiddenPane");
|
||||
title.innerText = "Setup";
|
||||
break;
|
||||
}
|
||||
case Pane.SETTINGS: {
|
||||
settingsPanel.classList.remove("hiddenPane");
|
||||
title.innerText = "Einstellungen";
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
this._currentPane = pane;
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user