summaryrefslogtreecommitdiff
path: root/frontend/main.js
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/main.js')
-rw-r--r--frontend/main.js164
1 files changed, 129 insertions, 35 deletions
diff --git a/frontend/main.js b/frontend/main.js
index 7ac8c08..cfacc86 100644
--- a/frontend/main.js
+++ b/frontend/main.js
@@ -2,22 +2,75 @@
const data = {
duration: 1, // will be multiplied by 30
machine_id: "",
- onesignal_subscription_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
@@ -64,11 +117,14 @@ async 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",
@@ -86,12 +142,12 @@ async function information(urlParam = null) {
document.getElementById("logo-id").innerText = "H?";
}
-
- return Promise.resolve(json["block"]);
+ return Promise.resolve(json);
}
// ------ page specific -----
+// wait WHY THE FUCK ARE THESE HERE THEN?
// ---- machine status page
@@ -114,19 +170,29 @@ async function startUpdateMachines() {
}
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];
-
- const dryer1txt = document.getElementById("dryer1-span");
- const washer1txt = document.getElementById("washer1-span");
- const dryer2txt = document.getElementById("dryer2-span");
- const washer2txt = document.getElementById("washer2-span");
+ // less disgusting.
+ const types = ["dryer", "washer"];
+ const ns = [1, 2];
+
+ const machineImgs = [];
+ const machineTxts = [];
+ const machineDetailImgs = [];
+ const machineDetailTitles = [];
+ const machineDetailDescs = [];
+
+ 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);
@@ -134,29 +200,56 @@ 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 = "/assets/img/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 = "/assets/img/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 end = Date.parse(status[2][i]);
- machine_txts[i].innerHTML = Math.ceil((end - now) / 60000).toString() + " min(s) left";
+ 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 = "/assets/img/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 = "/assets/img/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 = "/assets/img/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 = "/assets/img/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
@@ -173,6 +266,7 @@ async function startLoadTimers() {
const timers = timersData[1];
const container = document.getElementById("timer-container")
+ if (timers.length > 0) container.innerHTML = '';
const textList = []
const progList = []
@@ -213,7 +307,6 @@ async function startLoadTimers() {
textList.push(`timer-txt-${i}`);
progList.push(`timer-prog-${i}`);
- console.log()
endTimestamps.push(Date.parse(timers[i]["end_time"]));
startTimestamps.push(Date.parse(timers[i]["start_time"]));
}
@@ -226,6 +319,7 @@ async function startLoadTimers() {
}
console.log(textList);
+ console.log(progList);
console.log(endTimestamps);
console.log(startTimestamps);
@@ -235,14 +329,14 @@ 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]);
- const totalTime = endTimestamps - startTimestamps;
+ const totalTime = endTimestamps[0] - startTimestamps[0];
prog.style.width = ((timeRemaining / (totalTime / 1000)) * 100).toString() + "%";
if (timeRemaining <= 0) {
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-02 04:02:44 +0000