Switch to bootstrap for styling

This commit is contained in:
Simon Bruder 2023-11-15 17:27:04 +01:00
parent 967db8793e
commit aaa8b38f6b
Signed by: simon
GPG key ID: 8D3C82F9F309F8EC
24 changed files with 287 additions and 595 deletions

View file

@ -45,6 +45,13 @@
Use Maven Central for package search (https://search.maven.org/). Use Maven Central for package search (https://search.maven.org/).
--> -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>5.3.2</version>
<scope>runtime</scope>
</dependency>
</dependencies> </dependencies>
<repositories> <repositories>

View file

@ -1,21 +0,0 @@
body {
font: 13px/22px Helvetica, Arial, sans-serif;
background: #f0f0f0;
}
h2 {
text-decoration: underline;
}
.button {
cursor: pointer;
font-size: 13px;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
padding: 2px 6px 2px 6px;
border-top: 1px solid #333333;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;
}

View file

@ -1,64 +0,0 @@
/* CSS RESET */
body {
margin: 0 auto;
width: 940px;
font: 13px/22px Helvetica, Arial, sans-serif;
background: #f0f0f0;
}
h1 {
font-size: 3em;
line-height: 3.2em;
text-align:center;
}
table {
border-collapse: collapse;
width: 95%;
margin-top: 20px;
}
th,
td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th {
background-color: #f2f2f2;
text-decoration: underline;
font-size: 19px;
}
tr{
font-size: 17px;
}
td:last-child,
td:nth-child(5) {
width: 50px;
text-align: center;
}
tr:nth-child(even) {
background-color: rgb(214, 236, 216);
}
button {
cursor: pointer;
font-size: 13px;
margin-left: 4px;
margin-right: 4px;
}
.button {
cursor: pointer;
font-size: 13px;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
padding: 2px 6px 2px 6px;
border-top: 1px solid #333333;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;
}

View file

@ -1,57 +0,0 @@
/* CSS RESET */
* {
margin: 0;
padding: 0;
}
body {
margin: 0 auto;
width: 940px;
font: 13px/22px Helvetica, Arial, sans-serif;
background: #f0f0f0;
}
h1 {
font-size: 3em;
line-height: 3.2em;
text-align:center;
}
table {
border-collapse: separate;
border-spacing: 5 2em;
padding: 20px;
padding-left: 50px;
font-size: 20px;
}
h2 {
margin: 10px;
}
th, td {
padding: 15px;
}
.horizontal_center {
display: flex;
justify-content: center;
align-items: center;
}
div.danger_zone {
margin-bottom: 50px;
}
button.danger_zone {
padding-top: 15px;
padding-bottom: 15px;
padding-right: 25px;
padding-left: 25px;
margin-left: 40px;
margin-right: 40px;
color: red;
border: 2px solid red;
border-radius: 4px;
}

View file

@ -1,21 +0,0 @@
body {
font: 13px/22px Helvetica, Arial, sans-serif;
background: #f0f0f0;
}
h2 {
text-decoration: underline;
}
.button {
cursor: pointer;
font-size: 13px;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
padding: 2px 6px 2px 6px;
border-top: 1px solid #333333;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;
}

View file

@ -1,70 +0,0 @@
/* CSS RESET */
body {
margin: 0 auto;
width: 940px;
font: 13px/22px Helvetica, Arial, sans-serif;
background: #f0f0f0;
}
h1 {
font-size: 3em;
line-height: 3.2em;
text-align:center;
}
h2 {
text-decoration: underline;
}
table {
border-collapse: collapse;
width: 95%;
margin-top: 20px;
}
th,
td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th {
background-color: #f2f2f2;
text-decoration: underline;
font-size: 19px;
}
tr {
font-size: 17px;
}
td:last-child,
td:nth-child(5) {
width: 50px;
text-align: center;
}
tr:nth-child(even) {
background-color: rgb(214, 236, 216);
}
.add-button {
margin-top: 20px;
font-size: 16px;
}
button {
cursor: pointer;
font-size: 13px;
margin-left: 4px;
margin-right: 4px;
}
.button {
cursor: pointer;
font-size: 13px;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
padding: 2px 6px 2px 6px;
border-top: 1px solid #333333;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;
}

View file

@ -1,19 +1,14 @@
/* CSS RESET */ /* specific to login */
* { .login-container {
margin: 0; max-width: 24rem;
padding: 0;
} }
body { .calendar {
margin: 0 auto; border-collapse: separate;
width: 940px;
font: 13px/22px Helvetica, Arial, sans-serif;
background: #f0f0f0;
} }
h1 { .calendar th,
font-size: 3em; .calendar td {
line-height: 3.2em; font-weight: bold;
text-align:center;
} }

View file

@ -4,25 +4,25 @@
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout.html(title='Katalog')}"> layout:decorate="~{layout.html(title='Katalog')}">
<head> <head>
<link rel="stylesheet" th:href="@{/resources/css/style.css}">
</head> </head>
<body> <body>
<section layout:fragment="content"> <div layout:fragment="content">
<div> <div>
<table style="width: 100%;"> <table class="table">
<tr style="text-align: left;"> <tr>
<th></th> <th></th>
<th>Name</th> <th>Name</th>
<th>Mindestzeitraum</th> <th>Mindestzeitraum</th>
<th>Basisausstattung</th> <th>Basisausstattung</th>
<th>Preis ab</th> <th>Preis ab</th>
<th></th>
</tr> </tr>
<tr th:each="catalogEntry : ${catalogEntries}"> <tr th:each="catalogEntry : ${catalogEntries}">
<td> <td>
**BILD** **BILD**
</td> </td>
<td th:text="${catalogEntry.getEventType()}"> <td th:text="${catalogEntry.getEventType()}">
<td th:text="${catalogEntry.getMinimumTimePeriod()}">h <td th:text="${catalogEntry.getMinimumTimePeriod()}">
<td> <td>
<ul th:each="product : ${catalogEntry.getProducts()}"> <ul th:each="product : ${catalogEntry.getProducts()}">
<li th:text="${product}"/> <li th:text="${product}"/>
@ -32,7 +32,7 @@
<td sec:authorize="hasRole('ADMIN')"> <td sec:authorize="hasRole('ADMIN')">
<form method="post" th:action="@{/catalog/remove}"> <form method="post" th:action="@{/catalog/remove}">
<input type="hidden" name="catalogEntryID" th:value="${catalogEntry.getId()}"> <input type="hidden" name="catalogEntryID" th:value="${catalogEntry.getId()}">
<button type="submit">Entfernen</button> <button class="btn btn-danger" type="submit">Entfernen</button>
</form> </form>
</td> </td>
</tr> </tr>
@ -40,10 +40,10 @@
</div> </div>
<div sec:authorize="hasRole('ADMIN')"> <div sec:authorize="hasRole('ADMIN')">
<form th:action="@{/catalog_editor}"> <a th:href="@{/catalog_editor}">
<button type="submit">Hinzufügen</button> <button class="btn btn-success" type="submit">Hinzufügen</button>
</form> </a>
</div>
</div> </div>
</section>
</body> </body>
</html> </html>

