Initial commit

public/src/components/TablePlan.vue

@@ -0,0 +1,255 @@
+<script setup lang="ts">
+
+import {API} from "@/views/api";
+
+import {onMounted, reactive, ref} from "vue";
+import type {PlanModel, SimplifiedMinistrant} from "@/models/models";
+
+const props = defineProps<PlanModel>()
+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()) + "."
+}
+
+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 "Mo";
+        case 2:
+            return "Di";
+        case 3:
+            return "Mi";
+        case 4:
+            return "Do";
+        case 5:
+            return "Fr";
+        case 6:
+            return "Sa";
+        case 0:
+            return "So"
+    }
+}
+
+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.id)
+    }
+}
+</script>
+
+<template>
+
+    <table>
+
+        <thead>
+
+        <tr>
+            <th></th>
+            <th v-for="godi in props.gottesdienste">{{ godi.name }}</th>
+        </tr>
+        <tr class="bold">
+            <th>Datum</th>
+            <th v-for="godi in props.gottesdienste">{{ formatDay(godi.date) }}</th>
+        </tr>
+        <tr>
+            <th>Uhrzeit</th>
+            <th v-for="godi in props.gottesdienste">{{ formatTime(godi.date) }}</th>
+        </tr>
+        <tr class="bold">
+            <th>Anwesenheit</th>
+            <th v-for="godi in props.gottesdienste">{{ formatTime(godi.attendance) }}</th>
+        </tr>
+        <tr>
+            <th>Wochentag</th>
+            <th v-for="godi in props.gottesdienste">{{ formatWeekday(godi.date) }}</th>
+        </tr>
+
+        </thead>
+        <tbody>
+
+        <tr v-for="mini in props.ministranten" class="ministrant" :class="getMinistrantClasses(mini)">
+            <td class="name">{{ mini.id }} {{ mini.firstname }} {{ mini.lastname }}</td>
+            <td
+                v-for="godi in props.gottesdienste"
+                class="mark"
+                :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;
+}
+
+.mark {
+    text-align: center;
+    vertical-align: center;
+    justify-content: center;
+    align-items: center;
+    min-width: 100px;
+    height: 20px;
+    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;
+        color: #9f9f9f;
+        font-variation-settings: "wght" 350;
+        mix-blend-mode: difference;
+    }
+
+    .hint {
+        margin-top: 4px;
+        opacity: 0.7;
+        display: none;
+        font-size: 14px;
+        //mix-blend-mode: difference;
+    }
+}
+
+.ministrant.edit {
+    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+    z-index: 10;
+    position: relative;
+    td {
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+
+    .mark{
+        cursor: pointer;
+        &.neutral i {
+            opacity: 0.5;
+        }
+        .hint {
+            display: inline-block;
+        }
+    }
+
+}
+
+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>