✨ Implement day navigation gestures with Swiper.js
This commit is contained in:
@ -1,115 +1,16 @@
|
||||
<script setup>
|
||||
import { historyOfDate, selectedDate } from "../store";
|
||||
import { getSubstitutionText } from "../util";
|
||||
import { computed } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
const history = computed(() => {
|
||||
return historyOfDate.value[selectedDate.value.setUTCHours(0, 0, 0, 0)];
|
||||
});
|
||||
|
||||
function getChar(type) {
|
||||
switch (type) {
|
||||
case "change":
|
||||
return "~";
|
||||
case "addition":
|
||||
return "+";
|
||||
case "deletion":
|
||||
return "-";
|
||||
}
|
||||
}
|
||||
|
||||
function getColor(type) {
|
||||
switch (type) {
|
||||
case "change":
|
||||
return "background-color: var(--substitution-background-change)";
|
||||
case "addition":
|
||||
return "background-color: var(--substitution-background-addition);";
|
||||
case "deletion":
|
||||
return "background-color: var(--substitution-background-deletion);";
|
||||
}
|
||||
}
|
||||
import DayCarousel from "../components/day-carousel.vue";
|
||||
import HistoryList from "../components/history-list.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="history">
|
||||
<template v-for="event in history" :key="event">
|
||||
<div class="change" :style="getColor(event.type)">
|
||||
<span class="hour">{{ event.lesson }}{{ getChar(event.type) }}</span>
|
||||
<div class="infos">
|
||||
<span class="text" v-if="event.type == 'change'">
|
||||
<template v-for="(change, key) in event.change" :key="key">
|
||||
<p>
|
||||
{{ key }}:
|
||||
<s>{{ change.before }}</s>
|
||||
{{ change.after }}
|
||||
</p>
|
||||
</template>
|
||||
</span>
|
||||
<span class="text" v-else
|
||||
>{{
|
||||
$t(getSubstitutionText(event.change), {
|
||||
subject: event.change.subject,
|
||||
class: event.change.class.join(", "),
|
||||
teacher: event.change.change.teacher || event.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>
|
||||
</div>
|
||||
</template>
|
||||
<DayCarousel :element="HistoryList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.history {
|
||||
padding: 0px 10px 80px 10px;
|
||||
}
|
||||
|
||||
.change {
|
||||
display: grid;
|
||||
min-height: 35px;
|
||||
border-radius: 11px;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 10px;
|
||||
grid-template-columns: min-content auto;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.hour {
|
||||
font-size: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
|
||||
.infos {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
word-wrap: break-word;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.notes {
|
||||
font-size: 13px;
|
||||
font-weight: 100;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -65,6 +65,9 @@ const gitHash = GITVERSION;
|
||||
<style scoped>
|
||||
.settings {
|
||||
padding: 15px 10px 80px 10px;
|
||||
height: calc(100% - 100px);
|
||||
overflow-y: auto;
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
||||
@ -1,73 +1,16 @@
|
||||
<script setup>
|
||||
import { substitutionsForDate, selectedDate } from "../store";
|
||||
import { getSubstitutionText, getSubstitutionColor } from "../util";
|
||||
import { computed } from "vue";
|
||||
|
||||
const substitutions = computed(() => {
|
||||
return substitutionsForDate.value[selectedDate.value.setUTCHours(0, 0, 0, 0)];
|
||||
});
|
||||
import DayCarousel from "../components/day-carousel.vue";
|
||||
import SubstitutionList from "../components/substitution-list.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="substitutions">
|
||||
<template v-for="substitution in substitutions" :key="substitution">
|
||||
<div class="substitution" :style="getSubstitutionColor(substitution)">
|
||||
<span class="hour">{{ substitution.lesson }}</span>
|
||||
<div class="infos">
|
||||
<span class="text">{{
|
||||
$t(getSubstitutionText(substitution), {
|
||||
subject: substitution.change.subject,
|
||||
class: substitution.class.join(", "),
|
||||
teacher: substitution.change.teacher || substitution.teacher,
|
||||
room: substitution.change.room,
|
||||
})
|
||||
}}</span>
|
||||
<span class="notes" v-if="substitution.notes">
|
||||
{{ $t("timetable.notes") }} {{ substitution.notes }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<DayCarousel :element="SubstitutionList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.substitutions {
|
||||
padding: 0px 10px 80px 10px;
|
||||
}
|
||||
|
||||
.substitution {
|
||||
display: grid;
|
||||
background-color: var(--substitution-background-unchanged);
|
||||
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;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,56 +1,10 @@
|
||||
<script setup>
|
||||
import {
|
||||
timetable,
|
||||
parsedTimetable,
|
||||
classFilter,
|
||||
classList,
|
||||
substitutions,
|
||||
selectedDate,
|
||||
selectedDay,
|
||||
} from "../store";
|
||||
import { getSubstitutionColor } from "../util";
|
||||
import { computed } from "vue";
|
||||
import TimetableSetup from "../components/initial-setup.vue";
|
||||
|
||||
// Link the timetable with the substitutions
|
||||
const linkedTimetable = computed(() => {
|
||||
const currentDay = parsedTimetable.value[selectedDay.value];
|
||||
if (!currentDay) return [];
|
||||
|
||||
const newDay = currentDay.map((e, index) => {
|
||||
const newElement = { ...e };
|
||||
// Find a substitution mathing this lesson
|
||||
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 && 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";
|
||||
}
|
||||
import { classList, classFilter } from "../store";
|
||||
import DayCarousel from "../components/day-carousel.vue";
|
||||
import TimetableList from "../components/timetable-list.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TimetableSetup
|
||||
v-show="classFilter == 'none'"
|
||||
@ -58,100 +12,12 @@ function isCancelled(substitution) {
|
||||
v-model="classFilter"
|
||||
/>
|
||||
<div class="timetable">
|
||||
<div class="container">
|
||||
<div class="trust-warning" v-if="!timetable.trusted">
|
||||
<b>{{ $t("timetable.warning") }}</b>
|
||||
{{ $t("timetable.trustWarning", { source: timetable.source }) }}
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</template>
|
||||
<DayCarousel :element="TimetableList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.timetable {
|
||||
padding: 0px 10px 80px 10px;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.trust-warning {
|
||||
border: 1px solid var(--timetable-trust-warning-border);
|
||||
background-color: var(--timetable-trust-warning-background);
|
||||
border-radius: 4px;
|
||||
padding: 3px 10px;
|
||||
margin: 5px 0px;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.lesson {
|
||||
display: grid;
|
||||
background-color: var(--substitution-background-unchanged);
|
||||
min-height: 50px;
|
||||
border-radius: 11px;
|
||||
margin: 10px 0px;
|
||||
padding: 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;
|
||||
}
|
||||
|
||||
.infos .subject {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.infos .info {
|
||||
font-weight: 200;
|
||||
font-size: 14px;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user