Initial commit

public/src/views/PlanView.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
 
+import {onMounted, reactive, ref, toRaw} from "vue";
+import TablePlan from "@/components/TablePlan.vue";
+import {API} from "@/views/api";
+import type {Mark, PlanModel} from "@/models/models";
+import MobilePlan from "@/components/MobilePlan.vue";
+import PlanActionBar from "@/components/PlanActionBar.vue";
+
 import {computed, onMounted, reactive, ref} from "vue";
 import Plan from "@/components/Plan.vue";
 import {API} from "@/views/api";
@@ -10,6 +17,8 @@ const plan = reactive<PlanModel>({
     ministranten: [],
     marks: []
 })
+const mobile = ref(false)
+const editedMarks = reactive<Mark[]>([]);
 
 const sortedGottesdienste = computed(() => {
     return plan.gottesdienste.sort((a, b) => {
@@ -44,6 +53,13 @@ async function deleteGottedienst(id) {
 }
 
 
+async function addGodi() {
+    let time = 1692104646066 + ((1000 * 60 * 60 * 24) * Math.random() * 6)
+    let newGodi = await API.addGottesdienst("Godi", new Date(time), new Date(time - 1000 * 60 * 30), 0)
+    plan.gottesdienste.push(newGodi)
+}
+
+
 onMounted(async () => {
     let fetchedPlan = await API.getPlan(0)
     plan.gottesdienste = fetchedPlan.gottesdienste
@@ -51,18 +67,36 @@ onMounted(async () => {
     plan.marks = fetchedPlan.marks
 })
 
+function getMarks(): Mark[]{
+  return plan.marks.filter((mark: Mark) => {
+    let difMark = editedMarks.find((m: Mark) => m.gid == mark.gid && m.mid == mark.mid)
+    return !difMark
+  }).concat(editedMarks);
+}
+
+function getDif(): Mark[]{
+  return editedMarks.filter((mark: Mark) => {
+    let sameMark = plan.marks.find((m: Mark) => m.gid == mark.gid && m.mid == mark.mid)
+    return (!sameMark && mark.value != 0) || (sameMark && mark.value != sameMark.value)
+  })
+}
+function canEdit(mid) {
+  return plan.editable.includes(mid)
+}
+
 function toggleMark(gid, mid) {
-    // TODO: track changes
-    let existingMark = plan.marks.find(mark => mark.mid == mid && mark.gid == gid);
-    if(existingMark) {
-        existingMark.value = ((existingMark.value + 2) % 3) - 1
-        console.log(existingMark.value.valueOf())
-    }else{
-        const mark = {
-            gid, mid, value: 1
-        }
-        plan.marks.push(mark)
+  // TODO: track changes
+  if(!canEdit(mid)) return;
+
+  let mark = editedMarks.find(m => m.mid == mid && m.gid == gid);
+  if (mark) {
+    mark.value = ((mark.value + 2) % 3) - 1
+  } else {
+    mark = {
+      gid, mid, value: 1
     }
+    editedMarks.push(mark)
+  }
 }
 
 
@@ -72,22 +106,54 @@ function toggleMark(gid, mid) {
 <template>
     <main>
 
-        <Plan
-            :gottesdienste="sortedGottesdienste"
+        <TablePlan
+            :gottesdienste="plan.gottesdienste"
             :ministranten="plan.ministranten"
-            :marks="plan.marks"
-            :edit="false"
+            :marks="getMarks()"
+            :editable="plan.editable"
             @added="addGodi"
-            @delete="deleteGottedienst"
-            @toggle-mark="toggleMark">
+            @delete="deleteGottesdienst"
+            @toggle-mark="toggleMark"
+            class="plan table"
+            v-if="!mobile">
 
-        </Plan>
+        </TablePlan>
+
+        <MobilePlan
+            :gottesdienste="plan.gottesdienste"
+            :ministranten="plan.ministranten"
+            :marks="getMarks()"
+            :editable="plan.editable"
+            @toggle-mark="toggleMark"
+            class="plan mobile"
+            v-else>
+
+        </MobilePlan>
+
+        <PlanActionBar
+            class="action-bar"
+            :save="getDif().length > 0"
+            :plan="false"
+            :godi="false"
+        />
 
-        <button @click="addGodi">Add random Gottesdienst</button>
 
     </main>
 </template>
 
 
 <style scoped lang="less">
-</style>
+
+.plan {
+    padding-bottom: 100px;
+}
+.plan.table {
+    width: 100%;
+}
+
+.action-bar {
+    position: fixed;
+    bottom: 0;
+    z-index: 100;
+}
+</style>