From a8c459d714fde0ac6d01f4222a711164aeb3eb09 Mon Sep 17 00:00:00 2001
From: Jonas Gerg <joniogerg@gmail.com>
Date: Tue, 14 Jul 2026 21:58:25 +0200
Subject: [PATCH] feat: add 'Gottesdienst' button at bottom of ListView for
 admin

- ListView accepts admin prop and shows add button when true
- Emits addGottesdienst event handled by PlanView's createGottesdienst
- Dashed border style to distinguish it as an add action
---
 public/src/components/ListView.vue | 31 ++++++++++++++++++++++++++++++
 public/src/views/PlanView.vue      |  2 ++
 2 files changed, 33 insertions(+)

diff --git a/public/src/components/ListView.vue b/public/src/components/ListView.vue
index ff9f6d2..7f67b11 100644
--- a/public/src/components/ListView.vue
+++ b/public/src/components/ListView.vue
@@ -8,10 +8,12 @@ defineProps<{
     marks: Mark[]
     editable: string[]
     currentUsername: string
+    admin: boolean
 }>()
 
 const emit = defineEmits<{
     toggleMark: [gid: number, mid: number]
+    addGottesdienst: []
 }>()
 </script>
 
@@ -27,6 +29,9 @@ const emit = defineEmits<{
             :current-username="currentUsername"
             @toggle-mark="(gid, mid) => emit('toggleMark', gid, mid)"
         />
+        <button v-if="admin" class="add-godi" @click="emit('addGottesdienst')">
+            <i class="icon">add</i> Gottesdienst
+        </button>
     </div>
 </template>
 
@@ -34,4 +39,30 @@ const emit = defineEmits<{
 .list-view {
     padding: 12px;
 }
+
+.add-godi {
+    display: flex;
+    width: 100%;
+    margin: 16px 0;
+    padding: 12px;
+    font-size: 15px;
+    justify-content: center;
+    background: #f5f5f5;
+    border: 1px dashed #c4c4c4;
+    border-radius: 8px;
+    cursor: pointer;
+    color: #555;
+    transition: 100ms;
+
+    i {
+        font-size: 22px;
+        margin-right: 6px;
+    }
+
+    &:hover {
+        background: #eaeaea;
+        border-color: #999;
+        color: #333;
+    }
+}
 </style>
diff --git a/public/src/views/PlanView.vue b/public/src/views/PlanView.vue
index d966e8e..5f29602 100644
--- a/public/src/views/PlanView.vue
+++ b/public/src/views/PlanView.vue
@@ -342,7 +342,9 @@ async function importZelebrationsplan() {
                 :marks="getMarks()"
                 :editable="plan.editable"
                 :current-username="currentUsername"
+                :admin="editPlanAdmin"
                 @toggle-mark="toggleMark"
+                @add-gottesdienst="createGottesdienst()"
                 class="plan list"
                 v-if="viewMode === 'list'">