a lot of progress, frontend, a lot of new backend methods

1 files changed, 218 insertions, 17 deletions

diff --git a/frontend/main.js b/frontend/main.js
index 51041fe..4f47473 100644
--- a/frontend/main.js
+++ b/frontend/main.js
@@ -1,23 +1,224 @@
+// --- begin, important constants
+const data = {
+	duration: 1, // will be multiplied by 30
+	block: 1,
+	machine: 2,
+}
+
+const API_URL = "http://localhost:8000"
+
+// --- permission request
 const btn = document.getElementById("notbtn")
-btn.addEventListener("click", () => requestPermission())
-function requestPermission() {
-	console.log("Requesting permission...");
-	OneSignal.Notifications.requestPermission();
+if (btn) {
+	btn.addEventListener("click", () => requestPermission())
+	function requestPermission() {
+		console.log("Requesting permission...");
+		OneSignal.Notifications.requestPermission();
+	}
 }
 
-document.cookie = "session_key=0"
+// --- 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();
+}
 
-const data = {
-	duration: 2,
-	block: 1,
-	machine: 2,
+// --- check machine status
+// returns a 2d array representing machines
+// []: root array
+// 	[]: block
+//		enum: machine status
+async function checkMachineStatus() {
+	const response = await fetch(`${API_URL}/status`, {
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json"
+		},
+		body: JSON.stringify({block: 1}),
+	});
+	return await response.json();
 }
 
-//fetch("http://localhost:8000/start", {
-//	credentials: "include",
-//	method: "POST",
-//	headers: {
-//		"Content-Type": "application/json"
-//	},
-//	body: JSON.stringify(data)
-//});
+// --- timer duration
+const minField = document.getElementById("min-field");
+const decBtn = document.getElementById("decTime");
+function increaseTime() {
+	data.duration += 1;
+	minField.innerText = (30 * data.duration).toString() + " minutes";
+	decBtn.disabled = false;
+}
+
+function decreaseTime() {
+	data.duration -= 1;
+	data.duration = Math.max(data.duration, 1);
+	if (data.duration == 1) {
+		decBtn.disabled = true;
+	}
+	minField.innerText = (30 * data.duration).toString() + " minutes";
+}
+
+// --- starting a timer
+function start() {
+	fetch(`${API_URL}/start`, {
+		credentials: "include",
+		method: "POST",
+		headers: {
+			"Content-Type": "application/json"
+		},
+		body: JSON.stringify(data)
+	}).then(response => response.text())
+	.then(data => {
+		console.log(data);
+		if (data == "all good bro timer started") {
+			window.location.href = "/timer/";
+		}
+	});
+}
+
+
+// ------ page specific -----
+
+// ---- machine status page
+
+// --- machines visual
+async function startUpdateMachines() {
+	updateMachines();
+
+	while (true) {
+		await delay(60 * 1000);
+
+		await updateMachines();
+	}
+}
+
+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];
+
+	const status = await checkMachineStatus();
+	console.log(status);
+
+	for (let i = 0; i < status[0].length; i++) {
+		if (status[0][i] == "RUNNING") {
+			if ((i + 1) % 2 == 0) {
+				machine_imgs[i].src = "/washer_on.png";
+			} else {
+				machine_imgs[i].src = "/dryer_on.png";
+			}
+			const now = Date.now();
+			const start = Date.parse(status[1][i]);
+			machine_txts[i].innerHTML = Math.ceil(((start + (status[2][i] * 60000)) - now) / 60000).toString() + " min(s) left";
+		} else if (status[0][i] == "FINISHED") {
+			if ((i + 1) % 2 == 0) {
+				machine_imgs[i].src = "/washer_clothes.png";
+			} else {
+				machine_imgs[i].src = "/dryer_clothes.png";
+			}
+			machine_txts[i].innerHTML = "Idle"
+		} else {
+			if ((i + 1) % 2 == 0) {
+				machine_imgs[i].src = "/washer_off.png";
+			} else {
+				machine_imgs[i].src = "/dryer_off.png";
+			}
+			machine_txts[i].innerHTML = "Idle"
+		}
+	}
+}
+
+// --- current timers
+async function startLoadTimers() {
+	const timers = await fetchTimers();
+
+	const container = document.getElementById("timer-container")
+
+	const textList = []
+	const progList = []
+	const endTimestamps = []
+	
+	for (let i = 0; i < timers.length; i++) {
+		container.innerHTML += `
+		<div class="section-container no-pad">
+			<h1>Timer #${(i + 1).toString()}</h1>
+			<div class="machine-container">
+				<div class="txtcol-dryer ${timers[i]["machine"] == 1 ? "machine-selected" : ""}">
+					<span>Dryer 1</span>
+					<img src="/dryer_${timers[i]["machine"] == 1 ? "on" : "off"}.png" alt="">
+				</div>
+				<div class="txtcol-washer ${timers[i]["machine"] == 2 ? "machine-selected" : ""}">
+					<span>Washer 1</span>
+					<img src="/washer_${timers[i]["machine"] == 2 ? "on" : "off"}.png" alt="">
+				</div>
+				<div class="txtcol-dryer ${timers[i]["machine"] == 3 ? "machine-selected" : ""}">
+					<span>Dryer 2</span>
+					<img src="/dryer_${timers[i]["machine"] == 3 ? "on" : "off"}.png" alt="">
+				</div>
+				<div class="txtcol-washer ${timers[i]["machine"] == 4 ? "machine-selected" : ""}">
+					<span>Washer 2</span>
+					<img src="/washer_${timers[i]["machine"] == 4 ? "on" : "off"}.png" alt="">
+				</div>
+			</div>
+			<div class="timer-container">
+				<span id="timer-txt-${i}">15:00</span>
+				<div class="prog-container">
+					<div class="prog" id="timer-prog-${i}"></div>
+				</div>
+			</div>
+			<button class="button bg-1" disabled>I have collected my laundry!</button>
+		</div>
+		`
+
+		textList.push(`timer-txt-${i}`);
+		progList.push(`timer-prog-${i}`);
+		endTimestamps.push(Date.parse(timers[i]["start_time"]) + timers[i]["duration"] * 60000);
+	}
+	
+	console.log(textList);
+	console.log(endTimestamps);
+
+	while (true) {
+		for (let i = 0; i < textList.length; i++) {
+			const text = document.getElementById(textList[i]);
+			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 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]);
+			prog.style.width = ((timeRemaining / (timers[i]["duration"] * 60)) * 100).toString() + "%";
+		}
+		await delay(1000);
+	}
+}
+
+async function fetchTimers() {
+	const response = await fetch(`${API_URL}/laundry`, {
+		method: "POST",
+		credentials: "include",
+	});
+	return await response.json();
+}
+
+const delay = (durationMs) => {
+	return new Promise(resolve => setTimeout(resolve, durationMs));
+}