From 8fbdc68016d226794b2b9f7ab50f1295f7563728 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Thu, 28 Aug 2025 12:04:33 +0200
Subject: [PATCH] =?UTF-8?q?Implementiert=20die=20Bearbeitung=20von=20Aktiv?=
 =?UTF-8?q?it=C3=A4ten=20in=20DiaryView.vue.=20F=C3=BCgt=20Eingabefelder?=
 =?UTF-8?q?=20und=20Schaltfl=C3=A4chen=20zum=20Speichern=20oder=20Abbreche?=
 =?UTF-8?q?n=20von=20=C3=84nderungen=20hinzu.=20Aktualisiert=20das=20Styli?=
 =?UTF-8?q?ng=20f=C3=BCr=20klickbare=20Elemente.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/DiaryView.vue | 54 ++++++++++++++++++++++++++++++--
 1 file changed, 51 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/DiaryView.vue b/frontend/src/views/DiaryView.vue
index 2b57fda..844ea8c 100644
--- a/frontend/src/views/DiaryView.vue
+++ b/frontend/src/views/DiaryView.vue
@@ -103,8 +103,24 @@
                                         <td>{{ item.startTime }}</td>
                                         <td>
                                             <span v-if="item.isTimeblock"><i>Zeitblock</i></span>
-                                            <span v-else>{{ item.predefinedActivity ? item.predefinedActivity.name :
-                                                item.activity }}</span>
+                                            <span v-else-if="editingActivityId === item.id">
+                                                <div style="display: flex; gap: 5px; align-items: center;">
+                                                    <input 
+                                                        type="text" 
+                                                        :value="item.predefinedActivity ? item.predefinedActivity.name : item.activity"
+                                                        @input="item.activity = $event.target.value"
+                                                        @keyup.enter="saveActivityEdit(item)"
+                                                        @keyup.esc="cancelActivityEdit"
+                                                        ref="activityInput"
+                                                        style="flex: 1;"
+                                                    />
+                                                    <button @click="saveActivityEdit(item)" class="btn-primary" style="padding: 2px 8px; font-size: 12px;">✓</button>
+                                                    <button @click="cancelActivityEdit" class="btn-secondary" style="padding: 2px 8px; font-size: 12px;">✗</button>
+                                                </div>
+                                            </span>
+                                            <span v-else @click="startActivityEdit(item)" class="clickable">
+                                                {{ item.predefinedActivity ? item.predefinedActivity.name : item.activity }}
+                                            </span>
                                         </td>
                                         <td>{{ item.groupActivity ? item.groupActivity.name : '' }}</td>
                                         <td>
@@ -354,6 +370,7 @@ export default {
                 accident: '',
             },
             accidents: [],
+            editingActivityId: null, // ID der Aktivität, die gerade bearbeitet wird
         };
     },
     watch: {
@@ -1118,6 +1135,31 @@ export default {
         closeAccidentForm() {
             this.showAccidentForm = false;
         },
+
+        startActivityEdit(item) {
+            this.editingActivityId = item.id;
+            this.$nextTick(() => {
+                this.$refs.activityInput.focus();
+            });
+        },
+
+        async saveActivityEdit(item) {
+            try {
+                await apiClient.put(`/diary-date-activities/${this.currentClub}/${item.id}`, {
+                    customActivityName: item.activity,
+                    duration: item.duration,
+                    durationText: item.durationText,
+                    groupId: item.groupId,
+                });
+                this.editingActivityId = null;
+            } catch (error) {
+                alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.');
+            }
+        },
+
+        cancelActivityEdit() {
+            this.editingActivityId = null;
+        },
     },
     async mounted() {
         await this.init();
@@ -1301,7 +1343,13 @@ input[type="number"] {
 
 .clickable {
     cursor: pointer;
-    color: #45a049;
+    color: var(--primary-color);
+    transition: color 0.2s ease;
+}
+
+.clickable:hover {
+    color: var(--primary-hover);
+    text-decoration: underline;
 }
 
 .highlighted {