itender/src/web/WebHandler.ts

import {WebSocketPayload} from "../WebSocketPayload";
import {IDrink} from "../database/IDrink";
import {Pane} from "./Pane";
import {Setup} from "./Setup";
import {WebWebSocketHandler} from "./WebWebSocketHandler";
import {RequestType} from "../RequestType";
import {IJob} from "../database/IJob";
import {Modal} from "./Modal";
import {ButtonType} from "./ButtonType";

export class WebHandler {
    static get currentPane(): Pane {
        return this._currentPane;
    }

    public static onDrinkUpdate(payload: WebSocketPayload) {
        if (!payload.data) return;
        let drinks: IDrink[] = payload.data;

        const main = document.getElementById("main");
        if (!main) return;

        console.log(drinks)

        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");


            let drinkImg = document.createElement("img");
            drinkImg.classList.add("thumbnail");
            drinkEle.append(drinkImg);

            let drinkName = document.createElement("p");
            drinkName.classList.add("drinkName");
            drinkEle.append(drinkName);

            drinkImg.alt = "Foto von " + drink.name;
            drinkImg.src = "/images/" + drink.name + ".png";
            drinkName.innerText = drink.name;


            drinkEle.onclick = () => {
                WebWebSocketHandler.request(RequestType.STARTFILL, {drink: drink}).then((payload) => {
                    let data = payload.data.content as { success: boolean, job?: IJob };

                    if (!data.success) {
                        let modal = new Modal("fill", "Oh nein!");
                        let txt = document.createElement("p");
                        txt.innerHTML = `Es scheint so, als wäre nicht genug Inhalt in den Behältern, um den gewünschten Cocktail bereitzustellen.<br><br>Bitte wende dich an das Wartungspersonal.<br><br>`;
                        modal.addContent(txt);
                        modal.addButton(ButtonType.PRIMARY, "Schließen", () => modal.close());
                        modal.open();
                    }
                });
            }

            /*
            let ingredients = "<ul style='list-style-type: disc;'>";
            for (let i of drink.ingredients) {
                ingredients += "<li>" + i.amount + "ml " + i.type.name + "</li>";
            }
            ingredients += "</ul>"

            drinkEle.onclick = () => {
                let modal = new Modal("drink", drink.name);

                modal.content = `<strong>Zutaten</strong><br>
${ingredients}`*/ //todo
            //modal.leftCentered = true;
            // modal.open();
            //};

            main.append(drinkEle);
        }

    }

    private static _currentPane: Pane;

    public static openPane(pane: Pane): void {
        const menuBtn = document.getElementById("menuBtn") as HTMLButtonElement;
        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");
        }


        switch (this._currentPane) {
            case Pane.MAIN: {
                mainPanel.classList.add("hiddenPane");
                break;
            }
            case Pane.MENU: {
                menuPanel.classList.add("hiddenPane");
                break;
            }
            case Pane.SETUP: {
                setupPanel.classList.add("hiddenPane");
                break;
            }
            case Pane.SETTINGS: {
                settingsPanel.classList.add("hiddenPane");
                break;
            }
            case Pane.CONTAINERS: {

            }
        }

        menuBtn.innerText = "Menü";
        let title = document.getElementById("title") as HTMLTitleElement;
        switch (pane) {
            case Pane.MAIN: {
                mainPanel.classList.remove("hiddenPane");
                mainPanel.scrollTo({top: 0, behavior: "smooth"});
                title.innerText = "iTender";
                break;
            }
            case Pane.MENU: {
                menuPanel.classList.remove("hiddenPane");
                title.innerText = "Menü";
                menuBtn.innerText = "Start";
                break;
            }
            case Pane.SETUP: {
                setupPanel.classList.remove("hiddenPane");
                title.innerText = "Setup";
                setupPanel.scrollTo({top: 0, behavior: "smooth"});
                break;
            }
            case Pane.SETTINGS: {
                settingsPanel.classList.remove("hiddenPane");
                title.innerText = "Einstellungen";
                settingsPanel.scrollTo({top: 0, behavior: "smooth"})
                break;
            }
        }

        this._currentPane = pane;
    }
}