TobiasH/itender
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source 
Took 25 hours 49 minutes
This commit is contained in:
Tobias Hopp
2022-11-15 00:58:59 +01:00
parent a7fac21442
commit a356b39bad
46 changed files with 936 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/web/Modal.ts
View File

@ -2,14 +2,19 @@ import {ButtonType} from "./ButtonType";
export class Modal {
private static currentModalId = "";
private static currentModalId: string | undefined = "";
private _title: string = "iTender";
private _content: string | undefined = "";
private _id: string = "";
private _loader: boolean = false;
private _buttons: { type: string, content: string, onclick: Function }[] = [];
private _leftCentered: boolean = false;
set leftCentered(value: boolean) {
this._leftCentered = value;
}
private static modalInClose = false;
constructor(id, title: string, content?: string) {
this._id = id;
@ -17,6 +22,10 @@ export class Modal {
this._content = content;
}
public static isModalOpen(): boolean {
return !(!this.currentModalId);
}
set title(value: string) {
this._title = value;
@ -34,8 +43,7 @@ export class Modal {
this._loader = value;
}
public addButton( type: ButtonType, content: string, onclick: Function )
{
public addButton(type: ButtonType, content: string, onclick: Function) {
this._buttons.push({type: type, content: content, onclick: onclick});
}
@ -43,16 +51,39 @@ export class Modal {
if (!this._content)
this._content = "";
if( this._leftCentered )
{
this._content = "<div style='text-align: left; padding-left: 2%;'>" + this._content;
}
if (this._loader)
this._content += "<br><div class=\"lds-ellipsis\">\n" +
" <div></div><div></div><div></div><div></div>\n" +
"</div>";
for (let btn of this._buttons) {
this._content += `<button class="btn btn-${btn.type}" onclick="${btn.onclick}">${btn.content}</button>`;
this._content += `<button class="btn btn-${btn.type}" onclick="(${btn.onclick})();">${btn.content}</button>`;
}
Modal.open(this._title, this._content, this._id);
if( this._leftCentered )
{
this._content+= "</div>";
}
let title = this._title;
let content = this._content;
let id = this._id;
function tryOpen()
{
if( Modal.modalInClose )
{
setTimeout( tryOpen, 50 );
return;
}
Modal.open(title, content, id );
}
tryOpen();
}
/**
@ -61,6 +92,7 @@ export class Modal {
* @param id
*/
public static open(title: string, content: string, id?: string): void {
const modal = document.getElementById("modal");
const modalContent = document.getElementById("modalInnerContent");
@ -82,9 +114,11 @@ export class Modal {
}
public static close(id?: string): void {
if (this.currentModalId != id)
if (id && this.currentModalId != id)
return;
Modal.modalInClose = true;
const modal = document.getElementById("modal");
const modalContent = document.getElementById("modal-content");
const modalInnerContent = document.getElementById("modalInnerContent");
@ -100,6 +134,9 @@ export class Modal {
modalInnerContent.innerHTML = "";
modalContent.classList.remove("modalBlendOut");
modal.classList.remove("modalBlendOut");
this.modalInClose = false;
}, 800);
this.currentModalId = undefined;
}
}

54
src/web/WebHandler.ts Normal file
View File

@ -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);
}
}
}

111
src/web/WebWebSocketHandler.ts
View File

