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:
parent
c9501c3bbb
commit
bc3a306c00
4 changed files with 94 additions and 22 deletions
39
index.html
39
index.html
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue