🚸 🐛 Fix HMR issues & change lang without reload

- Fix HMR issues due to circular import of "language" and "i18n"
- Move i18n to seperate file
- Dynamically update language instead of doing a full page reload

src/i18n.js

@@ -0,0 +1,17 @@
+import { createI18n } from "vue-i18n";
+import { strings } from "./strings";
+import { ref, watch } from "vue";
+
+export const language = ref(localStorage.getItem("lang") || "en");
+
+let i18n = createI18n({
+  locale: language.value,
+  fallbackLocale: "en",
+  messages: strings,
+});
+export default i18n;
+
+watch(language, (newValue) => {
+  localStorage.setItem("lang", newValue);
+  i18n.global.locale = newValue;
+});

src/main.js

@@ -2,16 +2,7 @@ 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 i18n from "./i18n";
-import { strings } from "./strings";
-import { language } from "./store";
-
-const i18n = createI18n({
-  locale: language.value,
-  fallbackLocale: "en",
-  messages: strings,
-});
-export default i18n;
 
 const app = createApp(App);
 

src/store.js

@@ -1,7 +1,7 @@
 import { ref, watch, computed } from "vue";
 import router from "./router";
-import i18n from "./main";
 import { getNextAndPrevDay } from "./util";
+import i18n from "./i18n";
 
 /* Router */
 export const lastRoute = ref();
@@ -14,7 +14,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");
+
 export const theme = ref(localStorage.getItem("theme") || "auto");
 
 watch(classFilter, (newValue) => {
@@ -24,10 +24,6 @@ watch(classFilter, (newValue) => {
 watch(timetableGroups, (newValue) => {
   localStorage.setItem("timetableGroups", JSON.stringify(newValue));
 });
-watch(language, (newValue) => {
-  localStorage.setItem("lang", newValue);
-  location.reload();
-});
 watch(theme, (newValue) => {
   localStorage.setItem("theme", newValue);
 });

src/views/SettingsView.vue

@@ -5,9 +5,9 @@ import {
   classFilter,
   possibleTimetableGroups,
   timetableGroups,
-  language,
   theme,
 } from "../store";
+import { language } from "../i18n";
 
 // eslint-disable-next-line no-undef
 const gitHash = GITVERSION;
@@ -20,7 +20,11 @@ const gitHash = GITVERSION;
     <p>{{ $t("settings.text.filtering") }}</p>
     <select v-model="classFilter">
       <option value="none">{{ $t("timetable.setup.prompt") }}</option>
-      <option v-for="option in classList" :value="option" :key="option">
+      <option
+        v-for="option in classList.length > 0 ? classList : [classFilter]"
+        :value="option"
+        :key="option"
+      >
         {{ option }}
       </option>
       <option value="other">{{ $t("settings.other") }}</option>