torsten/trainingstagebuch
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Ermöglicht die Bearbeitung von Spielergebnissen in TournamentsView.vue durch klickbare Labels und editierbare Eingabefelder. Fügt Logik zum Speichern und Abbrechen von Änderungen hinzu. Aktualisiert das Styling für Eingabefelder und klickbare Texte, um die Benutzererfahrung zu verbessern.

Browse Source
This commit is contained in:
Torsten Schulz (local)
2025-10-04 01:38:27 +02:00
parent cc964da9cf
commit 7f0b681e88
1 changed files with 87 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
frontend/src/views/TournamentsView.vue
View File

@@ -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>