Erweitert den MatchReportApiDialog um neue Funktionen zur Anzeige und Verwaltung von Start- und Endzeiten. Fügt Buttons zum Setzen der aktuellen Zeit für beide Zeitpunkte hinzu und implementiert eine Formatierungsfunktion für die Zeitdarstellung. Optimiert die Benutzeroberfläche mit neuen CSS-Stilen für die Zeitanzeigen und die Auto-Fill-Funktion.

frontend/src/components/MatchReportApiDialog.vue

@@ -322,10 +322,13 @@
 
                     <div v-else-if="activeSection === 'result'" class="result-content">
                         <div class="result-header">
-                            <h3>Ergebniserfassung</h3>
-                            <button @click="autoFillEmptyMatches()" class="autofill-btn" :disabled="isMatchCompleted">
-                                📝 Auto-ausfüllen
-                            </button>
+                            <div class="time-display">
+                                <div class="time-row">
+                                    <strong>Startzeit:</strong>
+                                    <span>{{ formatTime(match.startDate) }}</span>
+                                    <button @click="setCurrentStartTime()" class="time-btn-small" :disabled="isMatchCompleted">🕐 jetzt setzen</button>
+                                </div>
+                            </div>
                         </div>
                         
                         <!-- Warnung bei abgeschlossenem Match -->
@@ -400,6 +403,13 @@
                             </tbody>
                         </table>
                         
+                        <!-- Auto-Fill Button -->
+                        <div class="autofill-section">
+                            <button @click="autoFillEmptyMatches()" class="autofill-btn" :disabled="isMatchCompleted">
+                                📝 Auto-ausfüllen: Leere Positionen mit 3:0 automatisch ausfüllen
+                            </button>
+                        </div>
+
                         <!-- Spielstand unten -->
                         <div class="score-summary">
                             <div class="score-display">
@@ -407,6 +417,17 @@
                                 <span class="score-value">{{ getOverallScore() }}</span>
                             </div>
                         </div>
+
+                        <!-- Endzeit Sektion -->
+                        <div class="endtime-section">
+                            <div class="time-display">
+                                <div class="time-row">
+                                    <strong>Endzeit:</strong>
+                                    <span>{{ formatTime(match.endDate) }}</span>
+                                    <button @click="setEndTimeAndNavigate()" class="time-btn-small" :disabled="isMatchCompleted">🕐 jetzt setzen</button>
+                                </div>
+                            </div>
+                        </div>
                     </div>
 
                     <div v-else-if="activeSection === 'completion'" class="completion-content">
@@ -841,6 +862,40 @@ Wir wünschen den Spielen einen schönen, spannenden und fairen Verlauf und begr
             }
         },
 
+        // Formatiere Zeit für Anzeige
+        formatTime(dateTime) {
+            if (!dateTime) return '—';
+            const date = new Date(dateTime);
+            return date.toLocaleTimeString('de-DE', { 
+                hour: '2-digit', 
+                minute: '2-digit'
+            });
+        },
+
+        // Setze aktuelle Zeit für Startzeit
+        setCurrentStartTime() {
+            const now = new Date();
+            const timeString = now.toTimeString().substring(0, 8); // HH:MM:SS Format
+            this.match.startDate = now;
+            console.log(`📅 Startzeit gesetzt auf: ${timeString}`);
+        },
+
+        // Setze aktuelle Zeit für Endzeit mit intelligenter Navigation
+        setEndTimeAndNavigate() {
+            const now = new Date();
+            const timeString = now.toTimeString().substring(0, 8); // HH:MM:SS Format
+            this.match.endDate = now;
+            console.log(`📅 Endzeit gesetzt auf: ${timeString}`);
+            
+            // Prüfe ob alle notwendigen Spiele abgeschlossen sind und navigiere
+            this.checkAllMatchableCompletedAndNavigate();
+        },
+
+        // Setze aktuelle Zeit für Startzeit (Legacy für Kompatibilität)
+        setCurrentEndTime() {
+            this.setEndTimeAndNavigate();
+        },
+
         // Auto-Fill für leere Matches
         autoFillEmptyMatches() {
             console.log('🔧 Starte Auto-Fill für leere Matches...');
@@ -897,6 +952,98 @@ Wir wünschen den Spielen einen schönen, spannenden und fairen Verlauf und begr
             console.log(`🎯 Match ${matchIndex + 1} gefüllt und abgeschlossen: ${JSON.stringify(match.sets)}`);
         },
 
