walamana/miniplan
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: automatically save

Browse Source
This commit is contained in:
walamana 2024-08-18 17:54:56 +02:00
parent 39af21057c
commit 7d10af6ef2
5 changed files with 150 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/package-lock.json generated
View File

@ -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",

1
public/package.json
View File

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

5
public/src/components/PlanActionBar.vue
View File

@ -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">

125
public/src/components/SavingIndicator.vue Normal file
View File

@ -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>

19
public/src/views/PlanView.vue
View File

@ -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()
editedMarks.length = 0
isSaving.value = false
}
}
@ -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>