frontend changes, feedback, credits, new status page

8 files changed, 205 insertions, 43 deletions

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 @@
 		<div class="section-container no-pad">
 			<span>Loading...</span>
 		</div>
+		<div class="section-container credits-container">
+			<span>Developed by <a href="https://altafcreator.com">Athaalaa Altaf Hafidz</a>, a fellow resident • <a href="https://git.altafcreator.com/victoriahall-laundryweb.git/">Source Code</a></span>
+		</div>
+		<a href="mailto:dev@altafcreator.com" class="feedback"><span>✉️ Bugs? Feedback?</span></a>
 		<script src="/main.js"></script>
 		<script>
 			(async () => {
-				const result = await checkUserStatus();
-				if (result != "you got laundry") {
-					window.location.href = './status/';
-				} else {
+				const timers = await fetchTimers();
+				if (timers.length > 0) {
 					window.location.href = './timer/';
+				} else {
+					window.location.href = './status/';
 				}
 			})();
 		</script>
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 @@
 			<button class="button button-tab bg-3" disabled>Timer</button>
 			<button class="button button-tab bg-3" onclick="window.location.href = '/status/'">Status</button>
 		</div>
+		<div class="section-container row bg-dark" id="existing-laundry-panel" style="display: none;">
+			<div class="flex-center-container">
+				<span class="icon" style="font-weight: 900; font-family: monospace;">i</span>
+			</div>
+			<div class="flex">
+				<span id="existing-laundry-text">You currently have (an)other laundry(ies) ongoing. You are creating a new timer.</span>
+				<button id="notbtn" class="button bg-darker" onclick="window.location.href = '/timer/'">Cancel</button>
+			</div>
+		</div>
 		<div class="section-container no-pad" style="opacity: .5;">
 			<h1>Selected Machine</h1>
 			<div class="machine-container">
@@ -75,6 +84,10 @@
 			</div>
 			<button class="button bg-1" id="startbtn" disabled>Start</button>
 		</div>
+		<div class="section-container credits-container">
+			<span>Developed by <a href="https://altafcreator.com">Athaalaa Altaf Hafidz</a>, a fellow resident • <a href="https://git.altafcreator.com/victoriahall-laundryweb.git/">Source Code</a></span>
+		</div>
+		<a href="mailto:dev@altafcreator.com" class="feedback"><span>✉️ Bugs? Feedback?</span></a>
 		<script src="/main.js"></script>
 		<script src="/start.js"></script>
 	</body>
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 @@
 			<span id="logo-id">H?</span>
 		</div>
 		<div class="section-container no-pad">
+			<h1 id="status-title">Machine Status for H?</h1>
 			<div class="machine-container">
 				<div class="txtcol-dryer" id="dryer1">
 					<span>Dryer 1</span>
@@ -52,9 +53,59 @@
 				</div>
 			</div>
 		</div>
+		<div class="section-container no-pad">
+			<h1>Dryer 1</h1>
+			<div class="flex-container row">
+				<div class="flex-center-container">
+					<img id="detail-d1-img" src="/assets/img/dryer_off.png" alt="" style="width: 100px;">
+				</div>
+				<div class="flex flex-center-container-jus col">
+					<span class="big-text" id="detail-d1-title">Idle</span>
+					<span id="detail-d1-desc"></span>
+				</div>
+			</div>
+		</div>
+		<div class="section-container no-pad">
+			<h1>Washer 1</h1>
+			<div class="flex-container row">
+				<div class="flex-center-container">
+					<img id="detail-d1-img" src="/assets/img/washer_off.png" alt="" style="width: 100px;">
+				</div>
+				<div class="flex flex-center-container-jus col">
+					<span class="big-text" id="detail-d1-title">Idle</span>
+					<span id="detail-d1-desc"></span>
+				</div>
+			</div>
+		</div>
+		<div class="section-container no-pad">
+			<h1>Dryer 2</h1>
+			<div class="flex-container row">
+				<div class="flex-center-container">
+					<img id="detail-d1-img" src="/assets/img/dryer_off.png" alt="" style="width: 100px;">
+				</div>
+				<div class="flex flex-center-container-jus col">
+					<span class="big-text" id="detail-d1-title">Idle</span>
+					<span id="detail-d1-desc"></span>
+				</div>
+			</div>
+		</div>
+		<div class="section-container no-pad">
+			<h1>Washer 2</h1>
+			<div class="flex-container row">
+				<div class="flex-center-container">
+					<img id="detail-d1-img" src="/assets/img/washer_off.png" alt="" style="width: 100px;">
+				</div>
+				<div class="flex flex-center-container-jus col">
+					<span class="big-text" id="detail-d1-title">Idle</span>
+					<span id="detail-d1-desc"></span>
+				</div>
+			</div>
+		</div>
+		<div class="section-container credits-container">
+			<span>Developed by <a href="https://altafcreator.com">Athaalaa Altaf Hafidz</a>, a fellow resident • <a href="https://git.altafcreator.com/victoriahall-laundryweb.git/">Source Code</a></span>
+		</div>
+		<a href="mailto:dev@altafcreator.com" class="feedback"><span>✉️ Bugs? Feedback?</span></a>
 		<script src="/main.js"></script>
-		<script>
-			startUpdateMachines();
-		</script>
+		<script src="/status.js"></script>
 	</body>
 </html>
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 @@
 			<button class="button button-tab bg-3" onclick="window.location.href = '/status/'">Status</button>
 		</div>
 		<div id="timer-container" class="section-container no-pad"></div>
-		<div>
-			<span>Developed by Athaalaa Altaf Hafidz, H1-09-16</span>
+		<div class="section-container credits-container">
+			<span>Developed by <a href="https://altafcreator.com">Athaalaa Altaf Hafidz</a>, a fellow resident • <a href="https://git.altafcreator.com/victoriahall-laundryweb.git/">Source Code</a></span>
 		</div>
+		<a href="mailto:dev@altafcreator.com" class="feedback"><span>✉️ Bugs? Feedback?</span></a>
 		<script src="/main.js"></script>
 		<script>
 			startLoadTimers();