View file

@ -5,32 +5,32 @@
layout:decorate="~{layout.html(title='Katalog bearbeiten')}"> layout:decorate="~{layout.html(title='Katalog bearbeiten')}">
<body> <body>
<section layout:fragment="content"> <div layout:fragment="content">
<input type="hidden" name="addCatalog"> <input type="hidden" name="addCatalog">
<div class="content"> <div class="content">
<h2>Dienstleistung</h2> <h2>Dienstleistung</h2>
<label for="events"></label> <label class="form-label" for="events"></label>
<form th:object="${formCatalogEntry}" method="post" th:action="@{/catalog_editor/chooseEvent}"> <form th:object="${formCatalogEntry}" method="post" th:action="@{/catalog_editor/chooseEvent}">
<select name="events" id="events"> <select class="form-select w-auto d-inline-block" name="events" id="events">
<option value="event_catering">Eventcatering</option> <option value="event_catering">Eventcatering</option>
<option value="party_service">Partyservice</option> <option value="party_service">Partyservice</option>
<option value="mobile_breakfast">Mobile Breakfast</option> <option value="mobile_breakfast">Mobile Breakfast</option>
<option value="rent_a_cook">Rent-a-Cook</option> <option value="rent_a_cook">Rent-a-Cook</option>
</select> </select>
<button type="submit">Event auswählen</button> <button class="btn btn-secondary" type="submit">Event auswählen</button>
</form> </form>
Eventbasispreis: 500€ Eventbasispreis: 500€
<h2>Mindestzeitraum</h2> <h2>Mindestzeitraum</h2>
<form th:object="${formCatalogEntry}" method="post" th:action="@{/catalog_editor/add_time}"> <form th:object="${formCatalogEntry}" method="post" th:action="@{/catalog_editor/add_time}">
<label>Mindestzeitraum:</label> <label class="form-label">Mindestzeitraum:</label>
<input type="hidden" th:field="*{eventType}"> <input type="hidden" th:field="*{eventType}">
<input th:field="*{minimumTimePeriod}" type="number" min="0" step="1" value="1"/> <input class="form-control w-auto d-inline-block" th:field="*{minimumTimePeriod}" type="number" min="0" step="1" value="1"/>
<button type="submit">Zum Model hinzufügen</button> <button class="btn btn-secondary" type="submit">Zum Model hinzufügen</button>
</form> </form>
<h2>Basisausstattung</h2> <h2>Basisausstattung</h2>
<table> <table class="table">
<tr> <tr>
<th>Produktname</th> <th>Produktname</th>
<th>Menge</th> <th>Menge</th>
@ -42,21 +42,20 @@
<td th:text="${item.getCost()}"> <td th:text="${item.getCost()}">
<td> <td>
<form method="post" th:action="@{/catalog_editor/remove_product}"> <form method="post" th:action="@{/catalog_editor/remove_product}">
<input type="hidden" name="id" th:value="${item.getItemId()}"> <input class="form-control w-auto d-inline-block" type="hidden" name="id" th:value="${item.getItemId()}">
<button type="submit">Entfernen</button> <button class="btn btn-danger" type="submit">Entfernen</button>
</form> </form>
</td> </td>
</tr>
</table> </table>
<hr>
<div style="height: 20px;"></div>
<form method="post" th:action="@{/catalog_editor/product_add}"> <form method="post" th:action="@{/catalog_editor/product_add}">
<label for="name">Produktname</label> <label class="form-label" for="name">Produktname</label>
<input type="text" id="name" name="name" required> <input class="form-control w-auto d-inline-block" type="text" id="name" name="name" required>
<label for="amount">Menge</label> <label class="form-label" for="amount">Menge</label>
<input type="number" id="amount" name="amount" min="1" required> <input class="form-control w-auto d-inline-block" type="number" id="amount" name="amount" min="1" required>
<input type="hidden" name="cost" value="50.0"> <input type="hidden" name="cost" value="50.0">
<button type="submit">Artikel hinzufügen</button> <button class="btn btn-primary" type="submit">Artikel hinzufügen</button>
</form>hinzufügen </form>
<br> <br>
<h3>Momentane Auswahl</h3> <h3>Momentane Auswahl</h3>
Eventtyp: <span th:text="${formCatalogEntry.getEventType()}"></span><br> Eventtyp: <span th:text="${formCatalogEntry.getEventType()}"></span><br>
@ -67,9 +66,9 @@
<input type="hidden" name="products" th:value="${inventory}"> <input type="hidden" name="products" th:value="${inventory}">
<input type="hidden" name="minimumTimePeriod" th:value="${formCatalogEntry.getMinimumTimePeriod}"> <input type="hidden" name="minimumTimePeriod" th:value="${formCatalogEntry.getMinimumTimePeriod}">
<input type="hidden" name="totalCost" th:value="${formCatalogEntry.getTotalCost()}"> <input type="hidden" name="totalCost" th:value="${formCatalogEntry.getTotalCost()}">
<button type="submit">Zum Katalog hinzufügen</button> <button class="btn btn-primary" type="submit">Zum Katalog hinzufügen</button>
</form> </form>
</div> </div>
</section> </div>
</body> </body>
</html> </html>