+        // Prüfe ob alle Spiele gespielt sind und navigiere evtl. zu Abschluss
+        checkAndNavigateToCompletion() {
+            console.log('🔍 Prüfe auf Abschluss-Bereitschaft...');
+            
+            if (!this.results || this.results.length === 0) {
+                console.log('❌ Keine Ergebnisse vorhanden');
+                return;
+            }
+            
+            // Zähle abgeschlossene Matches
+            const completedMatches = this.results.filter(match => match.completed);
+            const totalMatches = this.results.length;
+            const playThrough = this.getPlayThrough();
+            
+            console.log(`📊 Matches: ${completedMatches.length}/${totalMatches} abgeschlossen`);
+            console.log(`🎮 Play Through: ${playThrough}`);
+            
+            // Prüfe ALLGAMES Modus
+            if (playThrough && playThrough.toUpperCase().includes('ALLGAMES')) {
+                // Im ALLGAMES Modus: alle Spiele müssen abgeschlossen sein
+                if (completedMatches.length === totalMatches) {
+                    console.log('✅ ALLGAMES: Alle Spiele abgeschlossen → springe zu Abschluss');
+                    this.setActiveSection('completion');
+                    return;
+                } else {
+                    console.log(`⚠️ ALLGAMES: Nur ${completedMatches.length}/${totalMatches} Spiele abgeschlossen`);
+                    return;
+                }
+            } else {
+                // Normal Mode: mindestens ein Spiel muss abgeschlossen sein
+                if (completedMatches.length > 0) {
+                    console.log(`✅ Normal Mode: ${completedMatches.length} Spiele abgeschlossen → springe zu Abschluss`);
+                    this.setActiveSection('completion');
+                    return;
+                } else {
+                    console.log('⚠️ Normal Mode: Keine Spiele abgeschlossen');
+                    return;
+                }
+            }
+        },
+
+        // Prüfe ob alle abgeschliebaren Spiele tatsächlich abgeschlossen sind
+        checkAllMatchableCompletedAndNavigate() {
+            console.log('🔍 Prüfe alle abgeschliebbaren Matches...');
+            
+            if (!this.results || this.results.length === 0) {
+                console.log('❌ Keine Ergebnisse vorhanden');
+                return;
+            }
+            
+                            // Vereinfachte Logik: Alle Matches sind matchable wenn sie abgeschlossen sind
+            const completedMatches = this.results.filter(match => match.completed);
+            const totalMatches = this.results.length;
+            
+            console.log(`📊 Abgeschlossene Matches: ${completedMatches.length}/${totalMatches}`);
+            
+            // Wenn alle Matches abgeschlossen sind, navigiere zu Abschluss
+            if (completedMatches.length === totalMatches) {
+                console.log('✅ Alle Matches sind abgeschlossen → springe zu Abschluss');
+                this.setActiveSection('completion');
+            } else {
+                console.log(`⚠️ Nur ${completedMatches.length}/${totalMatches} Matches sind abgeschlossen`);
+            }
+        },
+
+        // Intelligente Navigation nach Zertifizierung
+        navigateAfterCertification() {
+            console.log('🧭 Intelligente Navigation nach Zertifizierung...');
+            
+            // Prüfe ob beide Aufstellungen jetzt zertifiziert sind
+            const bothCertified = this.isHomeLineupCertified && this.isGuestLineupCertified;
+            console.log(`📋 Beide Aufstellungen zertifiziert: ${bothCertified}`);
+            console.log(`📝 Begrüßung abgeschlossen: ${this.isGreetingCompleted}`);
+            
+            if (bothCertified) {
+                // Beide Aufstellungen sind jetzt zertifiziert
+                if (!this.isGreetingCompleted) {
+                    // Begrüßung noch nicht abgeschlossen → zu Begrüßung
+                    this.setActiveSection('greeting');
+                    console.log('🎯 Beide Aufstellungen zertifiziert → Begrüßung');
+                } else {
+                    // Begrüßung bereits abgeschlossen → zu Ergebniserfassung
+                    this.setActiveSection('result');
+                    console.log('🎯 Beide Aufstellungen zertifiziert + Begrüßung abgeschlossen → Ergebniserfassung');
+                }
+            } else {
+                // Nur eine Aufstellung zertifiziert → zu allgemeinem Tab
+                this.setActiveSection('general');
+                console.log('🎯 Nur eine Aufstellung zertifiziert → Allgemein');
+            }
+        },
+
         // Methoden für Abschluss-Seite
         getHomeDoublePairs() {
             if (!this.results || this.results.length === 0) return [];
@@ -2554,8 +2701,8 @@ Wir wünschen den Spielen einen schönen, spannenden und fairen Verlauf und begr
                 
                 this.showSigningSuccess(team);
                 
-                // Zurück zum Allgemein-Tab springen
-                this.activeSection = 'general';
+                // Intelligente Navigation nach Zertifizierung
+                this.navigateAfterCertification();
                 
                 // TODO: Hier würden wir die signierte Aufstellung an das Backend senden
                 // await this.submitSignedLineup(team);
@@ -3354,7 +3501,7 @@ Wir wünschen den Spielen einen schönen, spannenden und fairen Verlauf und begr
     font-style: italic;
 }
 
