GoTomato/index.html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Pomodoro Timer</title>
	<style>
		button {
			padding: 10px 20px;
			margin: 5px;
			font-size: 16px;
		}

		#timer {
			font-size: 24px;
			margin-top: 20px;
		}

		input {
			width: 75px;
		}

		.settings {
			border: 2px solid black;
			background: #e7e7e7;
			padding: 10px;
			display: inline-block;
		}
	</style>
</head>

<body>
	<h1>Pomodoro Timer</h1>

	<!-- Input fields for custom Pomodoro config and control password -->
	<div class="settings">
		<p>
			<label for="password">Control Password:</label>
			<input type="text" id="password" placeholder="Password" />
		</p>
		<p>
			<label for="focusDuration">Focus Duration (seconds):</label>
			<input type="number" id="foucsDuration" placeholder="Focus 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" />
			<br />
			<button id="saveButton">Save Settings</button>
		</p>
	</div>

	<div id="timer">Connting to server...</div>

	<!-- Buttons to start, pause/resume, and reset the timer -->
	<button id="startButton">Start</button>
	<button id="pauseResumeButton" style="display: none;">Pause</button>
	<button id="resetButton" style="display: none;">Reset</button>

	<script>
		var ws = new WebSocket("ws://localhost:8080");
		var isPaused = false; // Track if the timer is paused

		ws.onopen = function () {
			document.getElementById("timer").innerText = "Connected to server.";
		};

		// Handle incoming messages and update the timer display
		ws.onmessage = function (event) {
			var data = JSON.parse(event.data);
			var mode = data.mode;
			var session = data.session;
			var totalSession = data.settings.sessions;
			var timeLeft = data.time_left;

			document.getElementById("timer").innerText =
				mode + " Session " + session + "/" + totalSession + ": " + formatTime(timeLeft);
		};

		ws.onclose = function () {
			document.getElementById("timer").innerText = "Connection closed.";
		};

		// Format time in MM:SS
		function formatTime(seconds) {
			var minutes = Math.floor(seconds / 60);
			var remainingSeconds = seconds % 60;
			return minutes.toString().padStart(2, '0') + ":" + remainingSeconds.toString().padStart(2, '0');
		}

		// saveButton Click Event
		document.getElementById("saveButton").addEventListener("click", function () {
			// Get the values from the input fields
			var password = document.getElementById("password").value;
			var focus = parseInt(document.getElementById("focusDuration").value);
			var shortBreak = parseInt(document.getElementById("shortBreakDuration").value);
			var longBreak = parseInt(document.getElementById("longBreakDuration").value);
			var sessions = parseInt(document.getElementById("sessions").value);

			// Send the start command with the custom config and password
			ws.send(JSON.stringify({
				command: "updateSettings",
				password: password,
				settings: {
					focus: focus,
					shortBreak: shortBreak,
					longBreak: longBreak,
					sessions: sessions
				}
			}));
		});

		// Start Button Click Event
		document.getElementById("startButton").addEventListener("click", function () {
			var password = document.getElementById("password").value;
			// Send the start command with the custom config and password
			ws.send(JSON.stringify({command: "start", password: password}));

			// 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";

			// Set the pause/resume button to show "Pause" initially
			isPaused = false;
			document.getElementById("pauseResumeButton").innerText = "Pause";
		});

		// 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", 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", password: password}));
				document.getElementById("pauseResumeButton").innerText = "Resume";
				isPaused = true;
			}
		});

		// Reset Button Click Event
		document.getElementById("resetButton").addEventListener("click", function () {
			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";
			document.getElementById("pauseResumeButton").style.display = "none";
			document.getElementById("resetButton").style.display = "none";
		});
	</script>
</body>

</html>
Genesis 2024-10-18 22:39:29 +00:00			`<!DOCTYPE html>`
			`<html lang="en">`

			`<head>`
			`<meta charset="UTF-8">`
			`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
			`<title>Pomodoro Timer</title>`
feat: implement client start/stop commands - add ClientCommand struct to handle incoming commands - introduce timerStopChannel to manage timer stopping - modify startTimer to return a boolean for success/failure - update runPomodoroTimer to handle timer start/stop commands - add start and stop buttons in the index.html for user interaction 🤖 2024-10-19 08:08:54 +00:00			`<style>`
			`button {`
			`padding: 10px 20px;`
			`margin: 5px;`
			`font-size: 16px;`
			`}`

			`#timer {`
			`font-size: 24px;`
			`margin-top: 20px;`
			`}`
feat: update demo web client - add input fields for control password and timer durations - update WebSocket commands to include custom configuration and password 🤖 2024-10-21 16:23:50 +00:00
			`input {`
			`width: 75px;`
			`}`