View file

@ -4,14 +4,13 @@
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout.html(title='Kunden')}"> layout:decorate="~{layout.html(title='Kunden')}">
<head> <head>
<link rel="stylesheet" th:href="@{/resources/css/customer/style.css}" />
<title th:text="${title}"></title> <title th:text="${title}"></title>
</head> </head>
<body> <body>
<section layout:fragment="content"> <div layout:fragment="content">
<div class="verwaltung"> <div>
<h1>Kundenverwaltung</h1> <h1>Kundenverwaltung</h1>
<table> <table class="table">
<tr> <tr>
<th>Nutzername</th> <th>Nutzername</th>
<th>Aufträge</th> <th>Aufträge</th>
@ -21,15 +20,15 @@
<tr th:each="customer : ${customers}"> <tr th:each="customer : ${customers}">
<td th:text="${customer.username}">Musterkoch</td> <td th:text="${customer.username}">Musterkoch</td>
<td>Aufträge</td> <td>Aufträge</td>
<td><a th:href="@{/customers/edit/{id}(id=${customer.id})}" class="button">Bearbeiten</a></td> <td><a th:href="@{/customers/edit/{id}(id=${customer.id})}"><button class="btn btn-warning">Bearbeiten</button></a></td>
<td> <td>
<a th:if="${customer.isEnabled}" th:href="@{/customers/remove/{id}(id=${customer.id})}" class="button">Entfernen</a> <a th:if="${customer.isEnabled}" th:href="@{/customers/remove/{id}(id=${customer.id})}"><button class="btn btn-danger">Entfernen</button></a>
<b th:if="${!customer.isEnabled}">Deaktiviert</b> <b th:if="${!customer.isEnabled}">Deaktiviert</b>
</td> </td>
</td> </td>
</tr> </tr>
</table> </table>
</div> </div>
</section> </div>
</body> </body>
</html> </html>

View file

@ -5,24 +5,20 @@
layout:decorate="~{layout.html(title='Kunden bearbeiten')}"> layout:decorate="~{layout.html(title='Kunden bearbeiten')}">
<head> <head>
<title>Kunde Bearbeiten</title> <title>Kunde Bearbeiten</title>
<link
rel="stylesheet"
th:href="@{/resources/css/customer/edit-style.css}"
/>
</head> </head>
<body> <body>
<section layout:fragment="content"> <div layout:fragment="content">
<div class="edit-customer-form">
<h2>Kunde Bearbeiten</h2>
<form method="post"> <form method="post">
<h3>Nutzername</h3> <div class="mb-3">
<input type="text" name="username" th:value="${customer.username}"/> <label class="form-label" for="username">Nutzername</label>
<h3>Addresse</h3> <input class="form-control" type="text" name="username" th:value="${customer.username}"/>
<input type="text" name="address" th:value="${customer.address}"/> </div>
<button type="submit">Save</button> <div class="mb-3">
<label class="form-label" for="address">Adresse</label>
<input class="form-control" type="text" name="address" th:value="${customer.address}"/>
</div>
<button class="btn btn-primary" type="submit">Speichern</button>
</form> </form>
</div> </div>
</section>
</body> </body>
</html> </html>

View file

