From 9497e335f6139bb7638a7e47e26aca5d9653e3d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Klaas=20B=C3=B6rgmann?= <klaas@boergmann.it>
Date: Wed, 18 Sep 2024 16:07:18 +0200
Subject: [PATCH] Sortierbare Listen in Anwesenheit, Riegen und Teilnehmerliste

---
 views/partials/header.ejs |  12 +++++
 views/riegen.ejs          | 103 +++++++++++++++++++++++++++++++++-----
 views/teilnehmer.ejs      |  71 ++++++++++++++++++++++----
 views/trainings.ejs       |  72 +++++++++++++++++++++++---
 4 files changed, 229 insertions(+), 29 deletions(-)
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
index 69c8a99..32311a5 100644
--- a/views/partials/header.ejs
+++ b/views/partials/header.ejs
@@ -5,6 +5,18 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Turnstunden WebApp</title>
   <link rel="stylesheet" href="/css/bootstrap.min.css">
+    <style>
+    table {
+      border-collapse: collapse;
+    }
+    td, th {
+       padding-left: 10px;
+       padding-right: 10px;
+    }
+    th {
+      cursor: pointer;
+    }
+  </style>
 </head>
 <body>
 
diff --git a/views/riegen.ejs b/views/riegen.ejs
index 8b3ed4a..4e4727f 100644
--- a/views/riegen.ejs
+++ b/views/riegen.ejs
@@ -2,27 +2,106 @@
 <h1>Riegen</h1>
 
 <!-- Nav tabs -->
+
 <ul class="nav nav-tabs" id="myTab" role="tablist">
   <% Object.keys(riegen).forEach((riegennummer, index) => { %>
-    <li class="nav-item" role="presentation">
-      <button class="nav-link <%= index === 0 ? 'active' : '' %>" id="tab-<%= riegennummer %>" data-bs-toggle="tab" data-bs-target="#riege-<%= riegennummer %>" type="button" role="tab" aria-controls="riege-<%= riegennummer %>" aria-selected="<%= index === 0 ? 'true' : 'false' %>">Riege <%= riegennummer %></button>
-    </li>
+  <li class="nav-item" role="presentation">
+    <button
+      class="nav-link <%= index === 0 ? 'active' : '' %>"
+      id="tab-<%= riegennummer %>"
+      data-bs-toggle="tab"
+      data-bs-target="#riege-<%= riegennummer %>"
+      type="button"
+      role="tab"
+      aria-controls="riege-<%= riegennummer %>"
+      aria-selected="<%= index === 0 ? 'true' : 'false' %>"
+    >
+      Riege <%= riegennummer %>
+    </button>
+  </li>
   <% }) %>
 </ul>
 
 <!-- Tab panes -->
 <div class="tab-content" id="myTabContent">
   <% Object.keys(riegen).forEach((riegennummer, index) => { %>
-    <div class="tab-pane fade <%= index === 0 ? 'show active' : '' %>" id="riege-<%= riegennummer %>" role="tabpanel" aria-labelledby="tab-<%= riegennummer %>">
-      <h3>
-      <% riegen[riegennummer].forEach(teilnehmer => { if(teilnehmer.helfer) { %> <a href="/mitglied/<%= teilnehmer.id %>"><strong><%= teilnehmer.vorname %> <%= teilnehmer.nachname %></strong> (<%= teilnehmer.age %> Jahre)</a> <% }}) %>
-      </h3>
-      <ul class="list-group list-group-flush">
-        
-          <% riegen[riegennummer].forEach(teilnehmer => { if(!teilnehmer.helfer) { %> <li> <a href="/mitglied/<%= teilnehmer.id %>"><strong><%= teilnehmer.vorname %> <%= teilnehmer.nachname %></strong> (<%= teilnehmer.age %> Jahre)</a> </li> <% }}) %>
-      </ul>
-    </div>
+  <div
+    class="tab-pane fade <%= index === 0 ? 'show active' : '' %>"
+    id="riege-<%= riegennummer %>"
+    role="tabpanel"
+    aria-labelledby="tab-<%= riegennummer %>"
+  >
+    <h3>Teilnehmende der Riege <%= riegennummer %></h3>
+
+    <table id="table-<%= riegennummer %>">
+      <thead>
+        <tr>
+          <th onclick="sortTable(0, 'table-<%= riegennummer %>')">Vorname</th>
+          <th onclick="sortTable(1, 'table-<%= riegennummer %>')">Nachname</th>
+          <th onclick="sortTable(2, 'table-<%= riegennummer %>')">Alter</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% riegen[riegennummer].forEach(teilnehmer => { %>
+        <tr>
+          <td>
+            <% if (teilnehmer.helfer) { %>
+            <a href="/mitglied/<%= teilnehmer.id %>"
+              ><strong><%= teilnehmer.vorname %></strong></a
+            >
+            <% } else { %>
+            <a href="/mitglied/<%= teilnehmer.id %>"
+              ><%= teilnehmer.vorname %></a
+            >
+            <% } %>
+          </td>
+          <td>
+            <% if (teilnehmer.helfer) { %>
+            <a href="/mitglied/<%= teilnehmer.id %>"
+              ><strong><%= teilnehmer.nachname %></strong></a
+            >
+            <% } else { %>
+            <a href="/mitglied/<%= teilnehmer.id %>"
+              ><%= teilnehmer.nachname %></a
+            >
+            <% } %>
+          </td>
+          <td><%= teilnehmer.age %> Jahre</td>
+        </tr>
+        <% }) %>
+      </tbody>
+    </table>
+  </div>
   <% }) %>
 </div>
 
