miniplan/public/src/components/GroupView.vue

<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>
                <span class="hide-mobile">{{ formatDateShort(get(prev).from) }} - {{ formatDateShort(get(prev).to) }}</span>
            </button>
            <div class="width: 100%"/>
            <button class="flat right" v-if="next != null && next > 0" @click="forward">
                <span class="hide-mobile">{{ formatDateShort(get(next).from) }} - {{ formatDateShort(get(next).to) }}</span>
                <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"><span class="hide-mobile">Miniplan vom </span> {{ 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
    }

    @media(max-width: 800px) {
        .hide-mobile {
            display: none;
        }

    }

}
</style>