@ -5,29 +5,26 @@
layout:decorate="~{layout.html(title='Personal bearbeiten')}"> layout:decorate="~{layout.html(title='Personal bearbeiten')}">
<head> <head>
<title>Personal Bearbeiten</title> <title>Personal Bearbeiten</title>
<link rel="stylesheet" th:href="@{/resources/css/staff/edit-style.css}" />
</head> </head>
<body> <body>
<section layout:fragment="content"> <div layout:fragment="content">
<div class="edit-staff-form">
<h2>Personal Bearbeiten</h2>
<form th:action="@{/staff/update}" th:object="${staff}" method="post"> <form th:action="@{/staff/update}" th:object="${staff}" method="post">
<input type="hidden" th:field="*{id}" /> <input type="hidden" th:field="*{id}" />
<div class="mb-3">
<label for="name">Name:</label> <label class="form-label" for="name">Name:</label>
<input type="text" th:field="*{name}" required /> <input class="form-control" type="text" th:field="*{name}" required />
</div>
<label for="surname">Nachname:</label> <div class="mb-3">
<input type="text" th:field="*{surname}" required /> <label class="form-label" for="surname">Nachname:</label>
<input class="form-control" type="text" th:field="*{surname}" required />
<label for="job">Beruf:</label> </div>
<input type="text" th:field="*{job}" required /> <div class="mb-3">
<label class="form-label" for="job">Beruf:</label>
<button type="submit">Save</button> <input class="form-control" type="text" th:field="*{job}" required />
</form> </div>
<a th:href="@{/staff}" class="button">Cancel</a> <button class="btn btn-primary" type="submit">Speichern</button>
<a th:href="@{/staff}"><button type="button" class="btn btn-danger">Abbrechen</button></a>
</form>
</div> </div>
</section>
</body> </body>
</html> </html>

View file

@ -5,21 +5,21 @@
layout:decorate="~{layout.html(title='Event konfigurieren')}"> layout:decorate="~{layout.html(title='Event konfigurieren')}">
<body> <body>
<section layout:fragment="content"> <div layout:fragment="content">
<span th:text="'Typ: ' + ${orderType}"/> <span th:text="'Typ: ' + ${orderType}"/>
<form th:action="@{/event/changeOrderType}" method="post"> <form th:action="@{/event/changeOrderType}" method="post">
<select name="orderType"> <select class="form-select w-auto d-inline-block" name="orderType">
<option disabled="disabled" selected value="NULL" th:text="' -- Wählen Sie eine Option -- '"/> <option disabled="disabled" selected value="NULL" th:text="' -- Wählen Sie eine Option -- '"/>
<option th:value="'SE'" th:text="'Something else'"/> <option th:value="'SE'" th:text="'Something else'"/>
<option th:value="'RaK'" th:text="Rent-a-Cook"/> <option th:value="'RaK'" th:text="Rent-a-Cook"/>
<option th:value="'EK'" th:text="Eventcatering"/> <option th:value="'EK'" th:text="Eventcatering"/>
<option th:value="'SN'" th:text="'Sushi Night'"/> <option th:value="'SN'" th:text="'Sushi Night'"/>
</select> </select>
<input type="submit" value="Eventtypen ändern"/> <button class="btn btn-primary" type="submit">Eventtypen ändern</button>
</form> </form>
<table style="width:100%; text-align:left"> <table class="table">
<tr> <tr>
<th>Produkt</th> <th>Produkt</th>
<th>Anzahl</th> <th>Anzahl</th>
@ -32,25 +32,24 @@
<h4>Product hinzufügen</h4> <h4>Product hinzufügen</h4>
<div class="mb-4">
<form th:action="@{/event/addProduct}" th:object="${productForm}" method="post"> <form th:action="@{/event/addProduct}" th:object="${productForm}" method="post">
<div> <div class="mb-3">
<label>Produkt</label> <label class="form-label">Produkt</label>
<input type="text" th:field="*{product}" placeholder="Produktname" required/> <input class="form-control" type="text" th:field="*{product}" placeholder="Produktname" required/>
</div> </div>
<div> <div class="mb-3">
<label>Anzahl</label> <label class="form-label">Anzahl</label>
<input type="number" th:field="*{number}" placeholder="Anzahl" min="1" required/> <input class="form-control" type="number" th:field="*{number}" placeholder="Anzahl" min="1" required/>
</div> </div>
<input type="submit" value="Submit"/> <button class="btn btn-primary" type="submit">Submit</button>
</form> </form>
</div>
<div>
<form method="post" th:action="@{/event/checkout}"> <form method="post" th:action="@{/event/checkout}">
<input type="submit" th:value="'Kostenpflichtig bestellen'"/> <button class="btn btn-primary" type="submit">Kostenpflichtig bestellen</button>
</form> </form>
</div> </div>
</section>
</body>
</html> </html>

View file

