WIP

public/src/components/TablePlan.vue

@@ -3,10 +3,32 @@
 import {API} from "@/views/api";
 
 import {onMounted, reactive, ref} from "vue";
-import type {PlanModel, SimplifiedMinistrant} from "@/models/models";
+import type {Gottesdienst, Mark, PlanModel, SimplifiedMinistrant} from "@/models/models";
+import Input from "@/components/Input.vue";
+
+const props = defineProps<{
+    gottesdienste: Gottesdienst[],
+    ministranten: SimplifiedMinistrant[]
+    marks: Mark[],
+    editable: number[]
+    edit: boolean
+}>()
+const emit = defineEmits(["toggleMark", "added", "delete", "endEdit"])
+
+const data = reactive({
+    godi: {}
+})
+
+onMounted(() => {
+    window.addEventListener("keypress", ev => {
+        if(ev.key == "Enter" && props.edit){
+            emit("added", data.godi, () => {
+                data.godi = {}
+            })
+        }
+    })
+})
 
-const props = defineProps<PlanModel>()
-defineEmits(["toggleMark"])
 
 function getIconForMark(gid, mid) {
     const mark = getMark(gid, mid).value
@@ -100,25 +122,36 @@ function getMinistrantClasses(mini: SimplifiedMinistrant) {
 
         <thead>
 
+        <tr v-if="props.edit">
+            <th></th>
+            <th v-for="godi in props.gottesdienste"><i @click="$emit('delete', godi.id)">delete</i></th>
+            <th><i @click="$emit('endEdit')">close</i></th>
+        </tr>
+
         <tr>
             <th></th>
             <th v-for="godi in props.gottesdienste">{{ godi.name }}</th>
+            <th class="edit" v-if="props.edit"><Input v-model:value="data.godi.name"/></th>
         </tr>
         <tr class="bold">
             <th>Datum</th>
             <th v-for="godi in props.gottesdienste">{{ formatDay(godi.date) }}</th>
+            <th class="edit" v-if="props.edit"><Input v-model:value="data.godi.date" type="date"/></th>
         </tr>
         <tr>
             <th>Uhrzeit</th>
             <th v-for="godi in props.gottesdienste">{{ formatTime(godi.date) }}</th>
+            <th class="edit" v-if="props.edit"><Input v-model:value="data.godi.time" type="time"/></th>
         </tr>
         <tr class="bold">
             <th>Anwesenheit</th>
             <th v-for="godi in props.gottesdienste">{{ formatTime(godi.attendance) }}</th>
+            <th class="edit" v-if="props.edit"><Input v-model:value="data.godi.attendance" type="time"/></th>
         </tr>
         <tr>
             <th>Wochentag</th>
             <th v-for="godi in props.gottesdienste">{{ formatWeekday(godi.date) }}</th>
+            <th class="edit" v-if="props.edit"></th>
         </tr>
 
         </thead>
@@ -134,6 +167,7 @@ function getMinistrantClasses(mini: SimplifiedMinistrant) {
                 <i class="icon"> {{ getIconForMark(godi.id, mini.id) }} </i><br>
                 <span class="hint">{{ getHintForMark(godi.id, mini.id) }}</span>
             </td>
+            <td class="edit" v-if="props.edit"></td>
 
 
         </tr>
@@ -151,6 +185,9 @@ table {
 tr{
     th{
         font-weight: 400;
+        &.edit{
+            text-align: start;
+        }
     }
     &.bold th{
         font-weight: 700;