From 84ef4a0d051d180724ebc38b474aa2a355427607 Mon Sep 17 00:00:00 2001 From: altaf-creator Date: Wed, 3 Dec 2025 17:48:33 +0700 Subject: frontend changes, feedback, credits, new status page --- frontend/index.html | 12 +++++--- frontend/main.js | 74 +++++++++++++++++++++++++--------------------- frontend/start.js | 16 ++++++++++ frontend/start/index.html | 13 ++++++++ frontend/status.js | 7 +++++ frontend/status/index.html | 57 +++++++++++++++++++++++++++++++++-- frontend/style.css | 64 +++++++++++++++++++++++++++++++++++++++ frontend/timer/index.html | 5 ++-- 8 files changed, 205 insertions(+), 43 deletions(-) create mode 100644 frontend/status.js (limited to 'frontend') diff --git a/frontend/index.html b/frontend/index.html index 4004270..fcb0c2f 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -30,14 +30,18 @@
Loading...
+
+ Developed by Athaalaa Altaf Hafidz, a fellow resident • Source Code +
+ ✉️ Bugs? Feedback? diff --git a/frontend/main.js b/frontend/main.js index 7ac8c08..7e1864b 100644 --- a/frontend/main.js +++ b/frontend/main.js @@ -7,17 +7,6 @@ const data = { 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", - }); - return await response.text(); -} - // --- check machine status // returns a 2d array representing machines // []: root array @@ -86,12 +75,12 @@ async function information(urlParam = null) { document.getElementById("logo-id").innerText = "H?"; } - return Promise.resolve(json["block"]); } // ------ page specific ----- +// wait WHY THE FUCK ARE THESE HERE THEN? // ---- machine status page @@ -114,19 +103,25 @@ 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"); - - const machine_txts = [dryer1txt, washer1txt, dryer2txt, washer2txt]; + // less disgusting. + const types = ["dryer", "washer"]; + const ns = [1, 2]; + + const machineImgs = []; + const machineTxts = []; + const machineDetailImgs = []; + 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`)); + } + } const status = await checkMachineStatus(); console.log(status); @@ -134,27 +129,38 @@ 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"; + machineDetailImgs[i].src = "/assets/img/washer_on.png"; + 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"; + machineDetailImgs[i].src = "/assets/img/dryer_on.png"; } 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"; + machineDetailTitles[i].innerHTML = minsLeft + " minutes left" } 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"; + 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"; + machineDetailImgs[i].src = "/assets/img/dryer_clothes.png"; } - machine_txts[i].innerHTML = "Idle" + machineTxts[i].innerHTML = "Idle" + machineDetailTitles[i].innerHTML = "Idle" + 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"; + 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"; + machineDetailImgs[i].src = "/assets/img/dryer_off.png"; } - machine_txts[i].innerHTML = "Idle" + machineTxts[i].innerHTML = "Idle" } } } diff --git a/frontend/start.js b/frontend/start.js index 1bf7571..028e861 100644 --- a/frontend/start.js +++ b/frontend/start.js @@ -29,3 +29,19 @@ async function requestPermission() { startbtn.disabled = false; } } + +(async () => { + const timers = await fetchTimers(); + + const existingPanel = document.getElementById("existing-laundry-panel"); + const existingText = document.getElementById("existing-laundry-text"); + + if (timers.length > 0) { + existingPanel.style.display = 'inherit'; + if (timers.length == 1) { + existingText.innerText = "You currently have another ongoing laundry. You are creating a new timer."; + } else { + existingText.innerText = "You currently have other ongoing laundries. You are creating a new timer."; + } + } +})(); diff --git a/frontend/start/index.html b/frontend/start/index.html index e9f75e9..10b9dc3 100644 --- a/frontend/start/index.html +++ b/frontend/start/index.html @@ -29,6 +29,15 @@ +

Selected Machine

@@ -75,6 +84,10 @@
+
+ Developed by Athaalaa Altaf Hafidz, a fellow resident • Source Code +
+ ✉️ Bugs? Feedback? diff --git a/frontend/status.js b/frontend/status.js new file mode 100644 index 0000000..3922317 --- /dev/null +++ b/frontend/status.js @@ -0,0 +1,7 @@ +startUpdateMachines(); + +(async () => { + const blk = await information(); + blk = blk ? '?' : blk; + document.getElementById("status-title").innerHTML = `Machine Status for H${blk}` +})(); diff --git a/frontend/status/index.html b/frontend/status/index.html index e1e9c82..d0d3185 100644 --- a/frontend/status/index.html +++ b/frontend/status/index.html @@ -29,6 +29,7 @@ H?
+

Machine Status for H?

Dryer 1 @@ -52,9 +53,59 @@
+
+

Dryer 1

+
+
+ +
+
+ Idle + +
+
+
+
+

Washer 1

+
+
+ +
+
+ Idle + +
+
+
+
+

Dryer 2

+
+
+ +
+
+ Idle + +
+
+
+
+

Washer 2

+
+
+ +
+
+ Idle + +
+
+
+
+ Developed by Athaalaa Altaf Hafidz, a fellow resident • Source Code +
+ ✉️ Bugs? Feedback? - + diff --git a/frontend/style.css b/frontend/style.css index 297b0ff..75a6d0f 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -9,6 +9,8 @@ --col-1: #93B6B1; --col-2: #E8DEB6; --col-3: #B3C9AA; + --darkcol-1: #656A85; + --darkcol-2: #798AA2; --col-red-bg: #FFD0D0; --col-red-fg: #A33939; --col-washer: #666a83; @@ -59,12 +61,30 @@ body { flex-direction: row !important; } +.col { + flex-direction: column !important; +} + +.flex-container { + display: flex; + gap: 16px !important; +} + .flex-center-container { display: flex; align-items: center; justify-content: center; } +.flex-center-container-jus { + display: flex; + justify-content: center; +} + +.flex { + flex: 1; +} + .button { width: 100%; height: 48px; @@ -120,6 +140,16 @@ body { color: white; } +.bg-dark { + background-color: var(--darkcol-2); + color: white; +} + +.bg-darker { + background-color: var(--darkcol-1); + color: white; +} + .txtcol-washer { color: var(--col-washer); } @@ -229,6 +259,40 @@ body { background-color: var(--col-1); } +.credits-container { + opacity: .5; + font-size: .9rem; + text-align: center; +} + +a { + color: black; +} + +.feedback { + position: fixed; + bottom: 0; + padding: 12px; + padding-bottom: 12px; + background-color: var(--darkcol-1); + color: white; + border-top-right-radius: 8px; + border-top-left-radius: 8px; + text-decoration: none; + right: 16px; + box-shadow: 0 0 8px #00000033; + transition: .3s padding-bottom, .3s background-color; +} + +.feedback:hover { + padding-bottom: 20px; + background-color: var(--darkcol-2); +} + +.big-text { + font-size: 1.5rem; +} + #logo-id { font-size: 4rem; margin: 0; diff --git a/frontend/timer/index.html b/frontend/timer/index.html index 2d03d70..029d42f 100644 --- a/frontend/timer/index.html +++ b/frontend/timer/index.html @@ -28,9 +28,10 @@
-
- Developed by Athaalaa Altaf Hafidz, H1-09-16 +
+ Developed by Athaalaa Altaf Hafidz, a fellow resident • Source Code
+