pipeline and improvements

2024-08-07 20:08:52 +02:00
parent 24f14da9b2
commit dde21c3ac5
54 changed files with 1651 additions and 237 deletions
@@ -0,0 +1,212 @@
+<script setup lang="ts">
+
+import {onMounted, reactive, ref, watch} from "vue";
+import Input from "@/components/Input.vue";
+import {useRouter} from "vue-router";
+
+const props = defineProps<{
+    groups: any[],
+    admin: boolean
+}>()
+
+const emit = defineEmits(["change", "new", "delete", "edit"])
+const router = useRouter()
+
+const prev = ref<number | null>(null)
+const cur = ref(0)
+const next = ref<number | null>(null)
+
+const newPlan = reactive({
+    id: 0,
+    from: null,
+    to: null
+})
+
+// watch(props, (value, oldValue, onCleanup) => {
+//     setToCurrentDate()
+// })
+
+onMounted(() => {
+    setToCurrentDate()
+})
+
+function getGroups() {
+    if (newPlan.id != 0) {
+        return [newPlan].concat(props.groups)
+    } else {
+        return props.groups
+    }
+}
+
+function setToCurrentDate() {
+    const date = new Date().getTime()
+    let g = props.groups.findIndex(g => date >= g.from && date <= g.to)
+    if (g == -1) {
+        prev.value = 1;
+        cur.value = 0;
+        next.value = null
+        g = props.groups[0]
+    } else {
+        prev.value = g + 1
+        cur.value = g
+        next.value = g - 1
+    }
+    emit("change", get(cur.value)?.id ?? 0)
+}
+
+function forward() {
+    prev.value--;
+    cur.value--;
+    next.value--;
+
+    // emit("change", get(cur.value).id)
+    router.push("/" + get(cur.value).id)
+}
+
+function back() {
+    prev.value++;
+    cur.value++;
+    next.value++;
+    // emit("change", get(cur.value).id)
+    router.push("/" + get(cur.value).id)
+}
+
+function two(s) {
+    return (s < 10 ? "0" : "") + s
+}
+
+function formatDate(time) {
+    const date = new Date(time)
+    return two(date.getDate()) + ". " + getNameOfMonth(date.getMonth())
+}
+
+function formatDateShort(time) {
+    const date = new Date(time)
+    return two(date.getDate()) + "." + two(date.getMonth() + 1) + "."
+}
+
+function getNameOfMonth(month): string {
+    switch (month) {
+        case 0:
+            return "Januar";
+        case 1:
+            return "Februar";
+        case 2:
+            return "März";
+        case 3:
+            return "April";
+        case 4:
+            return "Mai";
+        case 5:
+            return "Juni";
+        case 6:
+            return "Juli";
+        case 7:
+            return "August";
+        case 8:
+            return "September";
+        case 9:
+            return "Oktober";
+        case 10:
+            return "November";
+        case 11:
+            return "Dezember";
+    }
+    return "?"
+}
+
+function get(i) {
+    if (i < 0) return null;
+    return getGroups()[i]
+}
+
+function index(id) {
+    return id
+}
+
+function dateToValueString(time) {
+    const date = new Date(time)
+    return date.getFullYear() + "-" + two(date.getMonth() + 1) + "-" + two(date.getDate())
+}
+
+</script>
+
+<template>
+    <div class="bar">
+        <div class="controls">
+            <button class="flat left" v-if="prev != null && prev <= groups.length - 1" @click="back">
+                <i>arrow_left_alt</i>{{ formatDateShort(get(prev).from) }} - {{ formatDateShort(get(prev).to) }}
+            </button>
+            <div class="width: 100%"/>
+            <button class="flat right" v-if="next != null && next > 0" @click="forward">
+                {{ formatDateShort(get(next).from) }} - {{ formatDateShort(get(next).to) }}<i>arrow_right_alt</i>
+            </button>
+            <button class="flat right" v-if="(next == null || next <= 0) && admin" style="margin-right: 20px"
+                    @click="$emit('new')">
+                <i>add</i> Neuer plan
+            </button>
+        </div>
+        <template v-if="groups.length > 0">
+            <span style="z-index: 1">Miniplan vom {{ formatDate(get(cur).from) }} bis {{ formatDate(get(cur).to) }}</span>
+            <span v-if="admin" style="display: flex; align-items: center; z-index: 1">
+                <button class="icon flat" @click="$emit('delete', get(cur).id)"><i>delete</i></button>
+                <button class="icon flat" @click="$emit('edit', get(cur).id)"><i>edit</i></button>
+            </span>
+        </template>
+        <span v-else>
+            Keine Gottesdienstgruppen vorhanden
+        </span>
+    </div>
+</template>
+
+<style scoped lang="less">
+
+.bar {
+    display: flex;
+    width: calc(100% - 30px);
+    align-items: center;
+    justify-content: center;
+    border-bottom: 1px solid #d7d5d5;
+    z-index: 10;
+    padding: 15px;
+    position: relative;
+
+    .controls {
+        display: flex;
+        justify-content: space-between;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: calc(100% - 10px);
+        height: calc(100% - 10px);
+        padding: 5px;
+    }
+
+    .left, .right{
+        flex-shrink: 0;
+    }
+
+    .left {
+        margin-left: 10px;
+    }
+
+    .right {
+        i {
+            margin-left: 10px;
+        }
+    }
+
+    span {
+        font-weight: 700;
+    }
+
+    button {
+        margin-right: 10px;
+    }
+
+    .input {
+        margin: 0 10px
+    }
+
+}
+</style>