@ -4,40 +4,40 @@
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout.html(title='Lagerverwaltung')}"> layout:decorate="~{layout.html(title='Lagerverwaltung')}">
<body> <body>
<section layout:fragment="content"> <div layout:fragment="content">
<h2 th:text="${'Produkt ' + (product == null ? 'anlegen' : 'bearbeiten')}"></h2> <h2 th:text="${'Produkt ' + (product == null ? 'anlegen' : 'bearbeiten')}"></h2>
<!-- TODO: maybe migrate to th:field (which is a pain) --> <!-- TODO: maybe migrate to th:field (which is a pain) -->
<form method="post"> <form method="post">
<div> <div class="mb-3">
<label for="type">Typ</label> <label class="form-label" for="type">Typ</label>
<input type="radio" name="type" th:each="type : ${T(catering.catalog.CatalogDummyType).values()}" th:value="${type}" th:text="${type}" th:checked="${type.name() == product?.type?.name()}" required/> <div class="form-check form-check-inline" th:each="type : ${T(catering.catalog.CatalogDummyType).values()}">
<input class="form-check-input" type="radio" name="type" th:value="${type}" th:text="${type}" th:checked="${type.name() == product?.type?.name()}" required/>
</div> </div>
<div>
<label for="name">Produktname</label>
<input type="text" name="name" th:value="${product?.name}" required/>
</div> </div>
<div> <div class="mb-3">
<label for="quantity">Menge im Bestand</label> <label class="form-label" for="name">Produktname</label>
<input type="number" name="quantity" th:value="${item?.quantity}" required/> <input class="form-control" type="text" name="name" th:value="${product?.name}" required/>
</div> </div>
<div> <div class="mb-3">
<label for="wholesalePrice">Einkaufspreis</label> <label class="form-label" for="quantity">Menge im Bestand</label>
<input type="number" name="wholesalePrice" step="0.01" min="0" th:value="${#numbers.formatDecimal(product?.wholesalePrice?.getNumber()?.doubleValueExact(), 1, 2)}" required/> <input class="form-control" type="number" name="quantity" th:value="${item?.quantity}" required/>
</div> </div>
<div> <div class="mb-3">
<label for="retailPrice">UVP</label> <label class="form-label" for="wholesalePrice">Einkaufspreis</label>
<input type="number" name="retailPrice" step="0.01" min="0" th:value="${#numbers.formatDecimal(product?.price?.getNumber()?.doubleValueExact(), 1, 2)}" required/> <input class="form-control" type="number" name="wholesalePrice" step="0.01" min="0" th:value="${#numbers.formatDecimal(product?.wholesalePrice?.getNumber()?.doubleValueExact(), 1, 2)}" required/>
</div> </div>
<div> <div class="mb-3">
<label class="form-label" for="retailPrice">UVP</label>
<input class="form-control" type="number" name="retailPrice" step="0.01" min="0" th:value="${#numbers.formatDecimal(product?.price?.getNumber()?.doubleValueExact(), 1, 2)}" required/>
</div>
<div class="mb-3">
<!-- FIXME darf nur bei angeboten als teil von partyservice angezeigt werden --> <!-- FIXME darf nur bei angeboten als teil von partyservice angezeigt werden -->
<label for="promotionPrice">Aktionspreis</label> <label class="form-label" for="promotionPrice">Aktionspreis</label>
<input type="number" name="promotionPrice" step="0.01" min="0" th:value="${#numbers.formatDecimal(product?.promotionPrice?.getNumber()?.doubleValueExact(), 1, 2)}"/> <input class="form-control" type="number" name="promotionPrice" step="0.01" min="0" th:value="${#numbers.formatDecimal(product?.promotionPrice?.getNumber()?.doubleValueExact(), 1, 2)}"/>
</div>
<div>
<button type="submit" th:text="${product == null ? 'Hinzufügen' : 'Bearbeiten'}"></button>
</div> </div>
<button class="btn btn-primary" type="submit" th:text="${product == null ? 'Hinzufügen' : 'Bearbeiten'}"></button>
<!-- KANN: Bild und Beschreibungstext --> <!-- KANN: Bild und Beschreibungstext -->
</form> </form>
</section> </div>
</body> </body>
</html> </html>

View file

@ -4,8 +4,8 @@
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout.html(title='Inventar')}"> layout:decorate="~{layout.html(title='Inventar')}">
<body> <body>
<section layout:fragment="content"> <div layout:fragment="content">
<table border> <table class="table">
<thead> <thead>
<!-- TODO: i18n? --> <!-- TODO: i18n? -->
<tr> <tr>
@ -27,19 +27,14 @@
<td th:if="${item.product.promotionPrice != null}"><del th:text="${item.product.price}"></del> <span th:text="${item.product.promotionPrice}"></span></td> <td th:if="${item.product.promotionPrice != null}"><del th:text="${item.product.price}"></del> <span th:text="${item.product.promotionPrice}"></span></td>
<td th:if="${item.product.promotionPrice == null}" th:text="${item.product.price}"></td> <td th:if="${item.product.promotionPrice == null}" th:text="${item.product.price}"></td>
<td th:text="${item.product.wholesalePrice.multiply(item.quantity.getAmount())}"></td> <td th:text="${item.product.wholesalePrice.multiply(item.quantity.getAmount())}"></td>
<td><a th:href="@{/inventory/edit/{id}(id=${item.product.id})}"><button></button></a><a th:href="@{/inventory/delete/{id}(id=${item.product.id})}"><button>X</button></a></td> <td>
</tr> <a th:href="@{/inventory/edit/{id}(id=${item.product.id})}"><button class="btn btn-warning">Bearbeiten</button></a>
<tr> <a th:href="@{/inventory/delete/{id}(id=${item.product.id})}"><button class="btn btn-danger">Entfernen</button></a>
<td><a href="/inventory/add"><button></button></a></td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td><!-- TODO (optional): add total monetary value of inventory -->
<td></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</section> <a href="/inventory/add"><button class="btn btn-primary">Artikel hinzufügen</button></a>
</div>
</body> </body>
</html> </html>

View file

@ -5,26 +5,26 @@
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/resources/css/style.css}"> <link rel="stylesheet" th:href="@{/resources/css/style.css}">
<!--<link th:href="@{/resources/css/style.css}" rel="stylesheet"-->
<!--href="../static/resources/css/style.css" type="text/css"/>-->
<title th:text="${#strings.isEmpty(title)} ? #{home.title} : ${title}">Catering</title> <title th:text="${#strings.isEmpty(title)} ? #{home.title} : ${title}">Catering</title>
</head> </head>
<body> <body>
<div> <nav th:replace="~{navigation :: navigation}"></nav>
<header> <main class="container py-4">
<h1 th:text="${#strings.isEmpty(title)} ? #{home.title} : ${title}">Catering</h1> <h1 class="mb-4" th:text="${#strings.isEmpty(title)} ? #{home.title} : ${title}"></h1>
</header> <div layout:fragment="content"></div>
<nav th:insert="~{navigation :: navigation}"></nav> </main>
<section layout:fragment="content"></section> <div class="container">
</div> <footer class="border-top my-4 py-4">
<footer style="bottom: 0; position: absolute;"> <p class="text-center">© Hannes Wurst @ Mampf GmbH</p>
<p>© Hannes Wurst @ Mampf GmbH</p> <p class="text-center">
<p>
<a href="mailto:catering@mampf.com">catering@mampf.com</a> <a href="mailto:catering@mampf.com">catering@mampf.com</a>
</p> </p>
</footer> </footer>
</div>
<script th:src="@{/webjars/bootstrap/js/bootstrap.bundle.min.js}"></script>
</body> </body>
</html> </html>

