Merge branch 'main' of https://git.boergmann.it/klaas/training
aenderungen auf server
This commit is contained in:
commit
ebf7e6823e
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"cSpell.language": "en,de-DE"
|
||||||
|
}
|
3
app.js
3
app.js
|
@ -648,7 +648,7 @@ app.get("/training", requireAuth, async (req, res) => {
|
||||||
[training.id]
|
[training.id]
|
||||||
);
|
);
|
||||||
anwesend = anwesendResult.rows;
|
anwesend = anwesendResult.rows;
|
||||||
|
const anzahl = anwesend.length;
|
||||||
const trainingsResult = await pool.query(
|
const trainingsResult = await pool.query(
|
||||||
"SELECT kw, jahr FROM trainings ORDER BY kw ASC"
|
"SELECT kw, jahr FROM trainings ORDER BY kw ASC"
|
||||||
);
|
);
|
||||||
|
@ -697,6 +697,7 @@ app.get("/training", requireAuth, async (req, res) => {
|
||||||
age: age,
|
age: age,
|
||||||
helfer: row.helfer,
|
helfer: row.helfer,
|
||||||
anwesend: tnAnwesend,
|
anwesend: tnAnwesend,
|
||||||
|
anzahl,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -5,6 +5,18 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Turnstunden WebApp</title>
|
<title>Turnstunden WebApp</title>
|
||||||
<link rel="stylesheet" href="/css/bootstrap.min.css">
|
<link rel="stylesheet" href="/css/bootstrap.min.css">
|
||||||
|
<style>
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
td, th {
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
th {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
103
views/riegen.ejs
103
views/riegen.ejs
|
@ -2,27 +2,106 @@
|
||||||
<h1>Riegen</h1>
|
<h1>Riegen</h1>
|
||||||
|
|
||||||
<!-- Nav tabs -->
|
<!-- Nav tabs -->
|
||||||
|
|
||||||
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||||
<% Object.keys(riegen).forEach((riegennummer, index) => { %>
|
<% Object.keys(riegen).forEach((riegennummer, index) => { %>
|
||||||
<li class="nav-item" role="presentation">
|
<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>
|
<button
|
||||||
</li>
|
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>
|
</ul>
|
||||||
|
|
||||||
<!-- Tab panes -->
|
<!-- Tab panes -->
|
||||||
<div class="tab-content" id="myTabContent">
|
<div class="tab-content" id="myTabContent">
|
||||||
<% Object.keys(riegen).forEach((riegennummer, index) => { %>
|
<% Object.keys(riegen).forEach((riegennummer, index) => { %>
|
||||||
<div class="tab-pane fade <%= index === 0 ? 'show active' : '' %>" id="riege-<%= riegennummer %>" role="tabpanel" aria-labelledby="tab-<%= riegennummer %>">
|
<div
|
||||||
<h3>
|
class="tab-pane fade <%= index === 0 ? 'show active' : '' %>"
|
||||||
<% riegen[riegennummer].forEach(teilnehmer => { if(teilnehmer.helfer) { %> <a href="/mitglied/<%= teilnehmer.id %>"><strong><%= teilnehmer.vorname %> <%= teilnehmer.nachname %></strong> (<%= teilnehmer.age %> Jahre)</a> <% }}) %>
|
id="riege-<%= riegennummer %>"
|
||||||
</h3>
|
role="tabpanel"
|
||||||
<ul class="list-group list-group-flush">
|
aria-labelledby="tab-<%= riegennummer %>"
|
||||||
|
>
|
||||||
<% riegen[riegennummer].forEach(teilnehmer => { if(!teilnehmer.helfer) { %> <li> <a href="/mitglied/<%= teilnehmer.id %>"><strong><%= teilnehmer.vorname %> <%= teilnehmer.nachname %></strong> (<%= teilnehmer.age %> Jahre)</a> </li> <% }}) %>
|
<h3>Teilnehmende der Riege <%= riegennummer %></h3>
|
||||||
</ul>
|
|
||||||
</div>
|
<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
|
||||||
|
>
|
||||||
|
<% } 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
|
||||||
|
>
|
||||||
|
<% } %>
|
||||||
|
</td>
|
||||||
|
<td><%= teilnehmer.age %> Jahre</td>
|
||||||
|
</tr>
|
||||||
|
<% }) %>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
</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') %>
|
<%- include('partials/footer') %>
|
||||||
|
|
|
@ -1,16 +1,69 @@
|
||||||
<%- include('partials/header') %>
|
<%- include('partials/header') %>
|
||||||
<h1>Teilnehmende</h1>
|
<h1>Teilnehmende</h1>
|
||||||
<ul>
|
|
||||||
|
|
||||||
|
|
||||||
|
<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 => { %>
|
<% teilnehmende.forEach(teilnehmer => { %>
|
||||||
<li>
|
<tr>
|
||||||
<% if (teilnehmer.helfer) { %>
|
<td>
|
||||||
<a href="/mitglied/<%= teilnehmer.id %>"><strong><%= teilnehmer.vorname %> <%= teilnehmer.nachname %></strong> (<%= teilnehmer.age %> Jahre)</a>
|
<% if (teilnehmer.helfer) { %>
|
||||||
<% } else { %>
|
<a href="/mitglied/<%= teilnehmer.id %>"><strong><%= teilnehmer.vorname %></strong></a>
|
||||||
<a href="/mitglied/<%= teilnehmer.id %>"><%= teilnehmer.vorname %> <%= teilnehmer.nachname %> (<%= teilnehmer.age %> Jahre)</a>
|
<% } else { %>
|
||||||
<% } %>
|
<a href="/mitglied/<%= teilnehmer.id %>"><%= teilnehmer.vorname %></a>
|
||||||
</li>
|
<% } %>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<% if (teilnehmer.helfer) { %>
|
||||||
|
<a href="/mitglied/<%= teilnehmer.id %>"><strong><%= teilnehmer.nachname %></strong></a>
|
||||||
|
<% } else { %>
|
||||||
|
<a href="/mitglied/<%= teilnehmer.id %>"><%= teilnehmer.nachname %></a>
|
||||||
|
<% } %>
|
||||||
|
</td>
|
||||||
|
<td><%= teilnehmer.age %> Jahre</td>
|
||||||
|
</tr>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
</ul>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
|
@ -28,11 +28,11 @@
|
||||||
<div class="tab-pane fade <%= activeTab === 'geraete' ? 'show active' : '' %>" id="geraete" role="tabpanel" aria-labelledby="tab-geraete">
|
<div class="tab-pane fade <%= activeTab === 'geraete' ? 'show active' : '' %>" id="geraete" role="tabpanel" aria-labelledby="tab-geraete">
|
||||||
<h2> Geräte </h2>
|
<h2> Geräte </h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Riege 1: <%= training.geraet_riege_1_name %></li>
|
<li>Riege 1 (Klaas): <%= training.geraet_riege_1_name %></li>
|
||||||
<li>Riege 2: <%= training.geraet_riege_2_name %></li>
|
<li>Riege 2 (Rabea): <%= training.geraet_riege_2_name %></li>
|
||||||
<li>Riege 3: <%= training.geraet_riege_3_name %></li>
|
<li>Riege 3 (Laura): <%= training.geraet_riege_3_name %></li>
|
||||||
<li>Riege 4: <%= training.geraet_riege_4_name %></li>
|
<li>Riege 4 (laila / Carlotta): <%= training.geraet_riege_4_name %></li>
|
||||||
<li>Riege 5: <%= training.geraet_riege_5_name %></li>
|
<li>Riege 5 (Simon): <%= training.geraet_riege_5_name %></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="tab-pane fade <%= activeTab === 'spiel' ? 'show active' : '' %>" id="spiel" role="tabpanel" aria-labelledby="tab-spiel">
|
<div class="tab-pane fade <%= activeTab === 'spiel' ? 'show active' : '' %>" id="spiel" role="tabpanel" aria-labelledby="tab-spiel">
|
||||||
|
@ -255,7 +255,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="tab-pane fade <%= activeTab === 'anwesend' ? 'show active' : '' %>" id="anwesend" role="tabpanel" aria-labelledby="tab-anwesend">
|
<div class="tab-pane fade <%= activeTab === 'anwesend' ? 'show active' : '' %>" id="anwesend" role="tabpanel" aria-labelledby="tab-anwesend">
|
||||||
<h3>Anwesenheit</h3>
|
<h3>Anwesenheit</h3>
|
||||||
|
<p>Anwesend: <%= anwesend.length %></p>
|
||||||
<!-- Nav tabs -->
|
<!-- Nav tabs -->
|
||||||
<ul class="nav nav-tabs" id="RiegenTab" role="tablist">
|
<ul class="nav nav-tabs" id="RiegenTab" role="tablist">
|
||||||
<% Object.keys(riegen).forEach((riegennummer, index) => { %>
|
<% Object.keys(riegen).forEach((riegennummer, index) => { %>
|
||||||
|
@ -270,26 +270,51 @@
|
||||||
<% Object.keys(riegen).forEach((riegennummer, index) => { %>
|
<% Object.keys(riegen).forEach((riegennummer, index) => { %>
|
||||||
<div class="tab-pane fade <%= activeRiege == riegennummer ? 'show active' : '' %>" id="riege-<%= riegennummer %>" role="tabpanel" aria-labelledby="tab-<%= riegennummer %>">
|
<div class="tab-pane fade <%= activeRiege == riegennummer ? 'show active' : '' %>" id="riege-<%= riegennummer %>" role="tabpanel" aria-labelledby="tab-<%= riegennummer %>">
|
||||||
<form method="post" action="/anwesend">
|
<form method="post" action="/anwesend">
|
||||||
<table>
|
<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) { %>
|
<% riegen[riegennummer].forEach(teilnehmer => { if(teilnehmer.helfer) { %>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<%= teilnehmer.vorname %> <%= teilnehmer.nachname %>
|
<%= teilnehmer.vorname %>
|
||||||
</td>
|
</td>
|
||||||
<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 %>">
|
<input type="hidden" name="inriege" value="<%= teilnehmer.id %>" /> <input type="checkbox" name="anw" <%= teilnehmer.anwesend ? 'checked' : '' %> value="<%= teilnehmer.id %>">
|
||||||
<% }}) %>
|
<% }}) %>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<% riegen[riegennummer].forEach(teilnehmer => { if(!teilnehmer.helfer) { %>
|
<% riegen[riegennummer].forEach(teilnehmer => { if(!teilnehmer.helfer) { %>
|
||||||
<tr>
|
<tr>
|
||||||
<td><%= teilnehmer.vorname %> <%= teilnehmer.nachname %> </td><td> <input type="hidden" name="inriege" value="<%= teilnehmer.id %>" /><input type="checkbox" name="anw" <%= teilnehmer.anwesend ? 'checked' : '' %> value="<%= teilnehmer.id %>"></td>
|
<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>
|
</tr>
|
||||||
<% }}) %>
|
<% }}) %>
|
||||||
|
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<input type="hidden" name="trainingId" value="<%= training.id %>">
|
<input type="hidden" name="trainingId" value="<%= training.id %>">
|
||||||
<input type="hidden" name="riege" value="<%= riegennummer %>">
|
<input type="hidden" name="riege" value="<%= riegennummer %>">
|
||||||
<% if (session && session.role === 'admin') { %>
|
<% if (session && session.role === 'admin') { %>
|
||||||
|
@ -323,6 +348,37 @@
|
||||||
|
|
||||||
</div>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue