128 lines
3.4 KiB
Vue
128 lines
3.4 KiB
Vue
<script setup>
|
|
import {
|
|
parsedTimetable,
|
|
substitutions,
|
|
selectedDate,
|
|
selectedDay,
|
|
} from "../store";
|
|
import { getSubstitutionColor } from "../util";
|
|
import { computed } from "vue";
|
|
|
|
const timetable = computed(() => {
|
|
const currentDay = parsedTimetable.value[selectedDay.value];
|
|
if (!currentDay) return [];
|
|
const newDay = currentDay.map((e, index) => {
|
|
const newElement = { ...e };
|
|
newElement.substitution = substitutions.value.find((entry) => {
|
|
const entryDay = new Date(entry.date).getTime();
|
|
return (
|
|
entry.lesson == index + 1 &&
|
|
entryDay == selectedDate.value.getTime() &&
|
|
(entry.teacher == e.teacher || !entry.teacher || !e.teacher)
|
|
);
|
|
});
|
|
return newElement;
|
|
});
|
|
return newDay;
|
|
});
|
|
|
|
function isChanged(lesson, key) {
|
|
const substitution = lesson.substitution;
|
|
if (!substitution) return false;
|
|
if (!substitution.change) return false;
|
|
const changedKeys = Object.keys(substitution.change);
|
|
if (!changedKeys.includes(key)) return false;
|
|
console.log(lesson, changedKeys);
|
|
return lesson[key] != substitution.change[key];
|
|
}
|
|
|
|
function getNotes(substitution) {
|
|
if (!substitution) return;
|
|
if (!substitution.notes) return;
|
|
return substitution.notes;
|
|
}
|
|
|
|
function isCancelled(substitution) {
|
|
if (!substitution) return false;
|
|
return substitution.type == "cancellation";
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="timetable">
|
|
<template v-for="(lesson, index) in timetable" :key="index">
|
|
<div class="lesson" :style="getSubstitutionColor(lesson.substitution)">
|
|
<span class="hour">{{ index + 1 }}</span>
|
|
<div class="infos">
|
|
<!-- Subject changed -->
|
|
<span class="subject" v-if="isChanged(lesson, 'subject')">
|
|
<s>{{ lesson.subject }}</s> {{ lesson.substitution.change.subject }}
|
|
</span>
|
|
<!-- Cancellation -->
|
|
<span class="subject" v-else-if="isCancelled(lesson.substitution)">
|
|
<s>{{ lesson.subject }}</s>
|
|
</span>
|
|
<span class="subject" v-else>
|
|
{{ lesson.subject }}
|
|
</span>
|
|
<div class="info">
|
|
<!-- Teacher changed -->
|
|
<span class="info" v-if="isChanged(lesson, 'teacher')">
|
|
<s>{{ lesson.teacher }}</s>
|
|
{{ lesson.substitution.change.teacher }},
|
|
</span>
|
|
<span class="info" v-else> {{ lesson.teacher }}, </span>
|
|
<!-- Room changed -->
|
|
<span class="info" v-if="isChanged(lesson, 'room')">
|
|
<s>{{ lesson.room }}</s> {{ lesson.substitution.change.room }}
|
|
</span>
|
|
<span class="info" v-else>{{ lesson.room }}</span>
|
|
<!-- Show notes if available -->
|
|
<span class="info" v-if="getNotes(lesson.substitution)"
|
|
>, Notes: {{ getNotes(lesson.substitution) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.timetable {
|
|
padding: 0px 10px 80px 10px;
|
|
}
|
|
|
|
.lesson {
|
|
display: grid;
|
|
background-color: #26272a;
|
|
height: 60px;
|
|
border-radius: 11px;
|
|
margin: 10px 0px;
|
|
padding: 10px 15px;
|
|
grid-template-columns: max-content max-content;
|
|
gap: 15px;
|
|
}
|
|
|
|
.hour {
|
|
font-size: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.infos {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.infos .subject {
|
|
font-weight: bold;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.infos .info {
|
|
font-weight: 200;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|