training/views/trainings.ejs

<%- include('partials/header') %>
<h1>
<div>
  <% if (previousTraining) { %>
      <a href="/training?kw=<%= previousTraining.kw %>"> &lt; </a>
  <% } %>
  Training <%= moment(training.datum).format('DD.MM.YYYY') %>
  <% if (nextTraining) { %>
    <a href="/training?kw=<%= nextTraining.kw %>"> &gt; </a>
  <% } %>
  </h1>
</div>

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link <%= activeTab === 'geraete' ? 'active' : '' %>" id="tab-geraete" data-bs-toggle="tab" data-bs-target="#geraete" type="button" role="tab" aria-controls="geraete" aria-selected="true">Geräteplan</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link <%= activeTab === 'spiel' ? 'active' : '' %>" id="tab-spiel" data-bs-toggle="tab" data-bs-target="#spiel" type="button" role="tab" aria-controls="spiel" aria-selected="false">Aufwärmen / Spiel</button>
  </li><li class="nav-item" role="presentation">
    <button class="nav-link <%= activeTab === 'anwesend' ? 'active' : '' %>" id="tab-anwesend" data-bs-toggle="tab" data-bs-target="#anwesend" type="button" role="tab" aria-controls="anwesend" aria-selected="false">Anwesenheit</button>
  </li>
</ul>

