training/views/teilnehmer.ejs

82 lines
2.5 KiB
Plaintext

<%- include('partials/header') %>
<h1>Teilnehmende</h1>
<table id="teilnehmendeTabelle">
<thead>
<tr>
<th onclick="sortTable(0)">Vorname</th>
<th onclick="sortTable(1)">Nachname</th>
<th onclick="sortTable(2)">Alter</th>
<th onclick="sortTable(3)">Teilnahmen</th>
</tr>
</thead>
<tbody>
<% teilnehmende.forEach(teilnehmer => { %>
<tr>
<td>
<% if (teilnehmer.helfer) { %>
<a href="/mitglied/<%= teilnehmer.id %>"><strong><%= teilnehmer.vorname %> <%= teilnehmer.hasBirthday == 2 ? '🎂🎂' : '' %><%= teilnehmer.hasBirthday == 1 ? '🎂' : '' %></strong></a>
<% } else { %>
<a href="/mitglied/<%= teilnehmer.id %>"><%= teilnehmer.vorname %> <%= teilnehmer.hasBirthday == 2 ? '🎂🎂' : '' %><%= teilnehmer.hasBirthday == 1 ? '🎂' : '' %></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>
<td>
<% if (teilnehmer.probe) { %>
<span style="color: <%= teilnehmer.anwesenheit <= 3 ? 'green' : 'red' %>">
<% } %>
<%= teilnehmer.anwesenheit %>
</span>
</td>
</tr>
<% }) %>
</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.trim();
let cellB = rowB.cells[spaltenIndex].innerText.trim();
// Überprüfen, ob die Zellen numerisch sind
let numA = parseFloat(cellA);
let numB = parseFloat(cellB);
// Wenn beide Zahlen sind, sortiere numerisch
if (!isNaN(numA) && !isNaN(numB)) {
return isAscending ? numA - numB : numB - numA;
}
// Andernfalls sortiere alphabetisch
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>
<%- include('partials/footer') %>