training/views/trainings.ejs

436 lines
18 KiB
Plaintext
Raw Normal View History

2024-05-23 20:49:34 +02:00
<%- include('partials/header') %>
2024-05-26 18:25:15 +02:00
<h1>
<div>
<% if (previousTraining) { %>
<a href="/training?kw=<%= previousTraining.kw %>"> &lt; </a>
2024-05-26 18:25:15 +02:00
<% } %>
Training <%= moment(training.datum).format('DD.MM.YYYY') %>
2024-05-26 18:25:15 +02:00
<% if (nextTraining) { %>
<a href="/training?kw=<%= nextTraining.kw %>"> &gt; </a>
2024-05-26 18:25:15 +02:00
<% } %>
</h1>
</div>
2024-05-31 18:42:27 +02:00
<!-- 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>
2024-05-31 18:56:02 +02:00
</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>
2024-05-31 18:56:02 +02:00
</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>
2024-05-31 18:42:27 +02:00
</li>
</ul>
2024-05-23 20:49:34 +02:00
<% if (training) { %>
2024-05-31 18:42:27 +02:00
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade <%= activeTab === 'geraete' ? 'show active' : '' %>" id="geraete" role="tabpanel" aria-labelledby="tab-geraete">
2024-05-23 21:58:22 +02:00
<h2> Geräte </h2>
<ul>
2024-09-18 15:15:22 +02:00
<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>
2024-09-28 12:40:45 +02:00
<li>Riege 4 (Laila / Carlotta): <%= training.geraet_riege_4_name %></li>
2024-09-18 15:15:22 +02:00
<li>Riege 5 (Simon): <%= training.geraet_riege_5_name %></li>
2024-05-23 21:58:22 +02:00
</ul>
2024-05-31 18:42:27 +02:00
</div>
<div class="tab-pane fade <%= activeTab === 'spiel' ? 'show active' : '' %>" id="spiel" role="tabpanel" aria-labelledby="tab-spiel">
2024-05-26 18:25:15 +02:00
<div id="aufwaermen">
<h3>Aufwärmen:</h3>
2024-05-23 20:49:34 +02:00
<% if (training.aufwaermleiter_name) { %>
2024-07-19 22:05:50 +02:00
<div id="viewAufwaermenLeiter" class="mt-0" style="margin: 0; padding: 0;">
2024-07-19 22:02:35 +02:00
<strong>Leitung:</strong>
<%= training.aufwaermleiter_name %>
2024-07-19 22:02:35 +02:00
<% if (session && session.role === 'admin') { %><button class="btn btn-primary" onclick="toggleDivsAufwaermenLeiter()">Edit</button><% } %>
</div>
<% if (session && session.role === 'admin') { %>
2024-07-19 22:05:50 +02:00
<div id="editAufwaermenLeiter" class="mt-0 d-none" style="margin: 0; padding: 0;">
<form method="POST" action="/update-leader">
2024-07-19 22:02:35 +02:00
<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>
2024-07-19 22:02:35 +02:00
<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>
2024-05-23 20:49:34 +02:00
<% } else { %>
<form method="POST" action="/update-leader">
2024-05-26 18:25:15 +02:00
<p><strong>Leitung:</strong>
2024-05-23 20:49:34 +02:00
<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>
<% } %>
2024-05-26 18:25:15 +02:00
</form></p>
2024-05-23 20:49:34 +02:00
<% } %>
2024-05-26 18:25:15 +02:00
2024-05-23 20:49:34 +02:00
<% if (training.aufwaermen_name) { %>
2024-07-19 22:05:50 +02:00
<div id="viewAufwaermen" class="mt-0">
2024-07-19 22:02:35 +02:00
<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') { %>
2024-07-19 22:05:50 +02:00
<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>
2024-07-19 22:02:35 +02:00
<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>
2024-05-23 20:49:34 +02:00
<% } else { %>
<form method="POST" action="/update-training">
2024-05-26 18:25:15 +02:00
<p><strong>Spiel:</strong>
2024-05-23 20:49:34 +02:00
<input type="hidden" name="trainingId" value="<%= training.id %>">
<input type="hidden" name="type" value="aufwaermen">
2024-05-26 18:25:15 +02:00
<datalist id="spiele">
<% aufwaermenCandidates.forEach(candidate => { %>
<option value="<%= candidate.name %>"><%= candidate.name %></option>
2024-05-23 20:49:34 +02:00
<% }) %>
2024-05-26 18:25:15 +02:00
</datalist>
<input list="spiele" id="spielName" name="spielName">
<% if (session && session.role === 'admin') { %>
<button class="btn btn-primary" type="submit">Speichern</button>
<% } %>
2024-05-26 18:25:15 +02:00
</form></p>
2024-05-23 20:49:34 +02:00
<% } %>
2024-05-26 18:25:15 +02:00
</div>
<div id="spiel">
<h3>Spiel: </h3>
2024-05-23 22:00:44 +02:00
<% if (training.spielleiter_name) { %>
2024-07-19 22:05:50 +02:00
<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') { %>
2024-07-19 22:05:50 +02:00
<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>
2024-07-19 22:02:35 +02:00
<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>
2024-05-23 22:00:44 +02:00
<% } else { %>
<form method="POST" action="/update-leader">
2024-05-26 18:25:15 +02:00
<p><strong>Leitung:</strong>
2024-05-23 22:00:44 +02:00
<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>
<% } %>
2024-05-26 18:25:15 +02:00
</form></p>
2024-05-23 22:00:44 +02:00
<% } %>
2024-05-26 18:25:15 +02:00
2024-05-23 20:49:34 +02:00
<% if (training.spiel_name) { %>
2024-07-19 22:05:50 +02:00
<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') { %>
2024-07-19 22:05:50 +02:00
<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>
2024-07-19 22:02:35 +02:00
<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>
2024-05-23 20:49:34 +02:00
<% } else { %>
2024-05-26 18:25:15 +02:00
2024-05-23 20:49:34 +02:00
<form method="POST" action="/update-training">
2024-05-26 18:25:15 +02:00
<p><strong>Spiel:</strong>
2024-05-23 20:49:34 +02:00
<input type="hidden" name="trainingId" value="<%= training.id %>">
<input type="hidden" name="type" value="spiel">
2024-05-26 18:25:15 +02:00
<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>
<% } %>
2024-05-23 20:49:34 +02:00
</form>
2024-05-26 18:25:15 +02:00
2024-05-23 20:49:34 +02:00
<% } %>
2024-05-26 18:25:15 +02:00
</div>
2024-05-31 18:42:27 +02:00
</div>
<div class="tab-pane fade <%= activeTab === 'anwesend' ? 'show active' : '' %>" id="anwesend" role="tabpanel" aria-labelledby="tab-anwesend">
2024-05-31 18:42:27 +02:00
<h3>Anwesenheit</h3>
2024-09-18 15:15:22 +02:00
<p>Anwesend: <%= anwesend.length %></p>
2024-05-31 18:42:27 +02:00
<!-- 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>
2024-05-31 18:42:27 +02:00
</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 %>">
2024-05-31 18:42:27 +02:00
<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>
2024-05-31 18:42:27 +02:00
<% riegen[riegennummer].forEach(teilnehmer => { if(teilnehmer.helfer) { %>
<tr>
<td>
<%= teilnehmer.vorname %>
</td>
<td>
<%= teilnehmer.nachname %>
</td>
<td>
<%= teilnehmer.age %>
</td>
<td>
2024-06-17 19:20:03 +02:00
<input type="hidden" name="inriege" value="<%= teilnehmer.id %>" /> <input type="checkbox" name="anw" <%= teilnehmer.anwesend ? 'checked' : '' %> value="<%= teilnehmer.id %>">
<% }}) %>
</td>
2024-05-31 18:42:27 +02:00
</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>
2024-05-31 18:42:27 +02:00
</tr>
<% }}) %>
</table>
2024-05-31 18:42:27 +02:00
<input type="hidden" name="trainingId" value="<%= training.id %>">
<input type="hidden" name="riege" value="<%= riegennummer %>">
<% if (session && session.role === 'admin') { %>
2024-05-31 18:42:27 +02:00
<button type="submit">Speichern</button>
<% } %>
2024-05-31 18:42:27 +02:00
</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>
2024-05-31 18:42:27 +02:00
</div>
<% }) %>
</div>
</div>
</div>
<% } else { %>
2024-05-23 20:49:34 +02:00
<p>Kein Training gefunden für das ausgewählte Datum.</p>
<% } %>
2024-05-31 18:42:27 +02:00
<div>
<form method="GET" action="/training">
<label for="training-date">Datum wählen:</label>
<select id="training-date" name="kw" onchange="this.form.submit()">
2024-05-31 18:42:27 +02:00
<% trainingsDates.forEach(date => { %>
<option value="<%= date.kw %>" <%= selectedKW === date.kw ? 'selected' : '' %>>
<%= date.datum %> %>
2024-05-31 18:42:27 +02:00
</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>
2024-05-23 20:49:34 +02:00
</body>
</html>
<%- include('partials/footer') %>