training/views/riegen.ejs

116 lines
3.6 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
>
<%= teilnehmer.hasBirthday == 2 ? '🎂🎂' : '' %><%=
teilnehmer.hasBirthday == 1 ? '🎂' : '' %> <% } else { %>
<a href="/mitglied/<%= teilnehmer.id %>"
><%= teilnehmer.vorname %></a
>
<%= teilnehmer.hasBirthday == 2 ? '🎂🎂' : '' %><%=
teilnehmer.hasBirthday == 1 ? '🎂' : '' %> <% } %>
</td>
<td>
<% if (teilnehmer.helfer) { %>
<a href="/mitglied/<%= teilnehmer.id %>"
><strong><%= teilnehmer.nachname %></strong></a
>
<% } else { %>
<a href="/mitglied/<%= teilnehmer.id %>"
><%= teilnehmer.nachname %></a
>
<% } %> <% if (teilnehmer.probe) { %>
<span
style="color: <%= teilnehmer.anwesenheit <= 3 ? 'green' : 'red' %>;"
>
(<%= teilnehmer.anwesenheit %>)
</span>
<% } %>
</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') %>