🎨 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>
|
||||
import { timetable, times, parsedTimetable, substitutions } from "@/store";
|
||||
import { getSubstitutionColor } from "@/util";
|
||||
import { timetable, parsedTimetable, substitutions } from "@/store";
|
||||
import { computed } from "vue";
|
||||
import LessonCard from "./lesson-card.vue";
|
||||
|
||||
const props = defineProps({
|
||||
date: {
|
||||
@ -32,38 +32,6 @@ const linkedTimetable = computed(() => {
|
||||
});
|
||||
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>
|
||||
<template>
|
||||
<div class="container">
|
||||
@ -74,45 +42,7 @@ function getTime(index) {
|
||||
</div>
|
||||
<div class="listContainer">
|
||||
<template v-for="(lesson, index) in linkedTimetable" :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-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>
|
||||
<LessonCard :lesson="lesson" :index="index" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
@ -139,46 +69,4 @@ function getTime(index) {
|
||||
gap: 10px;
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user