feat: add pause and resume functionality

- implement pause and resume commands in the Pomodoro package
- modify timer logic to handle paused state
- adjust client command handling for pause and resume actions
- update HTML to include pause/resume button

🤖
This commit is contained in:
Sebastian Mark 2024-10-19 18:15:16 +02:00
parent c9501c3bbb
commit bc3a306c00
4 changed files with 94 additions and 22 deletions

View file

@ -23,12 +23,14 @@
<h1>Pomodoro Timer</h1>
<div id="timer">Connecting to server...</div>
<!-- Buttons to start and stop the timer -->
<!-- Buttons to start, pause/resume, and stop the timer -->
<button id="startButton">Start</button>
<button id="stopButton">Stop</button>
<button id="pauseResumeButton" style="display: none;">Pause</button>
<button id="stopButton" style="display: none;">Stop</button>
<script>
var ws = new WebSocket("ws://localhost:8080/ws");
var isPaused = false; // Track if the timer is paused
ws.onopen = function () {
document.getElementById("timer").innerText = "Connected to server.";
@ -57,14 +59,43 @@
return minutes.toString().padStart(2, '0') + ":" + remainingSeconds.toString().padStart(2, '0');
}
// Send start command to the server
// Start Button Click Event
document.getElementById("startButton").addEventListener("click", function () {
ws.send(JSON.stringify({command: "start"}));
// Hide start button and show pause/resume and stop buttons
document.getElementById("startButton").style.display = "none";
document.getElementById("pauseResumeButton").style.display = "inline-block";
document.getElementById("stopButton").style.display = "inline-block";
// Set the pause/resume button to show "Pause" initially
isPaused = false;
document.getElementById("pauseResumeButton").innerText = "Pause";
});
// Send stop command to the server
// Pause/Resume Button Click Event
document.getElementById("pauseResumeButton").addEventListener("click", function () {
if (isPaused) {
// If paused, send resume command and update button text
ws.send(JSON.stringify({command: "resume"}));
document.getElementById("pauseResumeButton").innerText = "Pause";
isPaused = false;
} else {
// If running, send pause command and update button text
ws.send(JSON.stringify({command: "pause"}));
document.getElementById("pauseResumeButton").innerText = "Resume";
isPaused = true;
}
});
// Stop Button Click Event
document.getElementById("stopButton").addEventListener("click", function () {
ws.send(JSON.stringify({command: "stop"}));
// Reset buttons after stopping
document.getElementById("startButton").style.display = "inline-block";
document.getElementById("pauseResumeButton").style.display = "none";
document.getElementById("stopButton").style.display = "none";
});
</script>
</body>