Countdown

TaskMaster/src/main/java/com/taskmaster/countdown/CountdownController.java

@@ -0,0 +1,28 @@
+package com.taskmaster.countdown;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.ModelMap;
+import org.springframework.web.bind.annotation.GetMapping;
+
+@Controller
+public class CountdownController
+{
+	@GetMapping("/")
+	public String getCountdownView (ModelMap model, CountdownDto countdownDto)
+	{
+		if (countdownDto.getState() == null)
+		{
+			countdownDto.setState("Work");
+		}
+		model.put("state", "Break");
+		model.put("display", "none");
+		return "countdown";
+	}
+
+	@GetMapping("/config_countdown")
+	public String getConfigCountdownView(ModelMap model, CountdownDto countdownDto)
+	{
+		return "config_countdown";
+	}
+
+}

TaskMaster/src/main/java/com/taskmaster/countdown/CountdownDto.java

@@ -0,0 +1,89 @@
+package com.taskmaster.countdown;
+
+// CountdownDto (Data Transfer Object) modelling all of the data present
+// between the countdown.html and config_countdown.html pages
+public class CountdownDto {
+
+	private int sessionTimeHrs;
+	private int sessionTimeMins;
+	private int sessionTimeSecs;
+	private int numBreaks;
+	private int breakLength; // Note that breakLength is in Minutes
+	private Boolean isPomodoro;
+	private Boolean isShortPeriod;
+	private Boolean isLongPeriod;
+	private String state; // Note this is always either "Work" or "Break"
+
+	public int getSessionTimeHrs() {
+		return sessionTimeHrs;
+	}
+
+	public void setSessionTimeHrs(int sessionTimeHrs) {
+		this.sessionTimeHrs = sessionTimeHrs;
+	}
+
+	public int getSessionTimeMins() {
+		return sessionTimeMins;
+	}
+
+	public void setSessionTimeMins(int sessionTimeMins) {
+		this.sessionTimeMins = sessionTimeMins;
+	}
+
+	public int getSessionTimeSecs() {
+		return sessionTimeSecs;
+	}
+
+	public void setSessionTimeSecs(int sessionTimeSecs) {
+		this.sessionTimeSecs = sessionTimeSecs;
+	}
+
+	public int getNumBreaks() {
+		return numBreaks;
+	}
+
+	public void setNumBreaks(int numBreaks) {
+		this.numBreaks = numBreaks;
+	}
+
+	public int getBreakLength() {
+		return breakLength;
+	}
+
+	public void setBreakLength(int breakLength) {
+		this.breakLength = breakLength;
+	}
+
+	public Boolean getIsPomodoro() {
+		return isPomodoro;
+	}
+
+	public void setIsPomodoro(Boolean isPomodoro) {
+		this.isPomodoro = isPomodoro;
+	}
+
+	public Boolean getIsShortPeriod() {
+		return isShortPeriod;
+	}
+
+	public void setIsShortPeriod(Boolean isShortPeriod) {
+		this.isShortPeriod = isShortPeriod;
+	}
+
+	public Boolean getIsLongPeriod() {
+		return isLongPeriod;
+	}
+
+	public void setIsLongPeriod(Boolean isLongPeriod) {
+		this.isLongPeriod = isLongPeriod;
+	}
+
+	public String getState() {
+		return state;
+	}
+
+	public void setState(String state) {
+		this.state = state;
+	}
+
+}

TaskMaster/src/main/resources/static/js/config_countdown.js