break: add `updateSettings` command to modify Pomodoro settings - add `updateSettings` command to modify Pomodoro configuration - remove ability to set Pomodoro configuration in `start` command - update demo client - update README 🤖 2024-10-22 06:51:22 +00:00
			`.settings {`
			`border: 2px solid black;`
			`background: #e7e7e7;`
			`padding: 10px;`
			`display: inline-block;`
			`}`
feat: implement client start/stop commands - add ClientCommand struct to handle incoming commands - introduce timerStopChannel to manage timer stopping - modify startTimer to return a boolean for success/failure - update runPomodoroTimer to handle timer start/stop commands - add start and stop buttons in the index.html for user interaction 🤖 2024-10-19 08:08:54 +00:00			`</style>`
Genesis 2024-10-18 22:39:29 +00:00			`</head>`

			`<body>`
			`<h1>Pomodoro Timer</h1>`

feat: update demo web client - add input fields for control password and timer durations - update WebSocket commands to include custom configuration and password 🤖 2024-10-21 16:23:50 +00:00			`<!-- Input fields for custom Pomodoro config and control password -->`
break: add `updateSettings` command to modify Pomodoro settings - add `updateSettings` command to modify Pomodoro configuration - remove ability to set Pomodoro configuration in `start` command - update demo client - update README 🤖 2024-10-22 06:51:22 +00:00			`<div class="settings">`
			`<p>`
			`<label for="password">Control Password:</label>`
			`<input type="text" id="password" placeholder="Password" />`
			`</p>`
			`<p>`
break: update terminology from "Work" to "Focus" - change mode from "Work" to "Focus" in server messages - modify pomodoro configuration to use "Focus" instead of "Work" - adjust default settings to reflect new terminology - ensure all references to work duration are updated to focus duration - update variable names in HTML and JavaScript for clarity 🤖 2024-11-18 07:11:39 +00:00			`<label for="focusDuration">Focus Duration (seconds):</label>`
			`<input type="number" id="foucsDuration" placeholder="Focus time in seconds" value="900" />`
break: add `updateSettings` command to modify Pomodoro settings - add `updateSettings` command to modify Pomodoro configuration - remove ability to set Pomodoro configuration in `start` command - update demo client - update README 🤖 2024-10-22 06:51:22 +00:00			`<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" />`
			`<br />`
			`<button id="saveButton">Save Settings</button>`
			`</p>`
			`</div>`
feat: update demo web client - add input fields for control password and timer durations - update WebSocket commands to include custom configuration and password 🤖 2024-10-21 16:23:50 +00:00
			`<div id="timer">Connting to server...</div>`

			`<!-- Buttons to start, pause/resume, and reset the timer -->`
feat: implement client start/stop commands - add ClientCommand struct to handle incoming commands - introduce timerStopChannel to manage timer stopping - modify startTimer to return a boolean for success/failure - update runPomodoroTimer to handle timer start/stop commands - add start and stop buttons in the index.html for user interaction 🤖 2024-10-19 08:08:54 +00:00			`<button id="startButton">Start</button>`
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 🤖 2024-10-19 16:15:16 +00:00			`<button id="pauseResumeButton" style="display: none;">Pause</button>`
break: change the "stop" command to "reset" - change stop channel to reset channel - create ResetPomodoro function - broadcast reset message to all clients - rename stop button to reset button in index.html 🤖 2024-10-20 08:02:00 +00:00			`<button id="resetButton" style="display: none;">Reset</button>`
feat: implement client start/stop commands - add ClientCommand struct to handle incoming commands - introduce timerStopChannel to manage timer stopping - modify startTimer to return a boolean for success/failure - update runPomodoroTimer to handle timer start/stop commands - add start and stop buttons in the index.html for user interaction 🤖 2024-10-19 08:08:54 +00:00
Genesis 2024-10-18 22:39:29 +00:00			`<script>`
break: remove `/ws` from websocket path 2024-11-18 16:43:49 +00:00			`var ws = new WebSocket("ws://localhost:8080");`
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 🤖 2024-10-19 16:15:16 +00:00			`var isPaused = false; // Track if the timer is paused`
Genesis 2024-10-18 22:39:29 +00:00
feat: implement client start/stop commands - add ClientCommand struct to handle incoming commands - introduce timerStopChannel to manage timer stopping - modify startTimer to return a boolean for success/failure - update runPomodoroTimer to handle timer start/stop commands - add start and stop buttons in the index.html for user interaction 🤖 2024-10-19 08:08:54 +00:00			`ws.onopen = function () {`
			`document.getElementById("timer").innerText = "Connected to server.";`
			`};`

			`// Handle incoming messages and update the timer display`
