training/views/teilnehmer.ejs

<%- 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') %>