miniplan/public/src/components/MobilePlan.vue

<script setup lang="ts">

import {API} from "@/services/api";

import {onMounted, reactive, ref} from "vue";
import type {Gottesdienst, Mark, PlanModel, SimplifiedMinistrant} from "@/models/models";

const props = defineProps<{
    gottesdienste: Gottesdienst[],
    ministranten: SimplifiedMinistrant[],
    marks: Mark[],
    editable: string[]
}>()
defineEmits(["toggleMark"])

function getIconForMark(gid, mid) {
    const mark = getMark(gid, mid).value
    switch (mark) {
        case -1:
            return "remove";
        case 0:
            return "question_mark";
        // return ""
        case 1:
            return "close"
    }
    return ""
}


function getClassForMark(gid, mid) {
    const mark = getMark(gid, mid).value
    switch (mark) {
        case -1:
            return "minus";
        case 0:
            return "neutral";
        case 1:
            return "cross"
    }
    return ""
}

function getHintForMark(gid, mid) {
    const mark = getMark(gid, mid).value
    switch (mark) {
        case -1:
            return "Ich kann nicht";
        case 0:
            return "Egal";
        case 1:
            return "Ich komme"
    }
}

function two(s) {
    return (s < 10 ? "0" : "") + s
}

function formatDay(time) {
    let date = new Date(time)
    return two(date.getDate()) + "." + two(date.getMonth() + 1) + "."
}

function formatTime(time) {
    let date = new Date(time)
    return two(date.getHours()) + ":" + two(date.getMinutes())
}

function formatWeekday(time) {
    let date = new Date(time)
    switch (date.getDay()) {
        case 1:
            return "Montag";
        case 2:
            return "Dienstag";
        case 3:
            return "Mittwoch";
        case 4:
            return "Donnerstag";
        case 5:
            return "Freitag";
        case 6:
            return "Samstag";
        case 0:
            return "Sonntag"
    }
}

function getMark(gid, mid) {
    const mark = props.marks.find(mark => mark.mid == mid && mark.gid == gid)
    return mark ? mark : {gid, mid, value: 0}
}

function getMinistrantClasses(mini: SimplifiedMinistrant) {
    return {
        edit: props.editable.includes(mini.username)
    }
}

function getMinis() {
    return props.ministranten.filter(m => props.editable.length === 0 || props.editable.includes(m.username))
}
function getMiniName(mini) {
    return mini.firstname + " " + mini.lastname
}
</script>

<template>

    <table>

        <thead>
        <tr>
            <th>Gottesdienst</th>
            <th v-for="mini in getMinis()">
                {{ getMiniName(mini) }}
            </th>
        </tr>
        </thead>

        <tbody>
        <tr v-for="godi in props.gottesdienste" class="gottesdienst">
            <td>
                <div class="gottesdienst">
                    <span class="name">{{godi.name !== "" ? godi.name : "Gottesdienst"}}</span>
                    <span class="date">am {{formatWeekday(godi.date) }} {{formatDay(godi.date) }}</span>
                    <span class="time">um {{formatTime(godi.date)}} Uhr</span>
                    <span class="attendance">Anwesenheit: {{formatTime(godi.attendance) }}</span>
                </div>
            </td>
            <td
                v-for="mini in getMinis()"
                class="mark edit"
                :class="getClassForMark(godi.id, mini.id)"
                @click="$emit('toggleMark', godi.id, mini.id)">
                <i class="icon"> {{ getIconForMark(godi.id, mini.id) }} </i><br>
                <span class="hint">{{ getHintForMark(godi.id, mini.id) }}</span>
            </td>
        </tr>

        </tbody>
    </table>
</template>

<style scoped lang="less">

table {
    border-spacing: 0;
}

tr {
    th {
        font-weight: 400;
    }

    &.bold th {
        font-weight: 700;
    }
}

td {
    background: #ffffff;
}

td:first-child, th:first-child {
    padding: 6px 60px 6px 12px;
    text-align: left;
}

td:nth-child(2n), th:nth-child(2n) {
    background: #8ce081;
}

.gottesdienst{
    span {
        display: block;
    }
    .name {
        font-weight: 700;
        font-size: 18px;
    }
    .date, .time {
        font-weight: 700;
        color: #656565;
        font-size: 14px;
    }
    .attendance{
        color: #656565;
        font-size: 14px;
    }
}

.mark {
    text-align: center;
    vertical-align: center;
    justify-content: center;
    align-items: center;
    min-width: 100px;
    height: 20px;
    cursor: pointer;
    user-select: none;

    i {
        border-radius: 100%;
        padding: 1px;
        font-size: 22px;
        margin: 2px;
    }

    &.minus {
        background: #fdd5d5;
        color: #690b0b;

        i {
        }
    }

    &.cross {
        background: #d1fcd1;
        color: #045b04;

        i {
        }
    }

    &.neutral i {
        opacity: 0.5;
        color: #9f9f9f;
        font-variation-settings: "wght" 350;
        mix-blend-mode: difference;
    }

    .hint {
        margin-top: 4px;
        opacity: 0.7;
        font-size: 14px;
        //mix-blend-mode: difference;
    }
}


td, th {
    --color-outline: #908888;
    border-right: 1px solid var(--color-outline);
    border-bottom: 1px solid var(--color-outline);
}

td:first-child, th:first-child {
    border-right: 2px solid #575757;
}

thead tr:last-child th, tr:nth-child(5n) td {
    border-bottom: 2px solid #575757;
}
</style>