+<script>
+  function sortTable(spaltenIndex, tableId) {
+    const table = document.getElementById(tableId);
+    let rows = Array.from(table.rows).slice(1); // Überschrift auslassen
+    let isAscending = table.getAttribute("data-sort") === "asc";
+
+    rows.sort((rowA, rowB) => {
+      let cellA = rowA.cells[spaltenIndex].innerText.toLowerCase();
+      let cellB = rowB.cells[spaltenIndex].innerText.toLowerCase();
+
+      if (!isNaN(cellA) && !isNaN(cellB)) {
+        // Wenn die Zellen Zahlen sind, sortiere nach Zahlengröße
+        cellA = parseFloat(cellA);
+        cellB = parseFloat(cellB);
+      }
+
+      if (cellA < cellB) return isAscending ? 1 : -1;
+      if (cellA > cellB) return isAscending ? -1 : 1;
+      return 0;
+    });
+
+    // Tabelle neu anordnen
+    rows.forEach((row) => table.tBodies[0].appendChild(row));
+
+    // Sortierrichtung ändern
+    table.setAttribute("data-sort", isAscending ? "desc" : "asc");
+  }
+</script>
+
 <%- include('partials/footer') %>
diff --git a/views/teilnehmer.ejs b/views/teilnehmer.ejs
index 65c8c52..51dc22f 100644
--- a/views/teilnehmer.ejs
+++ b/views/teilnehmer.ejs
@@ -1,16 +1,69 @@
 <%- include('partials/header') %>
   <h1>Teilnehmende</h1>
-  <ul>
+
+
+
+  <table id="teilnehmendeTabelle">
+  <thead>
+    <tr>
+      <th onclick="sortTable(0)">Vorname</th>
+      <th onclick="sortTable(1)">Nachname</th>
+      <th onclick="sortTable(2)">Alter</th>
+    </tr>
+  </thead>
+  <tbody>
     <% teilnehmende.forEach(teilnehmer => { %>
-      <li>
-        <% if (teilnehmer.helfer) { %>
-          <a href="/mitglied/<%= teilnehmer.id %>"><strong><%= teilnehmer.vorname %> <%= teilnehmer.nachname %></strong> (<%= teilnehmer.age %> Jahre)</a>
-        <% } else { %>
-          <a href="/mitglied/<%= teilnehmer.id %>"><%= teilnehmer.vorname %> <%= teilnehmer.nachname %> (<%= teilnehmer.age %> Jahre)</a>
-        <% } %>
-      </li>
+      <tr>
+        <td>
+          <% if (teilnehmer.helfer) { %>
+            <a href="/mitglied/<%= teilnehmer.id %>"><strong><%= teilnehmer.vorname %></strong></a>
+          <% } else { %>
+            <a href="/mitglied/<%= teilnehmer.id %>"><%= teilnehmer.vorname %></a>
+          <% } %>
+        </td>
+        <td>
+          <% if (teilnehmer.helfer) { %>
+            <a href="/mitglied/<%= teilnehmer.id %>"><strong><%= teilnehmer.nachname %></strong></a>
+          <% } else { %>
+            <a href="/mitglied/<%= teilnehmer.id %>"><%= teilnehmer.nachname %></a>
+          <% } %>
+        </td>
+        <td><%= teilnehmer.age %> Jahre</td>
+      </tr>
     <% }) %>
-  </ul>
+  </tbody>
+</table>
+
+<script>
+function sortTable(spaltenIndex) {
+  const table = document.getElementById("teilnehmendeTabelle");
+  let rows = Array.from(table.rows).slice(1); // Überschrift auslassen
+  let isAscending = table.getAttribute('data-sort') === 'asc';
+
+  rows.sort((rowA, rowB) => {
+    let cellA = rowA.cells[spaltenIndex].innerText.toLowerCase();
+    let cellB = rowB.cells[spaltenIndex].innerText.toLowerCase();
+    
+    if (!isNaN(cellA) && !isNaN(cellB)) {
+      // Wenn die Zellen Zahlen sind, sortiere nach Zahlengröße
+      cellA = parseFloat(cellA);
+      cellB = parseFloat(cellB);
+    }
+
+    if (cellA < cellB) return isAscending ? 1 : -1;
+    if (cellA > cellB) return isAscending ? -1 : 1;
+    return 0;
+  });
+
+  // Tabelle neu anordnen
+  rows.forEach(row => table.tBodies[0].appendChild(row));
+
+  // Sortierrichtung ändern
+  table.setAttribute('data-sort', isAscending ? 'desc' : 'asc');
+}
+</script>
+
+
 </body>
 </html>
 