@@ -0,0 +1,97 @@
+// Make all forms readonly
+function setFormsReadOnly()
+{
+	document.getElementById("sessionTimeHrs").setAttribute("readonly", "true")
+	document.getElementById("sessionTimeMins").setAttribute("readonly", "true")
+	document.getElementById("numBreaks").setAttribute("readonly", "true")
+	document.getElementById("breakLength").setAttribute("readonly", "true")
+}
+
+// Set input forms back to enable writing
+function setFormsWrite()
+{
+	document.getElementById("sessionTimeHrs").removeAttribute("readonly")
+	document.getElementById("sessionTimeMins").removeAttribute("readonly")
+	document.getElementById("numBreaks").removeAttribute("readonly")
+	document.getElementById("breakLength").removeAttribute("readonly")
+}
+
+// Set all input forms to 0
+function clearAllInputs()
+{
+	document.getElementById('sessionTimeHrs').value = 0
+	document.getElementById('sessionTimeMins').value = 0
+	document.getElementById('numBreaks').value = 0
+	document.getElementById('breakLength').value = 0
+}
+
+
+// If the Pomodoro checkbox gets clicked
+document.getElementById('isPomodoro').addEventListener('click', function()
+{
+	// If the checkbox is checked, set all forms to readonly
+	if (document.getElementById('isPomodoro').checked == true)
+	{
+		setFormsReadOnly()
+	}
+	// Otherwise enable writing to inputs
+	else
+	{
+		setFormsWrite()
+	}
+
+	// Clear the other preset default checkboxes
+	document.getElementById('isShortPeriod').checked = false
+	document.getElementById('isLongPeriod').checked = false
+
+	clearAllInputs()
+})
+
+// If the ShortPeriod checkbox gets clicked
+document.getElementById('isShortPeriod').addEventListener('click', function()
+{
+	// If the checkbox is checked, set all forms to readonly
+	if (document.getElementById('isShortPeriod').checked == true)
+	{
+		setFormsReadOnly()
+	}
+	// Otherwise enable writing to inputs
+	else
+	{
+		setFormsWrite()
+	}
+
+	// Clear the other preset default checkboxes
+	document.getElementById('isPomodoro').checked = false
+	document.getElementById('isLongPeriod').checked = false
+
+	clearAllInputs()
+})
+
+// If the LongPeriod checkbox gets clicked
+document.getElementById('isLongPeriod').addEventListener('click', function()
+{
+	// If the checkbox is checked, set all forms to readonly
+	if (document.getElementById('isLongPeriod').checked == true)
+	{
+		setFormsReadOnly()
+	}
+	// Otherwise enable writing to inputs
+	else
+	{
+		setFormsWrite()
+	}
+
+	// Clear the other preset default checkboxes
+	document.getElementById('isPomodoro').checked = false
+	document.getElementById('isShortPeriod').checked = false
+
+	clearAllInputs()
+})
+
+// If the submit button gets clicked
+document.getElementById('submit').addEventListener('click', function()
+{
+	sessionStorage.setItem('isPomodoro', document.getElementById('isPomodoro').checked)
+	sessionStorage.setItem('isShortPeriod', document.getElementById('isShortPeriod').checked)
+})

TaskMaster/src/main/resources/static/js/countdown.js

@@ -0,0 +1,36 @@
+// Need to make a function which handles the time
+alert(sessionStorage.getItem('isPomodoro'))
+// If the start button is clicked, hide the startGroup and show the pauseGroup
+document.getElementById('start').addEventListener('click', function()
+{
+	document.getElementById('startGroup').style.display = "none"
+	document.getElementById('pauseGroup').style.display = "contents"
+})
+
+// If the pause button is clicked, hide the pauseGroup and show the resumeGroup
+document.getElementById('pause').addEventListener('click', function()
+{
+	document.getElementById('pauseGroup').style.display = "none"
+	document.getElementById('resumeGroup').style.display = "contents"
+})
+
+// If the cancelP button is clicked, hide the pauseGroup and show the startGroup
+document.getElementById('cancelP').addEventListener('click', function()
+{
+	document.getElementById('pauseGroup').style.display = "none"
+	document.getElementById('startGroup').style.display = "contents"
+})
+
+// If the resume button is clicked, hide the resumeGroup and show the pauseGroup
+document.getElementById('resume').addEventListener('click', function()
+{
+	document.getElementById('resumeGroup').style.display = "none"
+	document.getElementById('pauseGroup').style.display = "contents"
+})
+
+// If the cancelR button is clicked, hide the resumeGroup and show the startGroup
+document.getElementById('cancelR').addEventListener('click', function()
+{
+	document.getElementById('resumeGroup').style.display = "none"
+	document.getElementById('startGroup').style.display = "contents"
+})

TaskMaster/src/main/resources/templates/config_countdown.html

