update
Took 1 hour 29 minutes
This commit is contained in:
parent
e677e41e40
commit
8766961c7b
@ -48,6 +48,7 @@ body {
|
||||
user-select: none; /* Standard syntax */
|
||||
}
|
||||
|
||||
|
||||
#blockPanel {
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
@ -55,16 +56,17 @@ body {
|
||||
left: 0;
|
||||
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%;
|
||||
float: right;
|
||||
/* todo */
|
||||
display: grid;
|
||||
grid-template-columns: repeat(14,1fr);
|
||||
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;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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);
|
||||
});
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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))`;
|
||||
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -18,8 +18,27 @@ html
|
||||
span#title iTender
|
||||
span#right 00:00
|
||||
div#bottom
|
||||
div
|
||||
button.btn#menuBtn Menü
|
||||
div#containers
|
||||
|
||||
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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user