update

Took 1 hour 33 minutes

public/stylesheets/colors.css

@@ -8,17 +8,28 @@
 
     --hover: grey;
 
-    --disabled: #A4A4A4;
+    --disabled: #626265;
 
-    --success: #31B600;
+    --success: #419822;
     --success-bright: #6DC946;
 
     --warning: #ED6D05;
     --warning-bright: #E28433;
 
-    --danger: #FF1818;
+    --danger: #B20000ED;
     --danger-bright: #DC4040;
 
     --dark: #911010;
     --dark-bright: #A22F2F;
+
+    --error: rgba(255, 0, 0, 0.73);
+
+
+    --container-bg: #4f6aaa;
+    --select-bg: rgba(55, 73, 144, 0.8);
 }
+
+/**
+background-color: #080732;
+box-shadow: inset 50px -22px 50px 10px rgba(128, 15, 15, 0.5);
+ */

public/stylesheets/fonts.css

@@ -117,3 +117,44 @@
     url('/fonts/Roboto/roboto-v30-latin-900italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
     url('/fonts/Roboto/roboto-v30-latin-900italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
+
+
+/* raleway-300 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Raleway';
+    font-style: normal;
+    font-weight: 300;
+    src: url('/fonts/Raleway/raleway-v28-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+    url('/fonts/Raleway/raleway-v28-latin-300.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* raleway-regular - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Raleway';
+    font-style: normal;
+    font-weight: 400;
+    src: url('/fonts/Raleway/raleway-v28-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+    url('/fonts/Raleway/raleway-v28-latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* raleway-500 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Raleway';
+    font-style: normal;
+    font-weight: 500;
+    src: url('/fonts/Raleway/raleway-v28-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+    url('/fonts/Raleway/raleway-v28-latin-500.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* raleway-600 - latin */
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Raleway';
+    font-style: normal;
+    font-weight: 600;
+    src: url('/fonts/Raleway/raleway-v28-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
+    url('/fonts/Raleway/raleway-v28-latin-600.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}

public/stylesheets/inputs.css

@@ -3,7 +3,7 @@
     border: none;
     color: white;
     font-size: 0.96em;
-    border-radius: 2px;
+    border-radius: 3px;
     cursor: none !important;
     font-weight: 500;
     margin-right: 1%;
@@ -135,5 +135,6 @@ label {
     -o-transform: scale(1.6); /* Opera */
     transform: scale(1.6);
     padding: 12px;
+    background-color: white;
 }
 

public/stylesheets/main.css

@@ -7,7 +7,7 @@
     display: grid;
     grid-template-columns: repeat(3, calc(90% / 3));
     grid-template-rows: repeat(2, calc(90% / 2));
-    grid-gap: 10% 5%;
+    grid-gap: 9% 5.5%;
 }
 
 
@@ -15,12 +15,12 @@
     grid-row: span 1;
     grid-column: span 1;
     background-color: rgba(57, 57, 57, 0.6);
-    width: 90%;
+    width: 95%;
     height: 97%;
     display: grid;
     grid-template-columns: 100%;
     grid-template-rows: repeat(3, calc(100% / 3));
-    grid-row-gap: 4%;
+    grid-row-gap: 3%;
     text-align: center;
     border-radius: 30px 10px 30px;
     color: white;
@@ -44,17 +44,19 @@
     grid-row: span 2;
     margin-left: auto;
     margin-right: auto;
-    max-height: 100%;
+    max-height: 99%;
     overflow: hidden;
     transition: 0.5s;
+    margin-top: 1%;
 }
 
 
 .drink .drinkName {
-    font-family: Ubuntu, sans-serif;
+    font-family: Raleway, sans-serif;
     grid-column: span 1;
     grid-row: span 1;
     font-size: 150%;
+    margin-top: 1%;
 }
 
 

public/stylesheets/setup.css

@@ -16,37 +16,41 @@
     width: 100%;
     height: 100%;
     text-align: center;
-    border: 1px solid white;
+    border: 1px solid #818181;
     border-radius: 5px;
     padding: 0.45% 10px;
     overflow: auto;
+    overflow-x: hidden;
 }
 
+
 #setup #setupContainersDiv #containerAddBtn {
     position: relative;
     left: 46%;
     bottom: 8%;
 }
 
