🎨 Move lesson card to seperate component
This commit is contained in:
122
src/components/lesson-card.vue
Normal file
122
src/components/lesson-card.vue
Normal file
@ -0,0 +1,122 @@
|
|||||||
|
<script setup>
|
||||||
|
import { getSubstitutionColor } from "@/util";
|
||||||
|
import { times } from "@/store";
|
||||||
|
|
||||||
|
defineProps(["lesson", "index"]);
|
||||||
|
|
||||||
|
function isChanged(lesson, key) {
|
||||||
|
const substitution = lesson.substitution;
|
||||||
|
if (!(substitution && substitution.change)) return false;
|
||||||
|
const changedKeys = Object.keys(substitution.change);
|
||||||
|
if (!changedKeys.includes(key)) return false;
|
||||||
|
return lesson[key] != substitution.change[key];
|
||||||
|
}
|
||||||
|
|
||||||
|
function getNotes(substitution) {
|
||||||
|
if (!(substitution && substitution.notes)) return;
|
||||||
|
return substitution.notes;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isCancelled(substitution) {
|
||||||
|
if (!substitution) return false;
|
||||||
|
return substitution.type == "cancellation";
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTime(index) {
|
||||||
|
const lessonTimes = {
|
||||||
|
...(times.value.find((e) => e.lesson == index + 1) || {}),
|
||||||
|
};
|
||||||
|
Object.keys(lessonTimes).forEach((e) => {
|
||||||
|
if (e == "lesson") return;
|
||||||
|
const date = new Date(lessonTimes[e]);
|
||||||
|
const hours = date.getHours().toString().padStart(2, "0");
|
||||||
|
const minutes = date.getMinutes().toString().padStart(2, "0");
|
||||||
|
lessonTimes[e] = `${hours}:${minutes}`;
|
||||||
|
});
|
||||||
|
return lessonTimes;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<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-if="lesson.room">, {{ lesson.room }}</span>
|
||||||
|
<!-- Show notes if available -->
|
||||||
|
<span class="info" v-if="getNotes(lesson.substitution)"
|
||||||
|
>, {{ $t("timetable.notes") }} {{ getNotes(lesson.substitution) }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="times" v-if="getTime(index).start">
|
||||||
|
<span>{{ getTime(index).start }} -</span>
|
||||||
|
<span>{{ getTime(index).end }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.lesson {
|
||||||
|
display: grid;
|
||||||
|
background-color: var(--substitution-background-unchanged);
|
||||||
|
min-height: 50px;
|
||||||
|
border-radius: 11px;
|
||||||
|
padding: 15px;
|
||||||
|
grid-template-columns: max-content auto auto;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.times {
|
||||||
|
margin-left: auto;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: 1fr 1fr;
|
||||||
|
align-items: center;
|
||||||
|
color: var(--text-color);
|
||||||
|
opacity: 0.5;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,7 +1,7 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { timetable, times, parsedTimetable, substitutions } from "@/store";
|
import { timetable, parsedTimetable, substitutions } from "@/store";
|
||||||
import { getSubstitutionColor } from "@/util";
|
|
||||||
import { computed } from "vue";
|
import { computed } from "vue";
|
||||||
|
import LessonCard from "./lesson-card.vue";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
date: {
|
date: {
|
||||||
@ -32,38 +32,6 @@ const linkedTimetable = computed(() => {
|
|||||||
});
|
});
|
||||||
return newDay;
|
return newDay;
|
||||||
});
|
});
|
||||||
|
|
||||||
function isChanged(lesson, key) {
|
|
||||||
const substitution = lesson.substitution;
|
|
||||||
if (!(substitution && substitution.change)) return false;
|
|
||||||
const changedKeys = Object.keys(substitution.change);
|
|
||||||
if (!changedKeys.includes(key)) return false;
|
|
||||||
return lesson[key] != substitution.change[key];
|
|
||||||
}
|
|
||||||
|
|
||||||
function getNotes(substitution) {
|
|
||||||
if (!(substitution && substitution.notes)) return;
|
|
||||||
return substitution.notes;
|
|
||||||
}
|
|
||||||
|
|
||||||
function isCancelled(substitution) {
|
|
||||||
if (!substitution) return false;
|
|
||||||
return substitution.type == "cancellation";
|
|
||||||
}
|
|
||||||
|
|
||||||
function getTime(index) {
|
|
||||||
const lessonTimes = {
|
|
||||||
...(times.value.find((e) => e.lesson == index + 1) || {}),
|
|
||||||
};
|
|
||||||
Object.keys(lessonTimes).forEach((e) => {
|
|
||||||
if (e == "lesson") return;
|
|
||||||
const date = new Date(lessonTimes[e]);
|
|
||||||
const hours = date.getHours().toString().padStart(2, "0");
|
|
||||||
const minutes = date.getMinutes().toString().padStart(2, "0");
|
|
||||||
lessonTimes[e] = `${hours}:${minutes}`;
|
|
||||||
});
|
|
||||||
return lessonTimes;
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -74,45 +42,7 @@ function getTime(index) {
|
|||||||
</div>
|
</div>
|
||||||
<div class="listContainer">
|
<div class="listContainer">
|
||||||
<template v-for="(lesson, index) in linkedTimetable" :key="index">
|
<template v-for="(lesson, index) in linkedTimetable" :key="index">
|
||||||
<div class="lesson" :style="getSubstitutionColor(lesson.substitution)">
|
<LessonCard :lesson="lesson" :index="index" />
|
||||||
<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-if="lesson.room"
|
|
||||||
>, {{ lesson.room }}</span
|
|
||||||
>
|
|
||||||
<!-- Show notes if available -->
|
|
||||||
<span class="info" v-if="getNotes(lesson.substitution)"
|
|
||||||
>, {{ $t("timetable.notes") }} {{ getNotes(lesson.substitution) }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="times" v-if="getTime(index).start">
|
|
||||||
<span>{{ getTime(index).start }} -</span>
|
|
||||||
<span>{{ getTime(index).end }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -139,46 +69,4 @@ function getTime(index) {
|
|||||||
gap: 10px;
|
gap: 10px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.lesson {
|
|
||||||
display: grid;
|
|
||||||
background-color: var(--substitution-background-unchanged);
|
|
||||||
min-height: 50px;
|
|
||||||
border-radius: 11px;
|
|
||||||
padding: 15px;
|
|
||||||
grid-template-columns: max-content auto auto;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.times {
|
|
||||||
margin-left: auto;
|
|
||||||
display: grid;
|
|
||||||
grid-template-rows: 1fr 1fr;
|
|
||||||
align-items: center;
|
|
||||||
color: var(--text-color);
|
|
||||||
opacity: 0.5;
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user