View file

@ -4,70 +4,20 @@
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout.html(title='Login')}"> layout:decorate="~{layout.html(title='Login')}">
<!-- FIXME no inline styles --> <div layout:fragment="content">
<div class="login-container mb-4">
<style> <form th:action="@{/login}" method="post">
<div class="mb-3">
form#login { <label class="form-label" for="username">Nutzername</label>
<input class="form-control" type="text" id="username" name="username" autofocus="autofocus">
display: flex;
flex-direction: column;
gap: 1em;
}
form#login > div {
display: flex;
flex-direction: column;
gap: .5em;
}
form#login > div > * {
display: flex;
}
</style>
<section layout:fragment="content">
<form class="ui form" role="form" th:action="@{/login}" method="post">
<div class="field">
<label for="username">Nutzername</label>
<input class="form-control" type="text" id="username" name="username" autofocus="autofocus" placeholder="Username">
</div> </div>
<div class="mb-3">
<div class="field"> <label class="form-label" for="password">Passwort</label>
<input class="form-control" type="password" id="password" name="password">
<label for="password">Passwort</label>
<input type="password" id="password" name="password" placeholder="Password">
</div> </div>
<button class="btn btn-primary" type="submit">Login</button>
<div>
<button type="submit" class="ui button">Login</button>
</div>
</form> </form>
</div>
<p>Haben Sie noch keinen Account? Registrieren Sie sich <a th:href="@{/register}">hier</a>.</p> <p>Haben Sie noch keinen Account? Registrieren Sie sich <a th:href="@{/register}">hier</a>.</p>
</section> </div>
</html> </html>

View file

@ -4,25 +4,52 @@
<head> <head>
</head> </head>
<body> <body>
<nav th:fragment="navigation"> <nav th:fragment="navigation" class="navbar navbar-expand-lg bg-body-secondary">
<div class="ui menu"> <div class="container">
<a class="item" th:href="@{/}">Startseite</a> <a class="navbar-brand" th:href="@{/}">Catering Mampf</a>
<a class="item" th:href="@{/inventory}" sec:authorize="hasRole('ADMIN')">Inventar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<a class="item" th:href="@{/catalog}">Katalog</a> <span class="navbar-toggler-icon"></span>
<a class="item" th:href="@{/staff}" sec:authorize="hasRole('ADMIN')">Angestellte</a> </button>
<a class="item" th:href="@{/customers}" sec:authorize="hasRole('ADMIN')">Kunden</a> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<a class="item" th:href="@{/orders}" sec:authorize="isAuthenticated()">Bestellungen</a> <ul class="navbar-nav">
<a class="item" th:href="@{/event}" sec:authorize="hasRole('CUSTOMER')">Event planen</a> <li class="nav-item">
<a class="item" th:href="@{/orders/calender}" sec:authorize="hasRole('ADMIN')">Kalender</a> <a class="nav-link" th:href="@{/inventory}" sec:authorize="hasRole('ADMIN')">Inventar</a>
</li>
<div class="right menu"> <li class="nav-item">
<a class="item" th:href="@{/login}" sec:authorize="!isAuthenticated()">Login</a> <a class="nav-link" th:href="@{/catalog}">Katalog</a>
<a class="item" th:href="@{/register}" sec:authorize="!isAuthenticated()">Registrierung</a> </li>
<a class="item" th:href="@{/profile}" sec:authorize="isAuthenticated()">Profil</a> <li class="nav-item">
<a class="item" th:href="@{/logout}" sec:authorize="isAuthenticated()">Logout</a> <a class="nav-link" th:href="@{/staff}" sec:authorize="hasRole('ADMIN')">Angestellte</a>
</li>
<li class="nav-item">
<a class="nav-link" th:href="@{/customers}" sec:authorize="hasRole('ADMIN')">Kunden</a>
</li>
<li class="nav-item">
<a class="nav-link" th:href="@{/orders}" sec:authorize="isAuthenticated()">Bestellungen</a>
</li>
<li class="nav-item">
<a class="nav-link" th:href="@{/event}" sec:authorize="hasRole('CUSTOMER')">Event planen</a>
</li>
<li class="nav-item">
<a class="nav-link" th:href="@{/orders/calender}" sec:authorize="hasRole('ADMIN')">Kalender</a>
</li>
</ul>
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" th:href="@{/login}" sec:authorize="!isAuthenticated()">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" th:href="@{/register}" sec:authorize="!isAuthenticated()">Registrierung</a>
</li>
<li class="nav-item">
<a class="nav-link" th:href="@{/profile}" sec:authorize="isAuthenticated()">Profil</a>
</li>
<li class="nav-item">
<a class="nav-link" th:href="@{/logout}" sec:authorize="isAuthenticated()">Logout</a>
</li>
</ul>
</div> </div>
</div> </div>
<br/>
</nav> </nav>
</body> </body>
</html> </html>

