1

Formatting

Co-authored-by: Christoph <tobi@urpost.de>
This commit is contained in:
Christoph
2020-03-18 20:18:03 +01:00
parent 01c0cac2a2
commit 2ba913f2c8
40 changed files with 354 additions and 245 deletions

View File

@ -16,7 +16,7 @@
<li>
<a th:href="@{/gruppen2}" href="/">Gruppen</a>
</li>
<li class="active">
<li class="active">
<a th:href="@{/gruppen2/createGroup}" href="/createGroup">Erstellen</a>
</li>
<li>
@ -34,23 +34,29 @@
<div class="col-10">
<h1>Gruppenerstellung</h1>
<form method="post" action="/gruppen2/createGroup">
<div class="shadow p-2" style=" border: 10px solid aliceblue; background: aliceblue">
<div class="shadow p-2"
style=" border: 10px solid aliceblue; background: aliceblue">
<div class="form-group">
<label for="titel">Titel</label>
<input type="text" class="form-control" id="titel" th:name="title" required>
<input class="form-control" id="titel" required th:name="title"
type="text">
</div>
<div class="form-group">
<label for="beschreibung">Beschreibung</label>
<textarea th:name="beschreibung" class="form-control" id="beschreibung" rows="3" required></textarea>
<textarea class="form-control" id="beschreibung" required
rows="3" th:name="beschreibung"></textarea>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" id="visibility" class="custom-control-input" th:name="visibility">
<label class="custom-control-label" for="visibility">Private Gruppe</label>
<input class="custom-control-input" id="visibility" th:name="visibility"
type="checkbox">
<label class="custom-control-label" for="visibility">Private
Gruppe</label>
</div>
<div class="form-group">
<label for="sel1"></label>
<select class="form-control" id="sel1">
<option selected="true" disabled>--Bitte Veranstaltung auswählen--</option>
<option disabled selected="true">--Bitte Veranstaltung auswählen--
</option>
<option>1</option>
<option>2</option>
<option>3</option>
@ -58,7 +64,10 @@
</select>
</div>
<div class="form-group pt-4">
<button class="btn btn-primary" type="submit" style="background: #52a1eb; border-style: none">Erstellen</button>
<button class="btn btn-primary"
style="background: #52a1eb; border-style: none"
type="submit">Erstellen
</button>
</div>
</div>
</form>

View File