diff --git a/views/trainings.ejs b/views/trainings.ejs
index dc99dce..040acd8 100644
--- a/views/trainings.ejs
+++ b/views/trainings.ejs
@@ -270,26 +270,51 @@
   <% Object.keys(riegen).forEach((riegennummer, index) => { %>
     <div class="tab-pane fade <%= activeRiege == riegennummer ? 'show active' : '' %>" id="riege-<%= riegennummer %>" role="tabpanel" aria-labelledby="tab-<%= riegennummer %>">
       <form method="post" action="/anwesend">
-      <table>
-      
+      <table id="anwesend-<%= riegennummer %>">
+        <thead>
+    <tr>
+      <th onclick="sortTable(0, <%= riegennummer %>)">Vorname</th>
+      <th onclick="sortTable(1, <%= riegennummer %>)">Nachname</th>
+      <th onclick="sortTable(2, <%= riegennummer %>)">Alter</th>
+      <th onclick="sortTable(2, <%= riegennummer %>)">Anw.</th>
+    </tr>
+  </thead>
         <% riegen[riegennummer].forEach(teilnehmer => { if(teilnehmer.helfer) { %> 
           <tr>
             <td>
-              <%= teilnehmer.vorname %> <%= teilnehmer.nachname %>
-        </td>
-          <td>
+              <%= teilnehmer.vorname %> 
+            </td>
+            <td>
+              <%= teilnehmer.nachname %>
+            </td>
+            <td>
+              <%= teilnehmer.age %>
+            </td>
+            <td>
             <input type="hidden" name="inriege" value="<%= teilnehmer.id %>" />          <input type="checkbox" name="anw" <%= teilnehmer.anwesend  ? 'checked' : ''  %> value="<%= teilnehmer.id %>">
-        <% }}) %>
-      </td>
+            <% }}) %>
+          </td>
       </tr>
     
           <% riegen[riegennummer].forEach(teilnehmer => { if(!teilnehmer.helfer) { %> 
           <tr>      
-            <td><%= teilnehmer.vorname %> <%= teilnehmer.nachname %> </td><td>    <input type="hidden" name="inriege" value="<%= teilnehmer.id %>" /><input type="checkbox" name="anw" <%= teilnehmer.anwesend  ? 'checked' : ''  %> value="<%= teilnehmer.id %>"></td>
+            <td>
+              <%= teilnehmer.vorname %>             
+            </td>
+            <td> 
+              <%= teilnehmer.nachname %> 
+            </td>
+            <td>
+              <%= teilnehmer.age %>
+            </td>
+            <td>    
+              <input type="hidden" name="inriege" value="<%= teilnehmer.id %>" /><input type="checkbox" name="anw" <%= teilnehmer.anwesend  ? 'checked' : ''  %> value="<%= teilnehmer.id %>">
+            </td>
           </tr>             
             <% }}) %>
       
     </table>
+
     <input type="hidden" name="trainingId" value="<%= training.id %>">
     <input type="hidden" name="riege" value="<%= riegennummer %>">
     <% if (session && session.role === 'admin') { %>
@@ -323,6 +348,37 @@
 
 </div>
 
+<script>
+function sortTable(spaltenIndex, riege) {
+  const table = document.getElementById("anwesend-" + riege);
+  let rows = Array.from(table.rows).slice(1); // Überschrift auslassen
+  let isAscending = table.getAttribute('data-sort') === 'asc';
+  
+  rows.sort((rowA, rowB) => {
+    let cellA = rowA.cells[spaltenIndex].innerText.toLowerCase();
+    let cellB = rowB.cells[spaltenIndex].innerText.toLowerCase();
+    
+    if (!isNaN(cellA) && !isNaN(cellB)) {
+      // Wenn die Zellen Zahlen sind, sortiere nach Zahlengröße
+      cellA = parseFloat(cellA);
+      cellB = parseFloat(cellB);
+    }
+
+    if (cellA < cellB) return isAscending ? 1 : -1;
+    if (cellA > cellB) return isAscending ? -1 : 1;
+    return 0;
+  });
+
+  // Tabelle neu anordnen
+  rows.forEach(row => table.tBodies[0].appendChild(row));
+
+  // Sortierrichtung ändern
+  table.setAttribute('data-sort', isAscending ? 'desc' : 'asc');
+}
+</script>
+
+
+
 </body>
 </html>
 

Vorname	Nachname	Alter	Anw.
- <%= teilnehmer.vorname %> <%= teilnehmer.nachname %> -	+ <%= teilnehmer.vorname %> +	+ <%= teilnehmer.nachname %> +	+ <%= teilnehmer.age %> +	value="<%= teilnehmer.id %>"> - <% }}) %> -
<%= teilnehmer.vorname %> <%= teilnehmer.nachname %>	value="<%= teilnehmer.id %>">	+ <%= teilnehmer.vorname %> +	+ <%= teilnehmer.nachname %> +	+ <%= teilnehmer.age %> +	+ value="<%= teilnehmer.id %>"> +