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

✨ 🌐 Add Localization feature

Browse Source
This commit is contained in:
minie4
2022-08-21 16:57:06 +02:00
parent 710a07b04b
commit 59a2c0eacb
17 changed files with 301 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
package-lock.json generated
View File

@ -11,6 +11,7 @@
"dayjs": "^1.11.3",
"vite-plugin-git-revision": "^0.1.9",
"vue": "^3.2.37",
"vue-i18n": "^9.2.2",
"vue-router": "^4.0.15"
},
"devDependencies": {
@ -1744,6 +1745,63 @@
"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
"dev": true
},
"node_modules/@intlify/core-base": {
"version": "9.2.2",
"resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.2.2.tgz",
"integrity": "sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==",
"dependencies": {
"@intlify/devtools-if": "9.2.2",
"@intlify/message-compiler": "9.2.2",
"@intlify/shared": "9.2.2",
"@intlify/vue-devtools": "9.2.2"
},
"engines": {
"node": ">= 14"
}
},
"node_modules/@intlify/devtools-if": {
"version": "9.2.2",
"resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.2.2.tgz",
"integrity": "sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==",
"dependencies": {
"@intlify/shared": "9.2.2"
},
"engines": {
"node": ">= 14"
}
},
"node_modules/@intlify/message-compiler": {
"version": "9.2.2",
"resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.2.2.tgz",
"integrity": "sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==",
"dependencies": {
"@intlify/shared": "9.2.2",
"source-map": "0.6.1"
},
"engines": {
"node": ">= 14"
}
},
"node_modules/@intlify/shared": {
"version": "9.2.2",
"resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.2.tgz",
"integrity": "sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==",
"engines": {
"node": ">= 14"
}
},
"node_modules/@intlify/vue-devtools": {
"version": "9.2.2",
"resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz",
"integrity": "sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==",
"dependencies": {
"@intlify/core-base": "9.2.2",
"@intlify/shared": "9.2.2"
},
"engines": {
"node": ">= 14"
}
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@ -2034,9 +2092,9 @@
}
},
"node_modules/@vue/devtools-api": {
"version": "6.1.4",
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.1.4.tgz",
"integrity": "sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ=="
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.2.1.tgz",
"integrity": "sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ=="
},
"node_modules/@vue/eslint-config-prettier": {
"version": "7.0.0",
@ -5111,6 +5169,23 @@
"eslint": ">=6.0.0"
}
},
"node_modules/vue-i18n": {
"version": "9.2.2",
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz",
"integrity": "sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==",
"dependencies": {
"@intlify/core-base": "9.2.2",
"@intlify/shared": "9.2.2",
"@intlify/vue-devtools": "9.2.2",
"@vue/devtools-api": "^6.2.1"
},
"engines": {
"node": ">= 14"
},
"peerDependencies": {
"vue": "^3.0.0"
}
},
"node_modules/vue-router": {
"version": "4.0.15",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.15.tgz",
@ -6670,6 +6745,48 @@
"integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
"dev": true
},
"@intlify/core-base": {
"version": "9.2.2",
"resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.2.2.tgz",
"integrity": "sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==",
"requires": {
"@intlify/devtools-if": "9.2.2",
"@intlify/message-compiler": "9.2.2",
"@intlify/shared": "9.2.2",
"@intlify/vue-devtools": "9.2.2"
}
},
"@intlify/devtools-if": {
"version": "9.2.2",
"resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.2.2.tgz",
"integrity": "sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==",
"requires": {
"@intlify/shared": "9.2.2"
}
},
"@intlify/message-compiler": {
"version": "9.2.2",
"resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.2.2.tgz",
"integrity": "sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==",
"requires": {
"@intlify/shared": "9.2.2",
"source-map": "0.6.1"
}
},
"@intlify/shared": {
"version": "9.2.2",
"resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.2.tgz",
"integrity": "sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q=="
},
"@intlify/vue-devtools": {
"version": "9.2.2",
"resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz",
"integrity": "sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==",
"requires": {
"@intlify/core-base": "9.2.2",
"@intlify/shared": "9.2.2"
}
},
"@jridgewell/gen-mapping": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@ -6909,9 +7026,9 @@
}
},
"@vue/devtools-api": {
"version": "6.1.4",
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.1.4.tgz",
"integrity": "sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ=="
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.2.1.tgz",
"integrity": "sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ=="
},
"@vue/eslint-config-prettier": {
"version": "7.0.0",
@ -9041,6 +9158,17 @@
"semver": "^7.3.5"
}
},
"vue-i18n": {
"version": "9.2.2",
"resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz",
"integrity": "sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==",
"requires": {
"@intlify/core-base": "9.2.2",
"@intlify/shared": "9.2.2",
"@intlify/vue-devtools": "9.2.2",
"@vue/devtools-api": "^6.2.1"
}
},
"vue-router": {
"version": "4.0.15",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.15.tgz",

1
package.json
View File

@ -11,6 +11,7 @@
"dayjs": "^1.11.3",
"vite-plugin-git-revision": "^0.1.9",
"vue": "^3.2.37",
"vue-i18n": "^9.2.2",
"vue-router": "^4.0.15"
},
"devDependencies": {

6
src/App.vue
View File

@ -12,16 +12,16 @@ import { loading } from "./store";
<div class="center">
<main>
<DateSelector
v-show="$route.name != 'Settings' && $route.name != 'Login'"
v-show="$route.name != 'title.settings' && $route.name != 'title.login'"
/>
<LoadingElement
:active="loading"
v-show="$route.name != 'Settings' && $route.name != 'Login'"
v-show="$route.name != 'title.settings' && $route.name != 'title.login'"
/>
<RouterView />
</main>
</div>
<BottomNavbar v-show="$route.name != 'Login'" />
<BottomNavbar v-show="$route.name != 'title.login'" />
</template>
<style>

6
src/components/bottom-navbar.vue
View File

@ -10,19 +10,19 @@ import { RouterLink } from "vue-router";
<div class="entry">
<RouterLink to="/timetable">
<CalendarIcon class="icon" />
<span class="title">Timetable</span>
<span class="title">{{ $t("title.timetable") }}</span>
</RouterLink>
</div>
<div class="entry">
<RouterLink to="/substitutions">
<BellIcon class="icon" />
<span class="title">Substitutions</span>
<span class="title">{{ $t("title.substitutions") }}</span>
</RouterLink>
</div>
<div class="entry">
<RouterLink to="/history">
<ClockIcon class="icon" />
<span class="title">History</span>
<span class="title">{{ $t("title.history") }}</span>
</RouterLink>
</div>
</div>

13
src/components/date-selector.vue
View File

@ -6,10 +6,19 @@ import {
fetchHistory,
loading,
} from "../store";
import { dayNames } from "../definitions";
import dayjs from "dayjs";
import ArrowIcon from "./icons/arrow-icon.vue";
const dayNames = [
"days.sunday",
"days.monday",
"days.tuesday",
"days.wednesday",
"days.thursday",
"days.friday",
"days.saturday",
];
function nextDay() {
var newDate = dayjs(selectedDate.value).add(1, "day");
// Skip weekend
@ -35,7 +44,7 @@ async function changeDate(newDate) {
<div class="selector">
<ArrowIcon @click="previousDay" />
<span class="day" @click="changeDate(dayjs())">
{{ dayNames[selectedDay + 1] }},
{{ $t(dayNames[selectedDay + 1]) }},
{{ dayjs(selectedDate).format("DD.MM.YYYY") }}
</span>
<ArrowIcon style="transform: rotate(180deg)" @click="nextDay" />

18
src/components/initial-setup.vue
View File

@ -2,18 +2,6 @@
import CalendarIcon from "./icons/calendar-icon.vue";
defineProps({
title: {
required: true,
type: String,
},
description: {
required: true,
type: String,
},
selectPrompt: {
required: true,
type: String,
},
options: {
required: true,
type: Array,
@ -28,12 +16,12 @@ defineProps({
<div class="setup-wrapper">
<div class="content">
<CalendarIcon class="icon" />
<span class="title">{{ title }}</span>
<span class="description">{{ description }}</span>
<span class="title">{{ $t("timetable.setup.title") }}</span>
<span class="description">{{ $t("timetable.setup.description") }}</span>
<select
@input="(event) => $emit('update:modelValue', event.target.value)"
>
<option value="none">{{ selectPrompt }}</option>
<option value="none">{{ $t("timetable.setup.prompt") }}</option>
<option v-for="option in options" :value="option" :key="option">
{{ option }}
</option>

6
src/components/titlebar-element.vue
View File

@ -8,7 +8,7 @@ const route = useRoute();
const router = useRouter();
const routeName = computed(() => route.name);
function goBack() {
if (routeName.value != "Settings") return;
if (routeName.value != "title.settings") return;
if (lastRoute.value.name) router.go(-1);
else router.push("/timetable");
}
@ -16,11 +16,11 @@ function goBack() {
<template>
<div class="titlebar">
<span class="title">{{ routeName }}</span>
<span class="title">{{ $t(routeName || "") }}</span>
<div class="settings">
<RouterLink
to="/settings"
v-show="$route.name != 'Login'"
v-show="$route.name != 'title.login'"
@click="goBack()"
>
<MenuIcon />

20
src/definitions.js
View File

@ -1,20 +0,0 @@
export const dayNames = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursay",
"Friday",
"Saturday",
];
export const substitutionTexts = {
subjectChange: "Unterrichtsänderung im Fach",
teacherChange: "Vertretung mit",
teacherChangePartial: "mit",
roomChange: "Raumvertretung in Raum",
roomChangePartial: "in Raum",
cancellation: "Ausfall",
};
export const uiTexts = {
substitutionNotes: "Notes",
};

10
src/main.js
View File

@ -2,10 +2,20 @@ import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { registerSW } from "virtual:pwa-register";
import { createI18n } from "vue-i18n";
import { strings } from "./strings";
import { language } from "./store";
const i18n = createI18n({
locale: language.value,
fallbackLocale: "en",
messages: strings,
});
const app = createApp(App);
app.use(router);
app.use(i18n);
app.mount("#app");

10
src/router/index.js
View File

@ -15,27 +15,27 @@ const router = createRouter({
},
{
path: "/timetable",
name: "Timetable",
name: "title.timetable",
component: TimetableView,
},
{
path: "/substitutions",
name: "Substitutions",
name: "title.substitutions",
component: SubstitutionView,
},
{
path: "/history",
name: "History",
name: "title.history",
component: HistoryView,
},
{
path: "/settings",
name: "Settings",
name: "title.settings",
component: SettingsView,
},
{
path: "/login",
name: "Login",
name: "title.login",
component: LoginView,
},
],

5
src/store.js
View File

@ -9,6 +9,7 @@ export const classFilter = ref(localStorage.getItem("classFilter") || "none");
export const timetableGroups = ref(
JSON.parse(localStorage.getItem("timetableGroups") || "[]")
);
export const language = ref(localStorage.getItem("lang")) || "en";
watch(classFilter, (newValue) => {
localStorage.setItem("classFilter", newValue);
@ -18,6 +19,10 @@ watch(timetableGroups, (newValue) => {
localStorage.setItem("timetableGroups", JSON.stringify(newValue));
fetchData();
});
watch(language, (newValue) => {
localStorage.setItem("lang", newValue);
location.reload();
});
export const selectedDate = ref(new Date(new Date().setUTCHours(0, 0, 0, 0)));
export const selectedDay = computed(() => selectedDate.value.getDay() - 1);

71
src/strings.js Normal file
View File

@ -0,0 +1,71 @@
export const strings = {
en: {
title: {
timetable: "Timetable",
substitutions: "Substitutions",
history: "History",
settings: "Settings",
login: "Login",
},
settings: {
heading: {
filtering: "Filtering",
timetableGroups: "Timetable Groups",
language: "Language",
about: "About",
},
text: {
filtering:
"Select a class here so the correct timetable is used and only relevant substitutions are shown.",
timetableGroups:
"A timetable group defines, which lesson should be displayed, and which substitution should be shown if there are multiple possibilities for a single lesson within one class.",
language: "Change the language of all texts in the application",
about:
"This Tool queries and parses the latest timetable data every minute. The correctness of the data can in no way be guaranteed, so please check the data against the official plan if something seems wrong! Due to the format of the plan files, it it sometimes not easily possible to extract the correct data, so the plan displayed here may not be correct.",
},
other: "Other",
none: "None",
version: "Version",
},
timetable: {
warning: "Warning:",
trustWarning:
"The Data source of the Timetable data ({source}) is not trustworthy, which means the timetable may be incorrect!",
setup: {
title: "No class selected",
prompt: "Select a class",
description:
"Please select your class so you can view your timetable and only see substitutions that affect you. You can change this later in the settings.",
},
notes: "Notes:",
},
days: {
sunday: "Sunday",
monday: "Monday",
tuesday: "Tuesday",
wednesday: "Wednesday",
thursday: "Thursday",
friday: "Friday",
saturday: "Saturday",
},
substitution: {
text: {
withClass: {
subjectChange:
"Lesson changed for {class} in {subject} with {teacher} in room {room}",
teacherChange: "Lesson for {class} in {subject} now with {teacher}",
roomChange:
"Room for lesson {subject} for {class} with {teacher} is now {room}",
cancellation: "Lesson for {class} with {teacher} is cancelled",
},
withoutClass: {
subjectChange:
"Lesson changed in {subject} with {teacher} in room {room}",
teacherChange: "Lesson in {subject} now with {teacher}",
roomChange: "Room for lesson {subject} with {teacher} is now {room}",
cancellation: "Lesson with {teacher} is cancelled",
},
},
},
},
};

31
src/util.js
View File

@ -1,35 +1,16 @@
import { substitutionTexts } from "./definitions";
import { classFilter } from "./store";
export function getSubstitutionText(substitution) {
var text = "";
const includeClass = !classFilter.value || classFilter.value == "none";
const includeClassValue = includeClass ? "withClass" : "withoutClass";
if (!classFilter.value || classFilter.value == "none") {
text +=
substitution.class.join(", ") +
(substitution.class.length > 1 ? " haben " : " hat ");
}
// TODO: implement more texts
if (substitution.type == "change") {
const change = substitution.change;
if (change.subject) {
text += substitutionTexts.subjectChange + " " + change.subject;
}
if (change.teacher && text == "") {
text += substitutionTexts.teacherChange + " " + change.teacher;
} else if (change.teacher) {
text += " " + substitutionTexts.teacherChangePartial;
text += " " + change.teacher;
}
if (change.room && text == "") {
text += substitutionTexts.roomChange + " " + change.room;
} else if (change.room) {
text += " " + substitutionTexts.roomChangePartial;
text += " " + change.room;
}
return `substitution.text.${includeClassValue}.subjectChange`;
} else if (substitution.type == "cancellation") {
text += substitutionTexts.cancellation;
return `substitution.text.${includeClassValue}.cancellation`;
}
return text;
return "";
}
export function getSubstitutionColor(substitution) {

16
src/views/HistoryView.vue
View File

@ -1,6 +1,5 @@
<script setup>
import { historyOfDate, selectedDate } from "../store";
import { uiTexts } from "../definitions";
import { getSubstitutionText } from "../util";
import { computed } from "vue";
import dayjs from "dayjs";
@ -47,11 +46,16 @@ function getColor(type) {
</p>
</template>
</span>
<span class="text" v-else>
{{ getSubstitutionText(event.change) }}
<span class="notes">
{{ event.change.notes ? uiTexts.substitutionNotes + ": " : "" }}
{{ event.change.notes }}
<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">

46
src/views/SettingsView.vue
View File

@ -4,6 +4,7 @@ import {
classFilter,
possibleTimetableGroups,
timetableGroups,
language,
} from "../store";
// eslint-disable-next-line no-undef
@ -12,27 +13,20 @@ const gitHash = GITVERSION;
<template>
<div class="settings">
<h2>Filtering</h2>
<p>
Select a class here so the correct timetable is used and only relevant
substitutions are shown.
</p>
<h2>{{ $t("settings.heading.filtering") }}</h2>
<p>{{ $t("settings.text.filtering") }}</p>
<select v-model="classFilter">
<option value="none">Select a class</option>
<option value="none">{{ $t("timetable.setup.prompt") }}</option>
<option v-for="option in classList" :value="option" :key="option">
{{ option }}
</option>
<option value="other">Other</option>
<option value="other">{{ $t("settings.other") }}</option>
</select>
<div class="spacer"></div>
<h2>Timetable Groups</h2>
<p>
A timetable group defines, which lesson should be displayed, and which
substitution should be shown if there are multiple possibilities for a
single lesson within one class.
</p>
<h2>{{ $t("settings.heading.timetableGroups") }}</h2>
<p>{{ $t("settings.text.timetableGroups") }}</p>
<select v-model="timetableGroups" multiple>
<option value="none">None</option>
<option value="none">{{ $t("settings.none") }}</option>
<option
v-for="option in possibleTimetableGroups"
:value="option"
@ -42,16 +36,22 @@ const gitHash = GITVERSION;
</option>
</select>
<div class="spacer"></div>
<h2>About</h2>
<p>
This Tool queries and parses the latest timetable data every minute. The
correctness of the data can in no way be guaranteed, so please check the
data against the official plan if something seems wrong! Due to the format
of the plan files, it it sometimes not easily possible to extract the
correct data, so the plan displayed here may not be correct.
</p>
<h2>{{ $t("settings.heading.language") }}</h2>
<p>{{ $t("settings.text.language") }}</p>
<select v-model="language">
<option
v-for="locale in $i18n.availableLocales"
:key="`locale-${locale}`"
:value="locale"
>
{{ locale }}
</option>
</select>
<div class="spacer"></div>
<p class="gray">Version: {{ gitHash }}</p>
<h2>{{ $t("settings.heading.about") }}</h2>
<p>{{ $t("settings.text.about") }}</p>
<div class="spacer"></div>
<p class="gray">{{ $t("settings.version") }}: {{ gitHash }}</p>
</div>
</template>

15
src/views/SubstitutionView.vue
View File

@ -1,6 +1,5 @@
<script setup>
import { substitutionsForDate, selectedDate } from "../store";
import { uiTexts } from "../definitions";
import { getSubstitutionText, getSubstitutionColor } from "../util";
import { computed } from "vue";
@ -15,10 +14,16 @@ const substitutions = computed(() => {
<div class="substitution" :style="getSubstitutionColor(substitution)">
<span class="hour">{{ substitution.lesson }}</span>
<div class="infos">
<span class="text">{{ getSubstitutionText(substitution) }}</span>
<span class="notes">
{{ substitution.notes ? uiTexts.substitutionNotes + ": " : "" }}
{{ substitution.notes }}
<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>

10
src/views/TimetableView.vue
View File

@ -53,18 +53,14 @@ function isCancelled(substitution) {
<template>
<TimetableSetup
v-show="!classFilter || classFilter == 'none'"
title="No Class Selected"
description="Please select your class so you can view your timetable and only see substitutions that affect you. You can change this later in the settings."
selectPrompt="Select a class"
:options="classList"
v-model="classFilter"
/>
<div class="timetable">
<div class="container">
<div class="trust-warning" v-if="!timetable.trusted">
<b>Warning:</b> The Data source of the Timetable data
<b>({{ timetable.source }})</b> is not trustworthy, which means the
timetable may be incorrect!
<b>{{ $t("timetable.warning") }}</b>
{{ $t("timetable.trustWarning", { source: timetable.source }) }}
</div>
</div>
<template v-for="(lesson, index) in linkedTimetable" :key="index">
@ -98,7 +94,7 @@ function isCancelled(substitution) {
>
<!-- Show notes if available -->
<span class="info" v-if="getNotes(lesson.substitution)"
>, Notes: {{ getNotes(lesson.substitution) }}
>, {{ $t("timetable.notes") }} {{ getNotes(lesson.substitution) }}
</span>
</div>
</div>