@ -7,7 +7,8 @@
<title>Gruppenerstellung</title>
<th:block th:fragment="headcontent">
<!-- Links, Skripts, Styles hier einfügen! -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
@ -37,32 +38,43 @@
<div class="row">
<div class="col-10">
<h1>Veranstaltung erstellen</h1>
<div class="shadow p-2" style=" border: 10px solid aliceblue; background: aliceblue">
<form method="post" action="/gruppen2/createLecture" enctype="multipart/form-data">
<div class="shadow p-2"
style=" border: 10px solid aliceblue; background: aliceblue">
<form action="/gruppen2/createLecture" enctype="multipart/form-data"
method="post">
<div class="form-group">
<label for="titel">Titel</label>
<input type="text" class="form-control" id="titel" th:name="title" required>
<input class="form-control" id="titel" required th:name="title"
type="text">
</div>
<div class="form-group">
<label for="beschreibung">Beschreibung</label>
<textarea th:name="beschreibung" class="form-control" id="beschreibung" rows="3" required></textarea>
<textarea class="form-control" id="beschreibung" required
rows="3" th:name="beschreibung"></textarea>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" id="visibility" class="custom-control-input" th:name="visibility">
<label class="custom-control-label" for="visibility">Private Gruppe</label>
<input class="custom-control-input" id="visibility" th:name="visibility"
type="checkbox">
<label class="custom-control-label" for="visibility">Private
Gruppe</label>
</div>
<div class="form-group pt-4">
<div class="row">
<div class="col">
<div class="custom-file">
<input type="file" class="custom-file-input" id="file" th:name="file">
<label class="custom-file-label" for="file">CSV Datei von Mitgliedern hochladen</label>
<input class="custom-file-input" id="file" th:name="file"
type="file">
<label class="custom-file-label" for="file">CSV Datei von
Mitgliedern hochladen</label>
</div>
</div>
</div>
</div>
<div class="form-group pt-4">
<button class="btn btn-primary" type="submit" style="background: #52a1eb; border-style: none">Erstellen</button>
<button class="btn btn-primary"
style="background: #52a1eb; border-style: none"
type="submit">Erstellen
</button>
</div>
</form>
</div>
@ -71,11 +83,11 @@
</div>
<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
$(".custom-file-input").on("change", function () {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>
</main>
</body>
</html>
</html>

View File

@ -30,12 +30,16 @@
<main th:fragment="bodycontent">
<div class="container-fluid">
<div class="row">
<div class="col-9 shadow-sm p-4" style="border: 10px solid aliceblue; background: aliceblue">
<div class="col-9 shadow-sm p-4"
style="border: 10px solid aliceblue; background: aliceblue">
<h1 style="color: black; font-weight: bold" th:text="${group.getTitle()}"></h1>
<h3>
<span class="badge badge-pill badge-dark" style="background: darkslategray" th:if='${group.getVisibility() == group.getVisibility().PRIVATE }'>Private Gruppe</span>
<span class="badge badge-pill badge-primary" th:if="${group.getVisibility() == group.getVisibility().PUBLIC}">Öffentliche Gruppe</span>
<span class="badge badge-pill badge-success" style="background: lightseagreen" th:if='${group.getType() == group.getType().LECTURE}'> Veranstaltung</span>
<span class="badge badge-pill badge-dark" style="background: darkslategray"
th:if='${group.getVisibility() == group.getVisibility().PRIVATE }'>Private Gruppe</span>
<span class="badge badge-pill badge-primary"
th:if="${group.getVisibility() == group.getVisibility().PUBLIC}">Öffentliche Gruppe</span>
<span class="badge badge-pill badge-success" style="background: lightseagreen"
th:if='${group.getType() == group.getType().LECTURE}'> Veranstaltung</span>
</h3>
<br>
<div class="shadow-sm p-4" style="background: white">
@ -43,11 +47,15 @@
</div>
<br>
<div class="text-right btn-toolbar" style="float: right" role="toolbar">
<button class="btn btn-primary" style="background: dodgerblue; border: none; margin: 5px">
<button class="btn btn-primary"
style="background: dodgerblue; border: none; margin: 5px">
<a th:href="@{/gruppen2}" style="color: white">Zurück</a>
</button>
<form method="post" action="/gruppen2/leaveGroup">
<button th:value="${group.getId()}" th:name="group_id" class="btn btn-danger" type="submit" style="border-style: none; margin: 5px">Gruppe verlassen</button>
<button class="btn btn-danger" style="border-style: none; margin: 5px"
th:name="group_id" th:value="${group.getId()}"
type="submit">Gruppe verlassen
</button>
</form>
</div>
</div>
@ -55,8 +63,10 @@
<div style="display: inline-block; margin: 0">
<h2>Mitglieder</h2>
<div th:if='${group.getRoles().get(user.getUser_id()) == admin}'>
<form method="get" th:action="@{/gruppen2/details/members/{id}(id=${group.getId()})}">
<button class="btn btn-secondary" style="background: slategrey; float: right">
<form method="get"
th:action="@{/gruppen2/details/members/{id}(id=${group.getId()})}">
<button class="btn btn-secondary"
style="background: slategrey; float: right">
Mitglieder bearbeiten
</button>
</form>
@ -65,10 +75,12 @@
<br>
</div>
<div>
<ul th:each="member : ${group.getMembers()}" class="list-group-flush" style="background: slategrey">
<li class="list-group-item" style="background: aliceblue">
<ul class="list-group-flush" style="background: slategrey"
th:each="member : ${group.getMembers()}">
<li class="list-group-item" style="background: aliceblue">
<span th:text="${member.getUser_id()}"></span>
<span th:if='${group.getRoles().get(member.getUser_id()) == admin}' class="badge badge-success">admin</span>
<span class="badge badge-success"
th:if='${group.getRoles().get(member.getUser_id()) == admin}'>admin</span>
</li>
</ul>
</div>
@ -77,4 +89,4 @@
</div>
</main>
</body>
</html>
</html>

View File

@ -31,20 +31,31 @@
<div class="container-fluid">
<div class="row">
<div class="col-9">
<div class="shadow-sm p-4" style="border: 10px solid aliceblue; background: aliceblue">
<div class="shadow-sm p-4"
style="border: 10px solid aliceblue; background: aliceblue">
<h1 style="color: black; font-weight: bold" th:text="${group.getTitle()}"></h1>
<h3>
<span class="badge badge-pill badge-dark" style="background: darkslategray" th:if='${group.getVisibility() == group.getVisibility().PRIVATE }'>Private Gruppe</span>
<span class="badge badge-pill badge-primary" th:if="${group.getVisibility() == group.getVisibility().PUBLIC}">Öffentliche Gruppe</span>
<span class="badge badge-pill badge-success" style="background: lightseagreen" th:if='${group.getType() == group.getType().LECTURE}'> Veranstaltung</span>
<span class="badge badge-pill badge-dark" style="background: darkslategray"
th:if='${group.getVisibility() == group.getVisibility().PRIVATE }'>Private Gruppe</span>
<span class="badge badge-pill badge-primary"
th:if="${group.getVisibility() == group.getVisibility().PUBLIC}">Öffentliche Gruppe</span>
<span class="badge badge-pill badge-success"
style="background: lightseagreen"
th:if='${group.getType() == group.getType().LECTURE}'> Veranstaltung</span>
</h3>
<div class="shadow-sm p-4" style="background: white">
<p style="overflow-wrap: break-word" th:text="${group.getDescription()}"></p>
<p style="overflow-wrap: break-word"
th:text="${group.getDescription()}"></p>
</div>
<div class="form-group">
<div class="text-right">
<form method="post" action="/gruppen2/detailsBeitreten">
<button type="submit" th:href="@{/gruppen2/detailsBeitreten(id=${group.getId()})}" th:name="id" th:value="${group.id}" class="btn btn-primary" style="border-style: none;">Gruppe beitreten</button>
<button class="btn btn-primary"
style="border-style: none;"
th:href="@{/gruppen2/detailsBeitreten(id=${group.getId()})}"
th:name="id" th:value="${group.id}"
type="submit">Gruppe beitreten
</button>
</form>
</div>
</div>
@ -54,4 +65,4 @@
</div>
</main>
</body>
</html>
</html>

View File

@ -6,7 +6,8 @@
<title>Gruppendetails</title>
<th:block th:fragment="headcontent">
<!-- Links, Skripts, Styles hier einfügen! -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
@ -38,16 +39,25 @@
<div class="shadow p-2" style="border: 10px solid aliceblue; background: aliceblue">
<!-- absichern im controller nicht vergessen -->
<div class="form-group pt-4" th:if="${account.getRoles().contains('orga')}">
<form method="post" action="/gruppen2/details/members/addUsersFromCsv" enctype="multipart/form-data">
<form action="/gruppen2/details/members/addUsersFromCsv"
enctype="multipart/form-data"
method="post">
<div class="row">
<div class="col-9">
<div class="custom-file">
<input type="file" class="custom-file-input" id="file" th:name="file">
<label class="custom-file-label" for="file">CSV Datei von Mitgliedern hochladen</label>
<input class="custom-file-input" id="file" th:name="file"
type="file">
<label class="custom-file-label" for="file">CSV Datei von
Mitgliedern hochladen</label>
</div>
</div>
<div class="col-3">
<button th:name="group_id" th:value="${group.getId()}" class="btn btn-primary" type="submit" style="background: #52a1eb; border-style: none">Mitglieder hinzufügen</button>
<button class="btn btn-primary"
style="background: #52a1eb; border-style: none"
th:name="group_id" th:value="${group.getId()}"
type="submit">
Mitglieder hinzufügen
</button>
</div>
</div>
</form>
@ -62,28 +72,36 @@
</thead>
<tbody class="table-striped">
<tr th:each="member : ${group.getMembers()}">
<th th:text="${member.getUser_id()}"></th>
<td>
<span th:if='${group.getRoles().get(member.getUser_id()) != admin}'>Mitglied</span>
<span th:if='${group.getRoles().get(member.getUser_id()) == admin}'>Admin</span>
</td>
<td>
<form method="post" action="/gruppen2/details/members/changeRole">
<input type="hidden" th:name="group_id" th:value="${group.getId()}">
<input type="hidden" th:name="user_id" th:value="${member.getUser_id()}">
<button type="submit" class="btn btn-warning btn-sm">Rolle ändern</button><!-- th:if -->
</form>
<form method="post" action="/gruppen2/details/members/deleteUser">
<input type="hidden" th:name="group_id" th:value="${group.getId()}">
<input type="hidden" th:name="user_id" th:value="${member.getUser_id()}">
<button class="btn btn-danger btn-sm">Mitglied entfernen</button>
</form>
</td>
</tr>
<tr th:each="member : ${group.getMembers()}">
<th th:text="${member.getUser_id()}"></th>
<td>
<span th:if='${group.getRoles().get(member.getUser_id()) != admin}'>Mitglied</span>
<span th:if='${group.getRoles().get(member.getUser_id()) == admin}'>Admin</span>
</td>
<td>
<form action="/gruppen2/details/members/changeRole" method="post">
<input th:name="group_id" th:value="${group.getId()}"
type="hidden">
<input th:name="user_id" th:value="${member.getUser_id()}"
type="hidden">
<button class="btn btn-warning btn-sm" type="submit">Rolle
ändern
</button><!-- th:if -->
</form>
<form action="/gruppen2/details/members/deleteUser" method="post">
<input th:name="group_id" th:value="${group.getId()}"
type="hidden">
<input th:name="user_id" th:value="${member.getUser_id()}"
type="hidden">
<button class="btn btn-danger btn-sm">Mitglied entfernen
</button>
</form>
</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-primary" style="background: #52a1eb; border-style: none">
<button class="btn btn-primary" style="background: #52a1eb; border-style: none"
type="button">
<a th:href="@{/gruppen2/details(id=${group.getId()})}" style="color: white">Fertig</a>
</button>
</div>
@ -92,7 +110,7 @@
</div>
<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
$(".custom-file-input").on("change", function () {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});

View File

@ -1,18 +1,24 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link crossorigin="anonymous"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
rel="stylesheet">
<meta charset="UTF-8">
<title>Error</title>
</head>
<body>
<div class="mx-auto" style="vertical-align: center; horiz-align: center; top: 50%; left: 50%; margin-top: 200px">
<div class="text-center" style="background: aliceblue; align-items: center; margin: auto; width: 1000px; vertical-align: center; padding: 50px; display: block">
<div class="mx-auto"
style="vertical-align: center; horiz-align: center; top: 50%; left: 50%; margin-top: 200px">
<div class="text-center"
style="background: aliceblue; align-items: center; margin: auto; width: 1000px; vertical-align: center; padding: 50px; display: block">
<h1 style="text-align: center">Da ist etwas schiefgelaufen!</h1>
<h2 style="text-align: center">Die Seite, nach der du suchst, scheint nicht zu existieren.</h2>
<h2 style="text-align: center">Die Seite, nach der du suchst, scheint nicht zu
existieren.</h2>
<br>
<div>
<button type="button" class="btn btn-primary" style="margin: auto">
@ -23,4 +29,4 @@
</div>
</div>
</body>
</html>
</html>

View File

@ -10,23 +10,23 @@
</head>
<body>
<header>
<nav class="navigation navigation-secondary" is="mops-navigation" th:fragment="navigation">
<ul>
<li class="active">
<a th:href="@{/gruppen2}" href="/">Gruppen</a>
</li>
<li>
<a th:href="@{/gruppen2/createGroup}" href="/createGroup">Erstellen</a>
</li>
<li>
<a th:href="@{/gruppen2/findGroup}" href="/findGroup">Suche</a>
</li>
<!-- Fix double point -->
<li th:if="${account.getRoles().contains('orga')}">
<a th:href="@{/gruppen2/createLecture}" href="/createLecture">Veranstaltung</a>
</li>
</ul>
</nav>
<nav class="navigation navigation-secondary" is="mops-navigation" th:fragment="navigation">
<ul>
<li class="active">
<a href="/" th:href="@{/gruppen2}">Gruppen</a>
</li>
<li>
<a href="/createGroup" th:href="@{/gruppen2/createGroup}">Erstellen</a>
</li>
<li>
<a href="/findGroup" th:href="@{/gruppen2/findGroup}">Suche</a>
</li>
<!-- Fix double point -->
<li th:if="${account.getRoles().contains('orga')}">
<a href="/createLecture" th:href="@{/gruppen2/createLecture}">Veranstaltung</a>
</li>
</ul>
</nav>
</header>
<main th:fragment="bodycontent">
<div class="container-fluid">
@ -36,18 +36,23 @@
<form action="/" method="get">
<h3 style="color: dodgerblue; font-weight: bold;">
<small style="font-weight: normal; color: black">Mitglied in </small>
<small style="font-weight: bold; color: black" th:text="${gruppen.size()}"></small>
<small style="font-weight: normal; color: black" th:if='${gruppen.size()==1}'> Gruppe.</small>
<small style="font-weight: normal; color: black" th:if='${gruppen.size()!=1}'> Gruppen.</small>
<small style="font-weight: bold; color: black"
th:text="${gruppen.size()}"></small>
<small style="font-weight: normal; color: black"
th:if='${gruppen.size()==1}'> Gruppe.</small>
<small style="font-weight: normal; color: black"
th:if='${gruppen.size()!=1}'> Gruppen.</small>
</h3>
<br>
<div th:each="gruppe: ${gruppen}">
<div class="shadow-sm p-4" style="border: none; background: aliceblue">
<h3 style="color: dodgerblue; font-weight: bold;">
<a th:href="@{/gruppen2/details/{id}(id=${gruppe.getId()})}" th:text="${gruppe.getTitle()}"></a>
<a th:href="@{/gruppen2/details/{id}(id=${gruppe.getId()})}"
th:text="${gruppe.getTitle()}"></a>
</h3>
<div class="shadow-sm p-4" style="background: white">
<p style="overflow-wrap: break-word" th:text="${#strings.abbreviate(gruppe.getDescription(),300)}"></p>
<p style="overflow-wrap: break-word"
th:text="${#strings.abbreviate(gruppe.getDescription(),300)}"></p>
</div>
</div>
<br>
@ -58,4 +63,4 @@
</div>
</main>
</body>
</html>
</html>

View File

@ -36,29 +36,37 @@
<div class="shadow" style="border: 10px solid aliceblue; background: aliceblue">
<div class="form-group">
<label for="suchleiste">Suchbegriff:</label>
<input id="suchleiste" class="form-control" placeholder="z.B. Programmieren, Lerngruppe, ..." th:name="suchbegriff" type="text">
<input class="form-control" id="suchleiste"
placeholder="z.B. Programmieren, Lerngruppe, ..."
th:name="suchbegriff" type="text">
</div>
<button type="submit" class="btn btn-primary" style="background: #52a1eb; border-style: none">Suchen</button>
<button class="btn btn-primary"
style="background: #52a1eb; border-style: none"
type="submit">Suchen
</button>
</div>
</form>
<br>
<table class="table">
<!-- Erscheint dann, wenn man "Suchen" Button klickt und Ergebnisse angezeigt werden, aber so solls aussehen -->
<thead th:if="${!gruppen.isEmpty()}">
<tr>
<th scope="col">Gruppenname</th>
<th scope="col">Beschreibung</th>
<th scope="col">Mitgliederanzahl</th>
</tr>
<tr>
<th scope="col">Gruppenname</th>
<th scope="col">Beschreibung</th>
<th scope="col">Mitgliederanzahl</th>
</tr>
</thead>
<tbody th:each="gruppe : ${gruppen}">
<tr>
<th scope="row">
<a th:href="@{/gruppen2/detailsSearch(id=${gruppe.getId()})}" th:text="${gruppe.title}">Gruppenname</a>
</th>
<td style="" th:text="${#strings.abbreviate(gruppe.getDescription(), 50)}">Beschreibung</td>
<td th:text="${gruppe.getMembers().size()}">Mitgliederanzahl</td>
</tr>
<tr>
<th scope="row">
<a th:href="@{/gruppen2/detailsSearch(id=${gruppe.getId()})}"
th:text="${gruppe.title}">Gruppenname</a>
</th>
<td style="" th:text="${#strings.abbreviate(gruppe.getDescription(), 50)}">
Beschreibung
</td>
<td th:text="${gruppe.getMembers().size()}">Mitgliederanzahl</td>
</tr>
</tbody>
</table>
</div>
@ -66,4 +74,4 @@
</div>
</main>
</body>
</html>
</html>