✨ 🌐 Add Localization feature

src/views/HistoryView.vue

@@ -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">

src/views/SettingsView.vue

@@ -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>
 

src/views/SubstitutionView.vue

@@ -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>

src/views/TimetableView.vue

@@ -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>