+
 #setup #setupLEDDiv {
     grid-row: span 3;
     grid-column: span 1;
     height: 100%;
     text-align: center;
-    border: 1px solid white;
+    border: 1px solid #818181;
     border-radius: 5px;
     padding: 1% 10px;
     margin-right: 10%;
 
 }
 
+
 #setup #setupExtraDiv {
     grid-row: span 3;
     grid-column: span 1;
     width: 100%;
     height: 100%;
     text-align: center;
-    border: 1px solid white;
+    border: 1px solid #818181;
     border-radius: 5px;
     padding: 1% 10px;
 
@@ -55,25 +59,28 @@
 
 
 #setupContainers .setupContainer {
-    color: black;
+    color: white;
     text-align: left;
     width: calc(100% / 2.3);
     height: 12%;
     display: inline-block;
     margin-bottom: 3%;
-    border: 1px solid gray;
+    border: 2px solid #142F44;
     margin-left: 2%;
     margin-right: 2%;
     border-radius: 10px;
     padding: 3% 10px;
     transition: 0.5s;
-    background-color: rgb(135, 133, 133);
+    background-color: #4f6aaa;
     overflow: hidden;
 }
 
+
 .removeSlowly {
     animation: removeSlowlyWidth 0.8s forwards;
 }
+
+
 @keyframes removeSlowlyWidth {
 
     100% {
@@ -81,18 +88,21 @@
     }
 }
 
+
 .error {
-    background-color: rgba(255,0,0,0.5) !important;
+    background-color: var(--error) !important;
 }
 
+
 #setupContainers .setupContainer p {
-    margin-bottom: 3%;
+    margin-bottom: 4.5%;
     font-weight: 600;
     font-size: 1.2em;
 }
 
 
 #setupContainers .setupContainer select {
-    margin-bottom: 2%;
-
+    margin-bottom: 2.1%;
+    background-color: var(--select-bg);
+    color: white;
 }

src/web/ButtonType.ts

@@ -3,5 +3,6 @@ export enum ButtonType {
     SUCCESS = "success",
     ERROR = "error",
     DANGER = "danger",
+    SECONDARY = "secondary",
 
 }

src/web/Fill.ts

@@ -4,6 +4,8 @@ import {WebSocketEvent} from "../WebSocketEvent";
 import {RequestType} from "../RequestType";
 import {IJob} from "../database/IJob";
 import {WebWebSocketHandler} from "./WebWebSocketHandler";
+import {IDrink} from "../database/IDrink";
+import {ButtonType} from "./ButtonType";
 
 export class Fill {
     static onFillEvent(payload: WebSocketPayload) {
@@ -98,4 +100,49 @@ export class Fill {
             });
         });
     }
