minie4/Timetable-V2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🚸 Add text if there is no entry for selected day

Browse Source 
- Overlay if substitutions / history view is still loading
- Overlay if no substitution exists for current day
- Overlay if no history exists for current day
This commit is contained in:
minie4
2023-01-02 23:07:28 +01:00
parent 99864696f3
commit 4057e4c88b
7 changed files with 231 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/components/history-list.vue
View File

@@ -3,6 +3,9 @@ import { history } from "../store";
import { getSubstitutionText } from "../util";
import { computed } from "vue";
import dayjs from "dayjs";
import InfoCard from "./info-card.vue";
import ClockIconBig from "./icons/clock-icon-big.vue";
import ClockOffIcon from "./icons/clock-off-icon.vue";
const props = defineProps({
date: {
@@ -22,45 +25,55 @@ const chars = {
</script>
<template>
<div class="history">
<template v-for="event in historyOfDate" :key="event">
<div
class="change"
:style="`background-color: var(--substitution-background-${event.type}`"
>
<span class="hour">{{ event.lesson }}{{ chars[event.type] }}</span>
<div class="infos">
<!-- If the entry is a change show which values changed -->
<span class="text" v-if="event.type == 'change'">
<template v-for="(change, key) in event.change" :key="key">
<p>
{{ key }}:&nbsp;
<s>{{ change.before }}</s>
&nbsp;{{ change.after }}
</p>
</template>
<InfoCard
v-show="typeof historyOfDate == 'undefined'"
:icon="ClockIconBig"
:title="$t('infoCard.titles.loading')"
:text="$t('infoCard.texts.loading')"
/>
<InfoCard
v-show="typeof historyOfDate == 'object' && historyOfDate.length == 0"
:icon="ClockOffIcon"
:title="$t('infoCard.titles.noHistory')"
:text="$t('infoCard.texts.noHistory')"
/>
<template v-for="event in historyOfDate" :key="event">
<div
class="change"
:style="`background-color: var(--substitution-background-${event.type}`"
>
<span class="hour">{{ event.lesson }}{{ chars[event.type] }}</span>
<div class="infos">
<!-- If the entry is a change show which values changed -->
<span class="text" v-if="event.type == 'change'">
<template v-for="(change, key) in event.change" :key="key">
<p>
{{ key }}:&nbsp;
<s>{{ change.before }}</s>
&nbsp;{{ change.after }}
</p>
</template>
</span>
<!-- If the entry is an addition or deletion generate a text -->
<span class="text" v-else
>{{
$t(getSubstitutionText(event.change), {
subject: event.change.change.subject,
class: event.change.class.join(", "),
teacher: event.change.teacher,
new_teacher: event.change.change.teacher,
room: event.change.change.room,
})
}}<span class="notes" v-if="event.change.notes">
{{ $t("timetable.notes") }} {{ event.change.notes }}
</span>
<!-- If the entry is an addition or deletion generate a text -->
<span class="text" v-else
>{{
$t(getSubstitutionText(event.change), {
subject: event.change.change.subject,
class: event.change.class.join(", "),
teacher: event.change.teacher,
new_teacher: event.change.change.teacher,
room: event.change.change.room,
})
}}<span class="notes" v-if="event.change.notes">
{{ $t("timetable.notes") }} {{ event.change.notes }}
</span>
</span>
<span class="notes">
{{ dayjs(event.updatedAt).format("DD.MM.YYYY, HH:mm") }}
</span>
</div>
</span>
<span class="notes">
{{ dayjs(event.updatedAt).format("DD.MM.YYYY, HH:mm") }}
</span>
</div>
</template>
</div>
</div>
</template>
</template>
<style scoped>