@@ -0,0 +1,52 @@
+<html xmlns:th="http://thymeleaf.org">
+	<head>
+		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"/>
+		<title>TaskMaster/Countdown/Configure</title>
+	</head>
+	<body>
+		<form id="configureCountdownForm" style="margin: 5em 10em 5em 10em;">
+			<div class="form-group">
+			  <div class="mb-3">
+			    <label for="sessionTimeHrs" class="form-label form-control-lg">Total Session Time (Hours)</label>
+			    <input type="number" class="form-control form-control-lg" id="sessionTimeHrs" th:field="${countdownDto.sessionTimeHrs}" min="0">
+			  </div>
+			  <div class="mb-3">
+			    <label for="sessionTimeMins" class="form-label form-control-lg">Total Session Time (Minutes)</label>
+			    <input type="number" class="form-control form-control-lg" id="sessionTimeMins" th:field="${countdownDto.sessionTimeMins}" min="0">
+			  </div>
+			  <div class="mb-3">
+			    <label for="numBreaks" class="form-label form-control-lg">Number of Breaks</label>
+			    <input type="number" class="form-control form-control-lg" id="numBreaks" th:field="${countdownDto.numBreaks}" min="0">
+			  </div>
+			  <div class="mb-3">
+			    <label for="breakLength" class="form-label form-control-lg">Length of Breaks (Minutes)</label>
+			    <input type="number" class="form-control form-control-lg" id="breakLength" th:field="${countdownDto.breakLength}" min="0">
+			  </div>
+			  <div style="margin: 3em 0em 3em 0.5em;">
+				  <div class="mb-3 form-check">
+				    <input type="checkbox" class="form-check-input form-control-lg" id="isPomodoro" th:field="${countdownDto.isPomodoro}">
+				    <label class="form-check-label form-control-lg" for="isPomodoro">Pomodoro Technique (30M intervals)</label>
+				  </div>
+				  <div class="mb-3 form-check">
+				    <input type="checkbox" class="form-check-input form-control-lg" id="isShortPeriod" th:field="${countdownDto.isShortPeriod}">
+				    <label class="form-check-label form-control-lg" for="isShortPeriod">Short Study Period (1H 10M intervals)</label>
+				  </div>
+				  <div class="mb-3 form-check">
+				    <input type="checkbox" class="form-check-input form-control-lg" id="isLongPeriod" th:field="${countdownDto.isLongPeriod}">
+				    <label class="form-check-label form-control-lg" for="isLongPeriod">Long Study Period (3H 30M intervals)</label>
+				  </div>
+			  </div>
+			  <div style="margin: 1em 0em;" class="btn-group">
+				  <a href="/">
+				  	<button type="button" class="btn btn-lg btn-primary" id="submit" style="margin: 0em 1em 0em 0em;">Submit</button>
+				  </a>
+				  <a href="/">
+				  	<button type="button" class="btn btn-lg btn-secondary" style="margin: 0em 1em 0em 0em;">Cancel</button>
+				  </a>
+			  </div>
+		    </div>
+		    <input type="string" style="display: none;" class="form-control form-control-lg" id="state" th:field="${countdownDto.state}">
+		</form>
+		<script type="text/javascript" src="/js/config_countdown.js"></script>
+	<body>
+</html>

TaskMaster/src/main/resources/templates/countdown.html

@@ -0,0 +1,51 @@
+<html xmlns:th="http://thymeleaf.org">
+	<nav class="navbar navbar-light bg-light" style="margin: 1em;">
+         <a class="navbar-brand" href="/" style="margin: auto;">Home</a>
+         <a class="navbar-brand" href="/" style="margin: auto;">Countdown</a>
+         <a class="navbar-brand" href="/" style="margin: auto;">To-Do List</a>
+    </nav>
+	<head>
+		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"/>
+		<title>TaskMaster/Countdown</title>
+	</head>
+	<body>
+		<h2 class="text-center" style="margin: 1em 0em">Welcome To the Countdown Page!</h2>
+		<div style="margin: 12em;">
+		</div>
+
+		<!-- Countdown Timer Code -->
+		<div class="container">
+			<h4 class="row justify-content-center" style="margin: 1em 0em;"> XXH YYM ZZS Remaining </h4>
+			<div class="progress" style="height: 2rem;">
+			  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 47%; height: 2rem;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">47%</div>
+			</div>
+			<h5 class="row justify-content-center" style="margin: 2em 0em 4em 0em;" th:text="${countdownDto.state}"></h5>
+		</div>
+
+		<div style="margin: 20em;"> </div>
+
+		<!-- Button code below the countdown -->
+		<div class="container">
+			<div class="row justify-content-center">
+				<div id="startGroup" class="btn-group" role="group" style="display: contents;">
+				  <button type="button" class="btn btn-secondary" style="margin: 0em 1em 0em 20em" id="cancelS">Cancel</button>
+				  <button type="button" class="btn btn-success" style="margin: 0em 20em 0em 1em" id="start">Start</button>
+				</div>
+				<div id="pauseGroup" class="btn-group" role="group" style="display: none;">
+				  <button type="button" class="btn btn-danger" style="margin: 0em 1em 0em 20em" id="cancelP">Cancel</button>
+				  <button type="button" class="btn btn-warning" style="margin: 0em 20em 0em 1em" id="pause">Pause</button>
+				</div>
+				<div id="resumeGroup" class="btn-group" role="group" style="display: none;">
+				  <button type="button" class="btn btn-danger" style="margin: 0em 1em 0em 20em" id="cancelR">Cancel</button>
+				  <button type="button" class="btn btn-success" style="margin: 0em 20em 0em 1em" id="resume">Resume</button>
+				</div>
+			</div>
+			<div class="row justify-content-center">
+				  <a href="config_countdown">
+				  	<button type="button" class="btn btn-lg btn-primary" style="margin: 1em 0em 0em 29.5em">Configure</button>
+				  </a>
+			</div>
+		</div>
+		<script type="text/javascript" src="/js/countdown.js"></script>
+	<body>
+</html>