+
{{ 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 */
+}