training/views/teilnehmer.ejs

77 lines
2.1 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>
</tr>
</thead>
<tbody>
<% teilnehmende.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>
<% } %>
<% if (teilnehmer.probe) { %>
<span style="color: <%= teilnehmer.anwesenheit <= 3 ? 'green' : 'red' %>;">
(<%= teilnehmer.anwesenheit %>)
</span>
<% } %>
</td>
<td><%= teilnehmer.age %> Jahre</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.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>
<%- include('partials/footer') %>