update

Took 25 hours 49 minutes

src/web/WebHandler.ts

@@ -0,0 +1,54 @@
+import {WebSocketPayload} from "../WebSocketPayload";
+import {IDrink} from "../database/IDrink";
+import {Modal} from "./Modal";
+
+export class WebHandler {
+    public static onDrinkUpdate(payload: WebSocketPayload) {
+        if (!payload.data) return;
+
+        let drinks: IDrink[] = payload.data;
+
+        const main = document.getElementById("main");
+        if (!main) return;
+
+        main.style.gridTemplateRows = `repeat(${Math.round(drinks.length / 3)}, calc(90%/2))`;
+
+        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;
+
+            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}`
+                modal.leftCentered = true;
+                modal.open();
+            };
+
+            main.append(drinkEle);
+        }
+
+    }
+
+
+}