+
+    static userFillRequest(drink: IDrink) {
+        return new Promise<void>(async resolve => {
+            let modal = new Modal("fillOptions", drink.name + " Mixen");
+            let pre = document.createElement("p");
+            pre.innerHTML = `Bitte wähle die Größe deines Glas aus<br>`;
+            modal.addContent(pre);
+
+            let div = document.createElement("div");
+
+            let sizes = [ ["shot", "Shot", 20], ["small", "Klein", 120], ["normal", "Normal", 200], ["large", "Groß", 300] ];
+            for( let s of sizes )
+            {
+                let glass = document.createElement("div");
+                let img = document.createElement("img");
+                img.src = "/static/" + s[0] + ".png";
+                let bottom = document.createElement("p");
+                bottom.style.textAlign = "center";
+                bottom.innerHTML = `${s[1]} <span style="color:grey">${s[2]}ml</span>`;
+
+                glass.append(img,bottom);
+                div.append(glass);
+            }
+            modal.addContent(div);
+
+            modal.addBR();
+            modal.addButton(ButtonType.SECONDARY, "Abbrechen", () => modal.close());
+            modal.addButton(ButtonType.SUCCESS, "Starten", () => {
+                WebWebSocketHandler.request(RequestType.STARTFILL, {drink: drink}).then((payload) => {
+                    let data = payload.data as { success: boolean, job?: IJob };
+
+                    if (!data.success) {
+                        let modal = new Modal("fill", "Oh nein!");
+                        let txt = document.createElement("p");
+                        txt.innerHTML = `Es ist nicht genug Inhalt in den Behältern, um das gewünschte Getränk in der Größe bereitzustellen.<br><br>Bitte wende dich an das Wartungspersonal.<br><br>`;
+                        modal.addContent(txt);
+                        modal.addButton(ButtonType.SECONDARY, "Schließen", () => modal.close());
+                        modal.open();
+                    }
+                });
+            });
+            await modal.open();
+            resolve();
+        });
+    }
 }

src/web/Settings.ts

@@ -71,7 +71,7 @@ export class Settings {
             modal.addContent(table);
 
             modal.addBR();
-            modal.addButton(ButtonType.PRIMARY, "Schließen", () => modal.close());
+            modal.addButton(ButtonType.SECONDARY, "Schließen", () => modal.close());
             modal.open();
         });
     }
@@ -87,7 +87,7 @@ Sobald das Update installiert ist, wird das System neu gestartet.<br>Die dadurch
                 modal.loader = true;
             } else {
                 txt.innerHTML = `Das System kann nicht aktualisiert werden.<br>iTender hat keine Internet-Konnektivität fest gestellt.<br>Versuchen Sie es zu einem späteren Zeitpunkt erneut.`;
-                modal.addButton(ButtonType.PRIMARY, "Schließen", () => modal.close());
+                modal.addButton(ButtonType.SECONDARY, "Schließen", () => modal.close());
             }
 
             modal.open();
@@ -107,7 +107,7 @@ Sobald das Update installiert ist, wird das System neu gestartet.<br>Die dadurch
             }
 
 
-            modal.addButton(ButtonType.PRIMARY, "Schließen", () => modal.close());
+            modal.addButton(ButtonType.SECONDARY, "Schließen", () => modal.close());
             modal.open();
         });
     }

src/web/Setup.ts

@@ -112,7 +112,7 @@ Dort werden die Behälter definiert, welche in den iTender gestellt werden.<br>D
             ele.innerHTML = `Das Setup konnte nicht abgeschlossen werden.<br>`;
             errorModal.addContent(ele);
             errorModal.addBR();