-.result-content { margin-top: 20px; }
+.result-content { margin-top: 2px; }
 .result-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; }
 .result-table th, .result-table td { border-bottom: 1px solid #eee; padding: 8px; text-align: left; }
 .result-table thead th { background: #f8f9fa; }
@@ -4413,18 +4560,93 @@ Wir wünschen den Spielen einen schönen, spannenden und fairen Verlauf und begr
 
 /* Ergebniserfassungs-Header */
 .result-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
     margin-bottom: 20px;
 }
 
 .result-header h3 {
-    margin: 0;
+    margin: 0 0 15px 0;
+}
+
+.time-display {
+    background-color: #f8f9fa;
+    border-radius: 6px;
+}
+
+.time-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 8px;
+}
+
+.time-row:last-child {
+    margin-bottom: 0;
+}
+
+.time-row strong {
+    min-width: 60px;
+    color: #495057;
+}
+
+.time-btn-small {
+    background-color: #28a745;
+    color: white;
+    border: none;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.time-btn-small:hover:not(:disabled) {
+    background-color: #218838;
+}
+
+.time-btn-small:disabled {
+    background-color: #6c757d;
+    color: #fff;
+    cursor: not-allowed;
+}
+
+.result-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+.time-btn {
+    background-color: #28a745;
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 6px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 13px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.time-btn:hover:not(:disabled) {
+    background-color: #218838;
+    transform: translateY(-1px);
+}
+
+.time-btn:disabled {
+    background: #e5e7eb;
+    color: #9ca3af;
+    cursor: not-allowed;
+    transform: none;
 }
 
 .autofill-btn {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background-color: #28a745;
     color: white;
     border: none;
     padding: 12px 20px;
@@ -4436,13 +4658,13 @@ Wir wünschen den Spielen einen schönen, spannenden und fairen Verlauf und begr
     gap: 8px;
     transition: all 0.3s ease;
     font-size: 14px;
-    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
 }
 
 .autofill-btn:hover:not(:disabled) {
-    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+    background-color: #218838;
     transform: translateY(-2px);
-    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
+    box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
 }
 
 .autofill-btn:disabled {
@@ -4453,6 +4675,17 @@ Wir wünschen den Spielen einen schönen, spannenden und fairen Verlauf und begr
     box-shadow: none;
 }
 
+.autofill-section {
+    margin: 20px 0;
+    display: flex;
+    justify-content: center;
+}
+
+.endtime-section {
+    margin-top: 20px;
+    margin-bottom: 0;
+}
+
 /* Completion warning auf Ergebniserfassungs-Seite */
 .completion-warning {
     display: flex;