integrated module confirmation
This commit is contained in:
Jottyfan
@ -87,6 +87,49 @@ body {
|
||||
color: darkcyan;
|
||||
}
|
||||
|
||||
.badgetodo {
|
||||
border-radius: 8px;
|
||||
border: 1px solid black;
|
||||
color: white;
|
||||
font-weight: bolder;
|
||||
background-image: linear-gradient(to right bottom, rgb(153, 193, 241), rgb(26, 95, 180));
|
||||
padding: 2px 4px 2px 4px;
|
||||
margin: 0px 2px 0px 2px;
|
||||
}
|
||||
|
||||
.badgewarn {
|
||||
border-radius: 8px;
|
||||
border: 1px solid black;
|
||||
color: white;
|
||||
font-weight: bolder;
|
||||
background-image: linear-gradient(to right bottom, #fa0, #a70);
|
||||
padding: 2px 4px 2px 4px;
|
||||
margin: 0px 2px 0px 2px;
|
||||
}
|
||||
|
||||
.badgeinfo {
|
||||
border-radius: 8px;
|
||||
border: 1px solid black;
|
||||
color: white;
|
||||
font-weight: bolder;
|
||||
background-image: linear-gradient(to right bottom, rgb(143, 240, 164), rgb(38, 162, 105));
|
||||
padding: 2px 4px 2px 4px;
|
||||
margin: 0px 2px 0px 2px;
|
||||
}
|
||||
|
||||
.dist8 {
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.locked {
|
||||
background-color: rgba(255, 255, 255, 0.2) !important;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.mytoggle_collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
169
src/main/resources/templates/confirmation/confirmation.html
Normal file
169
src/main/resources/templates/confirmation/confirmation.html
Normal file
@ -0,0 +1,169 @@
|
||||
<!DOCTYPE html>
|
||||
<html th:replace="~{template :: layout(~{::title}, ~{::libs}, ~{::header}, ~{::content})}" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
|
||||
<head>
|
||||
<title>Camp Organizer Confirmation</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<libs></libs>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a th:href="@{/}" class="btn btn-secondary btn-icon-silent" title="zur Hauptseite"><i class="fas fa-home"></i></a>
|
||||
<a th:href="@{/confirmation}" class="btn btn-secondary btn-icon-silent" title="aktualisieren"><i class="fas fa-sync"></i></a>
|
||||
</header>
|
||||
<content>
|
||||
<div class="mainpage">
|
||||
<div class="accordion" id="mainacc" sec:authorize="hasRole('registrator')">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="untouchedpanel">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#untoucheddiv" aria-expanded="true" aria-control="untoucheddiv">unbearbeitete Anmeldungen
|
||||
</button>
|
||||
</h2>
|
||||
<div id="untoucheddiv" class="accordion-collapse collapse show dist8" aria-labelled="untouchedpanel" data-bs-parent="#mainacc">
|
||||
<table id="untouched">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Freizeit</th>
|
||||
<th>Name</th>
|
||||
<th>Rolle</th>
|
||||
<th>Anmeldedatum</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr th:each="u : ${untouched}">
|
||||
<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${u.camp} + ' ' + ${#temporals.format(u.date, 'yyyy')}"></a></td>
|
||||
<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${u.fullname}"></a></td>
|
||||
<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${u.rolename}"></a></td>
|
||||
<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${#temporals.format(u.registered, 'dd.MM.yyyy')}"></a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$("#untouched").DataTable({
|
||||
language : locale_de,
|
||||
pageLength : 5,
|
||||
lengthMenu : [ [ 5, 25, 50, -1 ], [ 5, 25, 50, "Alle" ] ]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="approvedpanel">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#approveddiv" aria-expanded="true" aria-control="approveddiv">kürzlich bestätigte
|
||||
Anmeldungen</button>
|
||||
</h2>
|
||||
<div id="approveddiv" class="accordion-collapse collapse dist8" aria-labelled="approvedpanel" data-bs-parent="#mainacc">
|
||||
<table id="approved">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Freizeit</th>
|
||||
<th>Name</th>
|
||||
<th>Rolle</th>
|
||||
<th>Anmeldedatum</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr th:each="u : ${approved}">
|
||||
<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${u.camp} + ' ' + ${#temporals.format(u.date, 'yyyy')}"></a></td>
|
||||
<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${u.fullname}"></a></td>
|
||||
<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${u.rolename}"></a></td>
|
||||
<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${#temporals.format(u.registered, 'dd.MM.yyyy')}"></a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$("#approved").DataTable({
|
||||
language : locale_de,
|
||||
pageLength : 5,
|
||||
lengthMenu : [ [ 5, 25, 50, -1 ], [ 5, 25, 50, "Alle" ] ]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="rejectedpanel">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#rejecteddiv" aria-expanded="true" aria-control="rejecteddiv">kürzlich abgelehnte
|
||||
Anmeldungen</button>
|
||||
</h2>
|
||||
<div id="rejecteddiv" class="accordion-collapse collapse dist8" aria-labelled="rejectedpanel" data-bs-parent="#mainacc">
|
||||
<table id="rejected">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Freizeit</th>
|
||||
<th>Name</th>
|
||||
<th>Rolle</th>
|
||||
<th>Anmeldedatum</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr th:each="u : ${rejected}">
|
||||
<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${u.camp} + ' ' + ${#temporals.format(u.date, 'yyyy')}"></a></td>
|
||||
<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${u.fullname}"></a></td>
|
||||
<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${u.rolename}"></a></td>
|
||||
<td><a th:href="@{'/confirmation/person/' + ${u.pkPerson}}" th:text="${#temporals.format(u.registered, 'dd.MM.yyyy')}"></a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$("#rejected").DataTable({
|
||||
language : locale_de,
|
||||
pageLength : 5,
|
||||
lengthMenu : [ [ 5, 25, 50, -1 ], [ 5, 25, 50, "Alle" ] ]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="overviewpanel">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#overviewdiv" aria-expanded="true" aria-control="overviewdiv">Freizeitenübersicht</button>
|
||||
</h2>
|
||||
<div id="overviewdiv" class="accordion-collapse collapse dist8" aria-labelled="overviewpanel" data-bs-parent="#mainacc">
|
||||
<table id="campoverview">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Freizeit</th>
|
||||
<th style="min-width: 64px">u/a/b</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr th:each="o : ${campoverview}">
|
||||
<td th:text="${o.camp} + ' ' + ${#temporals.format(o.date, 'yyyy')}"></td>
|
||||
<td><span th:text="${o.untouched}" class="badgetodo"></span> / <span th:text="${o.rejected}" class="badgewarn"></span> / <span th:text="${o.approved}" class="badgeinfo"></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td>Zusammenfassung</td>
|
||||
<td><span th:text="${campoverviewsummary.untouched}" class="badgetodo"></span> / <span th:text="${campoverviewsummary.rejected}" class="badgewarn"></span> / <span
|
||||
th:text="${campoverviewsummary.approved}" class="badgeinfo"></span></td>
|
||||
</tfoot>
|
||||
</table>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$("#campoverview").DataTable({
|
||||
language : locale_de,
|
||||
pageLength : 5,
|
||||
lengthMenu : [ [ 5, 25, 50, -1 ], [ 5, 25, 50, "Alle" ] ]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<span>Legende:</span><span class="badgetodo">unbearbeitet</span><span class="badgewarn">abgelehnt</span><span class="badgeinfo">bestätigt</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="searchpanel">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#searchdiv" aria-expanded="true" aria-control="searchdiv">Suchmaske</button>
|
||||
</h2>
|
||||
<div id="searchdiv" class="accordion-collapse collapse dist8" aria-labelled="searchpanel" data-bs-parent="#mainacc">TODO: add an ajax based search field for persons to directly edit
|
||||
them</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</content>
|
||||
</body>
|
||||
</html>
|
||||
135
src/main/resources/templates/confirmation/person.html
Normal file
135
src/main/resources/templates/confirmation/person.html
Normal file
@ -0,0 +1,135 @@
|
||||
<!DOCTYPE html>
|
||||
<html th:replace="~{template :: layout(~{::title}, ~{::libs}, ~{::header}, ~{::content})}" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
|
||||
<head>
|
||||
<title>Camp Organizer Confirmation</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<libs></libs>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a th:href="@{/}" class="btn btn-secondary btn-icon-silent" title="zur Hauptseite"><i class="fas fa-home"></i></a>
|
||||
<a th:href="@{/confirmation}" class="btn btn-secondary btn-icon-silent" title="Anmeldungen"><i class="fas fa-user-check"></i></a>
|
||||
<a th:href="@{/confirmation/person/{pk}(pk=${person.pk})}" class="btn btn-secondary btn-icon-silent" title="aktualisieren" th:if="${person != null}"><i class="fas fa-sync"></i></a>
|
||||
</header>
|
||||
<content>
|
||||
<div class="mainpage">
|
||||
<div class="container" style="max-width: 100%" sec:authorize="hasRole('registrator')">
|
||||
<form action="#" th:action="@{/confirmation/person/update}" th:object="${person}" method="post" th:if="${person != null}">
|
||||
<div class="row mb-2">
|
||||
<label for="outputPk" class="col-sm-2 col-form-label">ID</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" th:field="*{pk}" class="outputPk form-control locked"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<label for="inputForename" class="col-sm-2 col-form-label">Vorname</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" th:field="*{forename}" class="inputForename form-control" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<label for="inputSurname" class="col-sm-2 col-form-label">Nachname</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" th:field="*{surname}" class="inputSurname form-control" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<label for="inputStreet" class="col-sm-2 col-form-label">Straße</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" th:field="*{street}" class="inputStreet form-control" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<label for="inputZip" class="col-sm-2 col-form-label">PLZ</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" th:field="*{zip}" class="inputZip form-control" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<label for="inputCity" class="col-sm-2 col-form-label">Ort</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" th:field="*{city}" class="inputCity form-control" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<label for="inputBirthdate" class="col-sm-2 col-form-label">Geburtstag (TODO)</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="date" th:field="*{birthdate}" class="inputBirthdate form-control" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<label for="inputSex" class="col-sm-2 col-form-label">Geschlecht</label>
|
||||
<div class="col-sm-10">
|
||||
<select class="form-select" th:field="*{sex}">
|
||||
<option value="male">männlich</option>
|
||||
<option value="female">weiblich</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<label for="inputPhone" class="col-sm-2 col-form-label">Telefon</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" th:field="*{phone}" class="inputPhone form-control" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<label for="inputEmail" class="col-sm-2 col-form-label">E-Mail</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="email" th:field="*{email}" class="inputEmail form-control" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<label for="outputCamp" class="col-sm-2 col-form-label">Freizeit</label>
|
||||
<div class="col-sm-10">
|
||||
<select class="form-select locked" th:field="*{fkCamp}" disabled="disabled">
|
||||
<option th:each="c : ${camps}" th:value="${c.pk}" th:text="${c.name} + ' ' + ${#temporals.format(c.arrive, 'yyyy')} + ' in ' + ${c.location}"></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<label for="outputCamprole" class="col-sm-2 col-form-label">Rolle</label>
|
||||
<div class="col-sm-10">
|
||||
<select class="outputCamprole form-select locked" th:field="*{camprole}" disabled="disabled">
|
||||
<option value="student">Teilnehmer</option>
|
||||
<option value="teacher">Mitarbeiter</option>
|
||||
<option value="director">Leiter</option>
|
||||
<option value="feeder">Küchenteam</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<label for="inputComment" class="col-sm-2 col-form-label">Kommentar</label>
|
||||
<div class="col-sm-10">
|
||||
<textarea th:field="*{comment}" class="inputComment form-control"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<label for="outputAnno" class="col-sm-2 col-form-label">Anmerkungen</label>
|
||||
<div class="col-sm-10">
|
||||
<pre class="form-control locked" th:text="${annotations}"></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<label for="inputAccept" class="col-sm-2 col-form-label">Status</label>
|
||||
<div class="col-sm-10">
|
||||
<select class="form-select" th:field="*{accept}">
|
||||
<option th:value="null">offen</option>
|
||||
<option th:value="true">bestätigt</option>
|
||||
<option th:value="false">abgelehnt</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<label for="inputAccept" class="col-sm-2 col-form-label"></label>
|
||||
<div class="col-sm-10">
|
||||
<button type="submit" class="btn btn-primary">Ok</button>
|
||||
<a th:href="@{/confirmation/}" class="btn btn-secondary">Abbrechen</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div th:if="${person == null}" class="error">In der Datenbank wurde keine Person mit entsprechender ID gefunden.</div>
|
||||
</div>
|
||||
</div>
|
||||
</content>
|
||||
</body>
|
||||
</html>
|
||||
@ -8,7 +8,8 @@
|
||||
<body>
|
||||
<header>
|
||||
<a th:href="@{/}" class="btn btn-secondary btn-icon-silent" title="aktualisieren"><i class="fas fa-sync"></i></a>
|
||||
<a th:href="@{/business}" class="btn btn-secondary btn-icon-silent" title="Abrechnungen"><i class="far fa-money-bill-alt"></i></a>
|
||||
<a th:href="@{/business}" class="btn btn-secondary btn-icon-silent" title="Abrechnungen" sec:authorize="hasRole('business')"><i class="far fa-money-bill-alt"></i></a>
|
||||
<a th:href="@{/confirmation}" class="btn btn-secondary btn-icon-silent" title="Anmeldungen" sec:authorize="hasRole('registrator')"><i class="fas fa-user-check"></i></a>
|
||||
<a href="https://www.onkelwernerfreizeiten.de/nextcloud" class="btn btn-secondary btn-icon-silent" title="Nextcloud" target="_blank"><img th:src="@{images/nextcloud.png}" width="20px"/></a>
|
||||
</header>
|
||||
<content>
|
||||
|
||||
Reference in New Issue
Block a user