update

Took 1 hour 29 minutes

public/stylesheets/style.css

@@ -48,23 +48,25 @@ body {
     user-select: none; /* Standard syntax */
 }
 
+
 #blockPanel {
     z-index: 999;
     position: fixed;
-    top:0;
+    top: 0;
-    left:0;
+    left: 0;
-    background-color: rgba(0,0,0,0.9);
+    background-color: rgba(0, 0, 0, 0.9);
     width: 100vw;
-    height: 100vh;
+    height: 100vh;;
-;
     transition: opacity 0.4s;;
 }
 
+
 .opacityOutDisplayNone {
     animation: opacityOutDisplayNone 0.4s linear forwards;
 
 }
 
+
 @keyframes opacityOutDisplayNone {
     0% {
         opacity: 1;
@@ -75,6 +77,7 @@ body {
     }
 }
 
+
 h1 {
     font-size: 1.74em;
     font-weight: 500;
@@ -82,6 +85,7 @@ h1 {
 
 }
 
+
 h2 {
     font-size: 1.45em;
     font-weight: 500;
@@ -89,6 +93,7 @@ h2 {
 
 }
 
+
 #overlay {
     color: white;
 }
@@ -140,7 +145,9 @@ h2 {
 
 
 #overlay #bottom {
-    display: block;
+    display: grid;
+    grid-template-rows: 100%;
+    grid-template-columns: 20% 80%;
     position: fixed;
     bottom: 0;
     left: 0;
@@ -153,14 +160,13 @@ h2 {
 
 #overlay #bottom #menuBtn {
     height: 100%;
-    width: 10%;
+    width: 60%;
     background-color: #21212D;
     padding: 1px;
     font-size: 1.5em;
     border: 0;
     border-radius: 0 12px 0 0;
     color: white;
-    float: left;
     transition: all 0.4s;
     margin-left: 0;
 }
@@ -177,11 +183,28 @@ h2 {
 }
 
 
-#overlay #bottom #containers {
+#overlay #bottom #menuContainers {
     height: 100%;
-    width: 30%;
+    display: grid;
-    float: right;
+    grid-template-columns: repeat(14,1fr);
-    /* todo */
+    grid-auto-flow: column;
+    direction: rtl;
+    grid-template-rows: 100%;
+    grid-column-gap: 1.5%;
+    padding: 1% 2% 0.2%;
+}
+
+#menuContainers .container {
+    text-align: center;
+    border-radius: 0 0 30% 30%;
+    border: 1px solid black;
+    border-top-color: transparent;
+    padding-top: 18%;
+    background-color: #5b5b9b;
+    transition: all 1s;
+    transition: background-color 3s;
+    direction: ltr;
+
 }
 
 

src/WebSocketHandler.ts

@@ -38,9 +38,9 @@ export class WebSocketHandler {
         });
     }
 
-    public static answerRequest(type: RequestType, content: any) {
+    public static answerRequest(type: RequestType, data: any) {
 
-        WebSocketHandler.send(new WebSocketPayload(WebSocketEvent.RESPONSE, {type: type, data: content}));
+        WebSocketHandler.send(new WebSocketPayload(WebSocketEvent.RESPONSE, {type: type, data: data}));
         log("Answered " + type + " request");
 
     }
@@ -86,7 +86,7 @@ export class WebSocketHandler {
             };
             let payload = new WebSocketPayload(WebSocketEvent.RESPONSE, {
                 type: RequestType.STATS,
-                content: stats
+                data: stats
             });
             WebSocketHandler.send(payload).then(resolve);
         });

src/routes/ws/websocketRoute.ts

@@ -14,6 +14,7 @@ import {SensorHelper} from "../../SensorHelper";
 import {IContainer} from "../../database/IContainer";
 import {Mixer} from "../../Mixer";
 import {ArduinoProxy} from "../../ArduinoProxy";
+import {ContainerHelper} from "../../ContainerHelper";
 
 const express = require('express');
 const router = express.Router();
