finetuning

2022-10-20 21:44:57 +02:00
parent 8344186ad2
commit 230cbc5d00
14 changed files with 216 additions and 108 deletions
--- a/src/main/java/de/jottyfan/camporganizer/module/business/bookings/impl/BookerBean.java
+++ b/src/main/java/de/jottyfan/camporganizer/module/business/bookings/impl/BookerBean.java
@@ -21,6 +21,7 @@ public class BookerBean implements Serializable {
 	private BigDecimal paid;
 	private String camp;
 	private String price;
+	private Integer campId;

 	/**
 	 * @return the accept
@@ -117,4 +118,12 @@ public class BookerBean implements Serializable {
 	public void setPrice(String price) {
 		this.price = price;
 	}
+
+	public Integer getCampId() {
+		return campId;
+	}
+
+	public void setCampId(Integer campId) {
+		this.campId = campId;
+	}
 }
--- a/src/main/java/de/jottyfan/camporganizer/module/business/bookings/impl/BookingsGateway.java
+++ b/src/main/java/de/jottyfan/camporganizer/module/business/bookings/impl/BookingsGateway.java
@@ -15,7 +15,7 @@ import org.apache.logging.log4j.Logger;
 import org.jooq.DSLContext;
 import org.jooq.Record;
 import org.jooq.Record10;
-import org.jooq.Record11;
+import org.jooq.Record12;
 import org.jooq.SelectConditionStep;
 import org.jooq.SelectSeekStep4;
 import org.jooq.UpdateConditionStep;
@@ -89,9 +89,9 @@ public class BookingsGateway {
 	 * @return the booker bean or null
 	 */
 	public BookerBean getBooking(Integer id, String username) {
-		SelectConditionStep<Record11<Integer, Boolean, BigDecimal, String, String, EnumCamprole, EnumSex, LocalDateTime, String, Double, String>> sql = jooq
+		SelectConditionStep<Record12<Integer, Boolean, BigDecimal, String, String, EnumCamprole, EnumSex, LocalDateTime, String, Double, String, Integer>> sql = jooq
 		// @formatter:off
-		  .select(T_PERSON.PK, T_PERSON.ACCEPT, T_PERSON.PAID, T_PERSON.FORENAME, T_PERSON.SURNAME, T_PERSON.CAMPROLE, T_PERSON.SEX, T_PERSON.CREATED, V_CAMP.NAME, V_CAMP.YEAR, V_CAMP.PRICE)
+		  .select(T_PERSON.PK, T_PERSON.ACCEPT, T_PERSON.PAID, T_PERSON.FORENAME, T_PERSON.SURNAME, T_PERSON.CAMPROLE, T_PERSON.SEX, T_PERSON.CREATED, V_CAMP.NAME, V_CAMP.YEAR, V_CAMP.PRICE, V_CAMP.PK)
 		  .from(T_PERSON)
 		  .leftJoin(V_CAMP).on(V_CAMP.PK.eq(T_PERSON.FK_CAMP))
 			.leftJoin(T_SALESPROFILE).on(T_SALESPROFILE.FK_CAMP.eq(T_PERSON.FK_CAMP))
@@ -110,6 +110,7 @@ public class BookingsGateway {
 			EnumSex sex = r.get(T_PERSON.SEX);
 			String campName = r.get(V_CAMP.NAME);
 			Double campYear = r.get(V_CAMP.YEAR);
+			Integer campId = r.get(V_CAMP.PK);
 			BookerBean bean = new BookerBean();
 			bean.setPk(r.get(T_PERSON.PK));
 			bean.setName(String.format("%s %s", forename, surname));
@@ -119,6 +120,7 @@ public class BookingsGateway {
 			bean.setAccept(r.get(T_PERSON.ACCEPT));
 			bean.setPaid(r.get(T_PERSON.PAID));
 			bean.setCamp(String.format("%s %4.0f", campName, campYear));
+			bean.setCampId(campId);
 			bean.setPrice(r.get(V_CAMP.PRICE));
 			return bean;
 		}
--- a/src/main/java/de/jottyfan/camporganizer/module/business/privileges/impl/ProfileBean.java
+++ b/src/main/java/de/jottyfan/camporganizer/module/business/privileges/impl/ProfileBean.java
@@ -18,6 +18,10 @@ public class ProfileBean implements Serializable {
 	private String username;
 	private LocalDateTime duedate;

+	public String getFullname() {
+		return new StringBuilder().append(forename).append(" ").append(surname).toString();
+	}
+
 	public String dropdown() {
 		StringBuilder buf = new StringBuilder();
 		buf.append(forename).append(" ");
--- a/src/main/resources/static/css/select2-bootstrap-5-theme.min.css
+++ b/src/main/resources/static/css/select2-bootstrap-5-theme.min.css
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -21,8 +21,8 @@ body {
 }

 .versionlink {
-  color: #333;
-  text-decoration: none;
+	color: #333;
+	text-decoration: none;
 }

 .mainpage {
@@ -57,10 +57,14 @@ body {
 	top: 8px;
 }

+.middled {
+	vertical-align: middle;
+}
+
 .tablelink {
 	cursor: pointer;
 	text-decoration: none;
-	color: black;
+	color: rgb(26, 95, 180);
 }

 .tablelink:hover {
@@ -117,6 +121,21 @@ body {
 	background: rgba(0, 0, 0, 0.5);
 }

+.silver-to-gray-gradient {
+	background-image: linear-gradient(to bottom right, lightgray, silver)
+		!important;
+}
+
+.menu-danger {
+	color: darkred;
+	font-weight: bolder;
+}
+
+.menu-danger:hover {
+	color: white;
+	background: red;
+}
+
 .badgetodo {
 	border-radius: 8px;
 	border: 1px solid black;
@@ -162,9 +181,27 @@ body {
 	cursor: not-allowed;
 }

-.usercard {
-	width: 640px;
-	background-color: rgba(255, 255, 255, 0.8) !important;
+.framed {
+	padding: 8px;
+	margin-right: 12px;
+	border-radius: 6px;
+	min-width: 32px;
+	text-align: center;
+}
+
+.framed-green {
+	background: linear-gradient(to bottom right, lime, darkgreen);
+	color: white;
+}
+
+.framed-red {
+	background: linear-gradient(to bottom right, red, darkred);
+	color: white;
+}
+
+.framed-orange {
+	background: linear-gradient(to bottom right, orange, #bf6c06);
+	color: white;
 }

 .nomaxwidth {
--- a/src/main/resources/templates/business/booker.html
+++ b/src/main/resources/templates/business/booker.html
@@ -7,10 +7,10 @@
 </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="@{/business/}" class="btn btn-secondary btn-icon-silent" title="zur Finanzübersicht"><i class="far fa-money-bill-alt"></i></a>
-		<a th:href="@{/business/bookings}" class="btn btn-secondary btn-icon-silent" title="Buchungsübersicht" sec:authorize="hasRole('business_booking')"><i class="fas fa-users"></i></a>
-		<a th:href="@{'/business/bookings/' + ${booker.pk}}" class="btn btn-secondary btn-icon-silent" title="aktualisieren"><i class="fas fa-sync"></i></a>
+		<a th:href="@{/}" class="btn btn-secondary btn-icon-silent" title="zur Hauptseite"><i class="fas fa-home"></i></a> <a th:href="@{/business/}" class="btn btn-secondary btn-icon-silent"
+			title="zur Finanzübersicht"><i class="far fa-money-bill-alt"></i></a> <a th:href="@{/business/bookings}" class="btn btn-secondary btn-icon-silent" title="Buchungsübersicht"
+			sec:authorize="hasRole('business_booking')"><i class="fas fa-users"></i></a> <a th:href="@{'/business/bookings/' + ${booker.pk}}" class="btn btn-secondary btn-icon-silent"
+			title="aktualisieren"><i class="fas fa-sync"></i></a>
 	</header>
 	<content>
 	<div class="mainpage">
@@ -20,7 +20,7 @@
 					<div class="card" style="width: 480px" sec:authorize="hasRole('business_booking')">
 						<div class="card-header">Angemeldete Person</div>
 						<div class="card-body">
-							<table class="table">
+							<table class="table table-striped">
 								<tbody>
 									<tr>
 										<th>Name</th>
@@ -32,7 +32,7 @@
 									</tr>
 									<tr>
 										<th>Freizeit</th>
-										<td th:text="${booker.camp}"></td>
+										<td><a class="tablelink" th:href="@{/business/camp/{id}(id=${booker.campId})}" th:text="${booker.camp}"></a></td>
 									</tr>
 									<tr>
 										<th>Rolle</th>
@@ -63,8 +63,21 @@
 					<div class="card" style="width: 480px" sec:authorize="hasRole('business_booking')">
 						<div class="card-header">Einzahlung</div>
 						<div class="card-body">
+							<div class="alert alert-primary alert-dismissible fade show" role="alert">
+								Ein negativer Betrag kommt einer Auszahlung gleich.
+								<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Schließen"></button>
+							</div>
 							<form action="#" th:action="@{'/business/bookings/payment/' + ${booker.pk}}" th:object="${addBean}" method="post">
-								<input type="number" step="0.01" th:field="*{payment}"> <input type="submit" style="padding: 4px" value="einzahlen">
+								<div class="container">
+									<div class="row">
+										<div class="col-sm-8">
+											<input type="number" class="form-control" step="0.01" th:field="*{payment}" />
+										</div>
+										<div class="col-sm-4">
+											<input type="submit" class="btn btn-outline-primary" value="einzahlen">
+										</div>
+									</div>
+								</div>
 							</form>
 						</div>
 					</div>
--- a/src/main/resources/templates/business/bookings.html
+++ b/src/main/resources/templates/business/bookings.html
@@ -16,7 +16,7 @@
 		<div class="card" sec:authorize="hasRole('business_booking')">
 			<div class="card-header">Angemeldete Personen</div>
 			<div class="card-body">
-				<table id="bookers" class="table">
+				<table id="bookers" class="table table-striped">
 					<thead>
 						<tr>
 							<th>Name</th>
@@ -31,16 +31,29 @@
 					<tbody>
 						<th:block th:each="b : ${bookers}">
 							<tr>
-								<td><a class="btn btn-icon-silent" th:href="@{/business/bookings/{id}(id=${b.pk})}" title="bearbeiten" th:text="${b.name}"></a></td>
-								<td th:text="${b.sex}"></td>
-								<td th:text="${b.camp}"></td>
-								<td th:text="${b.role}"></td>
-								<td><span th:text="${#numbers.formatDecimal(b.paid, 1, 2) + ' €'}" th:if="${b.paid != null}"></span>
+								<td class="middled"><a class="tablelink" th:href="@{/business/bookings/{id}(id=${b.pk})}" title="bearbeiten" th:text="${b.name}"></a></td>
+								<td class="middled" th:text="${b.sex}"></td>
+								<td class="middled" th:text="${b.camp}"></td>
+								<td class="middled" th:text="${b.role}"></td>
+								<td class="middled">
 									<form action="#" th:action="@{'/business/bookings/payment/' + ${b.pk}}" th:object="${addBean}" method="post">
-										<input type="number" step="0.01" th:field="*{payment}"> <input type="submit" style="padding: 4px" value="einzahlen">
-									</form></td>
-								<td th:text="${#temporals.format(b.bookingDate, 'dd.MM.yyyy')}"></td>
-								<td th:text="${b.accept == null ? '' : (b.accept ? 'Ja' : 'abgelehnt')}"></td>
+										<div class="container">
+											<div class="row">
+												<div class="col-sm-4" style="text-align: right">
+													<span th:text="${#numbers.formatDecimal(b.paid, 1, 2) + ' €'}" style="font-size: x-large" th:if="${b.paid != null}"></span>
+												</div>
+												<div class="col-sm-4">
+													<input type="number" step="0.01" class="form-control" th:field="*{payment}" />
+												</div>
+												<div class="col-sm-4">
+													<input type="submit" class="btn btn-outline-primary" style="padding: 4px" value="einzahlen" />
+												</div>
+											</div>
+										</div>
+									</form>
+								</td>
+								<td class="middled" th:text="${#temporals.format(b.bookingDate, 'dd.MM.yyyy')}"></td>
+								<td class="middled" th:text="${b.accept == null ? '' : (b.accept ? 'Ja' : 'abgelehnt')}"></td>
 							</tr>
 						</th:block>
 					</tbody>
--- a/src/main/resources/templates/business/business.html
+++ b/src/main/resources/templates/business/business.html
@@ -14,10 +14,10 @@
 	</header>
 	<content>
 	<div class="mainpage">
-		<div class="card" style="width: 500px">
+		<div class="card" style="width: 640px">
 			<div class="card-header">Finanzübersicht über alle Freizeiten</div>
 			<div class="card-body">
-				<table class="table">
+				<table id="camps" class="table table-striped">
 					<thead>
 						<tr>
 							<th scope="col">Jahr</th>
@@ -35,6 +35,13 @@
 						</th:block>
 					</tbody>
 				</table>
+				<script>
+					$(document).ready(function() {
+						$("#camps").DataTable({
+							language: locale_de
+						});
+					});
+				</script>
 			</div>
 		</div>
 	</div>
--- a/src/main/resources/templates/business/camp.html
+++ b/src/main/resources/templates/business/camp.html
@@ -21,7 +21,7 @@
 							<span th:text="${camp.name}"></span> von <span th:text="${#numbers.formatInteger(camp.year, 0)}"></span>
 						</div>
 						<div class="card-body">
-							<table class="table">
+							<table class="table table-striped">
 								<tbody>
 									<tr>
 										<td>Freizeitname</td>
@@ -62,7 +62,7 @@
 					<div class="card">
 						<div class="card-header">Angemeldete Personen</div>
 						<div class="card-body">
-							<table id="bookers" class="table">
+							<table id="bookers" class="table table-striped">
 								<thead>
 									<tr>
 										<th>Name</th>
@@ -76,7 +76,7 @@
 								<tbody>
 									<th:block th:each="b : ${bookers}">
 										<tr>
-											<td><a class="btn btn-icon-silent" th:href="@{/business/bookings/{id}(id=${b.pk})}" title="bearbeiten" th:text="${b.name}"></a></td>
+											<td><a class="tablelink" th:href="@{/business/bookings/{id}(id=${b.pk})}" title="bearbeiten" th:text="${b.name}"></a></td>
 											<td th:text="${b.sex}"></td>
 											<td th:text="${b.role}"></td>
 											<td><span th:text="${#numbers.formatDecimal(b.paid, 1, 2) + ' €'}" th:if="${b.paid != null}"></span></td>
--- a/src/main/resources/templates/business/privileges.html
+++ b/src/main/resources/templates/business/privileges.html
@@ -8,16 +8,16 @@
 </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="@{/business/}" class="btn btn-secondary btn-icon-silent" title="zur Finanzübersicht"><i class="far fa-money-bill-alt"></i></a>
-		<a th:href="@{/business/privileges}" class="btn btn-secondary btn-icon-silent" title="aktualisieren"><i class="fas fa-sync"></i></a>
+		<a th:href="@{/}" class="btn btn-secondary btn-icon-silent" title="zur Hauptseite"><i class="fas fa-home"></i></a> <a th:href="@{/business/}" class="btn btn-secondary btn-icon-silent"
+			title="zur Finanzübersicht"><i class="far fa-money-bill-alt"></i></a> <a th:href="@{/business/privileges}" class="btn btn-secondary btn-icon-silent" title="aktualisieren"><i
+			class="fas fa-sync"></i></a>
 	</header>
 	<content>
 	<div class="mainpage">
 		<div class="card">
 			<div class="card-header">Nutzerverwaltung für die Abrechnung von Freizeiten</div>
 			<div class="card-body">
-				<table id="privs">
+				<table id="privs" class="table table-striped">
 					<thead>
 						<tr>
 							<th scope="col">Freizeit</th>
@@ -28,13 +28,13 @@
 					<tbody>
 						<th:block th:each="e : ${privileges.entrySet()}" sec:authorize="hasRole('admin')">
 							<tr>
-								<td><span th:text="${e.value.name}"></span>&nbsp;<span th:text="${#numbers.formatDecimal(e.value.year, 1, 0)}"></span></td>
+								<td class="middled"><span th:text="${e.value.name}"></span>&nbsp;<span th:text="${#numbers.formatDecimal(e.value.year, 1, 0)}"></span></td>
 								<td><th:block th:each="p : ${e.value.profiles}">
 										<div class="dropdown" style="display: inline" th:if="${p.pk != null}">
 											<button class="btn dropdown-toggle" style="border: 1px solid silver" type="button" th:id="'btn_' + ${e.key} + '_' + ${p.pk}" data-bs-toggle="dropdown" aria-expanded="false">
 												<span th:text="${p.forename} + ' ' + ${p.surname}"></span>
 											</button>
-											<ul class="dropdown-menu" style="background-image: linear-gradient(to bottom right, #defac0, #9ef542) !important;" th:aria-labelledby="'btn_' + ${e.key} + '_' + ${p.pk}">
+											<ul class="dropdown-menu silver-to-gray-gradient" th:aria-labelledby="'btn_' + ${e.key} + '_' + ${p.pk}">
 												<li><div style="padding: 8px">
 														Login: <span th:text="${p.username}"></span>
 													</div></li>
@@ -42,22 +42,33 @@
 														Ablaufdatum: <span th:text="${#temporals.format(p.duedate, 'dd.MM.yyyy')}"></span>
 													</div></li>
 												<li><hr class="dropdown-divider" th:if="${p.username != currentUser}"></li>
-												<li><a class="dropdown-item" th:if="${p.username != currentUser}" th:href="@{/business/privileges/delete?fkCamp={c}&fkProfile={r}(c=${e.key},r=${p.pk})}">Recht entziehen</a></li>
+												<li><a class="dropdown-item menu-danger" th:if="${p.username != currentUser}" th:href="@{/business/privileges/delete?fkCamp={c}&fkProfile={r}(c=${e.key},r=${p.pk})}">Recht
+														entziehen</a></li>
 											</ul>
 										</div>
 									</th:block></td>
 								<td>
 									<form action="#" th:action="@{/business/privileges/add?fkCamp={cid}(cid=${e.key})}" th:object="${bean}" method="post">
-										<span class="btn-group"> <select th:id="${e.value.pk}" class="form-control select2-single" th:field="*{fkProfile}">
-												<option value="">Auswählen</option>
-												<th:block th:each="u : ${profiles}">
-													<option th:if="${u != null}" th:value="${u.pk}" th:text="${u.dropdown()}" />
-												</th:block>
-										</select> <input type="submit" style="padding: 4px" value="Recht erteilen">
-										</span>
+										<div class="container">
+											<div class="row">
+												<div class="col-sm-9">
+													<select th:id="${e.value.pk}" class="form-control select2-single" th:field="*{fkProfile}">
+														<option value="">Auswählen</option>
+														<th:block th:each="u : ${profiles}">
+															<option th:if="${u != null}" th:value="${u.pk}" th:text="${u.fullname}" th:title="${u.dropdown()}" />
+														</th:block>
+													</select>
+												</div>
+												<div class="col-sm-3">
+													<input type="submit" class="btn btn-outline-primary" value="Recht erteilen">
+												</div>
+											</div>
+										</div>
 										<script>
 											var id = "[[${e.value.pk}]]";
-											$("#" + id).select2();
+											$("#" + id).select2({
+												theme: 'bootstrap-5',
+											});
 										</script>
 									</form>
 								</td>
@@ -68,7 +79,7 @@
 				<script>
 					$(document).ready(function() {
 						$("#privs").DataTable({
-							language: locale_de
+							language : locale_de
 						});
 					});
 				</script>
--- a/src/main/resources/templates/dashboard.html
+++ b/src/main/resources/templates/dashboard.html
@@ -14,71 +14,79 @@
 	</header>
 	<content>
 	<div class="mainpage">
-		<div class="container nomaxwidth">
-			<div class="row">
-				<div class="col-xs-6 col-sm-4 col-lg-3">
-					<div class="card usercard" th:each="b : ${mybookings}">
-						<div class="card-header">
-							<span th:text="${b.forename + ' ' + b.surname + ' an ' + b.campName + ' ' + #numbers.formatInteger(b.year, 4)}" style="font-weight: bolder"></span>&nbsp;in&nbsp;<a th:href="${b.url}"
-								target="_blank" th:text="${b.locationName}"></a>
-							<button class="btn btn-dropdown" style="right: 2px; top: 2px; position: absolute" th:onclick="$('#body_' + [[${b.pk}]]).toggle()">
-								<i class="fas fa-caret-down"></i>
-							</button>
-						</div>
-						<div th:id="${'body_' + b.pk}" class="card-body" style="display: none">
-							<div class="container">
-								<div class="row">
-									<div class="col-sm-4">Zeit:</div>
-									<div class="col-sm-8">
-										<span th:text="${#temporals.format(b.arrive, 'dd.MM.') + ' - ' + #temporals.format(b.depart, 'dd.MM.yyyy')}" th:if="${b.arrive != null and b.depart != null}"></span>
-									</div>
-									<div class="col-sm-4">Preis:</div>
-									<div class="col-sm-8" th:text="${b.price} + ' €'"></div>
-									<div class="col-sm-4">Ferien:</div>
-									<div class="col-sm-8" th:text="${b.countries}"></div>
+		<div class="accordion" id="acc">
+			<div class="accordion-item" th:each="b : ${mybookings}">
+				<h2 class="accordion-header" th:id="'acc-head-' + ${b.pk}">
+					<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" th:data-bs-target="'#acc-body-' + ${b.pk}" aria-expanded="true"
+						th:aria-controls="'#acc-body-' + ${b.pk}">
+							<i class="fas fa-check framed framed-green" th:if="${b.accept}"></i>
+							<i class="fas fa-ban framed framed-red" th:if="${b.accept} == false"></i>
+							<i class="fas fa-question framed framed-orange" th:if="${b.accept} == null"></i>
+						<span th:text="${b.forename + ' ' + b.surname + ' an ' + b.campName + ' ' + #numbers.formatInteger(b.year, 4)}" style="font-weight: bolder"></span>&nbsp;in&nbsp;<span
+							th:text="${b.locationName}"></span>
+					</button>
+				</h2>
+				<div th:id="'acc-body-' + ${b.pk}" class="accordion-collapse collapse" th:aria-labelledby="'acc-head-' + ${b.pk}">
+					<div class="accordion-body">
+						<div class="container">
+							<div class="row">
+								<div class="col-sm-12">
+									<h3>Freizeitdaten</h3>
 								</div>
-							</div>
-							<hr />
-							<div class="container">
-								<div class="row">
-									<div class="col-sm-4">Rolle:</div>
-									<span class="col-sm-8" th:text="${b.camprole}"></span>
-									<div class="col-sm-4">ID:</div>
-									<span class="col-sm-8" th:text="${b.pk}"></span>
-									<div class="col-sm-4">Vorname:</div>
-									<span class="col-sm-8" th:text="${b.forename}"></span>
-									<div class="col-sm-4">Nachname:</div>
-									<span class="col-sm-8" th:text="${b.surname}"></span>
-									<div class="col-sm-4">Straße:</div>
-									<span class="col-sm-8" th:text="${b.street}"></span>
-									<div class="col-sm-4">PLZ:</div>
-									<span class="col-sm-8" th:text="${b.zip}"></span>
-									<div class="col-sm-4">Ort:</div>
-									<span class="col-sm-8" th:text="${b.city}"></span>
-									<div class="col-sm-4">Telefon:</div>
-									<span class="col-sm-8" th:text="${b.phone}"></span>
-									<div class="col-sm-4">Geburtstag:</div>
-									<span class="col-sm-8" th:text="${#temporals.format(b.birthdate, 'dd.MM.yyyy')}"></span>
-									<div class="col-sm-4">E-Mail:</div>
-									<span class="col-sm-8" th:text="${b.email}"></span>
-									<div class="col-sm-4">Geschlecht:</div>
-									<span class="col-sm-8" th:text="${b.sex}"></span>
-									<div class="col-sm-4">Foto-Einverständnis:</div>
-									<span class="col-sm-8" th:text="${b.consentCatalogPhoto}"></span>
-									<div class="col-sm-4">Kommentar:</div>
-									<span class="col-sm-8" th:text="${b.comment}"></span>
+								<div class="col-sm-4">Ort:</div>
+								<div class="col-sm-8">
+									<a th:href="${b.url}" target="_blank" th:text="${b.locationName}"></a>
 								</div>
+								<div class="col-sm-4">Zeit:</div>
+								<div class="col-sm-8">
+									<span th:text="${#temporals.format(b.arrive, 'dd.MM.') + ' - ' + #temporals.format(b.depart, 'dd.MM.yyyy')}" th:if="${b.arrive != null and b.depart != null}"></span>
+								</div>
+								<div class="col-sm-4">Preis:</div>
+								<div class="col-sm-8" th:text="${b.price} + ' €'"></div>
+								<div class="col-sm-4">Ferien:</div>
+								<div class="col-sm-8" th:text="${b.countries}"></div>
 							</div>
 						</div>
-						<div class="card-footer">
-							<div th:if="${b.created != null}">
-								angemeldet am <span th:text="${#temporals.format(b.created, 'dd.MM.yyyy')}"></span> von <span th:text="${b.subscriber}"></span>
+						<div class="container">
+							<div class="row">
+								<div class="col-sm-12">
+									<h3>Teilnehmerdaten</h3>
+								</div>
+								<div class="col-sm-4">Rolle:</div>
+								<span class="col-sm-8" th:text="${b.camprole}"></span>
+								<div class="col-sm-4">ID:</div>
+								<span class="col-sm-8" th:text="${b.pk}"></span>
+								<div class="col-sm-4">Vorname:</div>
+								<span class="col-sm-8" th:text="${b.forename}"></span>
+								<div class="col-sm-4">Nachname:</div>
+								<span class="col-sm-8" th:text="${b.surname}"></span>
+								<div class="col-sm-4">Straße:</div>
+								<span class="col-sm-8" th:text="${b.street}"></span>
+								<div class="col-sm-4">PLZ:</div>
+								<span class="col-sm-8" th:text="${b.zip}"></span>
+								<div class="col-sm-4">Ort:</div>
+								<span class="col-sm-8" th:text="${b.city}"></span>
+								<div class="col-sm-4">Telefon:</div>
+								<span class="col-sm-8" th:text="${b.phone}"></span>
+								<div class="col-sm-4">Geburtstag:</div>
+								<span class="col-sm-8" th:text="${#temporals.format(b.birthdate, 'dd.MM.yyyy')}"></span>
+								<div class="col-sm-4">E-Mail:</div>
+								<span class="col-sm-8" th:text="${b.email}"></span>
+								<div class="col-sm-4">Geschlecht:</div>
+								<span class="col-sm-8" th:text="${b.sex}"></span>
+								<div class="col-sm-4">Foto-Einverständnis:</div>
+								<span class="col-sm-8" th:text="${b.consentCatalogPhoto}"></span>
+								<div class="col-sm-4">Kommentar:</div>
+								<span class="col-sm-8" th:text="${b.comment}"></span>
 							</div>
-							<div th:if="${b.accept != null}">
-								<span th:text="${b.accept ? 'bestätigt' : 'abgelehnt'}"></span> von <span th:text="${b.registrator}"></span>
-							</div>
-							<span th:if="${b.isOver}">Die Freizeit ist bereits vorbei.</span>
 						</div>
+						<div class="alert alert-primary" th:if="${b.created != null}">
+							angemeldet am <span th:text="${#temporals.format(b.created, 'dd.MM.yyyy')}"></span> von <span th:text="${b.subscriber}"></span>
+						</div>
+						<div th:class="'alert ' + ${b.accept ? 'alert-success' : 'alert-danger'}" th:if="${b.accept != null}">
+							<span th:text="${b.accept ? 'bestätigt' : 'abgelehnt'}"></span> von <span th:text="${b.registrator}"></span>
+						</div>
+						<div class="alert alert-warning" th:if="${b.isOver}">Die Freizeit ist bereits vorbei.</div>
 					</div>
 				</div>
 			</div>
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -49,7 +49,7 @@
 					<div class="row">
 						<div class="col-sm-3"></div>
 						<div class="col-sm-9">
-							<button class="btn btn-primary">jetzt anmelden</button>
+							<a class="btn btn-primary" href="http://anmeldung.onkelwernerfreizeiten.de">jetzt anmelden</a>
 						</div>
 					</div>
 				</div>
--- a/src/main/resources/templates/template.html
+++ b/src/main/resources/templates/template.html
@@ -8,6 +8,7 @@
 <link th:rel="stylesheet" type="text/css" media="all" th:href="@{/webjars/datatables/1.11.4/css/jquery.dataTables.min.css}" />
 <link th:rel="stylesheet" type="text/css" media="all" th:href="@{/webjars/select2/4.0.13/css/select2.min.css}" />
 <link th:rel="stylesheet" type="text/css" media="all" th:href="@{/css/style.css}" />
+<link th:rel="stylesheet" type="text/css" media="all" th:href="@{/css/select2-bootstrap-5-theme.min.css}" />
 <script th:src="@{/webjars/jquery/3.6.0/jquery.min.js}"></script>
 <script th:src="@{/webjars/bootstrap/5.2.0/js/bootstrap.bundle.min.js}"></script>
 <script th:src="@{/webjars/datatables/1.11.4/js/jquery.dataTables.min.js}"></script>