108 lines
3.2 KiB
Plaintext
108 lines
3.2 KiB
Plaintext
<%- include('partials/header') %>
|
|
<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>
|
|
<% }) %>
|
|
</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>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') %>
|