Genesis 2024-10-18 22:39:29 +00:00			`ws.onmessage = function (event) {`
feat: implement client start/stop commands - add ClientCommand struct to handle incoming commands - introduce timerStopChannel to manage timer stopping - modify startTimer to return a boolean for success/failure - update runPomodoroTimer to handle timer start/stop commands - add start and stop buttons in the index.html for user interaction 🤖 2024-10-19 08:08:54 +00:00			`var data = JSON.parse(event.data);`
			`var mode = data.mode;`
			`var session = data.session;`
break: enhance server message structure and settings - add explicit server messages for start and end - include pomodoro setttings in server messages - update README 🤖 2024-10-22 05:46:46 +00:00			`var totalSession = data.settings.sessions;`
feat: implement client start/stop commands - add ClientCommand struct to handle incoming commands - introduce timerStopChannel to manage timer stopping - modify startTimer to return a boolean for success/failure - update runPomodoroTimer to handle timer start/stop commands - add start and stop buttons in the index.html for user interaction 🤖 2024-10-19 08:08:54 +00:00			`var timeLeft = data.time_left;`

			`document.getElementById("timer").innerText =`
break: update ServerMessage model - rename MaxSession to TotalSession (and JSON struct tags) 🤖 2024-10-20 21:20:23 +00:00			`mode + " Session " + session + "/" + totalSession + ": " + formatTime(timeLeft);`
Genesis 2024-10-18 22:39:29 +00:00			`};`

			`ws.onclose = function () {`
			`document.getElementById("timer").innerText = "Connection closed.";`
			`};`
feat: implement client start/stop commands - add ClientCommand struct to handle incoming commands - introduce timerStopChannel to manage timer stopping - modify startTimer to return a boolean for success/failure - update runPomodoroTimer to handle timer start/stop commands - add start and stop buttons in the index.html for user interaction 🤖 2024-10-19 08:08:54 +00:00
			`// Format time in MM:SS`
			`function formatTime(seconds) {`
			`var minutes = Math.floor(seconds / 60);`
			`var remainingSeconds = seconds % 60;`
			`return minutes.toString().padStart(2, '0') + ":" + remainingSeconds.toString().padStart(2, '0');`
			`}`

break: add `updateSettings` command to modify Pomodoro settings - add `updateSettings` command to modify Pomodoro configuration - remove ability to set Pomodoro configuration in `start` command - update demo client - update README 🤖 2024-10-22 06:51:22 +00:00			`// saveButton Click Event`
			`document.getElementById("saveButton").addEventListener("click", function () {`
feat: update demo web client - add input fields for control password and timer durations - update WebSocket commands to include custom configuration and password 🤖 2024-10-21 16:23:50 +00:00			`// Get the values from the input fields`
			`var password = document.getElementById("password").value;`
break: update terminology from "Work" to "Focus" - change mode from "Work" to "Focus" in server messages - modify pomodoro configuration to use "Focus" instead of "Work" - adjust default settings to reflect new terminology - ensure all references to work duration are updated to focus duration - update variable names in HTML and JavaScript for clarity 🤖 2024-11-18 07:11:39 +00:00			`var focus = parseInt(document.getElementById("focusDuration").value);`
feat: update demo web client - add input fields for control password and timer durations - update WebSocket commands to include custom configuration and password 🤖 2024-10-21 16:23:50 +00:00			`var shortBreak = parseInt(document.getElementById("shortBreakDuration").value);`
			`var longBreak = parseInt(document.getElementById("longBreakDuration").value);`
			`var sessions = parseInt(document.getElementById("sessions").value);`

			`// Send the start command with the custom config and password`
			`ws.send(JSON.stringify({`
break: add `updateSettings` command to modify Pomodoro settings - add `updateSettings` command to modify Pomodoro configuration - remove ability to set Pomodoro configuration in `start` command - update demo client - update README 🤖 2024-10-22 06:51:22 +00:00			`command: "updateSettings",`
feat: update demo web client - add input fields for control password and timer durations - update WebSocket commands to include custom configuration and password 🤖 2024-10-21 16:23:50 +00:00			`password: password,`
break: add `updateSettings` command to modify Pomodoro settings - add `updateSettings` command to modify Pomodoro configuration - remove ability to set Pomodoro configuration in `start` command - update demo client - update README 🤖 2024-10-22 06:51:22 +00:00			`settings: {`
break: update terminology from "Work" to "Focus" - change mode from "Work" to "Focus" in server messages - modify pomodoro configuration to use "Focus" instead of "Work" - adjust default settings to reflect new terminology - ensure all references to work duration are updated to focus duration - update variable names in HTML and JavaScript for clarity 🤖 2024-11-18 07:11:39 +00:00			`focus: focus,`
feat: update demo web client - add input fields for control password and timer durations - update WebSocket commands to include custom configuration and password 🤖 2024-10-21 16:23:50 +00:00			`shortBreak: shortBreak,`
			`longBreak: longBreak,`
			`sessions: sessions`
			`}`
			`}));`
