+
+
+
+
+
+
+
+
+ | Datum |
+ Wochentag |
+ Teilnehmer |
+
+
+
+
+ | {{ formatDate(day.date) }} |
+ {{ getWeekday(day.date) }} |
+ {{ day.participantCount }} |
+
+
+
+
+
+
+
+
+
@@ -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 {