pomodoro/GoTomato
3
0
Fork 0
Code Issues Pull requests Releases 15 Activity

feat: update demo web client

Browse source 
- add input fields for control password and timer durations
- update WebSocket commands to include custom configuration and password

🤖
This commit is contained in:
Sebastian Mark 2024-10-21 18:23:50 +02:00
parent c6ce7d46ad
commit b60df1c025
1 changed files with 53 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
index.html
View file

@ -16,14 +16,38 @@
font-size: 24px; font-size: 24px;
margin-top: 20px; margin-top: 20px;
} }
input {
width: 75px;
}
</style> </style>
</head> </head>
<body> <body>
<h1>Pomodoro Timer</h1> <h1>Pomodoro Timer</h1>
<div id="timer">Connecting to server...</div>
<!-- Buttons to start, pause/resume, and stop the timer --> <!-- Input fields for custom Pomodoro config and control password -->
<p>
<label for="password">Control Password:</label>
<input type="text" id="password" placeholder="Password" />
</p>
<p>
<label for="workDuration">Work Duration (seconds):</label>
<input type="number" id="workDuration" placeholder="Work time in seconds" value="900" />
<br />
<label for="shortBreakDuration">Short Break Duration (seconds):</label>
<input type="number" id="shortBreakDuration" placeholder="Short break in seconds" value="300" />
<br />
<label for="longBreakDuration">Long Break Duration (seconds):</label>
<input type="number" id="longBreakDuration" placeholder="Long break in seconds" value="600" />
<br />
<label for="sessions">Number of Sessions:</label>
<input type="number" id="sessions" placeholder="Number of sessions" value="4" />
</p>
<div id="timer">Connting to server...</div>
<!-- Buttons to start, pause/resume, and reset the timer -->
<button id="startButton">Start</button> <button id="startButton">Start</button>
<button id="pauseResumeButton" style="display: none;">Pause</button> <button id="pauseResumeButton" style="display: none;">Pause</button>
<button id="resetButton" style="display: none;">Reset</button> <button id="resetButton" style="display: none;">Reset</button>
@ -61,10 +85,26 @@
// Start Button Click Event // Start Button Click Event
document.getElementById("startButton").addEventListener("click", function () { document.getElementById("startButton").addEventListener("click", function () {
// ws.send(JSON.stringify({command: "start"})); // Get the values from the input fields
ws.send(JSON.stringify({command: "start", config: {work: 10, shortBreak: 5, longBreak: 10, sessions: 2}})); 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("startButton").style.display = "none";
document.getElementById("pauseResumeButton").style.display = "inline-block"; document.getElementById("pauseResumeButton").style.display = "inline-block";
document.getElementById("resetButton").style.display = "inline-block"; document.getElementById("resetButton").style.display = "inline-block";
@ -76,14 +116,15 @@
// Pause/Resume Button Click Event // Pause/Resume Button Click Event
document.getElementById("pauseResumeButton").addEventListener("click", function () { document.getElementById("pauseResumeButton").addEventListener("click", function () {
var password = document.getElementById("password").value;
if (isPaused) { if (isPaused) {
// If paused, send resume command and update button text // 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"; document.getElementById("pauseResumeButton").innerText = "Pause";
isPaused = false; isPaused = false;
} else { } else {
// If running, send pause command and update button text // 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"; document.getElementById("pauseResumeButton").innerText = "Resume";
isPaused = true; isPaused = true;
} }
@ -91,7 +132,11 @@
// Reset Button Click Event // Reset Button Click Event
document.getElementById("resetButton").addEventListener("click", function () { 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 // Reset buttons after stopping
document.getElementById("startButton").style.display = "inline-block"; document.getElementById("startButton").style.display = "inline-block";