feat: automatically save

public/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "rxjs": "^7.8.1",
+        "underscore": "^1.13.7",
         "vue": "^3.3.4",
         "vue-router": "^4.2.4"
       },
@@ -2209,6 +2210,11 @@
         "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,6 +11,7 @@
   },
   "dependencies": {
     "rxjs": "^7.8.1",
+    "underscore": "^1.13.7",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
   },

public/src/components/PlanActionBar.vue

@@ -9,15 +9,16 @@ const props = defineProps<{
 
 <template>
 
-    <div class="action-bar" :class="{save: props.save}">
+    <div class="action-bar" :class="{save: true}">
         <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

@@ -0,0 +1,125 @@
+<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,7 +14,8 @@ 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 {min} from "rxjs";
+import debounce from "underscore/modules/debounce.js"
+import SavingIndicator from "@/components/SavingIndicator.vue";
 
 const MAX_WIDTH_MOBILE = 600;
 
@@ -38,6 +39,7 @@ 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 () => {
@@ -147,11 +149,13 @@ function getDif(): Mark[] {
     })
 }
 
-async function saveChanges() {
+
+const saveChanges = debounce(saveChangesFunc, 600)
+
+async function saveChangesFunc() {
     const saved = await API.setMarks(getDif())
     if (saved) {
-        plan.marks = getMarks()
+        isSaving.value = false
-        editedMarks.length = 0
     }
 }
 
@@ -165,6 +169,7 @@ 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
@@ -179,6 +184,9 @@ function toggleMark(gid, mid) {
         }
         editedMarks.push(mark)
     }
+
+    isSaving.value = true
+    saveChanges()
 }
 
 
@@ -306,6 +314,9 @@ async function createMinistrant(ministrantId?: number) {
                 @add-mini="createMinistrant()"
                 v-if="editPlanAdmin"
             />
+
+
+            <SavingIndicator :visible="isSaving"/>
         </div>
     </main>
 </template>