break: add `updateSettings` command to modify Pomodoro settings - add `updateSettings` command to modify Pomodoro configuration - remove ability to set Pomodoro configuration in `start` command - update demo client - update README 🤖 2024-10-22 06:51:22 +00:00			`});`

			`// Start Button Click Event`
			`document.getElementById("startButton").addEventListener("click", function () {`
			`var password = document.getElementById("password").value;`
			`// Send the start command with the custom config and password`
			`ws.send(JSON.stringify({command: "start", password: password}));`
feat: update demo web client - add input fields for control password and timer durations - update WebSocket commands to include custom configuration and password 🤖 2024-10-21 16:23:50 +00:00
			`// Hide start button and show pause/resume and reset buttons`
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 🤖 2024-10-19 16:15:16 +00:00			`document.getElementById("startButton").style.display = "none";`
			`document.getElementById("pauseResumeButton").style.display = "inline-block";`
break: change the "stop" command to "reset" - change stop channel to reset channel - create ResetPomodoro function - broadcast reset message to all clients - rename stop button to reset button in index.html 🤖 2024-10-20 08:02:00 +00:00			`document.getElementById("resetButton").style.display = "inline-block";`
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 🤖 2024-10-19 16:15:16 +00:00
			`// Set the pause/resume button to show "Pause" initially`
			`isPaused = false;`
			`document.getElementById("pauseResumeButton").innerText = "Pause";`
feat: implement client start/stop commands - add ClientCommand struct to handle incoming commands - introduce timerStopChannel to manage timer stopping - modify startTimer to return a boolean for success/failure - update runPomodoroTimer to handle timer start/stop commands - add start and stop buttons in the index.html for user interaction 🤖 2024-10-19 08:08:54 +00:00			`});`

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 🤖 2024-10-19 16:15:16 +00:00			`// Pause/Resume Button Click Event`
			`document.getElementById("pauseResumeButton").addEventListener("click", function () {`
feat: update demo web client - add input fields for control password and timer durations - update WebSocket commands to include custom configuration and password 🤖 2024-10-21 16:23:50 +00:00			`var password = document.getElementById("password").value;`
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 🤖 2024-10-19 16:15:16 +00:00			`if (isPaused) {`
			`// If paused, send resume command and update button text`
feat: update demo web client - add input fields for control password and timer durations - update WebSocket commands to include custom configuration and password 🤖 2024-10-21 16:23:50 +00:00			`ws.send(JSON.stringify({command: "resume", password: password}));`
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 🤖 2024-10-19 16:15:16 +00:00			`document.getElementById("pauseResumeButton").innerText = "Pause";`
			`isPaused = false;`
			`} else {`
			`// If running, send pause command and update button text`
feat: update demo web client - add input fields for control password and timer durations - update WebSocket commands to include custom configuration and password 🤖 2024-10-21 16:23:50 +00:00			`ws.send(JSON.stringify({command: "pause", password: password}));`
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 🤖 2024-10-19 16:15:16 +00:00			`document.getElementById("pauseResumeButton").innerText = "Resume";`
			`isPaused = true;`
			`}`
			`});`

break: change the "stop" command to "reset" - change stop channel to reset channel - create ResetPomodoro function - broadcast reset message to all clients - rename stop button to reset button in index.html 🤖 2024-10-20 08:02:00 +00:00			`// Reset Button Click Event`
			`document.getElementById("resetButton").addEventListener("click", function () {`
feat: update demo web client - add input fields for control password and timer durations - update WebSocket commands to include custom configuration and password 🤖 2024-10-21 16:23:50 +00:00			`var password = document.getElementById("password").value;`
			`ws.send(JSON.stringify({`
			`command: "stop",`
			`password: password`
			`}));`
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 🤖 2024-10-19 16:15:16 +00:00
			`// Reset buttons after stopping`
			`document.getElementById("startButton").style.display = "inline-block";`
			`document.getElementById("pauseResumeButton").style.display = "none";`
break: change the "stop" command to "reset" - change stop channel to reset channel - create ResetPomodoro function - broadcast reset message to all clients - rename stop button to reset button in index.html 🤖 2024-10-20 08:02:00 +00:00			`document.getElementById("resetButton").style.display = "none";`
feat: implement client start/stop commands - add ClientCommand struct to handle incoming commands - introduce timerStopChannel to manage timer stopping - modify startTimer to return a boolean for success/failure - update runPomodoroTimer to handle timer start/stop commands - add start and stop buttons in the index.html for user interaction 🤖 2024-10-19 08:08:54 +00:00			`});`
Genesis 2024-10-18 22:39:29 +00:00			`</script>`
			`</body>`

			`</html>`