✨ 🌐 Add Localization feature

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>