<% if (training) { %>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade <%= activeTab === 'geraete' ? 'show active' : '' %>" id="geraete" role="tabpanel" aria-labelledby="tab-geraete">
 <h2> Geräte </h2>
 <ul>
    <li>Riege 1 (Klaas): <%= training.geraet_riege_1_name %></li>
    <li>Riege 2 (Rabea): <%= training.geraet_riege_2_name %></li>
    <li>Riege 3 (Laura): <%= training.geraet_riege_3_name %></li>
    <li>Riege 4 (Laila / Carlotta): <%= training.geraet_riege_4_name %></li>
    <li>Riege 5 (Simon): <%= training.geraet_riege_5_name %></li>
</ul>
</div>
<div class="tab-pane fade <%= activeTab === 'spiel' ? 'show active' : '' %>" id="spiel" role="tabpanel" aria-labelledby="tab-spiel">
<div id="aufwaermen">
      <h3>Aufwärmen:</h3>
      <% if (training.aufwaermleiter_name) { %>
        <div id="viewAufwaermenLeiter" class="mt-0" style="margin: 0; padding: 0;">
          <strong>Leitung:</strong>
            <%= training.aufwaermleiter_name %>
          <% if (session && session.role === 'admin') { %><button class="btn btn-primary" onclick="toggleDivsAufwaermenLeiter()">Edit</button><% } %>
          </div>
          <% if (session && session.role === 'admin') { %>
          <div id="editAufwaermenLeiter" class="mt-0 d-none" style="margin: 0; padding: 0;">
            <form method="POST" action="/update-leader">
              <strong>Leitung:</strong>
              <input type="hidden" name="trainingId" value="<%= training.id %>">
              <input type="hidden" name="type" value="aufwaermleiter">
              <select name="leaderId">
                <% aufwaermleiterCandidates.forEach(candidate => { %>
                  <option value="<%= candidate.id %>"><%= candidate.name %> (<%= Math.floor(candidate.weeks_since_last) %> Wochen)</option>
                <% }) %>
              </select>
              <button class="btn btn-primary" type="submit">Speichern</button>
              <button class="btn btn-danger" type="button" onclick="toggleDivsAufwaermenLeiter()">cancel</button>        
        </form>
        
          </div>
          <% } %>
          
          <script>
              function toggleDivsAufwaermenLeiter() {
                  $('#viewAufwaermenLeiter').toggleClass('d-none d-block');
                  $('#editAufwaermenLeiter').toggleClass('d-none d-block');
              }
          </script>
          
 
      <% } else { %>
        <form method="POST" action="/update-leader">
          <p><strong>Leitung:</strong>
          <input type="hidden" name="trainingId" value="<%= training.id %>">
          <input type="hidden" name="type" value="aufwaermleiter">
          <select name="leaderId">
            <% aufwaermleiterCandidates.forEach(candidate => { %>
              <option value="<%= candidate.id %>"><%= candidate.name %> (<%= Math.floor(candidate.weeks_since_last) %> Wochen)</option>
            <% }) %>
          </select>
          <% if (session && session.role === 'admin') { %>
          <button class="btn btn-primary" type="submit">Speichern</button>
          <% } %>
        </form></p>
      <% } %>
      
        <% if (training.aufwaermen_name) { %>
          <div id="viewAufwaermen" class="mt-0">
            <strong>Spiel:</strong> 
              <%= training.aufwaermen_name %>
            <% if (session && session.role === 'admin') { %>
                <button class="btn btn-primary" onclick="toggleDivsAufwaermen()">edit</button>
              <% } %>
            </div>
            <% if (session && session.role === 'admin') { %>
            <div id="editAufwaermen" class="mt-0 d-none"  style="margin: 0; padding: 0;">
              <form method="POST" action="/update-training">
                <p><strong>Spiel:</strong> 
                <input type="hidden" name="trainingId" value="<%= training.id %>">
                <input type="hidden" name="type" value="aufwaermen">
                <datalist id="spiele">
                    <% aufwaermenCandidates.forEach(candidate => { %>
                    <option value="<%= candidate.name %>"><%= candidate.name %></option>
                  <% }) %>
              </datalist>
              <input list="spiele" value="<%= training.aufwaermen_name %>" id="spielName" name="spielName">
                <button class="btn btn-primary" type="submit">Speichern</button>
                <button class="btn btn-danger" type="button" onclick="toggleDivsAufwaermen()">cancel</button>
              </form>
          </p></div>
            <% } %>
            
            <script>
                function toggleDivsAufwaermen() {
                    $('#viewAufwaermen').toggleClass('d-none d-block');
                    $('#editAufwaermen').toggleClass('d-none d-block');
                }
            </script>
        <% } else { %>
          <form method="POST" action="/update-training">
            <p><strong>Spiel:</strong> 
            <input type="hidden" name="trainingId" value="<%= training.id %>">
            <input type="hidden" name="type" value="aufwaermen">
            <datalist id="spiele">
                <% aufwaermenCandidates.forEach(candidate => { %>
                <option value="<%= candidate.name %>"><%= candidate.name %></option>
              <% }) %>
          </datalist>
          <input list="spiele" id="spielName" name="spielName">
          <% if (session && session.role === 'admin') { %>
            <button class="btn btn-primary" type="submit">Speichern</button>
            <% } %>
          </form></p>
        <% } %>
  </div>
<div id="spiel">
      <h3>Spiel: </h3>
      
      <% if (training.spielleiter_name) { %>
        <div id="viewSpielLeiter" class="0" style="margin: 0; padding: 0;">
          <p><strong>Leitung:</strong>
            <%= training.spielleiter_name %>

          <% if (session && session.role === 'admin') { %>
              <button class="btn btn-primary" onclick="toggleDivsSpielLeiter()">edit</button>
            <% } %>
          </p>
          </div>
          
          <% if (session && session.role === 'admin') { %>
          <div id="editSpielLeiter" class="mt-0 d-none" style="margin: 0; padding: 0;">
            <form method="POST" action="/update-leader">
              <p><strong>Leitung:</strong>
              <input type="hidden" name="trainingId" value="<%= training.id %>">
              <input type="hidden" name="type" value="spielleiter">
              <select name="leaderId">
                <% spielleiterCandidates.forEach(candidate => { %>
                  <option value="<%= candidate.id %>"><%= candidate.name %> (<%= Math.floor(candidate.weeks_since_last) %> Wochen)</option>
                <% }) %>
              </select>
              <button class="btn btn-primary" type="submit">Speichern</button>
              <button class="btn btn-danger" type="button" onclick="toggleDivsSpielLeiter()">cancel</button>
            </form></p>
          

          </div>
          <% } %>
          
          <script>
              function toggleDivsSpielLeiter() {
                  $('#viewSpielLeiter').toggleClass('d-none d-block');
                  $('#editSpielLeiter').toggleClass('d-none d-block');
              }
          </script>
          

      <% } else { %>
        <form method="POST" action="/update-leader">
          <p><strong>Leitung:</strong>
          <input type="hidden" name="trainingId" value="<%= training.id %>">
          <input type="hidden" name="type" value="spielleiter">
          <select name="leaderId">
            <% spielleiterCandidates.forEach(candidate => { %>
              <option value="<%= candidate.id %>"><%= candidate.name %> (<%= Math.floor(candidate.weeks_since_last) %> Wochen)</option>
            <% }) %>
          </select>
          <% if (session && session.role === 'admin') { %>
          <button class="btn btn-primary" type="submit">Speichern</button>
          <% } %>
        </form></p>
      <% } %>

    
        <% if (training.spiel_name) { %>
          <div id="viewSpiel" class="mt-0" style="margin: 0; padding: 0;">
            <p><strong>Spiel:</strong> 
              <%= training.spiel_name %>

            <% if (session && session.role === 'admin') { %>
                <button class="btn btn-primary" onclick="toggleDivsSpiel()">edit</button>
              <% } %>
            </div>
            
            <% if (session && session.role === 'admin') { %>
            <div id="editSpiel" class="mt-0 d-none" style="margin: 0; padding: 0;">
              <form method="POST" action="/update-training">
                <p><strong>Spiel:</strong> 
                <input type="hidden" name="trainingId" value="<%= training.id %>">
                <input type="hidden" name="type" value="spiel">
                <datalist id="spiele">
                  <% aufwaermenCandidates.forEach(candidate => { %>
                  <option value="<%= candidate.name %>"><%= candidate.name %></option>
                <% }) %>
            </datalist>
            <input list="spiele" id="spielName" name="spielName" value=" <%= training.spiel_name %>">
                <button class="btn btn-primary" type="submit">Speichern</button>
                <button class="btn btn-danger" type="button" onclick="toggleDivsSpiel()">cancel</button>
              </form>
            
            </div>
            <% } %>
            
            <script>
                function toggleDivsSpiel() {
                    $('#viewSpiel').toggleClass('d-none d-block');
                    $('#editSpiel').toggleClass('d-none d-block');
                }
            </script>
            


        <% } else { %>
          
          <form method="POST" action="/update-training">
            <p><strong>Spiel:</strong> 
            <input type="hidden" name="trainingId" value="<%= training.id %>">
            <input type="hidden" name="type" value="spiel">
            <datalist id="spiele">
              <% aufwaermenCandidates.forEach(candidate => { %>
              <option value="<%= candidate.name %>"><%= candidate.name %></option>
            <% }) %>
        </datalist>
        <input list="spiele" id="spielName" name="spielName">
        <% if (session && session.role === 'admin') { %>
            <button class="btn btn-primary" type="submit">Speichern</button>
            <% } %>
          </form>

        <% } %>
      </div>


</div>
<div class="tab-pane fade <%= activeTab === 'anwesend' ? 'show active' : '' %>" id="anwesend" role="tabpanel" aria-labelledby="tab-anwesend"> 
  <h3>Anwesenheit</h3>
  <p>Anwesend: <%= anwesend.length %></p>
  <!-- Nav tabs -->
<ul class="nav nav-tabs" id="RiegenTab" role="tablist">
  <% Object.keys(riegen).forEach((riegennummer, index) => { %>
    <li class="nav-item" role="presentation">
      <button class="nav-link <%= activeRiege == riegennummer ? '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 <%= activeRiege == riegennummer ? 'show active' : '' %>" id="riege-<%= riegennummer %>" role="tabpanel" aria-labelledby="tab-<%= riegennummer %>">
      <form method="post" action="/anwesend">
      <table id="anwesend-<%= riegennummer %>">
        <thead>
    <tr>
      <th onclick="sortTable(0, <%= riegennummer %>)">Vorname</th>
      <th onclick="sortTable(1, <%= riegennummer %>)">Nachname</th>
      <th onclick="sortTable(2, <%= riegennummer %>)">Alter</th>
      <th onclick="sortTable(2, <%= riegennummer %>)">Anw.</th>
    </tr>
  </thead>
        <% riegen[riegennummer].forEach(teilnehmer => { if(teilnehmer.helfer) { %> 
          <tr>
            <td>
              <%= teilnehmer.vorname %> 
            </td>
            <td>
              <%= teilnehmer.nachname %>
            </td>
            <td>
              <%= teilnehmer.age %>
            </td>
            <td>
            <input type="hidden" name="inriege" value="<%= teilnehmer.id %>" />          <input type="checkbox" name="anw" <%= teilnehmer.anwesend  ? 'checked' : ''  %> value="<%= teilnehmer.id %>">
            <% }}) %>
          </td>
      </tr>
    
          <% riegen[riegennummer].forEach(teilnehmer => { if(!teilnehmer.helfer) { %> 
          <tr>      
            <td>
              <%= teilnehmer.vorname %>             
            </td>
            <td> 
              <%= teilnehmer.nachname %>
              <% if (teilnehmer.probe) { %>
            <span
              style="color: <%= teilnehmer.anwesenheit <= 3 ? 'green' : 'red' %>;"
            >
              (<%= teilnehmer.anwesenheit %>)
            </span>
            <% } %>
            </td>
            <td>
              <%= teilnehmer.age %>
            </td>
            <td>    
              <input type="hidden" name="inriege" value="<%= teilnehmer.id %>" /><input type="checkbox" name="anw" <%= teilnehmer.anwesend  ? 'checked' : ''  %> value="<%= teilnehmer.id %>">
            </td>
          </tr>             
            <% }}) %>
      
    </table>

    <input type="hidden" name="trainingId" value="<%= training.id %>">
    <input type="hidden" name="riege" value="<%= riegennummer %>">
    <% if (session && session.role === 'admin') { %>
      <button type="submit">Speichern</button>
      <% } %>
    </form>

    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newMemberModal-<%= riegennummer %>">
  Neues Mitglied
  </button>

  <!-- Modal -->
<div class="modal fade" id="newMemberModal-<%= riegennummer %>" tabindex="-1" aria-labelledby="newMemberModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Neues Mitglied</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form method="POST" action="/new-member">
          Name: <input type="text" id="vorname" placeholder="Vorname" name="vorname">
          <input type="text" id="nachname" placeholder="Nachname" name="nachname"></br>
          Geburtsdatum: <input type="date" id="geburt" name="geburt"></br>
          <select name="riege" value="<%= riegennummer %>">
            <option value=1 <%= riegennummer == 1 ? 'selected' : '' %>> Riege 1</option>
            <option value=2 <%= riegennummer == 2 ? 'selected' : '' %>> Riege 2</option>
            <option value=3 <%= riegennummer == 3 ? 'selected' : '' %>> Riege 3</option>
            <option value=4 <%= riegennummer == 4 ? 'selected' : '' %>> Riege 4</option>
            <option value=5 <%= riegennummer == 5 ? 'selected' : '' %>> Riege 5</option>
          </select></br>
          Adresse: <input type="text" id="adresse" placeholder="Adresse" name="adresse"></br>
          Probe: <input type="checkbox" name="probe" value="true"></br>
          <input type="hidden" name="from" value="training">
          <input type="hidden" name="training" value="<%= training.id %>">
        </div>
          <div class="modal-footer">
          <button type="submit">Speichern</button>
        </form>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>





    </div>
  <% }) %>
</div>



</div>

    </div>
      <% } else { %>
  <p>Kein Training gefunden für das ausgewählte Datum.</p>
<% } %>

<div>
<form method="GET" action="/training">
  <label for="training-date">Datum wählen:</label>
  <select id="training-date" name="kw" onchange="this.form.submit()">
    <% trainingsDates.forEach(date => { %>
      <option value="<%= date.kw %>" <%= selectedKW === date.kw ? 'selected' : '' %>>
        <%= date.datum %> %>
      </option>
    <% }) %>
  </select>
</form>

</div>

<script>
function sortTable(spaltenIndex, riege) {
  const table = document.getElementById("anwesend-" + riege);
  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') %>