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

Aktualisiert die Benutzeroberfläche in OfficialTournaments.vue zur Anzeige des Teilnehmerstatus mit neuen Status-Badges und Aktionsbuttons. Implementiert die Logik zur Aktualisierung des Status eines Teilnehmers, einschließlich der Optionen Anmelden, Teilnehmen und Zurücksetzen. Verbessert die Darstellung der Platzierungseingabe und optimiert das Styling für eine bessere Benutzererfahrung.

Browse Source
This commit is contained in:
Torsten Schulz (local)
2025-09-21 18:11:16 +02:00
parent e4fcf2eca2
commit a36f0ea446
1 changed files with 73 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
frontend/src/views/OfficialTournaments.vue
View File

@@ -98,8 +98,8 @@
<th>Name</th>
<th>Geburtsdatum</th>
<th>Alter</th>
<th>Angemeldet</th>
<th>Teilgenommen</th>
<th>Status</th>
<th>Aktion</th>
<th>Platzierung</th>
</tr>
</thead>
@@ -116,23 +116,46 @@
</td>
<td>{{ formatDateStr(m.birthDate) }}</td>
<td>{{ ageOnRef(m, c) ?? '–' }}</td>
<td>
<input type="checkbox"
:checked="getParticipation(c.id, m.id).registered"
@change="onToggleRegistered(c, m, $event.target.checked)"
title="Angemeldet" />
<td class="status-cell">
<span v-if="getParticipation(c.id, m.id).participated" class="status-badge status-played">Hat gespielt</span>
<span v-else-if="getParticipation(c.id, m.id).registered" class="status-badge status-registered">Angemeldet</span>
<span v-else-if="getParticipation(c.id, m.id).wants" class="status-badge status-wants">Möchte teilnehmen</span>
<span v-else class="status-badge status-none">Nicht interessiert</span>
</td>
<td class="action-cell">
<button
v-if="!getParticipation(c.id, m.id).participated && !getParticipation(c.id, m.id).registered && getParticipation(c.id, m.id).wants"
@click="updateStatusForCompetition(c, m, 'register')"
class="btn-status btn-register"
title="Als angemeldet markieren">
Angemeldet
</button>
<button
v-else-if="getParticipation(c.id, m.id).registered && !getParticipation(c.id, m.id).participated"
@click="updateStatusForCompetition(c, m, 'participate')"
class="btn-status btn-participate"
title="Als teilgenommen markieren">
Teilgenommen
</button>
<button
v-else-if="getParticipation(c.id, m.id).participated"
@click="updateStatusForCompetition(c, m, 'reset')"
class="btn-status btn-reset"
title="Status zurücksetzen">
Zurücksetzen
</button>
<span v-else class="no-action">Checkbox aktivieren</span>
</td>
<td>
<input type="checkbox"
:checked="getParticipation(c.id, m.id).participated"
@change="onToggleParticipated(c, m, $event.target.checked)"
title="Teilgenommen" />
</td>
<td>
<input type="text" style="width:7rem;"
<input
v-if="getParticipation(c.id, m.id).participated"
type="text"
:value="getParticipation(c.id, m.id).placement || ''"
@change="onPlacementChange(c, m, $event.target.value)"
placeholder="z.B. 3. Platz" />
placeholder="z.B. 3. Platz"
class="placement-input"
/>
<span v-else>{{ getParticipation(c.id, m.id).placement || '–' }}</span>
</td>
</tr>
</tbody>
@@ -187,7 +210,7 @@
@click="updateStatus(item, 'register')"
class="btn-status btn-register"
title="Als angemeldet markieren">
Anmelden
Angemeldet
</button>
<button
v-else-if="item.registered && !item.participated"
@@ -203,13 +226,7 @@
title="Status zurücksetzen">
Zurücksetzen
</button>
<button
v-else
@click="updateStatus(item, 'register')"
class="btn-status btn-register"
title="Teilnahme anmelden">
Anmelden
</button>
<span v-else class="no-action">Checkbox aktivieren</span>
</td>
<td>
<input
@@ -837,6 +854,31 @@ export default {
alert('Fehler beim Aktualisieren der Platzierung: ' + (error.response?.data?.error || error.message));
}
},
async updateStatusForCompetition(competition, member, action) {
try {
const response = await apiClient.post(`/official-tournaments/${this.currentClub}/${this.uploadedId}/status`, {
competitionId: competition.id,
memberId: member.id,
action: action
});
if (response.data.success) {
// Aktualisiere den lokalen Status
const participation = this.getParticipation(competition.id, member.id);
participation.wants = response.data.status.wants;
participation.registered = response.data.status.registered;
participation.participated = response.data.status.participated;
participation.placement = response.data.status.placement;
// Aktualisiere auch die participationMap
const key = `${competition.id}-${member.id}`;
this.participationMap[key] = participation;
}
} catch (error) {
console.error('Fehler beim Aktualisieren des Status:', error);
alert('Fehler beim Aktualisieren des Status: ' + (error.response?.data?.error || error.message));
}
},
// Auswahl Helfer + PDF-Generierung
openMemberDialog() { this.showMemberDialog = true; },
closeMemberDialog() { this.showMemberDialog = false; },
@@ -1091,6 +1133,8 @@ th, td { border-bottom: 1px solid var(--border-color); padding: 0.5rem; text-ali
.eligible-name { background: var(--background, #f1f1f1); border: 1px solid var(--border-color, #ddd); border-radius: 4px; padding: 2px 6px; }
.eligible-table { width: 100%; border-collapse: collapse; margin-top: .25rem; }
.eligible-table th, .eligible-table td { border-bottom: 1px solid var(--border-color); padding: .25rem .4rem; text-align: left; }
.eligible-table .status-cell { text-align: center; vertical-align: middle; }
.eligible-table .action-cell { text-align: center; vertical-align: middle; }
.indented { padding-left: 1.25rem; }
.member-cell { font-weight: 600; vertical-align: top; }
.empty-first { border-bottom: 1px solid var(--border-color); }
@@ -1211,6 +1255,12 @@ th, td { border-bottom: 1px solid var(--border-color); padding: 0.5rem; text-ali
border-color: #007bff;
box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}
.no-action {
color: #6c757d;
font-style: italic;
font-size: 0.85rem;
}
</style>