From b60df1c025867b9b8df4e2504dec5626cbfe22a3 Mon Sep 17 00:00:00 2001 From: Sebastian Mark Date: Mon, 21 Oct 2024 18:23:50 +0200 Subject: [PATCH] feat: update demo web client MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - add input fields for control password and timer durations - update WebSocket commands to include custom configuration and password 🤖 --- index.html | 61 +++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 53 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 915812a..421cae4 100644 --- a/index.html +++ b/index.html @@ -16,14 +16,38 @@ font-size: 24px; margin-top: 20px; } + + input { + width: 75px; + }

Pomodoro Timer

-
Connecting to server...
- + +

+ + +

+

+ + +
+ + +
+ + +
+ + +

+ +
Connting to server...
+ + @@ -61,10 +85,26 @@ // Start Button Click Event document.getElementById("startButton").addEventListener("click", function () { - // ws.send(JSON.stringify({command: "start"})); - ws.send(JSON.stringify({command: "start", config: {work: 10, shortBreak: 5, longBreak: 10, sessions: 2}})); + // Get the values from the input fields + var password = document.getElementById("password").value; + var work = parseInt(document.getElementById("workDuration").value); + var shortBreak = parseInt(document.getElementById("shortBreakDuration").value); + var longBreak = parseInt(document.getElementById("longBreakDuration").value); + var sessions = parseInt(document.getElementById("sessions").value); - // Hide start button and show pause/resume and stop buttons + // Send the start command with the custom config and password + ws.send(JSON.stringify({ + command: "start", + password: password, + config: { + work: work, + shortBreak: shortBreak, + longBreak: longBreak, + sessions: sessions + } + })); + + // Hide start button and show pause/resume and reset buttons document.getElementById("startButton").style.display = "none"; document.getElementById("pauseResumeButton").style.display = "inline-block"; document.getElementById("resetButton").style.display = "inline-block"; @@ -76,14 +116,15 @@ // Pause/Resume Button Click Event document.getElementById("pauseResumeButton").addEventListener("click", function () { + var password = document.getElementById("password").value; if (isPaused) { // If paused, send resume command and update button text - ws.send(JSON.stringify({command: "resume"})); + ws.send(JSON.stringify({command: "resume", password: password})); document.getElementById("pauseResumeButton").innerText = "Pause"; isPaused = false; } else { // If running, send pause command and update button text - ws.send(JSON.stringify({command: "pause"})); + ws.send(JSON.stringify({command: "pause", password: password})); document.getElementById("pauseResumeButton").innerText = "Resume"; isPaused = true; } @@ -91,7 +132,11 @@ // Reset Button Click Event document.getElementById("resetButton").addEventListener("click", function () { - ws.send(JSON.stringify({command: "stop"})); + var password = document.getElementById("password").value; + ws.send(JSON.stringify({ + command: "stop", + password: password + })); // Reset buttons after stopping document.getElementById("startButton").style.display = "inline-block";