public/package-lock.json

@@ -9,7 +9,6 @@
       "version": "0.0.0",
       "dependencies": {
         "rxjs": "^7.8.1",
-        "underscore": "^1.13.7",
         "vue": "^3.3.4",
         "vue-router": "^4.2.4"
       },
@@ -2210,11 +2209,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/underscore": {
-      "version": "1.13.7",
-      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.7.tgz",
-      "integrity": "sha512-GMXzWtsc57XAtguZgaQViUOzs0KTkk8ojr3/xAxXLITqf/3EMwxC0inyETfDFjH/Krbhuep0HNbbjI9i/q3F3g=="
-    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",

public/package.json

@@ -11,7 +11,6 @@
   },
   "dependencies": {
     "rxjs": "^7.8.1",
-    "underscore": "^1.13.7",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
   },

public/src/components/PlanActionBar.vue

@@ -9,16 +9,15 @@ const props = defineProps<{
 
 <template>
 
-    <div class="action-bar" :class="{save: true}">
+    <div class="action-bar" :class="{save: props.save}">
         <div class="other-action">
             <button class="add-plan" :class="{show: props.plan}" @click="$emit('addPlan')"> <i class="icon">add_box</i> Neuer Plan</button>
             <button class="add-godi" :class="{show: props.godi}" @click="$emit('addGodi')"> <i class="icon">add</i> Gottesdienst</button>
             <button class="add-mini" :class="{show: props.godi}" @click="$emit('addMini')"> <i class="icon">add</i> Ministrant</button>
         </div>
-<!--        <button class="save" :class="{show: props.save}" @click="$emit('save')"><i class="icon">save</i> Änderungen speichern </button>-->
+        <button class="save" :class="{show: props.save}" @click="$emit('save')"><i class="icon">save</i> Änderungen speichern </button>
     </div>
 
-
 </template>
 
 <style scoped lang="less">

public/src/components/SavingIndicator.vue

@@ -1,125 +0,0 @@
-<script setup lang="ts">
-import {ref, watch} from "vue";
-
-const props = defineProps<{
-    visible: boolean
-}>()
-
-const up = ref(false)
-const showText = ref(false)
-const saved = ref(false)
-const timeout = ref(undefined)
-const timeoutShowText = ref(0)
-
-watch(props, (isSaving, wasBeingSaved) => {
-    console.log("Is saving", props.visible, wasBeingSaved)
-    if(props.visible) {
-        up.value = true
-        saved.value = false
-        clearTimeout(timeout.value)
-        timeoutShowText.value = setTimeout(() => {
-            showText.value = true
-        }, 3000)
-    }else if(wasBeingSaved){
-        clearTimeout(timeoutShowText.value)
-        if(showText.value) {
-            saved.value = true
-            timeout.value = setTimeout(() => {
-                up.value = false
-                showText.value = false
-            }, 1000)
-        }else{
-            up.value = false
-        }
-    }
-}, {immediate: true})
-</script>
-
-<template>
-    <div class="indicator" :class="{up, saved, showText}">
-        <span class="loader" :class="{saved}"></span>
-        <span class="text">{{saved ? "Gespeichert" : "Wird gespeichert"}}</span>
-        <i :class="{saved}">check</i>
-    </div>
-
-</template>
-
-<style scoped lang="less">
-
-.indicator {
-    position: fixed;
-    right: 16px;
-    bottom: -60px;
-    background: white;
-    border-radius: 22px;
-    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
-    padding: 10px 10px 10px 10px;
-    height: 22px;
-    width: 22px;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-    transition: width 300ms, bottom 300ms;
-
-    color: #000000;
-    i {
-        color: #6cc361;
-    }
-
-    &.up{
-        bottom: 16px;
-
-        &.showText{
-            width: 154px;
-            &.saved{
-                width: 150px;
-            }
-        }
-
-    }
-
-}
-.loader {
-    width: 22px;
-    height: 22px;
-    flex-shrink: 0;
-    margin-right: 10px;
-    border: 3px solid #6cc361;
-    border-bottom-color: transparent;
-    border-radius: 50%;
-    display: inline-block;
-    box-sizing: border-box;
-    animation: rotation 1s linear infinite;
-    transition: opacity 200ms, width 200ms;
-
-    &.saved{
-        width: 0;
-        opacity: 0;
-    }
-}
-
-.text{
-    flex-shrink: 0;
-    opacity: 0.5;
-}
-
-i {
-    opacity: 0;
-    transition: opacity 200ms;
-    margin-left: 15px;
-    &.saved{
-        opacity: 1;
-    }
-}
-
-@keyframes rotation {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-
-</style>

public/src/views/PlanView.vue

@@ -14,8 +14,7 @@ import CreatePlanDialog from "@/components/dialog/CreatePlanDialog.vue";
 import CreateGottesdienstDialog from "@/components/dialog/CreateGottesdienstDialog.vue";
 import CreateMinistrantDialog from "@/components/dialog/CreateMinistrantDialog.vue";
 import {useRoute, useRouter} from "vue-router";
-import debounce from "underscore/modules/debounce.js"
+import {min} from "rxjs";
-import SavingIndicator from "@/components/SavingIndicator.vue";
 
 const MAX_WIDTH_MOBILE = 600;
 
@@ -39,7 +38,6 @@ const mobile = ref(window.innerWidth <= MAX_WIDTH_MOBILE)
 const editedMarks = reactive<Mark[]>([]);
 const editPlanAdmin = ref(false)
 const planId = ref(parseInt(route.params.id as string))
-const isSaving = ref(false)
 
 
 onMounted(async () => {
@@ -149,13 +147,11 @@ function getDif(): Mark[] {
     })
 }
 
-
+async function saveChanges() {
-const saveChanges = debounce(saveChangesFunc, 600)
-
-async function saveChangesFunc() {
     const saved = await API.setMarks(getDif())
     if (saved) {
-        isSaving.value = false
+        plan.marks = getMarks()
+        editedMarks.length = 0
     }
 }
 
@@ -169,23 +165,12 @@ function canEdit(username: string) {
     return plan.editable.includes(username)
 }
 
-
 function toggleMark(gid, mid) {
     // 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) {
-        let markFromPlan = plan.marks.find(m => m.gid == gid && m.mid == mid)
-        if(markFromPlan) {
-            mark = {
-                ...markFromPlan
-            }
-            editedMarks.push(mark)
-        }
-    }
-    console.log(mark, editedMarks, plan.marks)
     if (mark) {
         mark.value = ((mark.value + 2) % 3) - 1
     } else {
@@ -194,9 +179,6 @@ function toggleMark(gid, mid) {
         }
         editedMarks.push(mark)
     }
-
-    isSaving.value = true
-    saveChanges()
 }
 
 
@@ -324,9 +306,6 @@ async function createMinistrant(ministrantId?: number) {
                 @add-mini="createMinistrant()"
                 v-if="editPlanAdmin"
             />
-
-
-            <SavingIndicator :visible="isSaving"/>
         </div>
     </main>
 </template>