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

Sortierbare Listen in Anwesenheit, Riegen und Teilnehmerliste

This commit is contained in:
Klaas Börgmann 2024-09-18 16:07:18 +02:00
parent bf94deab1d
commit 9497e335f6
4 changed files with 229 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>

72
views/trainings.ejs
View File

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