save changed marks

public/src/views/PlanView.vue

@@ -2,23 +2,26 @@
 
 import {onMounted, reactive, ref, toRaw, computed} from "vue";
 import TablePlan from "@/components/TablePlan.vue";
-import {API} from "@/views/api";
+import {API} from "@/services/api";
 import type {Gottesdienst, Mark, PlanModel, SimplifiedMinistrant} from "@/models/models";
 import MobilePlan from "@/components/MobilePlan.vue";
 import PlanActionBar from "@/components/PlanActionBar.vue";
+import {Auth} from "@/services/auth";
+
+const MAX_WIDTH_MOBILE = 600;
 
 const plan = reactive<{
     gottesdienste: Gottesdienst[],
     ministranten: SimplifiedMinistrant[],
     marks: Mark[],
-    editable: number[]
+    editable: string[]
 }>({
     gottesdienste: [],
     ministranten: [],
     marks: [],
     editable: []
 })
-const mobile = ref(false)
+const mobile = ref(window.innerWidth <= MAX_WIDTH_MOBILE)
 const editedMarks = reactive<Mark[]>([]);
 const editPlanAdmin = ref(false)
 
@@ -35,7 +38,7 @@ async function addGodi(data, validate) {
     let date = Date.parse(data.date + "T" + data.time);
     let attendance = data.attendance && data.attendance != ""
         ? Date.parse(data.date + "T" + data.attendance)
-        : (date - 1000*60*30)
+        : (date - 1000 * 60 * 30)
     console.log(date, attendance, data.date + "T" + data.attendance)
     let newGodi = await API.addGottesdienst(
         data.name,
@@ -50,7 +53,7 @@ async function addGodi(data, validate) {
 
 async function deleteGottedienst(id) {
     let deleted = await API.deleteGottesdienst(id)
-    if(deleted) {
+    if (deleted) {
         let index = plan.gottesdienste.findIndex(godi => godi.id == id)
         plan.gottesdienste.splice(index, 1)
     }
@@ -62,64 +65,98 @@ onMounted(async () => {
     plan.gottesdienste = fetchedPlan.gottesdienste
     plan.ministranten = fetchedPlan.ministranten
     plan.marks = fetchedPlan.marks
+    Auth.checkForToken()
 })
 
-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);
+Auth.loggedInSubject.subscribe(loggedIn => {
+    if (loggedIn) {
+        plan.editable = Auth.getPrivileges()
+        if(Auth.getUser() == "admin"){
+            editPlanAdmin.value = true
+        }
+    }else {
+        editPlanAdmin.value = false
+        plan.editable = []
+    }
+})
+
+window.addEventListener("resize", (ev) => {
+    mobile.value = window.innerWidth <= MAX_WIDTH_MOBILE
+})
+
+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 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)
+
+async function saveChanges() {
+    const saved = await API.setMarks(getDif())
+    if(saved) {
+        plan.marks = getMarks()
+        editedMarks.length = 0
+    }
+}
+
+async function resetPassword(username: string) {
+    const result = await API.resetPassword(username)
+    alert("Neues Passwort für " + username + "\n\n" + result.password)
+    console.log(result)
+}
+
+function canEdit(username: string) {
+    return plan.editable.includes(username)
 }
 
 function toggleMark(gid, mid) {
-  // TODO: track changes
-  if(!canEdit(mid)) return;
+    // TODO: track changes
+    const username = plan.ministranten.find(m => m.id == mid)?.username
+    if (!canEdit(username)) 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
+    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)
     }
-    editedMarks.push(mark)
-  }
 }
 
 
-
 </script>
 
 <template>
     <main>
 
         <TablePlan
-            :gottesdienste="plan.gottesdienste"
+            :gottesdienste="sortedGottesdienste"
             :ministranten="plan.ministranten"
             :marks="getMarks()"
             :editable="plan.editable"
             :edit="editPlanAdmin"
+            :small-mode="editPlanAdmin"
             @added="addGodi"
             @delete="deleteGottedienst"
             @toggle-mark="toggleMark"
             @end-edit="editPlanAdmin = false"
+            @reset-password="resetPassword"
             class="plan table"
             v-if="!mobile">
 
         </TablePlan>
 
         <MobilePlan
-            :gottesdienste="plan.gottesdienste"
+            :gottesdienste="sortedGottesdienste"
             :ministranten="plan.ministranten"
             :marks="getMarks()"
             :editable="plan.editable"
@@ -134,6 +171,7 @@ function toggleMark(gid, mid) {
             :save="getDif().length > 0"
             :plan="false"
             :godi="true"
+            @save="saveChanges()"
         />
 
 
@@ -146,6 +184,7 @@ function toggleMark(gid, mid) {
 .plan {
     padding-bottom: 100px;
 }
+
 .plan.table {
     width: 100%;
 }