time suggestions

This commit is contained in:
Jörg Henke
2022-07-06 10:21:46 +02:00
parent 206dc73d0e
commit da1563aded
4 changed files with 90 additions and 24 deletions

View File

@ -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');
}
}

View File

@ -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>
<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>
<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>
<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>
<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>

View File

@ -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>

View File

@ -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">