summaryrefslogtreecommitdiff
path: root/frontend/main.js
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/main.js')
-rw-r--r--frontend/main.js128
1 files changed, 106 insertions, 22 deletions
diff --git a/frontend/main.js b/frontend/main.js
index 04368f9..cfacc86 100644
--- a/frontend/main.js
+++ b/frontend/main.js
@@ -2,11 +2,75 @@
const data = {
duration: 1, // will be multiplied by 30
machine_id: "",
- onesignal_subscription_id: "",
}
const API_URL = "https://backend.laundryweb.altafcreator.com"
+const PUBLIC_VAPID_KEY = "BCvVfKfWBtHKtzdakJfhYy604yTn0_FgZxy2sNtxcQm6YyC3qdzBBuCJLbVcG6pmbz_CZLa0I44Z-b5UVBbegGw"
+
+// --- REGISTER SERVICE WORKERS
+if ('serviceWorker' in navigator) {
+ navigator.serviceWorker.register('/sw.js', {
+ scope: '/',
+ });
+}
+
+// --- 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
@@ -53,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",
@@ -75,7 +142,7 @@ async function information(urlParam = null) {
document.getElementById("logo-id").innerText = "H?";
}
- return Promise.resolve(json["block"]);
+ return Promise.resolve(json);
}
@@ -113,13 +180,13 @@ async function updateMachines() {
const machineDetailTitles = [];
const machineDetailDescs = [];
- for (const type of types) {
- for (const n of ns) {
- machineImgs.push(document.getElementById(`${type}${n}-img`));
- machineTxts.push(document.getElementById(`${type}${n}-span`));
- machineDetailImgs.push(document.getElementById(`detail-${type[0]}${n}-img`));
- machineDetailTitles.push(document.getElementById(`detail-${type[0]}${n}-title`));
- machineDetailDescs.push(document.getElementById(`detail-${type[0]}${n}-desc`));
+ 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`));
}
}
@@ -134,39 +201,55 @@ async function updateMachines() {
if (status[0][i] == "RUNNING") {
if ((i + 1) % 2 == 0) {
machineImgs[i].src = "/assets/img/washer_on.png";
- machineDetailImgs[i].src = "/assets/img/washer_on.png";
- machineDetailDescs[i].innerHTML = "Timing might differ due to heavy load or excess suds."
+ 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 {
machineImgs[i].src = "/assets/img/dryer_on.png";
- machineDetailImgs[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]);
const minsLeft = Math.ceil((end - now) / 60000).toString();
machineTxts[i].innerHTML = minsLeft + " min(s) left";
- machineDetailTitles[i].innerHTML = minsLeft + " minutes 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) {
machineImgs[i].src = "/assets/img/washer_clothes.png";
- machineDetailImgs[i].src = "/assets/img/washer_clothes.png";
+ if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/washer_clothes.png";
} else {
machineImgs[i].src = "/assets/img/dryer_clothes.png";
- machineDetailImgs[i].src = "/assets/img/dryer_clothes.png";
+ if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/dryer_clothes.png";
}
machineTxts[i].innerHTML = "Idle"
- machineDetailTitles[i].innerHTML = "Idle"
- machineDetailDescs[i].innerHTML = "Clothes may not be collected yet."
+ 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) {
machineImgs[i].src = "/assets/img/washer_off.png";
- machineDetailImgs[i].src = "/assets/img/washer_off.png";
+ if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/washer_off.png";
} else {
machineImgs[i].src = "/assets/img/dryer_off.png";
- machineDetailImgs[i].src = "/assets/img/dryer_off.png";
+ if (machineDetailImgs[0]) machineDetailImgs[i].src = "/assets/img/dryer_off.png";
}
+ if (machineDetailImgs[0]) machineDetailTitles[i].innerHTML = "Idle"
+ if (machineDetailImgs[0]) machineDetailDescs[i].innerHTML = ""
machineTxts[i].innerHTML = "Idle"
}
}
+
+ console.log("done");
}
// --- current timers
@@ -183,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 = []
@@ -223,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"]));
}
@@ -236,6 +319,7 @@ async function startLoadTimers() {
}
console.log(textList);
+ console.log(progList);
console.log(endTimestamps);
console.log(startTimestamps);
@@ -245,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 15:24:27 +0000