From 144034a3059e9b6e4fc04fc5d2dae93e6269c652 Mon Sep 17 00:00:00 2001 From: "Torsten Schulz (local)" Date: Thu, 25 Sep 2025 19:45:20 +0200 Subject: [PATCH] =?UTF-8?q?Verbessert=20die=20Benutzeroberfl=C3=A4che=20in?= =?UTF-8?q?=20ScheduleView.vue=20durch=20Hinzuf=C3=BCgen=20von=20Funktione?= =?UTF-8?q?n=20zum=20Laden=20von=20Gesamt-=20und=20Erwachsenenspielpl?= =?UTF-8?q?=C3=A4nen.=20Implementiert=20eine=20Hover-Info=20f=C3=BCr=20Spi?= =?UTF-8?q?ele=20mit=20Fallback-Werten=20und=20optimiert=20die=20Anzeige?= =?UTF-8?q?=20von=20Spielinformationen.=20F=C3=BCgt=20neue=20CSS-Klassen?= =?UTF-8?q?=20f=C3=BCr=20die=20Hervorhebung=20von=20Spielen=20heute=20und?= =?UTF-8?q?=20in=20der=20n=C3=A4chsten=20Woche=20hinzu.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/views/ScheduleView.vue | 118 +++++++++++++++++++++++++--- 1 file changed, 107 insertions(+), 11 deletions(-) diff --git a/frontend/src/views/ScheduleView.vue b/frontend/src/views/ScheduleView.vue index ae039d6..7e22d1c 100644 --- a/frontend/src/views/ScheduleView.vue +++ b/frontend/src/views/ScheduleView.vue @@ -2,13 +2,16 @@

Spielpläne

-
-

{{ hoveredMatch.location.name }}

-

{{ hoveredMatch.location.address }}

-

{{ hoveredMatch.location.zip }} {{ hoveredMatch.location.city }}

+
+

{{ hoveredMatch.location.name || 'N/A' }}

+

{{ hoveredMatch.location.address || 'N/A' }}

+

{{ hoveredMatch.location.zip || '' }} {{ hoveredMatch.location.city || 'N/A' }}

    +
  • Gesamtspielplan
    • +
  • Spielplan Erwachsene
    • +
  • {{ league.name }}
@@ -23,15 +26,17 @@ Uhrzeit Heimmannschaft Gastmannschaft + Altersklasse + @mouseleave="hoveredMatch = null" :class="getRowClass(match.date)"> {{ formatDate(match.date) }} - {{ match.time.toString().slice(0, 5) }} Uhr - - + {{ match.time ? match.time.toString().slice(0, 5) + ' Uhr' : 'N/A' }} + + + {{ match.leagueDetails?.name || 'N/A' }} @@ -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 `${teamName}`; @@ -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 */ +}