View file

@ -4,15 +4,15 @@
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout.html(title='Bestellungen')}"> layout:decorate="~{layout.html(title='Bestellungen')}">
<body> <body>
<section layout:fragment="content"> <div layout:fragment="content">
<div> <!--th:unless"${cart.empty}"--> <div> <!--th:unless"${cart.empty}"-->
<table style="width:100%; text-align:left"> <table class="table">
<tr> <tr>
<th style="width:10%">Von</th> <th>Von</th>
<th style="width:10%">Bis</th> <th>Bis</th>
<th style="width:15%">Kunde</th> <th>Kunde</th>
<th style="width:30%">Produktdetails</th> <th>Produktdetails</th>
<th style="width:10%">Rechnung</th> <th>Rechnung</th>
<th>Bezahlt</th> <th>Bezahlt</th>
<th>Preis</th> <th>Preis</th>
<th></th> <th></th>
@ -45,7 +45,7 @@
<td sec:authorize="hasRole('ADMIN')"> <td sec:authorize="hasRole('ADMIN')">
<form method="post" th:action="@{/orders/remove}"> <form method="post" th:action="@{/orders/remove}">
<input type="hidden" name="orderID" value="0" th:value="${order.getId()}"/> <input type="hidden" name="orderID" value="0" th:value="${order.getId()}"/>
<input type="submit" value="remove" th:value="Entfernen"/> <input class="btn btn-danger" type="submit" value="remove" th:value="Entfernen"/>
</form> </form>
</td> </td>
</tr> </tr>
@ -56,6 +56,6 @@
<th:block th:text="${total}"/> <th:block th:text="${total}"/>
<th:block th:text=" Aufträge"/> <th:block th:text=" Aufträge"/>
</span> </span>
</section> </div>
</body> </body>
</html> </html>

View file

@ -4,24 +4,10 @@
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout.html(title='Kalender')}"> layout:decorate="~{layout.html(title='Kalender')}">
<head> <head>
<style>
table {
border-collapse: collapse;
background: white;
color: black;
}
th,
td {
font-weight: bold;
}
</style>
</head> </head>
<body> <body>
<section layout:fragment="content"> <div layout:fragment="content">
<!-- class="ui celled table"--> <table class="calendar bg-secondary-subtle">
<table bgcolor="lightgrey" align="center"
cellspacing="21" cellpadding="21">
<!-- The tr tag is used to enter <!-- The tr tag is used to enter
rows in the table --> rows in the table -->
@ -47,7 +33,7 @@
<tr> <tr>
<!-- Here we have applied inline style <!-- Here we have applied inline style
to make it more attractive--> to make it more attractive-->
<th th:each="dayName : ${dayNames}" style="color: white; background: purple;" <th th:each="dayName : ${dayNames}" class="bg-primary"
> >
<div <div
class="header" class="header"
@ -80,7 +66,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</section> </div>
</body> </body>
</html> </html>
<!--th:href="@{/orders/{id}(id=${day.id})}"--> <!--th:href="@{/orders/{id}(id=${day.id})}"-->

View file

@ -4,41 +4,40 @@
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout.html(title='Profil')}"> layout:decorate="~{layout.html(title='Profil')}">
<head> <head>
<link rel="stylesheet" th:href="@{/resources/css/profile/style.css}" />
<title th:text="#{profile.title}" /> <title th:text="#{profile.title}" />
</head> </head>
<body> <body>
<section layout:fragment="content"> <div layout:fragment="content">
<form th:action="@{/profile}" method="post" > <div class="mb-4">
<h1 th:text="#{profile.title}"></h1> <form th:action="@{/profile}" method="post">
<h2 class="settings" th:text="#{profile.authentification}"></h2> <h2 th:text="#{profile.authentification}"></h2>
<table> <div class="mb-3">
<tr> <label class="form-label" for="username" th:text="#{profile.username}"></label>
<td th:text="#{profile.username}"></td> <input class="form-control" name="username" th:value="${user.username}" type="text">
<td><input name="username" th:value="${user.username}" type="text"/></td> </div>
</tr> <div class="mb-3">
<tr> <label class="form-label" for="password" th:text="#{profile.password}"></label>
<td th:text="#{profile.password}"></td> <input class="form-control" name="password" type="password">
<td><input name="password" type="password"/></td> </div>
</tr>
</table> <h2 th:text="#{profile.userinformation}"></h2>
<h2 class="settings" th:text="#{profile.userinformation}"></h2> <div class="mb-3">
<table> <label class="form-label" for="address" th:text="#{profile.address}"></label>
<tr> <input class="form-control" name="address" th:value="${user.address}" type="text">
<td th:text="#{profile.address}"></td> </div>
<td><input name="address" th:value="${user.address}" type="text"/></td>
</tr> <button class="btn btn-primary" th:text="#{profile.edit}" type="submit"></button>
</table> </form>
<div class="danger_zone"> </div>
<h1 class="danger_zone" th:text="#{profile.danger_zone}"></h1>
<div class="horizontal_center"> <div th:if="${user.hasRole('CUSTOMER')}" class="card">
<button class="danger_zone" th:text="#{profile.edit}" type="submit"></button> <div class="card-header text-danger" th:text="#{profile.danger_zone}"></div>
<div class="card-body">
<a th:href="@{/profile/disable}"> <a th:href="@{/profile/disable}">
<button th:if="${user.hasRole('CUSTOMER')}" class="danger_zone" th:text="#{profile.delete}" type="button"></button> <button class="btn btn-danger" th:text="#{profile.delete}" type="button"></button>
</a> </a>
</div> </div>
</div> </div>
</form> </div>
</section>
</body> </body>
</html> </html>