@@ -95,6 +96,7 @@ router.ws('/', async (ws, req, next) => {
 
                 await container.save();
 
+                await ContainerHelper.measureContainers();
                 await iTender.refreshDrinks();
                 break;
             }
@@ -124,6 +126,10 @@ router.ws('/', async (ws, req, next) => {
                 break;
             }
 
+            case WebSocketEvent.CANCEL: {
+                await Mixer.cancelFill();
+            }
+
             case WebSocketEvent.REQUEST: {
                 log("Request to " + msg.data["type"]);
 
@@ -143,7 +149,7 @@ router.ws('/', async (ws, req, next) => {
                     case RequestType.STARTFILL: {
                         let job: IJob | null = null;
                         try {
-                            job = await iTender.onReceiveFill(msg.data["content"]);
+                            job = await iTender.onReceiveFill(msg.data.data);
                         } catch (e: any) {
                             console.error(e);
                         }

src/web/Containers.ts

@@ -36,7 +36,8 @@ export class Containers {
 
         let volumeSlider = document.createElement("input");
         volumeSlider.type = "range";
-        volumeSlider.step = "10";
+        volumeSlider.step = "5";
+        // Todo, templates für größen
         volumeSlider.style.visibility = "hidden";
         volumeSlider.id = "containers_volumeSlider"
 
@@ -90,13 +91,13 @@ export class Containers {
         selectContainer.onchange = () => {
             // Enable select ingredient field and set max and min to the slider
             selectIngredient.style.visibility = "visible";
-            volumeSlider.max = String(containerVolumes[selectContainer.value]);
+            volumeSlider.max = String(2000);
             volumeSlider.min = String(0);
             volumeSlider.value = String(containerVolumes[selectContainer.value] / 2);
-            txt.innerText = "Ingredient des Behälters auswählen";
+            txt.innerText = "Inhalt des Behälters auswählen";
 
             // When content of container is filled, preselect the ingredient selector
-            if (containers[selectContainer.value].content) {
+            if (containers[selectContainer.value] && containers[selectContainer.value].content) {
                 selectIngredient.value = containers[selectContainer.value].content?._id;
                 let event = new Event('change', {bubbles: true});
                 selectIngredient.dispatchEvent(event);

src/web/WebHandler.ts

@@ -20,7 +20,7 @@ export class WebHandler {
         const main = document.getElementById("main");
         if (!main) return;
 
-        console.log(drinks)
+
 
         main.style.gridTemplateRows = `repeat(${Math.round(drinks.length / 3)}, calc(90%/2))`;
 

src/web/main.ts

@@ -8,6 +8,8 @@ import {ButtonType} from "./ButtonType";
 import {Containers} from "./Containers";
 import {Setup} from "./Setup";
 import {RequestType} from "../RequestType";
+import container from "../database/Container";
+import {IContainer} from "../database/IContainer";
 
 const main = document.getElementById("main");
 const time = document.getElementById("right");
@@ -33,6 +35,37 @@ document.addEventListener("DOMContentLoaded", async () => {
         let currentDate = new Date();
         time.innerText = "" + (currentDate.getHours() < 10 ? "0" + currentDate.getHours() : currentDate.getHours()) + ":" + (currentDate.getMinutes() < 10 ? "0" + currentDate.getMinutes() : currentDate.getMinutes());
     }, 1000);
+
+    WebWebSocketHandler.registerForEvent(WebSocketEvent.CONTAINERS, (payload) => {
+        let container : IContainer;
+        let bottomContainers = document.getElementById("menuContainers") as HTMLDivElement;
+        bottomContainers.innerHTML = "";
+        for( container of payload.data )
+        {
+            let containerDiv = document.createElement("div") as HTMLDivElement;
+            containerDiv.classList.add("container");
+
+            let span = document.createElement("span") as HTMLSpanElement;
+            let pcnt = container.filled * 100 / container.volume;
+            if( !container.content )
+                span.innerText = "-";
+            else if( isNaN(pcnt) )
+                span.innerText = "?%";
+            else
+                span.innerText = pcnt + "%";
+
+            if( pcnt < 5 )
+                containerDiv.style.backgroundColor = "red";
+            else if ( pcnt < 15 )
+                containerDiv.style.backgroundColor = "#ef4f00";
+            else if ( pcnt < 30 )
+                containerDiv.style.backgroundColor = "#ff5400";
+
+            containerDiv.append(span);
+
+            bottomContainers.append(containerDiv);
+        }
+    })
 });
 
 function setupOnClickEvents() {
@@ -40,6 +73,19 @@ function setupOnClickEvents() {
     const menuBtn = document.getElementById("menuBtn") as HTMLButtonElement;
     menuBtn.disabled = true;
 
+    let timer = 0;
+    function mouseDown() {
+        timer = Date.now();
+    }
+    function mouseUp() {
+        if( ( Date.now() - timer ) / 1000 > 5 )
+            window.location.reload();
+    }
+    menuBtn.onmousedown = mouseDown;
+    menuBtn.ontouchstart = mouseDown;
+    menuBtn.onmouseup = mouseUp;
+    menuBtn.ontouchend = mouseUp;
+
     function doMenu() {
         if (WebHandler.currentPane != Pane.MENU) {
             WebHandler.openPane(Pane.MENU);
@@ -77,6 +123,7 @@ function setupOnClickEvents() {
 
         WebWebSocketHandler.request(RequestType.STATS).then((payload) => {
             let li = document.createElement("li");
+            console.log(payload);
             li.innerText = "Cocktails ausgegeben: " + payload.data["drinks_finished"];
             list.append(li);
 

views/layout.pug

@@ -18,8 +18,27 @@ html
                 span#title iTender
                 span#right 00:00
             div#bottom
-                button.btn#menuBtn Menü
+                div
-                div#containers
+                    button.btn#menuBtn Menü
+
+                div#menuContainers
+                    div.container(style="background-color:red")
+                        span 3%
+                    div.container
+                        span 20%
+                    div.container
+                        span 100%
+                    div.container
+                        span 30%
+                    div.container(style="background-color:#ef4f00")
+                        span 12%
+                    div.container
+                        span 100%
+                    div.container(style="background-color:grey")
+                        span 0%
+                    div.container(style="background-color:red")
+                        span 3%
+
 
         div#container
             div.pane#main