training/views/riegen.ejs

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