finish timer

1 files changed, 21 insertions, 2 deletions

diff --git a/frontend/main.js b/frontend/main.js
index 7ed3b9c..1e1c8f9 100644
--- a/frontend/main.js
+++ b/frontend/main.js
@@ -151,7 +151,7 @@ async function startLoadTimers() {
 	
 	for (let i = 0; i < timers.length; i++) {
 		container.innerHTML += `
-		<div class="section-container no-pad">
+		<div class="section-container no-pad" id="timer-${timers[i]["id"]}">
 			<h1>Timer #${(i + 1).toString()}</h1>
 			<div class="machine-container">
 				<div class="txtcol-dryer ${timers[i]["machine"] == 1 ? "machine-selected" : ""}">
@@ -177,13 +177,15 @@ async function startLoadTimers() {
 					<div class="prog" id="timer-prog-${i}"></div>
 				</div>
 			</div>
-			<button class="button bg-1" disabled>I have collected my laundry!</button>
+			<button class="button bg-1" disabled id="timer-btn-${i}">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);
+
+		document.getElementById(`timer-btn-${i}`).addEventListener("click", finishLaundryTimer, timers[i]["id"]);
 	}
 	
 	console.log(textList);
@@ -203,6 +205,11 @@ async function startLoadTimers() {
 			
 			const prog = document.getElementById(progList[i]);
 			prog.style.width = ((timeRemaining / (timers[i]["duration"] * 60)) * 100).toString() + "%";
+
+			if (timeRemaining <= 0) {
+				alert(`timer ${i} finished`);
+				document.getElementById(`timer-btn-${i}`).disabled = false;
+			}
 		}
 		await delay(1000);
 	}
@@ -216,6 +223,18 @@ async function fetchTimers() {
 	return [response.status, await response.json()];
 }
 
+// --- finish / collect timer / laundry
+async function finishLaundryTimer(timerId) {
+	const response = await fetch(`${API_URL}/finish`, {
+		method: "POST",
+		credentials: "include",
+		body: JSON.stringify({id: timerId}),
+	});
+	if (await response.text() == "laundry finished") {
+		document.getElementById(`timer-${timerId}`).remove();
+	}
+}
+
 const delay = (durationMs) => {
 	return new Promise(resolve => setTimeout(resolve, durationMs));
 }