106 lines
2.5 KiB
Vue
106 lines
2.5 KiB
Vue
<script setup>
|
|
import { substitutions, loadingFailed, classFilter } from "@/store";
|
|
import { getSubstitutionText, getSubstitutionColor } from "@/util";
|
|
import { computed } from "vue";
|
|
import InfoCard from "@/components/info-card.vue";
|
|
import { BellOffIcon, ClockIcon, CloudOffIcon } from "lucide-vue-next";
|
|
|
|
const props = defineProps({
|
|
date: {
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const substitutionsForDate = computed(() => {
|
|
return substitutions.value[props.date.getTime()];
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<InfoCard
|
|
v-show="typeof substitutionsForDate == 'undefined'"
|
|
v-if="!loadingFailed"
|
|
:icon="ClockIcon"
|
|
:title="$t('infoCard.titles.loading')"
|
|
:text="$t('infoCard.texts.loading')"
|
|
/>
|
|
<InfoCard
|
|
v-show="
|
|
typeof substitutionsForDate == 'object' &&
|
|
substitutionsForDate.length == 0
|
|
"
|
|
v-if="!loadingFailed || substitutionsForDate"
|
|
:icon="BellOffIcon"
|
|
:title="$t('infoCard.titles.noEntries')"
|
|
:text="$t('infoCard.texts.noEntries')"
|
|
/>
|
|
<InfoCard
|
|
class="card"
|
|
v-if="loadingFailed && !substitutionsForDate"
|
|
:icon="CloudOffIcon"
|
|
:title="$t('infoCard.titles.loadingFailed')"
|
|
:text="$t('infoCard.texts.loadingFailed')"
|
|
/>
|
|
<template v-for="substitution in substitutionsForDate" :key="substitution">
|
|
<div class="substitution" :style="getSubstitutionColor(substitution)">
|
|
<span class="hour">{{ substitution.lesson }}</span>
|
|
<div class="infos">
|
|
<span class="text">{{
|
|
$t(
|
|
getSubstitutionText(
|
|
substitution,
|
|
!classFilter || classFilter == "none"
|
|
),
|
|
{
|
|
subject: substitution.change.subject,
|
|
class: substitution.class.join(", "),
|
|
teacher: substitution.teacher,
|
|
new_teacher: substitution.change.teacher,
|
|
room: substitution.change.room,
|
|
}
|
|
)
|
|
}}</span>
|
|
<span class="notes" v-if="substitution.notes">
|
|
{{ $t("timetable.notes") }} {{ substitution.notes }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.substitution {
|
|
display: grid;
|
|
min-height: 50px;
|
|
border-radius: 11px;
|
|
margin-bottom: 10px;
|
|
padding: 10px 15px;
|
|
grid-template-columns: max-content auto;
|
|
gap: 15px;
|
|
}
|
|
|
|
.hour {
|
|
font-size: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.infos {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.text {
|
|
font-size: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.notes {
|
|
font-size: 13px;
|
|
font-weight: 100;
|
|
}
|
|
</style>
|