summaryrefslogtreecommitdiff
path: root/frontend/main.js
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/main.js')
-rw-r--r--frontend/main.js220
1 files changed, 176 insertions, 44 deletions
diff --git a/frontend/main.js b/frontend/main.js
index 90c3e5c..cfacc86 100644
--- a/frontend/main.js
+++ b/frontend/main.js
@@ -1,22 +1,76 @@
// --- begin, important constants
const data = {
duration: 1, // will be multiplied by 30
- machine_id: ""
+ machine_id: "",
}
const API_URL = "https://backend.laundryweb.altafcreator.com"
-// --- check user status
-// returns true if there exists a timer, and returns false otherwise.
-// cookie need to be included.
-async function checkUserStatus() {
- const response = await fetch(`${API_URL}/check`, {
- credentials: "include",
- method: "POST",
+const PUBLIC_VAPID_KEY = "BCvVfKfWBtHKtzdakJfhYy604yTn0_FgZxy2sNtxcQm6YyC3qdzBBuCJLbVcG6pmbz_CZLa0I44Z-b5UVBbegGw"
+
+// --- REGISTER SERVICE WORKERS
+if ('serviceWorker' in navigator) {
+ navigator.serviceWorker.register('/sw.js', {
+ scope: '/',
});
- return await response.text();
}
+// --- subscribe
+async function subscribe() {
+ if (!('serviceWorker' in navigator)) {
+ alert("err: no service worker");
+ return;
+ }
+
+ console.log(await Notification.requestPermission());
+
+ const registration = await navigator.serviceWorker.ready;
+
+ try {
+ const subscription = await registration.pushManager.subscribe({
+ userVisibleOnly: true,
+ applicationServerKey: urlBase64ToUint8Array(PUBLIC_VAPID_KEY),
+ });
+
+ console.log(subscription);
+
+ console.log("sw regis pass, write to db");
+
+ const db_reply = await fetch(`${API_URL}/notifsubscribe`, {
+ method: 'POST',
+ credentials: "include",
+ body: JSON.stringify(subscription),
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
+
+ console.log(db_reply)
+
+ return db_reply.ok;
+ } catch (e) {
+ console.log("ERR in regis, ", e);
+ return false;
+ }
+
+}
+
+/// copied from somewhere
+const urlBase64ToUint8Array = (base64String) => {
+ const padding = '='.repeat((4 - base64String.length % 4) % 4);
+ const base64 = (base64String + padding)
+ .replace(/\-/g, '+')
+ .replace(/_/g, '/');
+
+ const rawData = window.atob(base64);
+ const outputArray = new Uint8Array(rawData.length);
+
+ for (let i = 0; i < rawData.length; ++i) {
+ outputArray[i] = rawData.charCodeAt(i);
+ }
+ return outputArray;
+};
+
// --- check machine status
// returns a 2d array representing machines
// []: root array
@@ -25,10 +79,7 @@ async function checkUserStatus() {
async function checkMachineStatus() {
const response = await fetch(`${API_URL}/status`, {
method: "POST",
- headers: {
- "Content-Type": "application/json"
- },
- body: JSON.stringify({block: 1}),
+ credentials: "include",
});
return await response.json();
}
@@ -52,7 +103,7 @@ function decreaseTime() {
}
// --- starting a timer
-function start() {
+async function start() {
fetch(`${API_URL}/start`, {
credentials: "include",
method: "POST",
@@ -66,39 +117,82 @@ function start() {
if (data == "all good bro timer started") {
window.location.href = "/timer/";
}
+ cookieStore.delete("last_used_url");
});
}
+// --- information loading + cookie setting (from server)
+async function information(urlParam = null) {
+ const urlCookie = await cookieStore.get("last_used_url");
+
+ const response = await fetch(`${API_URL}/info`, {
+ credentials: "include",
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json"
+ },
+ body: JSON.stringify({ "machine_id": urlParam ? urlParam : "" }),
+ });
+
+ const json = await response.json();
+
+ if (json["block"]) {
+ document.getElementById("logo-id").innerText = "H" + json["block"];
+ } else {
+ document.getElementById("logo-id").innerText = "H?";
+ }
+
+ return Promise.resolve(json);
+}
+
// ------ page specific -----
+// wait WHY THE FUCK ARE THESE HERE THEN?
// ---- machine status page
+const STATUS_INTERVAL = 30
+
// --- machines visual
async function startUpdateMachines() {
+ const urlParams = new URLSearchParams(window.location.search);
+
+ await information(urlParams.get("machine"));
+ console.log("info done")
+
updateMachines();
while (true) {
- await delay(30 * 1000);
+ await delay(STATUS_INTERVAL * 1000);
await updateMachines();
}
}
async function updateMachines() {
- const dryer1 = document.getElementById("dryer1-img");
- const washer1 = document.getElementById("washer1-img");
- const dryer2 = document.getElementById("dryer2-img");
- const washer2 = document.getElementById("washer2-img");
-
- const machine_imgs = [dryer1, washer1, dryer2, washer2];
+ // less disgusting.
+ const types = ["dryer", "washer"];
+ const ns = [1, 2];
+
+ const machineImgs = [];
+ const machineTxts = [];
+ const machineDetailImgs = [];
+ const machineDetailTitles = [];
+ const machineDetailDescs = [];
- const dryer1txt = document.getElementById("dryer1-span");
- const washer1txt = document.getElementById("washer1-span");
- const dryer2txt = document.getElementById("dryer2-span");
- const washer2txt = document.getElementById("washer2-span");
+ for (const n of ns) {
+ for (const t of types) {
+ machineImgs.push(document.getElementById(`${t}${n}-img`));
+ machineTxts.push(document.getElementById(`${t}${n}-span`));
+ machineDetailImgs.push(document.getElementById(`detail-${t[0]}${n}-img`));
+ machineDetailTitles.push(document.getElementById(`detail-${t[0]}${n}-title`));
+ machineDetailDescs.push(document.getElementById(`detail-${t[0]}${n}-desc`));
+ }
+ }
- const machine_txts = [dryer1txt, washer1txt, dryer2txt, washer2txt];
+ console.log(machineDetailImgs);
+ console.log(machineDetailTitles);
+ console.log(machineDetailDescs);
const status = await checkMachineStatus();
console.log(status);
@@ -106,33 +200,62 @@ async function updateMachines() {
for (let i = 0; i < status[0].length; i++) {
if (status[0][i] == "RUNNING") {
if ((i + 1) % 2 == 0) {
- machine_imgs[i].src = "/washer_on.png";
+ machineImgs[i].src = "/assets/img/washer_on.png";
+ if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/washer_on.png";
+ if (machineDetailImgs[0]) machineDetailDescs[i].innerHTML = "Timing might differ due to heavy load or excess suds."
} else {
- machine_imgs[i].src = "/dryer_on.png";
+ machineImgs[i].src = "/assets/img/dryer_on.png";
+ if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/dryer_on.png";
+ if (machineDetailImgs[0]) machineDetailTitles[i].innerHTML = "Idle"
}
const now = Date.now();
- const start = Date.parse(status[1][i]);
- machine_txts[i].innerHTML = Math.ceil(((start + (status[2][i] * 60000)) - now) / 60000).toString() + " min(s) left";
+ const end = Date.parse(status[2][i]);
+ const minsLeft = Math.ceil((end - now) / 60000).toString();
+ machineTxts[i].innerHTML = minsLeft + " min(s) left";
+ if (machineDetailImgs[0]) machineDetailTitles[i].innerHTML = minsLeft + " minute(s) left"
+ } else if (status[0][i] == "OUTOFSERVICE") {
+ if ((i + 1) % 2 == 0) {
+ machineImgs[i].src = "/assets/img/washer_down.png";
+ if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/washer_down.png";
+ } else {
+ machineImgs[i].src = "/assets/img/dryer_down.png";
+ if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/dryer_down.png";
+ }
+ machineTxts[i].innerHTML = "Down"
+ if (machineDetailImgs[0]) machineDetailTitles[i].innerHTML = "Out of Service"
+ if (machineDetailImgs[0]) machineDetailDescs[i].innerHTML = "This machine is currently out of service, and is unavailable to use."
} else if (status[0][i] == "FINISHED") {
if ((i + 1) % 2 == 0) {
- machine_imgs[i].src = "/washer_clothes.png";
+ machineImgs[i].src = "/assets/img/washer_clothes.png";
+ if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/washer_clothes.png";
} else {
- machine_imgs[i].src = "/dryer_clothes.png";
+ machineImgs[i].src = "/assets/img/dryer_clothes.png";
+ if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/dryer_clothes.png";
}
- machine_txts[i].innerHTML = "Idle"
+ machineTxts[i].innerHTML = "Idle"
+ if (machineDetailImgs[0]) machineDetailTitles[i].innerHTML = "Idle"
+ if (machineDetailImgs[0]) machineDetailDescs[i].innerHTML = "Clothes may not be collected yet."
} else {
if ((i + 1) % 2 == 0) {
- machine_imgs[i].src = "/washer_off.png";
+ machineImgs[i].src = "/assets/img/washer_off.png";
+ if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/washer_off.png";
} else {
- machine_imgs[i].src = "/dryer_off.png";
+ machineImgs[i].src = "/assets/img/dryer_off.png";
+ if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/dryer_off.png";
}
- machine_txts[i].innerHTML = "Idle"
+ if (machineDetailImgs[0]) machineDetailTitles[i].innerHTML = "Idle"
+ if (machineDetailImgs[0]) machineDetailDescs[i].innerHTML = ""
+ machineTxts[i].innerHTML = "Idle"
}
}
+
+ console.log("done");
}
// --- current timers
async function startLoadTimers() {
+ information();
+
const timersData = await fetchTimers();
if (timersData[0] != 200) {
@@ -143,9 +266,11 @@ async function startLoadTimers() {
const timers = timersData[1];
const container = document.getElementById("timer-container")
+ if (timers.length > 0) container.innerHTML = '';
const textList = []
const progList = []
+ const startTimestamps = []
const endTimestamps = []
for (let i = 0; i < timers.length; i++) {
@@ -155,19 +280,19 @@ async function startLoadTimers() {
<div class="machine-container">
<div class="txtcol-dryer ${timers[i]["machine"] == 1 ? "machine-selected" : ""}">
<span>Dryer 1</span>
- <img src="/dryer_${timers[i]["machine"] == 1 ? "on" : "off"}.png" alt="">
+ <img src="/assets/img/dryer_${timers[i]["machine"] == 1 ? "on" : "off"}.png" alt="">
</div>
<div class="txtcol-washer ${timers[i]["machine"] == 2 ? "machine-selected" : ""}">
<span>Washer 1</span>
- <img src="/washer_${timers[i]["machine"] == 2 ? "on" : "off"}.png" alt="">
+ <img src="/assets/img/washer_${timers[i]["machine"] == 2 ? "on" : "off"}.png" alt="">
</div>
<div class="txtcol-dryer ${timers[i]["machine"] == 3 ? "machine-selected" : ""}">
<span>Dryer 2</span>
- <img src="/dryer_${timers[i]["machine"] == 3 ? "on" : "off"}.png" alt="">
+ <img src="/assets/img/dryer_${timers[i]["machine"] == 3 ? "on" : "off"}.png" alt="">
</div>
<div class="txtcol-washer ${timers[i]["machine"] == 4 ? "machine-selected" : ""}">
<span>Washer 2</span>
- <img src="/washer_${timers[i]["machine"] == 4 ? "on" : "off"}.png" alt="">
+ <img src="/assets/img/washer_${timers[i]["machine"] == 4 ? "on" : "off"}.png" alt="">
</div>
</div>
<div class="timer-container">
@@ -182,15 +307,21 @@ async function startLoadTimers() {
textList.push(`timer-txt-${i}`);
progList.push(`timer-prog-${i}`);
- endTimestamps.push(Date.parse(timers[i]["start_time"]) + timers[i]["duration"] * 60000);
+ endTimestamps.push(Date.parse(timers[i]["end_time"]));
+ startTimestamps.push(Date.parse(timers[i]["start_time"]));
+ }
+ for (let i = 0; i < timers.length; i++) { // html rebuilds everytime innerHTML is modified
document.getElementById(`timer-btn-${i}`).addEventListener("click", function () {
finishLaundryTimer(timers[i]["id"]);
});
+ console.log("added!");
}
console.log(textList);
+ console.log(progList);
console.log(endTimestamps);
+ console.log(startTimestamps);
while (true) {
for (let i = 0; i < textList.length; i++) {
@@ -198,14 +329,15 @@ async function startLoadTimers() {
text.innerText = "";
const timeRemaining = Math.max(Math.round((endTimestamps[i] - Date.now()) / 1000), 0);
const hours = Math.floor(timeRemaining / 3600);
- const minutes = Math.floor(timeRemaining / 60);
+ const minutes = Math.floor(timeRemaining / 60) % 60;
const seconds = timeRemaining % 60;
if (hours > 0) text.innerText += hours.toString().padStart(2, '0') + ':';
text.innerText += minutes.toString().padStart(2, '0') + ':';
text.innerText += seconds.toString().padStart(2, '0');
const prog = document.getElementById(progList[i]);
- prog.style.width = ((timeRemaining / (timers[i]["duration"] * 60)) * 100).toString() + "%";
+ const totalTime = endTimestamps[0] - startTimestamps[0];
+ prog.style.width = ((timeRemaining / (totalTime / 1000)) * 100).toString() + "%";
if (timeRemaining <= 0) {
document.getElementById(`timer-btn-${i}`).disabled = false;
@@ -235,7 +367,7 @@ async function finishLaundryTimer(timerId) {
body: JSON.stringify({id: timerId}),
});
if (await response.text() == "laundry finished") {
- document.getElementById(`timer-${timerId}`).remove();
+ window.location.reload();
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-02 01:30:23 +0000