frontend changes, feedback, credits, new status page

1 files changed, 40 insertions, 34 deletions

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"
 		}
 	}
 }