From da1563aded7cedf597dbe9dc274f9642dfd64277 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rg=20Henke?= <joerg.henke@uni-greifswald.de>
Date: Wed, 6 Jul 2022 10:21:46 +0200
Subject: [PATCH] time suggestions

---
 src/main/resources/static/js/helper.js        | 30 ++++++++
 src/main/resources/templates/done/item.html   | 76 ++++++++++++++-----
 src/main/resources/templates/layout/main.html |  1 +
 src/main/webapp/pages/done/add.xhtml          |  7 +-
 4 files changed, 90 insertions(+), 24 deletions(-)
 create mode 100644 src/main/resources/static/js/helper.js

diff --git a/src/main/resources/static/js/helper.js b/src/main/resources/static/js/helper.js
new file mode 100644
index 0000000..b307231
--- /dev/null
+++ b/src/main/resources/static/js/helper.js
@@ -0,0 +1,30 @@
+resetValue = function(selector, value) {
+	$(selector).val(value);
+	$(selector).change();
+	return false;
+}
+
+nowPlus = function(summand) {
+	const roundToQuarter = date => new Date(Math.round(date / 9e5) * 9e5);
+	var now = roundToQuarter(new Date());
+	var wanted = new Date(now);
+	wanted.setMinutes(now.getMinutes() + summand);
+	return wanted.toLocaleTimeString('de', {
+		hour12: false,
+		hour: "numeric",
+		minute: "numeric"
+	});
+}
+
+validateTime = function(inputField, okButtonId) {
+	var value = inputField.value;
+	var regexPattern = /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/;
+	var valid = value == "" ? true : regexPattern.test(value);
+	if (valid) {
+		$(inputField).css("background-color", "#cfc");
+		$("[id='" + okButtonId + "']").removeAttr('disabled');
+	} else {
+		$(inputField).css("background-color", "#fcc");
+		$("[id='" + okButtonId + "']").attr('disabled', 'disabled');
+	}
+}
\ No newline at end of file
diff --git a/src/main/resources/templates/done/item.html b/src/main/resources/templates/done/item.html
index ada8682..d58826f 100644
--- a/src/main/resources/templates/done/item.html
+++ b/src/main/resources/templates/done/item.html
@@ -10,7 +10,7 @@
 	<main layout:fragment="content">
 		<div class="container formpane">
 			<form th:action="@{/done/upsert}" th:object="${doneBean}" method="post">
-				<div class="row mb-3">
+				<div class="row mb-3" th:if="*{pk} != null">
 					<label for="inputPk" class="col-sm-2 col-form-label">Inhalt von Eintrag</label>
 					<div class="col-sm-10">
 						<input id="inputPk" type="text" th:field="*{pk}" class="form-control" readonly="readonly" />
@@ -24,44 +24,84 @@
 				</div>
 				<div class="row mb-3">
 					<label for="inputTimefrom" class="col-sm-2 col-form-label">von</label>
-					<div class="col-sm-10">
-						<input id="inputTimefrom" type="text" th:field="*{timeFromString}" class="form-control" />
+					<div class="col-sm-1">
+						<input id="inputTimefrom" type="text" th:field="*{timeFromString}" class="form-control" onchange="validateTime(this, 'okbtn')" />
+					</div>
+					<div class="col-sm-9">
+					  <button type="button" class="btn btn-danger" value="" onclick="resetValue('#inputTimefrom', '')"><span class="fas fa-trash-alt"></span></button>
+				  	<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimefrom', nowPlus(-105))"><script type="text/javascript">document.write(nowPlus(-105))</script></button>
+				  	<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimefrom', nowPlus(-90))"><script type="text/javascript">document.write(nowPlus(-90))</script></button>
+				  	<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimefrom', nowPlus(-75))"><script type="text/javascript">document.write(nowPlus(-75))</script></button>
+				  	<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimefrom', nowPlus(-60))"><script type="text/javascript">document.write(nowPlus(-60))</script></button>
+				  	<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimefrom', nowPlus(-45))"><script type="text/javascript">document.write(nowPlus(-45))</script></button>
+				  	<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimefrom', nowPlus(-30))"><script type="text/javascript">document.write(nowPlus(-30))</script></button>
+				  	<button type="button" class="btn btn-primary" onclick="resetValue('#inputTimefrom', nowPlus(-15))"><script type="text/javascript">document.write(nowPlus(-15))</script></button>
+				  	<button type="button" class="btn btn-primary" onclick="resetValue('#inputTimefrom', nowPlus(0))"><script type="text/javascript">document.write(nowPlus(0))</script></button>
+				  	<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimefrom', nowPlus(15))"><script type="text/javascript">document.write(nowPlus(15))</script></button>
+				  	<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimefrom', nowPlus(30))"><script type="text/javascript">document.write(nowPlus(30))</script></button>
 					</div>
 				</div>
 				<div class="row mb-3">
 					<label for="inputTimeuntil" class="col-sm-2 col-form-label">bis</label>
