From a36f0ea4469853f670aa97012235b9aa15ecce9c Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Sun, 21 Sep 2025 18:11:16 +0200
Subject: [PATCH] =?UTF-8?q?Aktualisiert=20die=20Benutzeroberfl=C3=A4che=20?=
 =?UTF-8?q?in=20OfficialTournaments.vue=20zur=20Anzeige=20des=20Teilnehmer?=
 =?UTF-8?q?status=20mit=20neuen=20Status-Badges=20und=20Aktionsbuttons.=20?=
 =?UTF-8?q?Implementiert=20die=20Logik=20zur=20Aktualisierung=20des=20Stat?=
 =?UTF-8?q?us=20eines=20Teilnehmers,=20einschlie=C3=9Flich=20der=20Optione?=
 =?UTF-8?q?n=20Anmelden,=20Teilnehmen=20und=20Zur=C3=BCcksetzen.=20Verbess?=
 =?UTF-8?q?ert=20die=20Darstellung=20der=20Platzierungseingabe=20und=20opt?=
 =?UTF-8?q?imiert=20das=20Styling=20f=C3=BCr=20eine=20bessere=20Benutzerer?=
 =?UTF-8?q?fahrung.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/OfficialTournaments.vue | 96 ++++++++++++++++------
 1 file changed, 73 insertions(+), 23 deletions(-)

diff --git a/frontend/src/views/OfficialTournaments.vue b/frontend/src/views/OfficialTournaments.vue
index ebdded5..aea31c0 100644
--- a/frontend/src/views/OfficialTournaments.vue
+++ b/frontend/src/views/OfficialTournaments.vue
@@ -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>