From d40eea5e463e76877d2dfd00503f088ac4128603 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Tue, 4 Nov 2025 16:22:21 +0100
Subject: [PATCH] Enhance DiaryView with member form handover functionality and
 styling improvements

Added a new feature to mark the member form as handed over, updating the member's status accordingly. Enhanced the participant list with conditional styling based on member activity and membership status. Introduced new CSS classes for better visual representation of inactive members and those with test memberships. Improved user interaction by adding an icon for marking the form handover.
---
 frontend/src/views/DiaryView.vue    | 61 ++++++++++++++++++++++++++++-
 frontend/src/views/ScheduleView.vue | 12 +++---
 2 files changed, 66 insertions(+), 7 deletions(-)

diff --git a/frontend/src/views/DiaryView.vue b/frontend/src/views/DiaryView.vue
index 67ed509..828da4e 100644
--- a/frontend/src/views/DiaryView.vue
+++ b/frontend/src/views/DiaryView.vue
@@ -374,7 +374,12 @@
                     </div>
                     <h3>Teilnehmer ({{ participants.length }})</h3>
                     <ul>
-                        <li v-for="member in sortedMembers()" :key="member.id" class="checkbox-item">
+                        <li v-for="member in sortedMembers()" :key="member.id" class="checkbox-item" 
+                            :class="{ 
+                                'row-inactive': !member.active, 
+                                'row-test': member.testMembership && !member.memberFormHandedOver, 
+                                'row-test-form': member.testMembership && member.memberFormHandedOver 
+                            }">
                             <label class="checkbox-item">
                                 <input type="checkbox" :value="member.id" @change="toggleParticipant(member.id)"
                                     :checked="isParticipant(member.id)">
@@ -397,6 +402,12 @@
                             </select>
                             <span v-if="false" @click="openNotesModal(member)" class="clickable">📝</span>
                             <span @click="showPic(member)" class="img-icon" v-if="member.hasImage">&#x1F5BC;</span>
+                            <span v-if="member.testMembership === true && member.memberFormHandedOver !== true" 
+                                  @click.stop="markFormHandedOver(member)" 
+                                  class="pointer form-handover-icon" 
+                                  title="Mitgliedsformular ausgehändigt">
+                                📄
+                            </span>
                             <span class="pointer" @click="openTagInfos(member)">ℹ️</span>
                         </li>
                     </ul>
@@ -1035,6 +1046,36 @@ export default {
             }
         },
 
+        async markFormHandedOver(member) {
+            try {
+                const memberData = {
+                    id: member.id,
+                    firstname: member.firstName,
+                    lastname: member.lastName,
+                    street: member.street,
+                    city: member.city,
+                    birthdate: member.birthDate,
+                    phone: member.phone,
+                    email: member.email,
+                    gender: member.gender || 'unknown',
+                    active: member.active,
+                    testMembership: member.testMembership || false,
+                    picsInInternetAllowed: member.picsInInternetAllowed || false,
+                    memberFormHandedOver: true,
+                    ttr: member.ttr,
+                    qttr: member.qttr
+                };
+                
+                await apiClient.post(`/clubmembers/set/${this.currentClub}`, memberData);
+                // Lokales Member-Objekt aktualisieren
+                member.memberFormHandedOver = true;
+                this.showInfo('Erfolg', 'Mitgliedsformular als ausgehändigt markiert', '', 'success');
+            } catch (error) {
+                console.error('Fehler beim Markieren des Formulars:', error);
+                this.showInfo('Fehler', 'Fehler beim Markieren des Mitgliedsformulars', '', 'error');
+            }
+        },
+
         async addActivity() {
             const dateId = this.date.id;
             if (this.newActivity) {
@@ -2431,6 +2472,24 @@ li {
     margin-bottom: 5px;
 }
 
+/* Teilnehmer-Farben (wie in MembersView) */
+.row-inactive {
+    opacity: .6;
+}
+
+.row-test {
+    background-color: #fff3cd;
+}
+
+.row-test-form {
+    background-color: #ffffcc;
+}
+
+/* Icon für Mitgliedsformular ausgehändigt (wie Info- und Picture-Button) */
+.form-handover-icon {
+    margin-left: 0.25rem;
+}
+
 .multiselect {
     margin-bottom: 10px;
     width: 100%;
diff --git a/frontend/src/views/ScheduleView.vue b/frontend/src/views/ScheduleView.vue
index 944a328..534c0a8 100644
--- a/frontend/src/views/ScheduleView.vue
+++ b/frontend/src/views/ScheduleView.vue
@@ -886,7 +886,7 @@ td {
     color: #dc3545;
 }
 
-/* Unentschieden: gelb hinterlegen */
+/* Unentschieden: gelb hinterlegen (wie .row-test in MembersView) */
 .result-cell.completed.draw {
     background-color: #fff3cd;
 }
@@ -1062,12 +1062,12 @@ li {
 
 .match-today {
     background-color: #fff3cd !important;
-    /* Gelb für heute */
+    /* Gelb für heute (wie .row-test in MembersView) */
 }
 
 .match-next-week {
-    background-color: #d1ecf1 !important;
-    /* Hellblau für nächste Woche */
+    background-color: #ffffcc !important;
+    /* Hellgelb für nächste Woche (wie .row-test-form in MembersView) */
 }
 
 .match-today:hover {
@@ -1076,8 +1076,8 @@ li {
 }
 
 .match-next-week:hover {
-    background-color: #b8daff !important;
-    /* Dunkleres Blau beim Hover */
+    background-color: #fff9cc !important;
+    /* Dunkleres Gelb beim Hover */
 }
 
 /* Tab Navigation */