itender/src/web/Containers.ts

import {Modal} from "./Modal";
import {WebWebSocketHandler} from "./WebWebSocketHandler";
import {IContainer} from "../database/IContainer";
import {IIngredient} from "../database/IIngredient";
import {ButtonType} from "./ButtonType";
import {RequestType} from "../RequestType";
import {WebSocketPayload} from "../WebSocketPayload";
import {WebSocketEvent} from "../WebSocketEvent";

export class Containers {
    static openMenu() {
        let modal = new Modal("containers", "Behälter aktualisieren");
        let txt = document.createElement("p");
        txt.innerText = "Zu aktualisierenden Behälter wählen";
        modal.addContent(txt);
        modal.addContent(document.createElement("br"));

        let form = document.createElement("div");
        modal.addContent(form);

        let btnSave = document.createElement("button");
        btnSave.innerText = "Speichern";
        btnSave.classList.add("btn", "btn-primary")
        btnSave.disabled = true;

        let containerVolumes: Record<any, number> = {};

        let volume = document.createElement("span");
        volume.innerText = "";
        volume.id = "containers_volume";

        let volumeSlider = document.createElement("input");
        volumeSlider.type = "range";
        volumeSlider.step = "10";
        volumeSlider.style.visibility = "hidden";
        volumeSlider.id = "containers_volumeSlider"

        function onChange() {
            volume.innerText = volumeSlider.value + " ml ";
            txt.innerText = "Speichern zum abschließen"
        }

        volumeSlider.oninput = onChange;
        volumeSlider.onchange = onChange;

        let nonSelect = document.createElement("option");
        nonSelect.value = "-1";
        nonSelect.innerText = "Bitte wählen";
        nonSelect.disabled = true;


        let selectIngredient = document.createElement("select");
        selectIngredient.style.visibility = "hidden";
        selectIngredient.classList.add("input");
        selectIngredient.onchange = () => {
            if (selectIngredient.value == "null") {
                volumeSlider.value = "0";
                volumeSlider.disabled = true;
            } else {
                volumeSlider.disabled = false;
            }

            volumeSlider.style.visibility = "visible";
            volume.innerText = volumeSlider.value + " ml ";

            if (selectContainer.value && selectIngredient.value)
                btnSave.disabled = false;


            txt.innerText = "Menge des Inhalts mittels Slider einstellen";
        }
        selectIngredient.append(nonSelect.cloneNode(true));
        selectIngredient.selectedIndex = 0;
        let noIngredient = document.createElement("option");
        noIngredient.value = "null";
        noIngredient.innerText = "Kein Inhalt";
        selectIngredient.append(noIngredient);

        let selectContainer = document.createElement("select");
        selectContainer.classList.add("input");
        selectContainer.onchange = () => {
            selectIngredient.style.visibility = "visible";
            volumeSlider.max = String(containerVolumes[selectContainer.value]);
            volumeSlider.min = String(0);
            volumeSlider.value = String(containerVolumes[selectContainer.value] / 2);
            txt.innerText = "Ingredient des Behälters auswählen";
        }


        selectContainer.append(nonSelect.cloneNode(true));
        selectContainer.selectedIndex = 0;

        WebWebSocketHandler.request(RequestType.CONTAINERS).then((payload) => {
            for (let container of (payload.data["content"] as IContainer[])) {
                containerVolumes[container._id] = container.volume;
                let option = document.createElement("option");
                option.value = container._id;
                option.innerText = "Behälter Slot " + container.slot + "[" + (container.content && container.content.name ? container.content.name : "Kein Inhalt") + "]";
                selectContainer.append(option);

            }
        });
        WebWebSocketHandler.request(RequestType.INGREDIENTS).then((payload) => {
            for (let ingredient of (payload.data["content"] as IIngredient[])) {
                let option = document.createElement("option");
                option.value = ingredient._id;
                option.innerText = ingredient.name;
                selectIngredient.append(option);
            }
        });

        form.append(selectContainer, document.createElement("br"), selectIngredient, document.createElement("br"), volume, volumeSlider);


        modal.addContent(document.createElement("br"));
        modal.addButton(ButtonType.PRIMARY, "Abbrechen", () => modal.close());


        modal.addContent(btnSave);

        btnSave.onclick = () => {

            // Validation
            if (selectIngredient.value == "-1" || selectContainer.value == "-1") {
                return;
            }

            // If no ingredient, move slider to 0
            if (selectIngredient.value == "null")
                volumeSlider.value = "0";

            let payload = new WebSocketPayload(WebSocketEvent.CONTAINER_UPDATE, false, {
                container: selectContainer.value,
                ingredient: (selectIngredient.value == "null") ? null : selectIngredient.value,
                filled: volumeSlider.value
            });
            WebWebSocketHandler.send(payload).then(() => modal.close());
        };

        modal.open();
    }
}