feat: automatically save

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>