From 211420444e99aa34c9305d31b1a8967d377b978b Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Thu, 28 May 2026 13:08:41 +0200
Subject: [PATCH] feat: Enhance plan item display with visual representation
 and interaction options

---
 frontend/src/views/DiaryView.vue | 36 ++++++++++++++++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/DiaryView.vue b/frontend/src/views/DiaryView.vue
index 896dcb03..065775ef 100644
--- a/frontend/src/views/DiaryView.vue
+++ b/frontend/src/views/DiaryView.vue
@@ -435,7 +435,12 @@
                                         <div class="plan-cell-stack">
                                             <div v-for="item in row.sharedItems" :key="`shared-${item.id}`" class="plan-cell-item">
                                                 <div class="plan-activity-main">
-                                                    <span @click="startActivityEdit(item)" class="clickable activity-label">{{ getPlanItemDisplayLabel(item) }}</span>
+                                                    <span @click="startActivityEdit(item)" class="clickable activity-label">
+                                                        <span v-if="hasItemDrawingData(item)"
+                                                            @click.stop="openPlanItemVisual(item)"
+                                                            class="image-icon" :title="$t('diary.showImage')">🖼️</span>
+                                                        {{ getPlanItemDisplayLabel(item) }}
+                                                    </span>
                                                     <span v-if="!isStructuralPlanItem(item) && getPlanItemStatus(item).label" class="plan-status-badge" :class="`plan-status-badge-${getPlanItemStatus(item).tone}`">
                                                         {{ getPlanItemStatus(item).label }}
                                                     </span>
@@ -468,7 +473,12 @@
                                             <div v-if="(row.groupItems[group.id] || []).length" class="plan-cell-stack">
                                                 <div v-for="item in (row.groupItems[group.id] || [])" :key="`group-item-${item.id}`" class="plan-cell-item">
                                                     <div class="plan-activity-main">
-                                                        <span @click="startActivityEdit(item)" class="clickable activity-label">{{ getPlanItemDisplayLabel(item) }}</span>
+                                                        <span @click="startActivityEdit(item)" class="clickable activity-label">
+                                                            <span v-if="hasItemDrawingData(item)"
+                                                                @click.stop="openPlanItemVisual(item)"
+                                                                class="image-icon" :title="$t('diary.showImage')">🖼️</span>
+                                                            {{ getPlanItemDisplayLabel(item) }}
+                                                        </span>
                                                         <span v-if="!isStructuralPlanItem(item) && getPlanItemStatus(item).label" class="plan-status-badge" :class="`plan-status-badge-${getPlanItemStatus(item).tone}`">
                                                             {{ getPlanItemStatus(item).label }}
                                                         </span>
@@ -1473,9 +1483,31 @@ export default {
                 }
                 // Prüfe auch über predefinedActivity
                 if (item.predefinedActivity && this.hasActivityVisual(item.predefinedActivity)) return true;
+                if (item.groupPredefinedActivity && this.hasActivityVisual(item.groupPredefinedActivity)) return true;
             } catch (e) { }
             return false;
         },
+        getPlanItemVisualSource(item) {
+            if (!item) return null;
+            if (item.predefinedActivity) return item.predefinedActivity;
+            if (item.groupPredefinedActivity) return item.groupPredefinedActivity;
+            if (!this.hasItemDrawingData(item)) return null;
+            return {
+                name: item.activity || '',
+                code: item.activity || '',
+                drawingData: item.drawingData || null,
+                renderCode: item.renderCode || '',
+                renderSpec: item.renderSpec || null,
+                imageLink: item.imageLink || '',
+                images: Array.isArray(item.images) ? item.images : []
+            };
+        },
+        async openPlanItemVisual(item) {
+            const source = this.getPlanItemVisualSource(item);
+            if (source) {
+                await this.openActivityVisual(source);
+            }
+        },
         
         hasActivityVisual(pa) {
             if (!pa) return false;