klaas
/
training
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of https://git.boergmann.it/klaas/training 

aenderungen auf server
This commit is contained in:
klaas 2024-09-18 16:09:25 +02:00
parent 7cdaf86488 9497e335f6
commit ebf7e6823e
6 changed files with 240 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"cSpell.language": "en,de-DE"
}

3
app.js
View File

@ -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,
}); });
}); });

12
views/partials/header.ejs
View File

@ -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>

101
views/riegen.ejs
View File

@ -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 %>"
>
<h3>Teilnehmende der Riege <%= riegennummer %></h3>
<% riegen[riegennummer].forEach(teilnehmer => { if(!teilnehmer.helfer) { %> <li> <a href="/mitglied/<%= teilnehmer.id %>"><strong><%= teilnehmer.vorname %> <%= teilnehmer.nachname %></strong> (<%= teilnehmer.age %> Jahre)</a> </li> <% }}) %> <table id="table-<%= riegennummer %>">
</ul> <thead>
</div> <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') %>

71
views/teilnehmer.ejs
View File

@ -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>

84
views/trainings.ejs
View File

@ -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>