From 431ec861ba88a15aadb0a530e0696fd1b4bc4e0b Mon Sep 17 00:00:00 2001 From: "Torsten Schulz (local)" Date: Wed, 1 Oct 2025 13:20:36 +0200 Subject: [PATCH] =?UTF-8?q?Erweitert=20die=20Trainingsstatistik-Funktional?= =?UTF-8?q?it=C3=A4t=20im=20TrainingStatsController=20um=20die=20Abfrage?= =?UTF-8?q?=20und=20Formatierung=20von=20Trainingstagen=20der=20letzten=20?= =?UTF-8?q?12=20Monate.=20Aktualisiert=20die=20Benutzeroberfl=C3=A4che=20i?= =?UTF-8?q?n=20TrainingStatsView.vue=20zur=20Anzeige=20dieser=20Trainingst?= =?UTF-8?q?age=20in=20einer=20aufklappbaren=20Tabelle.=20F=C3=BCgt=20Funkt?= =?UTF-8?q?ionen=20zum=20Umschalten=20der=20Sichtbarkeit=20von=20Trainings?= =?UTF-8?q?tagen=20und=20Mitgliedern=20hinzu.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../controllers/trainingStatsController.js | 26 +++- frontend/src/views/TrainingStatsView.vue | 137 +++++++++++++++++- 2 files changed, 157 insertions(+), 6 deletions(-) diff --git a/backend/controllers/trainingStatsController.js b/backend/controllers/trainingStatsController.js index 136faa5..c268ff7 100644 --- a/backend/controllers/trainingStatsController.js +++ b/backend/controllers/trainingStatsController.js @@ -135,11 +135,35 @@ class TrainingStatsController { // Nach Gesamtteilnahme absteigend sortieren stats.sort((a, b) => b.participationTotal - a.participationTotal); + // Trainingstage mit Teilnehmerzahlen abrufen (letzte 12 Monate, absteigend sortiert) + const trainingDays = await DiaryDate.findAll({ + where: { + clubId: parseInt(clubId), + date: { + [Op.gte]: twelveMonthsAgo + } + }, + include: [{ + model: Participant, + as: 'participantList', + attributes: ['id'] + }], + order: [['date', 'DESC']] + }); + + // Formatiere Trainingstage mit Teilnehmerzahl + const formattedTrainingDays = trainingDays.map(day => ({ + id: day.id, + date: day.date, + participantCount: day.participantList ? day.participantList.length : 0 + })); + // Zusätzliche Metadaten mit Trainingsanzahl zurückgeben res.json({ members: stats, trainingsCount12Months, - trainingsCount3Months + trainingsCount3Months, + trainingDays: formattedTrainingDays }); } catch (error) { diff --git a/frontend/src/views/TrainingStatsView.vue b/frontend/src/views/TrainingStatsView.vue index 8c049b0..c045e2f 100644 --- a/frontend/src/views/TrainingStatsView.vue +++ b/frontend/src/views/TrainingStatsView.vue @@ -19,8 +19,43 @@ -
- + +
+
+

Trainingstage (letzte 12 Monate)

+ {{ showTrainingDays ? '▼' : '▶' }} +
+
+
+
+ + + + + + + + + + + + + + +
DatumWochentagTeilnehmer
{{ formatDate(day.date) }}{{ getWeekday(day.date) }}{{ day.participantCount }}
+
+ + + + +
+
+

Mitglieder-Teilnahmen

+ {{ showMembers ? '▼' : '▶' }} +
+
+
+
@@ -74,6 +109,8 @@
+
+
@@ -169,11 +206,14 @@ export default { activeMembers: [], trainingsCount12Months: 0, trainingsCount3Months: 0, + trainingDays: [], showDetailsModal: false, selectedMember: {}, loading: false, sortField: 'name', - sortDirection: 'asc' + sortDirection: 'asc', + showTrainingDays: true, + showMembers: false }; }, @@ -204,6 +244,7 @@ export default { this.activeMembers = response.data.members || []; this.trainingsCount12Months = response.data.trainingsCount12Months || 0; this.trainingsCount3Months = response.data.trainingsCount3Months || 0; + this.trainingDays = response.data.trainingDays || []; } catch (error) { // Kein Alert - es ist normal, dass nicht alle Daten verfügbar sind } finally { @@ -211,6 +252,20 @@ export default { } }, + toggleTrainingDays() { + this.showTrainingDays = !this.showTrainingDays; + }, + + toggleMembers() { + this.showMembers = !this.showMembers; + }, + + getWeekday(dateString) { + const date = new Date(dateString); + const weekdays = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag']; + return weekdays[date.getDay()]; + }, + showMemberDetails(member) { this.selectedMember = member; this.showDetailsModal = true; @@ -300,12 +355,84 @@ export default { color: var(--primary-color); } -.members-table-container { +.collapsible-section { background: white; border-radius: var(--border-radius-large); box-shadow: var(--shadow-light); - overflow: hidden; border: 1px solid var(--border-color); + margin-bottom: 1.5rem; + overflow: hidden; +} + +.section-header { + padding: 1.25rem 1.5rem; + background: var(--bg-light); + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; + user-select: none; + transition: background-color 0.2s ease; +} + +.section-header:hover { + background: var(--primary-color); + color: white; +} + +.section-header:hover h3 { + color: white; +} + +.section-header h3 { + margin: 0; + font-size: 1.125rem; + color: var(--text-primary); + transition: color 0.2s ease; +} + +.toggle-icon { + font-size: 1rem; + font-weight: bold; + transition: transform 0.3s ease; +} + +.section-content { + padding: 0; +} + +.training-days-container { + overflow-x: auto; +} + +.training-days-table { + width: 100%; + border-collapse: collapse; +} + +.training-days-table th, +.training-days-table td { + padding: 1rem; + text-align: left; + border-bottom: 1px solid var(--border-color); +} + +.training-days-table th { + background: var(--bg-light); + font-weight: 600; + color: var(--text-primary); +} + +.training-days-table tbody tr:hover { + background: var(--bg-light); +} + +.training-days-table tbody tr:last-child td { + border-bottom: none; +} + +.members-table-container { + overflow-x: auto; } .members-table {