View file

@ -4,40 +4,21 @@
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout.html(title='Registrierung')}"> layout:decorate="~{layout.html(title='Registrierung')}">
<section layout:fragment="content"> <div layout:fragment="content">
<form method="post" role="form" class="ui form" id="form" th:action="@{/register}"> <form method="post" th:action="@{/register}">
<div class="mb-3">
<div class="field"> <label class="form-label" for="username">Nutzername</label>
<input class="form-control" name="username" type="text" required>
<label for="username">Nutzername</label>
<input id="username" name="username" type="text" required="required">
</div> </div>
<div class="mb-3">
<div class="field"> <label class="form-label" for="password">Passwort</label>
<input class="form-control" name="password" type="password" required>
<label for="password">Passwort</label>
<input id="password" name="password" type="password"
required="required">
</div> </div>
<div class="mb-3">
<div class="field"> <label class="form-label" for="address">Adresse</label>
<input class="form-control" name="address" type="text" required>
<label for="address">Adresse</label>
<input id="address" name="address" type="text"><!-- FIXME: Address should be required!-->
</div> </div>
<button type="submit" class="btn btn-primary">Registrieren</button>
<div>
<button type="submit" class="ui button">Registrieren</button>
</div>
</form> </form>
</section> </div>
</html> </html>

View file

@ -4,19 +4,20 @@
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout.html(title='Angestellte')}"> layout:decorate="~{layout.html(title='Angestellte')}">
<head> <head>
<link rel="stylesheet" th:href="@{/resources/css/staff/style.css}" />
<title th:text="${title}"></title> <title th:text="${title}"></title>
</head> </head>
<body> <body>
<section layout:fragment="content"> <div layout:fragment="content">
<div class="verwaltung"> <div>
<h2>Mitarbeiterdetails</h2> <h2>Mitarbeiterdetails</h2>
<table> <table class="table">
<tr> <tr>
<th>ID</th> <th>ID</th>
<th>Nachname</th> <th>Nachname</th>
<th>Vorname</th> <th>Vorname</th>
<th>Beruf</th> <th>Beruf</th>
<th></th>
<th></th>
</tr> </tr>
<tr th:each="staff : ${staffs}"> <tr th:each="staff : ${staffs}">
@ -25,34 +26,35 @@
<td th:text="${staff.name}">Max</td> <td th:text="${staff.name}">Max</td>
<td th:text="${staff.job}">Koch</td> <td th:text="${staff.job}">Koch</td>
<td> <td>
<a th:href="@{'/staff/edit/' + ${staff.id}}" class="button" <a th:href="@{'/staff/edit/' + ${staff.id}}"><button class="btn btn-warning">Bearbeiten</button></a>
>Bearbeiten</a
>
</td> </td>
<td> <td>
<form th:action="@{/staff/remove}" method="post"> <form th:action="@{/staff/remove}" method="post">
<input type="hidden" th:name="staffID" th:value="${staff.id}" /> <input type="hidden" th:name="staffID" th:value="${staff.id}" />
<button type="submit" class="delete-icon">Entfernen</button> <button type="submit" class="btn btn-danger">Entfernen</button>
</form> </form>
</td> </td>
</tr> </tr>
</table> </table>
</div> </div>
<div class="add-staff-form"> <div>
<h2>Personal Hinzufügen</h2> <h2>Personal Hinzufügen</h2>
<form action="/staff/add" method="post"> <form action="/staff/add" method="post">
<label for="name">Name:</label> <div class="mb-3">
<input type="text" id="name" name="name" required /> <label class="form-label" for="name">Name</label>
<input class="form-control" type="text" name="name" required />
<label for="surname">Nachname:</label> </div>
<input type="text" id="surname" name="surname" required /> <div class="mb-3">
<label class="form-label" for="surname">Nachname</label>
<label for="job">Beruf:</label> <input class="form-control" type="text" name="surname" required />
<input type="text" id="job" name="job" required /> </div>
<div class="mb-3">
<button type="submit">Hinzufügen</button> <label class="form-label" for="job">Beruf</label>
<input class="form-control" type="text" name="job" required />
</div>
<button class="btn btn-primary" type="submit">Hinzufügen</button>
</form> </form>
</div> </div>
</section> </div>
</body> </body>
</html> </html>

View file

@ -5,16 +5,9 @@
layout:decorate="~{layout.html(title='Wilkommen bei Wursts Catering')}"> layout:decorate="~{layout.html(title='Wilkommen bei Wursts Catering')}">
<body> <body>
<section layout:fragment="content"> <div layout:fragment="content">
<p>Hier bekommen Sie übrigens nicht nur Wurst.</p> <p>Hier bekommen Sie übrigens nicht nur Wurst.</p>
<p>Test: (äöüß)</p> <p>Test: (äöüß)</p>
</section> </div>
</body> </body>
<footer style="bottom: 0; position: absolute;">
<p>© Hannes Wurst @ Mampf GmbH</p>
<p>
<a href="mailto:catering@mampf.com">catering@mampf.com</a>
</p>
</footer>
</html> </html>