From 7f0b681e883ebaf81c196274cb6fc23e12fddd2f Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Sat, 4 Oct 2025 01:38:27 +0200
Subject: [PATCH] =?UTF-8?q?Erm=C3=B6glicht=20die=20Bearbeitung=20von=20Spi?=
 =?UTF-8?q?elergebnissen=20in=20TournamentsView.vue=20durch=20klickbare=20?=
 =?UTF-8?q?Labels=20und=20editierbare=20Eingabefelder.=20F=C3=BCgt=20Logik?=
 =?UTF-8?q?=20zum=20Speichern=20und=20Abbrechen=20von=20=C3=84nderungen=20?=
 =?UTF-8?q?hinzu.=20Aktualisiert=20das=20Styling=20f=C3=BCr=20Eingabefelde?=
 =?UTF-8?q?r=20und=20klickbare=20Texte,=20um=20die=20Benutzererfahrung=20z?=
 =?UTF-8?q?u=20verbessern.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/TournamentsView.vue | 101 +++++++++++++++++++++----
 1 file changed, 87 insertions(+), 14 deletions(-)

diff --git a/frontend/src/views/TournamentsView.vue b/frontend/src/views/TournamentsView.vue
index 04e567d..ac220f5 100644
--- a/frontend/src/views/TournamentsView.vue
+++ b/frontend/src/views/TournamentsView.vue
@@ -170,12 +170,24 @@
                         <td>
                             <!-- 1. Fall: Match ist noch offen → Edit‑Mode -->
                             <template v-if="!m.isFinished">
-                                <!-- existierende Sätze als klickbare Labels -->
+                                <!-- existierende Sätze als klickbare Labels oder editierbare Eingabefelder -->
                                 <template v-for="r in m.tournamentResults" :key="r.set">
-                                    <span @click="startEditResult(m, r)" class="result-text">
-                                        {{ r.pointsPlayer1 }}:{{ r.pointsPlayer2 }}
-                                    </span>
-                                    <span v-if="!isLastResult(m, r)">, </span>
+                                    <template v-if="isEditing(m, r.set)">
+                                        <input 
+                                            v-model="editingResult.value"
+                                            @keyup.enter="saveEditedResult(m)"
+                                            @blur="saveEditedResult(m)"
+                                            @keyup.escape="cancelEdit"
+                                            class="inline-input"
+                                            ref="editInput"
+                                        />
+                                    </template>
+                                    <template v-else>
+                                        <span @click="startEditResult(m, r)" class="result-text clickable">
+                                            {{ r.pointsPlayer1 }}:{{ r.pointsPlayer2 }}
+                                        </span>
+                                    </template>
+                                    <span v-if="!isLastResult(m, r)">, </span>
                                 </template>
 
                                 <!-- Eingabefeld für neue Sätze (immer sichtbar solange offen) -->
@@ -253,12 +265,24 @@
                         <td>
                             <!-- 1. Fall: Match ist noch offen → Edit‑Mode -->
                             <template v-if="!m.isFinished">
-                                <!-- existierende Sätze als klickbare Labels -->
+                                <!-- existierende Sätze als klickbare Labels oder editierbare Eingabefelder -->
                                 <template v-for="r in m.tournamentResults" :key="r.set">
-                                    <span @click="startEditResult(m, r)" class="result-text">
-                                        {{ r.pointsPlayer1 }}:{{ r.pointsPlayer2 }}
-                                    </span>
-                                    <span v-if="!isLastResult(m, r)">, </span>
+                                    <template v-if="isEditing(m, r.set)">
+                                        <input 
+                                            v-model="editingResult.value"
+                                            @keyup.enter="saveEditedResult(m)"
+                                            @blur="saveEditedResult(m)"
+                                            @keyup.escape="cancelEdit"
+                                            class="inline-input"
+                                            ref="editInput"
+                                        />
+                                    </template>
+                                    <template v-else>
+                                        <span @click="startEditResult(m, r)" class="result-text clickable">
+                                            {{ r.pointsPlayer1 }}:{{ r.pointsPlayer2 }}
+                                        </span>
+                                    </template>
+                                    <span v-if="!isLastResult(m, r)">, </span>
                                 </template>
 
                                 <!-- Eingabefeld für neue Sätze (immer sichtbar solange offen) -->
@@ -520,10 +544,11 @@ export default {
             const losing = Math.abs(num);
             const winning = losing < 10 ? 11 : losing + 2;
 
-            if (num >= 0) {
-                return `${winning}:${losing}`;
-            } else {
+            // Prüfe das ursprüngliche Vorzeichen vor der Konvertierung
+            if (s.startsWith('-')) {
                 return `${losing}:${winning}`;
+            } else {
+                return `${winning}:${losing}`;
             }
         },
 
@@ -849,12 +874,25 @@ export default {
             this.editingResult.matchId = match.id;
             this.editingResult.set = result.set;
             this.editingResult.value = `${result.pointsPlayer1}:${result.pointsPlayer2}`;
+            
+            // Fokussiere das Eingabefeld nach dem nächsten DOM-Update
+            this.$nextTick(() => {
+                const editInputs = this.$refs.editInput;
+                if (editInputs && editInputs.length > 0) {
+                    const lastInput = editInputs[editInputs.length - 1];
+                    lastInput.focus();
+                    lastInput.select();
+                }
+            });
         },
 
         async saveEditedResult(match) {
             const { set, value } = this.editingResult;
             const normalized = this.normalizeResultInput(value);
-            if (!normalized) return;
+            if (!normalized) {
+                this.cancelEdit();
+                return;
+            }
             let result = normalized;
             await apiClient.post('/tournament/match/result', {
                 clubId: this.currentClub,
@@ -869,6 +907,12 @@ export default {
             await this.loadTournamentData();
         },
 
+        cancelEdit() {
+            this.editingResult.matchId = null;
+            this.editingResult.set = null;
+            this.editingResult.value = '';
+        },
+
         isEditing(match, set) {
             return (
                 this.editingResult.matchId === match.id &&
@@ -1483,4 +1527,33 @@ button {
     50% { transform: scale(1.02); }
     100% { transform: scale(1); }
 }
+
+/* Container für neue Satzeingabe - inline */
+.new-set-line {
+    display: inline-block;
+    margin-left: 0.5rem;
+}
+
+/* Eingabefeld für Sätze - nur so breit wie nötig für die Eingabe */
+.inline-input {
+    width: 5ch; /* 5 Zeichen breit */
+    padding: 0.25rem 0.5rem;
+    font-family: monospace; /* Für gleichmäßige Breite der Zeichen */
+    text-align: center;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+}
+
+/* Klickbare Ergebnis-Texte */
+.result-text.clickable {
+    cursor: pointer;
+    padding: 0.2rem 0.4rem;
+    border-radius: 3px;
+    transition: background-color 0.2s ease;
+}
+
+.result-text.clickable:hover {
+    background-color: #f8f9fa;
+    border: 1px solid #dee2e6;
+}
 </style>
\ No newline at end of file