-					<div class="col-sm-10">
-						<input id="inputTimeuntil" type="text" th:field="*{timeUntilString}" class="form-control" />
+					<div class="col-sm-1">
+						<input id="inputTimeuntil" type="text" th:field="*{timeUntilString}" class="form-control" onchange="validateTime(this, 'okbtn')" />
+					</div>
+					<div class="col-sm-9">
+					  <button type="button" class="btn btn-danger" value="" onclick="resetValue('#inputTimeuntil', '')"><span class="fas fa-trash-alt"></span></button>
+				  	<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimeuntil', nowPlus(-105))"><script type="text/javascript">document.write(nowPlus(-105))</script></button>
+				  	<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimeuntil', nowPlus(-90))"><script type="text/javascript">document.write(nowPlus(-90))</script></button>
+				  	<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimeuntil', nowPlus(-75))"><script type="text/javascript">document.write(nowPlus(-75))</script></button>
+				  	<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimeuntil', nowPlus(-60))"><script type="text/javascript">document.write(nowPlus(-60))</script></button>
+				  	<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimeuntil', nowPlus(-45))"><script type="text/javascript">document.write(nowPlus(-45))</script></button>
+				  	<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimeuntil', nowPlus(-30))"><script type="text/javascript">document.write(nowPlus(-30))</script></button>
+				  	<button type="button" class="btn btn-primary" onclick="resetValue('#inputTimeuntil', nowPlus(-15))"><script type="text/javascript">document.write(nowPlus(-15))</script></button>
+				  	<button type="button" class="btn btn-primary" onclick="resetValue('#inputTimeuntil', nowPlus(0))"><script type="text/javascript">document.write(nowPlus(0))</script></button>
+				  	<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimeuntil', nowPlus(15))"><script type="text/javascript">document.write(nowPlus(15))</script></button>
+				  	<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimeuntil', nowPlus(30))"><script type="text/javascript">document.write(nowPlus(30))</script></button>
 					</div>
 				</div>
 				<div class="row mb-3">
 					<label for="inputProject" class="col-sm-2 col-form-label">Projekt</label>
-					<select id="inputProject" class="form-control select2-single" th:field="*{fkProject}">
-						<option th:each="i : ${projectList}" th:value="${i.pk}" th:text="${i.name}"></option>
-					</select>
+					<div class="col-sm-3">
+						<select id="inputProject" class="form-control select2-single" th:field="*{fkProject}">
+							<option th:each="i : ${projectList}" th:value="${i.pk}" th:text="${i.name}"></option>
+						</select>
+					</div>
+					<div class="col-sm-7">
+						TODO: suggestions
+					</div>
 				</div>
 				<div class="row mb-3">
 					<label for="inputModule" class="col-sm-2 col-form-label">Modul</label>
