140 lines
4.6 KiB
Plaintext
140 lines
4.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>
|
|
<th onclick="sortTable(3, 'table-<%= riegennummer %>')">
|
|
Geburtstag
|
|
</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>
|
|
<td>
|
|
<%= ('00' + teilnehmer.birthday.getDate()).slice(-2) %>.<%= ('00' +
|
|
(teilnehmer.birthday.getMonth() + 1)).slice(-2) %>.<%=
|
|
teilnehmer.birthday.getFullYear() %>
|
|
</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.trim();
|
|
let cellB = rowB.cells[spaltenIndex].innerText.trim();
|
|
|
|
// Prüfen, ob das Format dem Geburtsdatum (TT-MM.JJJJ) entspricht
|
|
const datePattern = /^(\d{2}).(\d{2})\.(\d{4})$/;
|
|
let dateA = cellA.match(datePattern);
|
|
let dateB = cellB.match(datePattern);
|
|
|
|
if (dateA && dateB) {
|
|
// Umwandlung in das Format JJJJ-MM-TT für die korrekte Sortierung
|
|
let dateObjA = new Date(`${dateA[3]}-${dateA[2]}-${dateA[1]}`);
|
|
let dateObjB = new Date(`${dateB[3]}-${dateB[2]}-${dateB[1]}`);
|
|
|
|
return isAscending ? dateObjA - dateObjB : dateObjB - dateObjA;
|
|
}
|
|
|
|
// Überprüfen, ob beide Werte Zahlen sind
|
|
let numA = parseFloat(cellA);
|
|
let numB = parseFloat(cellB);
|
|
|
|
if (!isNaN(numA) && !isNaN(numB)) {
|
|
return isAscending ? numA - numB : numB - numA;
|
|
}
|
|
|
|
// Alphabetische Sortierung als Fallback
|
|
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') %>
|