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>

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'">