-					<select id="inputModule" class="form-control select2-single" th:field="*{fkModule}">
-						<option th:each="i : ${moduleList}" th:value="${i.pk}" th:text="${i.name}"></option>
-					</select>
+					<div class="col-sm-3">
+						<select id="inputModule" class="form-control select2-single" th:field="*{fkModule}">
+							<option th:each="i : ${moduleList}" th:value="${i.pk}" th:text="${i.name}"></option>
+						</select>
+					</div>
+					<div class="col-sm-7">TODO: suggestions</div>
 				</div>
 				<div class="row mb-3">
 					<label for="inputJob" class="col-sm-2 col-form-label">Aufgabe</label>
-					<select id="inputJob" class="form-control select2-single" th:field="*{fkJob}">
-						<option th:each="i : ${jobList}" th:value="${i.pk}" th:text="${i.name}"></option>
-					</select>
+					<div class="col-sm-3">
+						<select id="inputJob" class="form-control select2-single" th:field="*{fkJob}">
+							<option th:each="i : ${jobList}" th:value="${i.pk}" th:text="${i.name}"></option>
+						</select>
+					</div>
+					<div class="col-sm-7">TODO: suggestions</div>
 				</div>
 				<div class="row mb-3">
 					<label for="inputBilling" class="col-sm-2 col-form-label">Abrechnung</label>
-					<select id="inputBilling" class="form-control select2-single" th:field="*{fkBilling}">
-						<option th:each="i : ${billingList}" th:value="${i.pk}" th:text="${i.name}"></option>
-					</select>
+					<div class="col-sm-3">
+						<select id="inputBilling" class="form-control select2-single" th:field="*{fkBilling}">
+							<option th:each="i : ${billingList}" th:value="${i.pk}" th:text="${i.name}"></option>
+						</select>
+					</div>
+					<div class="col-sm-7">TODO: suggestions</div>
 				</div>
 				<div class="row mb-3">
 					<div class="col-sm-2">Änderung</div>
 					<div class="col-sm-10">
-						<button type="submit" class="btn btn-success">speichern</button>
+						<button id="okbtn" type="submit" class="btn btn-success">speichern</button>
 						<a class="btn btn-secondary" th:href="@{/done/abort/{day}(day=${doneModel.dayString})}">abbrechen</a>
 						<div class="dropdown float-right" th:if="${doneBean.pk != null}" sec:authorize="hasRole('timetrack_user')">
 							<button class="btn btn-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Eintrag löschen</button>
diff --git a/src/main/resources/templates/layout/main.html b/src/main/resources/templates/layout/main.html
index 3d396aa..823dad9 100644
--- a/src/main/resources/templates/layout/main.html
+++ b/src/main/resources/templates/layout/main.html
@@ -14,6 +14,7 @@
 <script th:src="@{/webjars/bootstrap/5.1.3/js/bootstrap.bundle.min.js}"></script>
 <script th:src="@{/webjars/datatables/1.11.3/js/jquery.dataTables.min.js}"></script>
 <script th:src="@{/webjars/datatables/1.11.3/js/dataTables.bootstrap5.min.js}"></script>
+<script th:src="@{/js/helper.js}"></script>
 
 </head>
 <body>
diff --git a/src/main/webapp/pages/done/add.xhtml b/src/main/webapp/pages/done/add.xhtml
index 5bc2d9e..e7c009a 100644
--- a/src/main/webapp/pages/done/add.xhtml
+++ b/src/main/webapp/pages/done/add.xhtml
@@ -20,12 +20,7 @@
               </f:facet>
             </b:inputText>
             <b:buttonGroup p:class="form-group">
-              <b:button value="--:--" onclick="document.getElementById('input_formular:time_from').value = ''; return false;"
-                look="danger" />
-              <ui:repeat var="time" value="#{doneModel.times}">
-                <b:button onclick="document.getElementById('input_formular:time_from').value = '#{time.value}'; return false;"
-                  value="#{time.value}" look="#{time.look}" />
-              </ui:repeat>
+              <b:button type="button" class="btn btn-danger" value="--:--" onclick="document.getElementById('input_formular:time_from').value = ''; return false;" />
             </b:buttonGroup>
             <b:inputText id="time_until" value="#{doneModel.bean.timeUntilString}">
               <f:facet name="prepend">