merge meta + other group editing pages to edit.html + change routes + update styling

src/main/java/mops/gruppen2/controller/GroupDetailsController.java

@@ -46,7 +46,6 @@ public class GroupDetailsController {
     @GetMapping("/details/{id}")
     public String getDetailsPage(KeycloakAuthenticationToken token,
                                  Model model,
-                                 HttpServletRequest request,
                                  @PathVariable("id") String groupId) {
 
         User user = new User(token);
@@ -56,14 +55,8 @@ public class GroupDetailsController {
         UUID parentId = group.getParent();
         Group parent = projectionService.projectParent(parentId);
 
-        // Invite Link
-        String actualURL = request.getRequestURL().toString();
-        String serverURL = actualURL.substring(0, actualURL.indexOf("gruppen2/"));
-        String link = serverURL + "gruppen2/join/" + inviteService.getLinkByGroup(group);
-
         model.addAttribute("group", group);
         model.addAttribute("parent", parent);
-        model.addAttribute("link", link);
 
         // Detailseite für nicht-Mitglieder
         if (!ValidationService.checkIfMember(group, user)) {
@@ -102,37 +95,30 @@ public class GroupDetailsController {
     }
 
     @RolesAllowed({"ROLE_orga", "ROLE_studentin"})
-    @PostMapping("/details/{id}/destroy")
+    @GetMapping("/details/{id}/edit")
-    @CacheEvict(value = "groups", allEntries = true)
+    public String getDetailsMembers(KeycloakAuthenticationToken token,
-    public String postDetailsDestroy(KeycloakAuthenticationToken token,
+                                    Model model,
-                                     @PathVariable("id") String groupId) {
+                                    HttpServletRequest request,
+                                    @PathVariable("id") String groupId) {
 
         User user = new User(token);
         Group group = projectionService.projectSingleGroup(UUID.fromString(groupId));
 
-        groupService.deleteGroup(user, group);
+        // Invite Link
-
+        String actualURL = request.getRequestURL().toString();
-        return "redirect:/gruppen2";
+        String serverURL = actualURL.substring(0, actualURL.indexOf("gruppen2/"));
-    }
+        String link = serverURL + "gruppen2/join/" + inviteService.getLinkByGroup(group);
-
-    @RolesAllowed({"ROLE_orga", "ROLE_studentin"})
-    @GetMapping("/details/{id}/meta")
-    public String getDetailsMeta(KeycloakAuthenticationToken token,
-                                 Model model,
-                                 @PathVariable("id") String groupId) {
-
-        User user = new User(token);
-        Group group = projectionService.projectSingleGroup(UUID.fromString(groupId));
 
         ValidationService.throwIfNoAdmin(group, user);
 
         model.addAttribute("group", group);
+        model.addAttribute("link", link);
 
-        return "meta";
+        return "edit";
     }
 
     @RolesAllowed({"ROLE_orga", "ROLE_studentin"})
-    @PostMapping("/details/{id}/meta/update")
+    @PostMapping("/details/{id}/edit/meta")
     @CacheEvict(value = "groups", allEntries = true)
     public String postDetailsMetaUpdate(KeycloakAuthenticationToken token,
                                         @PathVariable("id") String groupId,
@@ -145,27 +131,11 @@ public class GroupDetailsController {
         groupService.updateTitle(user, group, title);
         groupService.updateDescription(user, group, description);
 
-        return "redirect:/gruppen2/details/" + groupId;
+        return "redirect:/gruppen2/details/" + groupId + "/edit";
     }
 
     @RolesAllowed({"ROLE_orga", "ROLE_studentin"})
-    @GetMapping("/details/{id}/members")
+    @PostMapping("/details/{id}/edit/userlimit")
-    public String getDetailsMembers(KeycloakAuthenticationToken token,
-                                    Model model,
-                                    @PathVariable("id") String groupId) {
-
-        User user = new User(token);
-        Group group = projectionService.projectSingleGroup(UUID.fromString(groupId));
-
-        ValidationService.throwIfNoAdmin(group, user);
-
-        model.addAttribute("group", group);
-
-        return "members";
-    }
-
-    @RolesAllowed({"ROLE_orga", "ROLE_studentin"})
-    @PostMapping("/details/{id}/members/update/userlimit")
     @CacheEvict(value = "groups", allEntries = true)
     public String postDetailsMembersUpdateUserLimit(KeycloakAuthenticationToken token,
                                                     @PathVariable("id") String groupId,
@@ -176,11 +146,11 @@ public class GroupDetailsController {
 
         groupService.updateUserLimit(user, group, userLimit);
 
-        return "redirect:/gruppen2/details/" + groupId + "/members";
+        return "redirect:/gruppen2/details/" + groupId + "/edit";
     }
 
     @RolesAllowed("ROLE_orga")
-    @PostMapping("/details/{id}/members/update/csv")
+    @PostMapping("/details/{id}/edit/csv")
     @CacheEvict(value = "groups", allEntries = true)
     public String postDetailsMembersUpdateCsv(KeycloakAuthenticationToken token,
                                               @PathVariable("id") String groupId,
@@ -191,13 +161,11 @@ public class GroupDetailsController {
 
         groupService.addUsersToGroup(CsvService.readCsvFile(file), group, user);
 
-        return "redirect:/gruppen2/details/" + groupId + "/members";
+        return "redirect:/gruppen2/details/" + groupId + "/edit";
     }
 
-    //TODO: Method + view for /details/{id}/members/{id}
-
     @RolesAllowed({"ROLE_orga", "ROLE_studentin"})
-    @PostMapping("/details/{id}/members/{userid}/update/role")
+    @PostMapping("/details/{id}/edit/role/{userid}")
     @CacheEvict(value = "groups", allEntries = true)
     public String postDetailsMembersUpdateRole(KeycloakAuthenticationToken token,
                                                @PathVariable("id") String groupId,
@@ -215,11 +183,11 @@ public class GroupDetailsController {
             return "redirect:/gruppen2/details/" + groupId;
         }
 
-        return "redirect:/gruppen2/details/" + groupId + "/members";
+        return "redirect:/gruppen2/details/" + groupId + "/edit";
     }
 
     @RolesAllowed({"ROLE_orga", "ROLE_studentin"})
-    @PostMapping("/details/{id}/members/{userid}/delete")
+    @PostMapping("/details/{id}/edit/delete/{userid}")
     @CacheEvict(value = "groups", allEntries = true)
     public String postDetailsMembersDelete(KeycloakAuthenticationToken token,
                                            @PathVariable("id") String groupId,
@@ -235,6 +203,22 @@ public class GroupDetailsController {
             groupService.deleteUser(new User(userId), group);
         }
 
-        return "redirect:/gruppen2/details/" + groupId + "/members";
+        return "redirect:/gruppen2/details/" + groupId + "/edit";
     }
+
+    @RolesAllowed({"ROLE_orga", "ROLE_studentin"})
+    @PostMapping("/details/{id}/edit/destroy")
+    @CacheEvict(value = "groups", allEntries = true)
+    public String postDetailsDestroy(KeycloakAuthenticationToken token,
+                                     @PathVariable("id") String groupId) {
+
+        User user = new User(token);
+        Group group = projectionService.projectSingleGroup(UUID.fromString(groupId));
+
+        groupService.deleteGroup(user, group);
+
+        return "redirect:/gruppen2";
+    }
+
+    //TODO: Method + view for /details/{id}/member/{id}
 }

src/main/resources/data-h2.sql

@@ -32,20 +32,21 @@ VALUES (1, '2d90ae27-1129-4b61-84a5-6c7d585e777e', '07FEA694', 'CreateGroupEvent
         '{"type":"CreateGroupEvent","groupId":"555a531c-8b80-491c-88b4-8fc18170d318","userId":"2D7D9CE0","groupParent":null,"groupType":"PRIVATE"}'),
        (15, '555a531c-8b80-491c-88b4-8fc18170d318', 'orga', 'AddUserEvent',
         '{"type":"AddUserEvent","groupId":"555a531c-8b80-491c-88b4-8fc18170d318","userId":"orga","givenname":"Jerald","familyname":"Ward","email":"Jerald.Ward@mail.de"}'),
+       (16, '555a531c-8b80-491c-88b4-8fc18170d318', 'orga', 'UpdateRoleEvent',
+        '{"type":"UpdateRoleEvent","groupId":"555a531c-8b80-491c-88b4-8fc18170d318","userId":"orga","newRole":"ADMIN"}'),
 
-       (16, '555a531c-8b80-491c-88b4-8fc18170d318', '2', 'UpdateUserLimitEvent',
+
+       (17, '555a531c-8b80-491c-88b4-8fc18170d318', '2', 'UpdateUserLimitEvent',
         '{"type":"UpdateUserLimitEvent","groupId":"555a531c-8b80-491c-88b4-8fc18170d318","userId":"2","userLimit":"1000"}'),
 
-       (17, '555a531c-8b80-491c-88b4-8fc18170d318', 'EBB60C50', 'UpdateGroupTitleEvent',
+       (18, '555a531c-8b80-491c-88b4-8fc18170d318', '5CFBF1AF', 'UpdateGroupTitleEvent',
-        '{"type":"UpdateGroupTitleEvent","groupId":"555a531c-8b80-491c-88b4-8fc18170d318","userId":"EBB60C50","newGroupTitle":"Gangplank"}'),
+        '{"type":"UpdateGroupTitleEvent","groupId":"555a531c-8b80-491c-88b4-8fc18170d318","userId":"5CFBF1AF","newGroupTitle":"Zyra"}'),
-       (18, '555a531c-8b80-491c-88b4-8fc18170d318', 'EF050D58', 'UpdateGroupDescriptionEvent',
+       (19, '555a531c-8b80-491c-88b4-8fc18170d318', 'EF050D58', 'UpdateGroupDescriptionEvent',
         '{"type":"UpdateGroupDescriptionEvent","groupId":"555a531c-8b80-491c-88b4-8fc18170d318","userId":"EF050D58","newGroupDescription":"Not Draven Draaaaven."}'),
-       (19, '555a531c-8b80-491c-88b4-8fc18170d318', '3', 'AddUserEvent',
+       (20, '555a531c-8b80-491c-88b4-8fc18170d318', '3', 'AddUserEvent',
         '{"type":"AddUserEvent","groupId":"555a531c-8b80-491c-88b4-8fc18170d318","userId":"3","givenname":"Jesica","familyname":"OKeefe","email":"Jesica.OKeefe@mail.de"}'),
-       (20, '555a531c-8b80-491c-88b4-8fc18170d318', '4', 'AddUserEvent',
+       (21, '555a531c-8b80-491c-88b4-8fc18170d318', '4', 'AddUserEvent',
         '{"type":"AddUserEvent","groupId":"555a531c-8b80-491c-88b4-8fc18170d318","userId":"4","givenname":"Jess","familyname":"Schamberger","email":"Jess.Schamberger@mail.de"}'),
-       (21, '555a531c-8b80-491c-88b4-8fc18170d318', '5', 'AddUserEvent',
-        '{"type":"AddUserEvent","groupId":"555a531c-8b80-491c-88b4-8fc18170d318","userId":"5","givenname":"Dannie","familyname":"Wintheiser","email":"Dannie.Wintheiser@mail.de"}'),
 
        (22, '5e1c2b9a-bf3a-4c9e-9bf0-f5beecb69eb3', 'E7E2EC5F', 'CreateGroupEvent',
         '{"type":"CreateGroupEvent","groupId":"5e1c2b9a-bf3a-4c9e-9bf0-f5beecb69eb3","userId":"E7E2EC5F","groupParent":null,"groupType":"LECTURE"}'),

src/main/resources/static/details.css

@@ -10,7 +10,6 @@
 
 .btn-bar {
     align-self: start;
-    margin-left: 10px;
 }
 
 /*Badges*/

src/main/resources/static/script.js

@@ -0,0 +1,22 @@
+// Add the following code if you want the name of the file appear on select
+$(".custom-file-input").on("change", function () {
+    const fileName = $(this).val().split("\\").pop();
+    $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
+});
+
+function disable(id) {
+    $(id).prop('disabled', true);
+}
+
+function enable(id) {
+    $(id).prop('disabled', false);
+}
+
+function copyLink() {
+    const copyText = document.getElementById("groupLink");
+
+    copyText.select();
+    copyText.setSelectionRange(0, 99999);
+
+    document.execCommand("copy");
+}

src/main/resources/templates/create.html

@@ -18,93 +18,21 @@
 
             <form enctype="multipart/form-data" method="post" th:action="@{/gruppen2/create}">
 
-                <div class="content-text">
+                <!--Titel + Beschreibung-->
-                    <!--Gruppentitel-->
+                <div class="content-text" th:insert="~{fragments/gruppen :: meta}"></div>
-                    <div class="input-group mb-2">
-                        <div class="input-group-prepend">
-                            <span class="input-group-text text-monospace">Gruppentitel:</span>
-                        </div>
-                        <input type="text" class="form-control" th:name="title" required>
-                    </div>
-
-                    <!--Gruppenbeschreibung-->
-                    <div class="input-group">
-                        <div class="input-group-prepend">
-                            <span class="input-group-text text-monospace">Beschreibung:</span>
-                        </div>
-                        <textarea class="form-control" th:name="description" required></textarea>
-                    </div>
-                </div>
 
                 <!--TODO: Enter AsciiDoc Description-->
 
                 <div class="content-text-in">
                     <!--Gruppentyp-->
-                    <label for="grouptype">Gruppentyp:</label>
+                    <div th:replace="~{fragments/gruppen :: grouptype}"></div>
-                    <div class="btn-toolbar row mb-2" id="grouptype">
-                        <div class="btn-group btn-group-toggle col-sm-4" data-toggle="buttons">
-                            <label class="btn btn-secondary active" onclick="enableParent()">
-                                <input type="radio" name="type" value="PRIVATE" checked> Privat
-                            </label>
-                            <label class="btn btn-secondary" onclick="enableParent()">
-                                <input type="radio" name="type" value="PUBLIC"> Öffentlich
-                            </label>
-                            <label class="btn btn-secondary" onclick="disableParent()"
-                                   th:if="${account.getRoles().contains('orga')}">
-                                <input type="radio" name="type" value="LECTURE"> Veranstaltung
-                            </label>
-                        </div>
-
-                        <div class="input-group col-sm-8">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text text-monospace">Gehört zu:</span>
-                            </div>
-                            <select class="custom-select" id="parentselect" name="parent">
-                                <option value="" selected>Keiner</option>
-                                <option th:each="lecture : ${lectures}" th:value="${lecture.getId()}"
-                                        th:text="${lecture.getTitle()}"></option>
-                            </select>
-                        </div>
-                    </div>
 
                     <!--Benutzerlimit-->
-                    <label for="userlimit">Teilnehmeranzahl:</label>
+                    <div th:replace="~{fragments/gruppen :: userlimit}"></div>
-                    <div class="btn-toolbar row" id="userlimit">
-                        <div class="btn-group btn-group-toggle col-sm-4" data-toggle="buttons">
-                            <label class="btn btn-secondary active">
-                                <input type="radio" name="limit" value="INFINITE" checked>
-                                Unbegrenzt
-                            </label>
-                            <label class="btn btn-secondary">
-                                <input type="radio" name="limit" value="LOCKED"> Begrenzt
-                            </label>
-                        </div>
-
-                        <div class="input-group col-sm-8">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text text-monospace">Limit:</span>
-                            </div>
-                            <input type="number" class="form-control" th:name="userlimit" value="1"
-                                   min="1" max="100000" required>
-                            <div class="input-group-append">
-                                <span class="input-group-text text-monospace">Teilnehmer</span>
-                            </div>
-                        </div>
-                    </div>
                 </div>
 
-                <div class="content-text" th:if="${account.getRoles().contains('orga')}">
+                <!--CSV Import-->
-                    <!--CSV-->
+                <div class="content-text" th:insert="~{fragments/gruppen :: csvimport}"></div>
-                    <div class="input-group">
-                        <div class="input-group-prepend">
-                            <span class="input-group-text text-monospace">CSV:</span>
-                        </div>
-                        <div class="custom-file">
-                            <input type="file" class="custom-file-input" id="file" th:name="file">
-                            <label class="custom-file-label" for="file">Datei auswählen</label>
-                        </div>
-                    </div>
-                </div>
 
                 <!--Submit-->
                 <button class="btn btn-primary btn-block" type="submit">Gruppe Erstellen</button>
@@ -112,23 +40,6 @@
             </form>
         </div>
     </div>
-
-    <script>
-        // Add the following code if you want the name of the file appear on select
-        $(".custom-file-input").on("change", function () {
-            const fileName = $(this).val().split("\\").pop();
-            $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
-        });
-
-        function disableParent() {
-            $('#parentselect').prop('disabled', true);
-        }
-
-        function enableParent() {
-            $('#parentselect').prop('disabled', false);
-        }
-    </script>
-
 </main>
 
 </body>

src/main/resources/templates/details_member.html

@@ -31,20 +31,6 @@
                            th:if="${group.getRoles().get(user.getId()) == admin}"></a>
                     </div>
 
-                    <!--Invite Link-->
-                    <div class="content-text input-group"
-                         th:if="${group.getRoles().get(user.getId()) == admin}">
-                        <div class="input-group-prepend">
-                            <span class="input-group-text">Einladungslink:</span>
-                        </div>
-                        <input class="form-control" readonly th:value="${link}" type="text">
-                        <div class="input-group-append">
-                            <button type="button" class="btn btn-outline-secondary"
-                                    onclick="copyLink()">Link kopieren
-                            </button>
-                        </div>
-                    </div>
-
                     <!--Description-->
                     <div class="content-text-in">
                         <span th:text="${group.getDescription()}"></span>
@@ -57,12 +43,7 @@
                         <span class="col"></span>
 
                         <form method="post" th:action="@{/gruppen2/details/{id}/leave(id=${group.getId()})}">
-                            <button class="btn btn-warning btn-bar" type="submit">Gruppe verlassen
+                            <button class="btn btn-danger btn-bar" type="submit">Gruppe verlassen
-                            </button>
-                        </form>
-                        <form method="post" th:if="${group.getRoles().get(user.getId()) == admin}"
-                              th:action="@{/gruppen2/details/{id}/destroy(id=${group.getId()})}">
-                            <button class="btn btn-danger btn-bar" type="submit">Gruppe löschen
                             </button>
                         </form>
                     </div>
@@ -83,8 +64,8 @@
                 <!--Bearbeiten-Button-->
                 <div class="mb-2" th:if="${group.getRoles().get(user.getId()) == admin}">
                     <form method="get"
-                          th:action="@{/gruppen2/details/{id}/members(id=${group.getId()})}">
+                          th:action="@{/gruppen2/details/{id}/edit(id=${group.getId()})}">
-                        <button class="btn btn-secondary btn-block">Teilnehmer verwalten</button>
+                        <button class="btn btn-secondary btn-block">Gruppe verwalten</button>
                     </form>
                 </div>
 
@@ -101,17 +82,6 @@
 
         </div>
     </div>
-
-    <script>
-        function copyLink() {
-            const copyText = document.getElementById("groupLink");
-
-            copyText.select();
-            copyText.setSelectionRange(0, 99999);
-
-            document.execCommand("copy");
-        }
-    </script>
 </main>
 </body>
 </html>

src/main/resources/templates/edit.html

@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="de" xmlns:th="http://www.thymeleaf.org" th:replace="~{mopslayout :: html(
+    name='Gruppenbildung',
+    title='Gruppe verwalten',
+    headcontent=~{fragments/general :: headcontent(style='none')},
+    navigation=~{fragments/general :: nav(current='none')},
+    bodycontent=~{:: bodycontent})}">
+
+<body>
+
+<main th:fragment="bodycontent">
+    <div class="container-fluid">
+        <h1 class="def-cursor" th:text="${group.getTitle()}"></h1>
+
+        <!--Fertig oder löschen-->
+        <div class="content">
+            <div class="row">
+                <form method="get" th:action="@{/gruppen2/details/{id}(id=${group.getId()})}">
+                    <button class="btn btn-primary">Fertig</button>
+                </form>
+
+                <!--Spacer-->
+                <span class="col"></span>
+
+                <form method="post" th:action="@{/gruppen2/details/{id}/destroy(id=${group.getId()})}">
+                    <button class="btn btn-danger btn-bar" type="submit">Gruppe löschen
+                    </button>
+                </form>
+            </div>
+        </div>
+
+        <!--Invite Link-->
+        <div class="content input-group">
+            <div class="input-group-prepend">
+                <span class="input-group-text">Einladungslink:</span>
+            </div>
+            <input class="form-control" readonly th:value="${link}" type="text">
+            <div class="input-group-append">
+                <button type="button" class="btn btn-secondary"
+                        onclick="copyLink()">Link kopieren
+                </button>
+            </div>
+        </div>
+
+        <!--Meta-->
+        <div class="content">
+            <div class="content-heading">
+                <span>Eigenschaften</span>
+            </div>
+
+            <!--Beschreibung + Titel-->
+            <div class="content-text">
+                <form th:action="@{/gruppen2/details/{id}/edit/meta(id=${group.getId()})}"
+                      method="post">
+
+                    <div th:replace="~{fragments/gruppen :: meta}"></div>
+                    <div class="row">
+                        <span class="col"></span>
+                        <button type="submit" class="btn btn-secondary mt-2">Speichern</button>
+                    </div>
+                </form>
+            </div>
+
+            <!--Userlimit-->
+            <div class="content-text-in">
+                <form th:action="@{/gruppen2/details/{id}/edit/userlimit(id=${group.getId()})}"
+                      method="post">
+
+                    <div th:replace="~{fragments/gruppen :: userlimit}"></div>
+                    <div class="row">
+                        <span class="col"></span>
+                        <button type="submit" class="btn btn-secondary mt-2">Speichern</button>
+                    </div>
+                </form>
+            </div>
+
+            <!--CSV Import-->
+            <div class="content-text mb-0">
+                <form th:action="@{/gruppen2/details/{id}/edit/csv(id=${group.getId()})}"
+                      th:if="${account.getRoles().contains('orga')}"
+                      enctype="multipart/form-data" method="post">
+
+                    <div th:replace="~{fragments/gruppen :: csvimport}"></div>
+                    <div class="row">
+                        <span class="col"></span>
+                        <button type="submit" class="btn btn-secondary mt-2">Speichern</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <!--Teilnehmerliste-->
+        <div class="content members">
+            <div class="content-heading">
+                <span>Teilnehmer</span>
+            </div>
+
+            <ul class="list-group">
+                <li class="list-group-item d-flex justify-content-between" th:each="member : ${group.getMembers()}">
+                    <div>
+                        <span th:text="${member.getGivenname()  + ' ' + member.getFamilyname().charAt(0) + '.'}"></span>
+                        <span class="badge badge-success align-self-start ml-2"
+                              th:if="${group.getRoles().get(member.getId()) == admin}">Admin</span>
+                    </div>
+
+                    <div class="d-flex">
+                        <form th:action="@{/gruppen2/details/{id}/edit/delete/{userid}(id=${group.getId()}, userid=${member.getId()})}"
+                              th:unless="${member.getId() == account.getName()}"
+                              method="post">
+                            <button type="submit" class="btn btn-danger mr-2">Entfernen</button>
+                        </form>
+
+                        <form th:action="@{/gruppen2/details/{id}/edit/role/{userid}(id=${group.getId()}, userid=${member.getId()})}"
+                              method="post">
+                            <button type="submit" class="btn btn-warning">Rolle ändern</button>
+                        </form>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+</main>

src/main/resources/templates/fragments/general.html

@@ -8,6 +8,9 @@
     <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>
     <script src="https://kit.fontawesome.com/22c0caaa8a.js" crossorigin="anonymous"></script>
+
+    <script type="text/javascript" th:src="@{/script.js}"></script>
+
     <link th:href="@{/style.css}" rel="stylesheet"/>
     <link th:unless="${style == 'none'}" th:href="@{${style}}" rel="stylesheet"/>
 </th:block>

src/main/resources/templates/fragments/gruppen.html

@@ -19,3 +19,89 @@
     <!--<span class="badge badge-success float-right"
           th:if='${group.getRoles().get(user.getId()) == admin}'>Admin</span>-->
 </th:block>
+
+<!--CSV-->
+<div th:fragment="csvimport" class="input-group" th:if="${account.getRoles().contains('orga')}">
+    <div class="input-group-prepend">
+        <span class="input-group-text text-monospace">CSV:</span>
+    </div>
+    <div class="custom-file">
+        <input type="file" class="custom-file-input" id="file" th:name="file">
+        <label class="custom-file-label" for="file">Datei auswählen</label>
+    </div>
+</div>
+
+<!--Gruppentyp-->
+<th:block th:fragment="grouptype">
+    <label for="grouptype">Gruppentyp:</label>
+    <div class="btn-toolbar row mb-2 mx-0" id="grouptype">
+        <div class="btn-group btn-group-toggle col-sm-4 px-0" data-toggle="buttons">
+            <label class="btn btn-secondary active" onclick="enable('#parentselect')">
+                <input type="radio" name="type" value="PRIVATE" checked> Privat
+            </label>
+            <label class="btn btn-secondary" onclick="enable('#parentselect')">
+                <input type="radio" name="type" value="PUBLIC"> Öffentlich
+            </label>
+            <label class="btn btn-secondary" onclick="disable('#parentselect')"
+                   th:if="${account.getRoles().contains('orga')}">
+                <input type="radio" name="type" value="LECTURE"> Veranstaltung
+            </label>
+        </div>
+
+        <div class="input-group col-sm-8 pr-0">
+            <div class="input-group-prepend">
+                <span class="input-group-text text-monospace">Gehört zu:</span>
+            </div>
+            <select class="custom-select" id="parentselect" name="parent">
+                <option value="" selected>Keiner</option>
+                <option th:each="lecture : ${lectures}" th:value="${lecture.getId()}"
+                        th:text="${lecture.getTitle()}"></option>
+            </select>
+        </div>
+    </div>
+</th:block>
+
+<!--Userlimit-->
+<th:block th:fragment="userlimit">
+    <label for="userlimit">Teilnehmeranzahl:</label>
+    <div class="btn-toolbar row mx-0" id="userlimit">
+        <div class="btn-group btn-group-toggle col-sm-4 px-0" data-toggle="buttons">
+            <label class="btn btn-secondary active" onclick="disable('#limitselect')">
+                <input type="radio" name="userlimit" value="9223372036854775807" checked>
+                Unbegrenzt
+            </label>
+            <label class="btn btn-secondary" onclick="enable('#limitselect')">
+                <input type="radio"> Begrenzt
+            </label>
+        </div>
+
+        <div class="input-group col-sm-8 pr-0">
+            <div class="input-group-prepend">
+                <span class="input-group-text text-monospace">Limit:</span>
+            </div>
+            <input type="number" class="form-control" name="userlimit" value="1"
+                   min="1" max="100000" id="limitselect" required disabled>
+            <div class="input-group-append">
+                <span class="input-group-text text-monospace">Teilnehmer</span>
+            </div>
+        </div>
+    </div>
+</th:block>
+
+<th:block th:fragment="meta">
+    <!--Gruppentitel-->
+    <div class="input-group mb-2">
+        <div class="input-group-prepend">
+            <span class="input-group-text text-monospace">Gruppentitel:</span>
+        </div>
+        <input type="text" class="form-control" th:name="title" required>
+    </div>
+
+    <!--Gruppenbeschreibung-->
+    <div class="input-group">
+        <div class="input-group-prepend">
+            <span class="input-group-text text-monospace">Beschreibung:</span>
+        </div>
+        <textarea class="form-control" th:name="description" required></textarea>
+    </div>
+</th:block>

src/main/resources/templates/members.html

@@ -1,141 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org"
-      th:replace="~{mopslayout :: html(name='Gruppenbildung', headcontent=~{:: headcontent}, navigation=~{:: navigation}, bodycontent=~{:: bodycontent})}">
-<head>
-    <meta charset="utf-8">
-    <title>Gruppendetails</title>
-    <th:block th:fragment="headcontent">
-        <!-- Links, Skripts, Styles hier einfügen! -->
-        <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>
-    </th:block>
-</head>
-<body>
-<header>
-    <nav class="navigation navigation-secondary" is="mops-navigation" th:fragment="navigation">
-        <ul>
-            <li class="active">
-                <a th:href="@{/gruppen2}">Gruppen</a>
-            </li>
-            <li>
-                <a th:href="@{/gruppen2/create}">Erstellen</a>
-            </li>
-            <li>
-                <a th:href="@{/gruppen2/search}">Suche</a>
-            </li>
-        </ul>
-    </nav>
-</header>
-<main th:fragment="bodycontent">
-    <div class="container-fluid">
-        <div class="row">
-            <div class="col-10">
-                <h1>Mitglieder bearbeiten</h1>
-                <!--TODO: Anzeige bei unbegrenzt-->
-                <div th:switch="${group.getUserLimit() != 100000}">
-                    <h5 th:case="${true}">
-                        <a th:text="${group.getMembers().size()}"></a>
-                        <a>von maximal</a>
-                        <a th:text="${group.getUserLimit()}"></a>
-                        <a>Benutzern.</a>
-                    </h5>
-                    <h5 th:case="${false}"> unbegrenzte Teilnehmeranzahl</h5>
-                </div>
-                <div class="shadow p-2" style="border: 10px solid aliceblue; background: aliceblue;">
-                    <div class="form-group pt-4" th:if="${account.getRoles().contains('orga')}">
-                        <form th:action="@{/gruppen2/details/{id}/members/update/csv(id=${group.getId()})}"
-                              enctype="multipart/form-data" method="post">
-                            <div class="input-group mb-3">
-                                <div class="custom-file">
-                                    <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 class="input-group-append">
-                                    <button class="btn btn-outline-secondary"
-                                            style="background: #52a1eb; border-style: none;"
-                                            th:name="group_id" type="submit">
-                                        <a style="color: white;">Hinzufügen</a>
-                                    </button>
-                                </div>
-                            </div>
-                        </form>
-                    </div>
-                    <div class="form-group pt-4">
-                        <form method="post" th:action="@{/gruppen2/details/{id}/members/update/userlimit(id=${group.getId()})}">
-                            <div class="input-group mb-3" id="userMaximum">
-                                <label for="teilnehmerzahl"></label>
-                                <input class="form-control"
-                                       id="teilnehmerzahl"
-                                       placeholder="Maximale Teilnehmerzahl ändern..."
-                                       th:name="maximum"
-                                       type="number" th:min="${group.getMembers().size()}"
-                                       max="10000">
-                                <div class="input-group-append">
-                                    <button class="btn btn-outline-secondary"
-                                            style="background: #52a1eb; border-style: none;"
-                                            th:name="group_id" type="submit">
-                                        <a style="color: white;">Speichern</a>
-                                    </button>
-                                </div>
-                            </div>
-                        </form>
-                    </div>
-
-                    <table class="table" style="table-layout: fixed;">
-                        <thead>
-                        <tr>
-                            <th scope="col">Mitglied</th>
-                            <th scope="col" style="width: 180px;">Rolle</th>
-                            <th scope="col" style="width: 280px;">Optionen</th>
-                        </tr>
-                        </thead>
-                        <tbody class="table-striped">
-                        <tr th:each="member : ${group.getMembers()}">
-                            <th th:text="${#strings.abbreviate(member.getGivenname(), 15)  + ' ' + member.getFamilyname().substring(0, 1) + '.'}"></th>
-                            <td>
-                                <span th:if='${group.getRoles().get(member.getId()) != admin}'>Mitglied</span>
-                                <span th:if='${group.getRoles().get(member.getId()) == admin}'>Admin</span>
-                            </td>
-                            <td>
-                                <div class="text-right btn-toolbar" style="float: right;" role="toolbar">
-                                    <form method="post"
-                                          th:action="@{/gruppen2/details/{id}/members/{userid}/update/role(id=${group.getId()}, userid=${member.getId()})}">
-                                        <button class="btn btn-warning btn-sm" type="submit"
-                                                style="margin: 5px;">Rolle ändern
-                                        </button>
-                                    </form>
-                                    <form method="post"
-                                          th:action="@{/gruppen2/details/{id}/members/{userid}/delete(id=${group.getId()}, userid=${member.getId()})}">
-                                        <button class="btn btn-danger btn-sm" style="margin: 5px;"
-                                                th:if='!${account.getName().equals(member.getId())}'>
-                                            Mitglied entfernen
-                                        </button>
-                                    </form>
-                                </div>
-                            </td>
-                        </tr>
-                        </tbody>
-                    </table>
-                    <form method="get" th:action="@{/gruppen2/details/{id}(id=${group.getId()})}">
-                        <button class="btn btn-primary" style="background: #52a1eb; border-style: none;" type="submit">
-                            Fertig
-                        </button>
-                    </form>
-                </div>
-            </div>
-        </div>
-    </div>
-    <script>
-        // Add the following code if you want the name of the file appear on select
-        $(".custom-file-input").on("change", function () {
-            var fileName = $(this).val().split("\\").pop();
-            $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
-        });
-    </script>
-</main>