Verbessert die Benutzeroberfläche in ScheduleView.vue durch Hinzufügen von Funktionen zum Laden von Gesamt- und Erwachsenenspielplänen. Implementiert eine Hover-Info für Spiele mit Fallback-Werten und optimiert die Anzeige von Spielinformationen. Fügt neue CSS-Klassen für die Hervorhebung von Spielen heute und in der nächsten Woche hinzu.

2025-09-25 19:45:20 +02:00
1 changed files with 107 additions and 11 deletions
--- a/frontend/src/views/ScheduleView.vue
+++ b/frontend/src/views/ScheduleView.vue
@@ -2,13 +2,16 @@
    <div>
        <h2>Spielpläne</h2>
        <button @click="openImportModal">Spielplanimport</button>
-        <div v-if="hoveredMatch" class="hover-info">
-            <p><strong>{{ hoveredMatch.location.name }}</strong></p>
-            <p>{{ hoveredMatch.location.address }}</p>
-            <p>{{ hoveredMatch.location.zip }} {{ hoveredMatch.location.city }}</p>
+        <div v-if="hoveredMatch && hoveredMatch.location" class="hover-info">
+            <p><strong>{{ hoveredMatch.location.name || 'N/A' }}</strong></p>
+            <p>{{ hoveredMatch.location.address || 'N/A' }}</p>
+            <p>{{ hoveredMatch.location.zip || '' }} {{ hoveredMatch.location.city || 'N/A' }}</p>
        </div>
        <div class="output">
            <ul>
+                <li class="special-link" @click="loadAllMatches">Gesamtspielplan</li>
+                <li class="special-link" @click="loadAdultMatches">Spielplan Erwachsene</li>
+                <li class="divider"></li>
                <li v-for="league in leagues" :key="league" @click="loadMatchesForLeague(league.id, league.name)">{{
                    league.name }}</li>
            </ul>
@@ -23,15 +26,17 @@
                                <th>Uhrzeit</th>
                                <th>Heimmannschaft</th>
                                <th>Gastmannschaft</th>
+                                <th v-if="selectedLeague === 'Gesamtspielplan' || selectedLeague === 'Spielplan Erwachsene'">Altersklasse</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="match in matches" :key="match.id" @mouseover="hoveredMatch = match"
-                                @mouseleave="hoveredMatch = null">
+                                @mouseleave="hoveredMatch = null" :class="getRowClass(match.date)">
                                <td>{{ formatDate(match.date) }}</td>
-                                <td>{{ match.time.toString().slice(0, 5) }} Uhr</td>
-                                <td v-html="highlightClubName(match.homeTeam.name)"></td>
-                                <td v-html="highlightClubName(match.guestTeam.name)"></td>
+                                <td>{{ match.time ? match.time.toString().slice(0, 5) + ' Uhr' : 'N/A' }}</td>
+                                <td v-html="highlightClubName(match.homeTeam?.name || 'N/A')"></td>
+                                <td v-html="highlightClubName(match.guestTeam?.name || 'N/A')"></td>
+                                <td v-if="selectedLeague === 'Gesamtspielplan' || selectedLeague === 'Spielplan Erwachsene'">{{ match.leagueDetails?.name || 'N/A' }}</td>
                            </tr>
                        </tbody>
                    </table>
@@ -185,8 +190,37 @@ export default {
                this.matches = [];
            }
        },
+        async loadAllMatches() {
+            this.selectedLeague = 'Gesamtspielplan';
+            try {
+                const response = await apiClient.get(`/matches/leagues/${this.currentClub}/matches`);
+                this.matches = response.data;
+            } catch (error) {
+                alert('Fehler beim Laden des Gesamtspielplans');
+                this.matches = [];
+            }
+        },
+        async loadAdultMatches() {
+            this.selectedLeague = 'Spielplan Erwachsene';
+            try {
+                const response = await apiClient.get(`/matches/leagues/${this.currentClub}/matches`);
+                // Filtere nur Erwachsenenligen (keine Jugendligen)
+                const allMatches = response.data;
+                this.matches = allMatches.filter(match => {
+                    const leagueName = match.leagueDetails?.name || '';
+                    // Prüfe, ob es eine Jugendliga ist (J, M, Jugend im Namen)
+                    const isYouth = /[JM]\d|jugend/i.test(leagueName);
+                    return !isYouth;
+                });
+            } catch (error) {
+                alert('Fehler beim Laden des Erwachsenenspielplans');
+                this.matches = [];
+            }
+        },
        formatDate(date) {
+            if (!date) return 'N/A';
            const d = new Date(date);
+            if (isNaN(d.getTime())) return 'N/A';
            const weekdays = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
            const wd = weekdays[d.getDay()];
            const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
@@ -194,6 +228,7 @@ export default {
            return `${wd} ${day}`;
        },
        highlightClubName(teamName) {
+            if (!teamName) return 'N/A';
            const clubName = this.currentClubName;
            if (clubName && teamName.includes(clubName)) {
                return `<strong>${teamName}</strong>`;
@@ -228,12 +263,13 @@ export default {
        getUniqueLocations() {
            const uniqueLocations = new Map();
            this.matches.forEach(match => {
+                if (!match.location || !match.homeTeam) return;
                const location = match.location;
                const clubName = match.homeTeam.name;
                const addressLines = [
-                    location.name,
-                    location.address,
-                    `${location.zip} ${location.city}`
+                    location.name || 'N/A',
+                    location.address || 'N/A',
+                    `${location.zip || ''} ${location.city || ''}`.trim()
                ];
                const addressKey = addressLines.join('; ');
                if (!uniqueLocations.has(addressKey)) {
@@ -243,6 +279,28 @@ export default {

            return uniqueLocations;
        },
+        getRowClass(matchDate) {
+            if (!matchDate) return '';
+            
+            const today = new Date();
+            const match = new Date(matchDate);
+            
+            // Setze die Zeit auf Mitternacht für genaue Datumsvergleiche
+            today.setHours(0, 0, 0, 0);
+            match.setHours(0, 0, 0, 0);
+            
+            // Berechne die Differenz in Tagen
+            const diffTime = match.getTime() - today.getTime();
+            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+            
+            if (diffDays === 0) {
+                return 'match-today'; // Heute - gelb
+            } else if (diffDays > 0 && diffDays <= 7) {
+                return 'match-next-week'; // Nächste Woche - hellblau
+            }
+            
+            return ''; // Keine besondere Farbe
+        },
    },
    async created() {
        await this.loadLeagues();
@@ -355,4 +413,42 @@ li {
    color: #45a049;
    cursor: pointer;
 }
+
+.special-link {
+    font-weight: bold;
+    color: #2c5aa0 !important;
+    padding: 5px 0;
+    border-bottom: 1px solid #ddd;
+    margin-bottom: 5px;
+}
+
+.special-link:hover {
+    background-color: #f0f8ff;
+    padding-left: 5px;
+    transition: all 0.3s ease;
+}
+
+.divider {
+    height: 1px;
+    background-color: #ddd;
+    margin: 10px 0;
+    cursor: default !important;
+    color: transparent !important;
+}
+
+.match-today {
+    background-color: #fff3cd !important; /* Gelb für heute */
+}
+
+.match-next-week {
+    background-color: #d1ecf1 !important; /* Hellblau für nächste Woche */
+}
+
+.match-today:hover {
+    background-color: #ffeaa7 !important; /* Dunkleres Gelb beim Hover */
+}
+
+.match-next-week:hover {
+    background-color: #b8daff !important; /* Dunkleres Blau beim Hover */
+}
 </style>