-            errorModal.addButton(ButtonType.PRIMARY, "Schließen", () => {
+            errorModal.addButton(ButtonType.SECONDARY, "Schließen", () => {
                 errorModal.close();
             });
 

src/web/WebHandler.ts

@@ -7,8 +7,11 @@ import {RequestType} from "../RequestType";
 import {IJob} from "../database/IJob";
 import {Modal} from "./Modal";
 import {ButtonType} from "./ButtonType";
+import {Fill} from "./Fill";
 
 export class WebHandler {
+    private static _currentPane: Pane;
+
     static get currentPane(): Pane {
         return this._currentPane;
     }
@@ -21,9 +24,7 @@ export class WebHandler {
         if (!main) return;
 
 
-
-        main.style.gridTemplateRows = `repeat(${Math.round(drinks.length / 3)}, calc(90%/2))`;
-
+        main.style.gridTemplateRows = `repeat(${Math.ceil(drinks.length / 3)}, calc(90%/2))`;
         main.innerHTML = "";
 
         for (let drink of drinks) {
@@ -39,11 +40,12 @@ export class WebHandler {
             drinkName.classList.add("drinkName");
             drinkEle.append(drinkName);
 
-            drinkImg.alt = "Foto von " + drink.name;
+            drinkImg.alt = "Kein Foto für " + drink.name;
             drinkImg.src = "/images/" + drink._id + ".png";
             drinkName.innerText = drink.name;
 
 
+            //drinkEle.onclick = () => Fill.userFillRequest(drink);
             drinkEle.onclick = () => {
                 WebWebSocketHandler.request(RequestType.STARTFILL, {drink: drink}).then((payload) => {
                     let data = payload.data as { success: boolean, job?: IJob };
@@ -51,14 +53,13 @@ export class WebHandler {
                     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>`;
+                        txt.innerHTML = `Es ist nicht genug Inhalt in den Behältern, um das gewünschte Getränk in der Größe bereitzustellen.<br><br>Bitte wende dich an das Wartungspersonal.<br><br>`;
                         modal.addContent(txt);
-                        modal.addButton(ButtonType.PRIMARY, "Schließen", () => modal.close());
+                        modal.addButton(ButtonType.SECONDARY, "Schließen", () => modal.close());
                         modal.open();
                     }
                 });
             }
-
             /*
             let ingredients = "<ul style='list-style-type: disc;'>";
             for (let i of drink.ingredients) {
@@ -80,8 +81,6 @@ ${ingredients}`*/ //todo
 
     }
 
-    private static _currentPane: Pane;
-
     public static openPane(pane: Pane): void {
         const menuBtn = document.getElementById("menuBtn") as HTMLButtonElement;
         let mainPanel = document.getElementById("main") as HTMLDivElement;

src/web/WebWebSocketHandler.ts

@@ -132,7 +132,7 @@ export class WebWebSocketHandler {
                 txt.innerHTML = payload.data;
                 modal.addContent(txt);
                 modal.addContent(document.createElement("br"));
-                modal.addButton(ButtonType.PRIMARY, "Schließen", () => modal.close());
+                modal.addButton(ButtonType.SECONDARY, "Schließen", () => modal.close());
                 modal.open();
                 break;
             }

src/web/main.ts

@@ -37,8 +37,8 @@ document.addEventListener("DOMContentLoaded", async () => {
         time.innerText = "" + (currentDate.getHours() < 10 ? "0" + currentDate.getHours() : currentDate.getHours()) + ":" + (currentDate.getMinutes() < 10 ? "0" + currentDate.getMinutes() : currentDate.getMinutes());
     }, 1000);
 
+
     WebWebSocketHandler.registerForEvent(WebSocketEvent.CONTAINERS, (payload) => {
-        console.log("Updating container list...")
         let container: IContainer;
         let bottomContainers = document.getElementById("menuContainers") as HTMLDivElement;
         bottomContainers.innerHTML = "";
@@ -55,12 +55,18 @@ document.addEventListener("DOMContentLoaded", async () => {
             else
                 span.innerText = pcnt + "%";
 
-            if (pcnt < 5)
-                containerDiv.style.backgroundColor = "red";
-            else if (pcnt < 15)
+            if (pcnt < 5) {
+                containerDiv.style.backgroundColor = "var(--danger)";
+            }
+            else if (pcnt < 15) {
                 containerDiv.style.backgroundColor = "#EF4F00";
-            else if (pcnt < 30)
+            }
+            else if (pcnt < 40) {
                 containerDiv.style.backgroundColor = "#FF5400";
+            }
+            else {
+                containerDiv.style.backgroundColor = "#5b5b9b";
+            }
 
             containerDiv.append(span);
 
@@ -127,7 +133,7 @@ function setupOnClickEvents() {
             modal.addContent(table);
 
             modal.addContent(document.createElement("br"));
-            modal.addButton(ButtonType.PRIMARY, "Schließen", () => modal.close());
+            modal.addButton(ButtonType.SECONDARY, "Schließen", () => modal.close());
             modal.open();
         });