@ -1,28 +1,117 @@
import {Modal} from "./Modal";
import {WebSocketEvent} from "../WebSocketEvent";
import {WebSocketPayload} from "../WebSocketPayload";
import {ButtonType} from "./ButtonType";
import {iTenderStatus} from "../iTenderStatus";
import {WebHandler} from "./WebHandler";
export class WebWebSocketHandler {
private socket : WebSocket;
private socket: WebSocket;
private static url = (window.location.protocol == "http:" ? "ws://" : "wss://") + window.location.hostname + ":3005";
constructor() {
this.socket = new WebSocket((window.location.protocol == "http:" ? "ws://" : "wss://") + window.location.hostname + ":3005");
this.socket = new WebSocket(WebWebSocketHandler.url);
this.socket.onopen = this.onOpen;
this.socket.onclose = this.onClose;
this.socket.onerror = this.onError;
this.socket.onmessage = this.onMessage;
}
private onOpen( event )
{
Modal.close("start");
private onMessage(msgEvent: MessageEvent) {
console.log("[WS] Incoming message", msgEvent);
let payload = WebSocketPayload.parseFromBase64Json(msgEvent.data);
if (!payload) {
console.log("[WS] Could not parse message: ", msgEvent);
return;
}
console.debug(payload)
console.debug(payload.event);
console.log("[WS] Received " + payload.event + " Event");
switch (payload.event) {
case WebSocketEvent.STATUS: {
let statusElement = document.getElementById("status");
if (statusElement)
statusElement.innerText = payload.data.status;
let status: iTenderStatus = payload.data.status;
switch (status) {
case iTenderStatus.READY: {
Modal.close("start");
Modal.close("refreshing");
break;
}
case iTenderStatus.STARTING: {
let modal = new Modal("start", "Willkommen!", `Einen Augenblick bitte<br>iTender startet...`);
modal.loader = true;
modal.open();
break;
}
case iTenderStatus.REFRESHING: {
let modal = new Modal("refreshing", "Aktualisieren...", `Einen Augenblick bitte<br>iTender aktualisiert die Getränke...`);
modal.loader = true;
modal.open();
break;
}
}
break;
}
case WebSocketEvent.DRINKS: {
WebHandler.onDrinkUpdate(payload);
break;
}
}
}
private onClose( event ) {
console.error("WS Closed!", event );
//openModal("Einen Augenblick...", `Es wurde ein Verbindungsfehler erkannt.\nBitte warten Sie, während der Prozess neu gestartet wird...` );
//window.location.reload();
private onOpen(event) {
console.log("[WS] Connected", event);
let connectionElement = document.getElementById("right");
if (connectionElement)
{
connectionElement.innerText = "Verbunden";
connectionElement.style.color = "green";
}
}
private onError( event ) {
console.error("WS Error", event);
private onClose(event) {
console.error("[WS] Closed!", event);
if (event.wasClean) {
let modal = new Modal("socketClosed", "Sitzung beendet!");
modal.content = `Diese Sitzung wurde beendet, da der iTender nun an einem anderen Gerät bzw. an dem Hauptgerät gesteuert wird.<br><br>`;
modal.addButton(ButtonType.SUCCESS, "Sitzung wiederherstellen", () => {
window.location.reload();
});
modal.open();
} else {
let modal = new Modal("socketClosed", "Verbindungsproblem!");
modal.content = `Die Benutzeroberfläche hat die Verbindung mit dem Gerät verloren.<br>Die Verbindung wird wiederhergestellt...<br>`;
modal.loader = true;
modal.open();
setInterval(() => {
window.location.reload();
}, 5000);
}
let connectionElement = document.getElementById("right");
if (connectionElement)
{
connectionElement.innerText = "Getrennt";
connectionElement.style.color = "red";
}
}
private onError(event) {
console.error("[WS] Error", event);
let connectionElement = document.getElementById("right");
if (connectionElement)
connectionElement.innerText = "Fehler";
//openModal("Einen Augenblick...", `Es wurde ein kritischer Fehler festgestellt.\nBitte warten Sie, während der Prozess neu gestartet wird...` );
//window.location.reload();
}

28
src/web/main.ts
View File

@ -10,12 +10,13 @@ document.addEventListener("DOMContentLoaded", () => {
let modal = new Modal("start", "iTender");
modal.content = "Willkommen";
modal.loader = true;
modal.open();
//modal.open();
connect();
setTimeout( load, 1000);
});
function load()
{
if(!main||!time)
@ -25,35 +26,10 @@ function load()
let currentDate = new Date();
time.innerText = "" + ( currentDate.getHours() < 10 ? "0" + currentDate.getHours() : currentDate.getHours() ) + ":" + ( currentDate.getMinutes() < 10 ? "0" + currentDate.getMinutes() : currentDate.getMinutes() );
}, 1000 );
let maxI = 20;
main.style.gridTemplateRows = `repeat(${Math.round(maxI/3)}, calc(90%/2))`;
for( let i = 0; i<maxI; i++ )
{
let testDrink = document.createElement("div");
testDrink.classList.add("drink");
let img = document.createElement("img");
img.classList.add("thumbnail");
testDrink.append(img);
let name = document.createElement("p");
name.classList.add("name");
testDrink.append(name);
img.alt="Thumbnail";
name.innerText = "Mixery"
main.append(testDrink);
}
}
let wsHandler;
function connect()
{
wsHandler = new WebWebSocketHandler();
}