101 lines
3.7 KiB
TypeScript
101 lines
3.7 KiB
TypeScript
import {WebSocketPayload} from "../WebSocketPayload";
|
|
import {Modal} from "./Modal";
|
|
import {WebSocketEvent} from "../WebSocketEvent";
|
|
import {RequestType} from "../RequestType";
|
|
import {IJob} from "../database/IJob";
|
|
import {WebWebSocketHandler} from "./WebWebSocketHandler";
|
|
|
|
export class Fill {
|
|
static onFillEvent(payload: WebSocketPayload) {
|
|
let modal = new Modal("fill", "Cocktail wird zubereitet");
|
|
let header = document.createElement("h2");
|
|
header.innerText = "";
|
|
|
|
modal.addContent(header);
|
|
|
|
let txt = document.createElement("p");
|
|
txt.innerHTML = `Der Cocktail wird gerade zubereitet`;
|
|
txt.id = "main_fillTxt";
|
|
|
|
let waterAnimDiv = document.createElement("div");
|
|
waterAnimDiv.classList.add("water");
|
|
modal.addContent(txt);
|
|
|
|
modal.addContent(waterAnimDiv);
|
|
|
|
let seconds = document.createElement("span");
|
|
seconds.innerText = "60s";
|
|
seconds.style.marginRight = "3%";
|
|
|
|
modal.addContent(seconds);
|
|
|
|
let ml = document.createElement("span");
|
|
ml.innerText = "200ml";
|
|
modal.addContent(ml);
|
|
|
|
modal.addContent(document.createElement("br"));
|
|
modal.addContent(document.createElement("br"));
|
|
|
|
|
|
let cancelBtn = document.createElement("button");
|
|
cancelBtn.classList.add("btn", "btn-danger");
|
|
cancelBtn.innerText = "Abbrechen";
|
|
cancelBtn.disabled = true;
|
|
setTimeout(() => {
|
|
cancelBtn.disabled = false;
|
|
}, 1000);
|
|
cancelBtn.onclick = () => {
|
|
cancelBtn.disabled = true;
|
|
txt.innerHTML = "Der Vorgang wird abgebrochen...";
|
|
waterAnimDiv.classList.add("waterCancel");
|
|
|
|
WebWebSocketHandler.send(new WebSocketPayload(WebSocketEvent.CANCEL));
|
|
};
|
|
modal.addContent(cancelBtn);
|
|
|
|
function riseSlowlyUp(lastNumber: number, number: number) {
|
|
for (let i = lastNumber; i < number; i++) {
|
|
setTimeout(() => {
|
|
ml.innerText = Math.floor(i) + "ml";
|
|
}, (number - lastNumber / 1000) + i * 4);
|
|
}
|
|
}
|
|
|
|
modal.open().then(() => {
|
|
WebWebSocketHandler.request(RequestType.JOB).then((payload) => {
|
|
let minus = 0;
|
|
let job = payload.data as IJob;
|
|
ml.innerText = Math.floor((job.completeAmount / job.estimatedTime) * minus) + "ml";
|
|
waterAnimDiv.style.setProperty("--fillTime", job.estimatedTime + "s");
|
|
waterAnimDiv.style.backgroundImage = `url("/images/${job.drink._id}.png")`;
|
|
header.innerText = job.drink.name;
|
|
seconds.innerText = Math.floor(job.estimatedTime) + "s";
|
|
|
|
let last = 0;
|
|
let interval = setInterval(() => {
|
|
minus++;
|
|
if (minus + 1 > (job.estimatedTime as number)) {
|
|
clearInterval(interval);
|
|
}
|
|
|
|
seconds.innerText = (Math.floor(job.estimatedTime as number - minus)) + "s";
|
|
let calc = Math.floor((job.completeAmount / job.estimatedTime) * minus);
|
|
riseSlowlyUp(last, calc)
|
|
last = calc;
|
|
}, 1000);
|
|
|
|
|
|
setTimeout(() => {
|
|
txt.innerHTML = "Bitte entnehme den Cocktail";
|
|
modal.title.innerHTML = "Cocktail fertig gestellt"
|
|
|
|
cancelBtn.classList.add("btn-blendout");
|
|
waterAnimDiv.classList.add("waterFinished");
|
|
cancelBtn.onclick = () => {
|
|
modal.close();
|
|
}
|
|
}, job.estimatedTime * 1000);
|
|
});
|
|
});
|
|
}
|
|
} |