feat:#60 added localization switch

frontend/src/components/CourseSelection.vue

@@ -1,11 +1,14 @@
 <script lang="ts" setup>
-import { Ref, ref } from "vue";
+import { computed, ComputedRef, Ref, ref } from "vue";
 import {
   fetchCourse,
   fetchModulesByCourseAndSemester,
 } from "../api/fetchCourse";
 import ModuleSelection from "./ModuleSelection.vue";
 import { Module } from "../model/module.ts";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n({ useScope: 'global' })
+
 
 const courses = async () => {
   return await fetchCourse();
@@ -13,9 +16,9 @@ const courses = async () => {
 
 const selectedCourse: Ref<{ name: string }> = ref({ name: "" });
 const countries: Ref<{ name: string }[]> = ref([]);
-const semesters: Ref<{ name: string; value: string }[]> = ref([
-  { name: "Wintersemester", value: "ws" },
-  { name: "Sommersemester", value: "ss" },
+const semesters: ComputedRef<{ name: string; value: string }[]> = computed(() =>[
+  { name: t('courseSelection.winterSemester'), value: "ws" },
+  { name: t('courseSelection.summerSemester'), value: "ss" },
 ]);
 
 const selectedSemester: Ref<{ name: string; value: string }> = ref(
@@ -53,7 +56,7 @@ async function getModules() {
     <div
       class="flex align-items-center justify-content-center h-4rem border-round m-2"
     >
-      <h5 class="text-2xl">Please select a course</h5>
+      <h5 class="text-2xl">{{ $t('courseSelection.selectCourse') }}</h5>
     </div>
     <div
       class="flex align-items-center justify-content-center border-round m-2"

frontend/src/components/LocaleSwitcher.vue

@@ -1,39 +1,49 @@
 <script lang="ts" setup>
-import i18n, { supportedLocales } from "../i18n";
-import { Ref, ref } from "vue";
-import router from "../router";
+import { computed } from "vue";
+import localeStore from "../store/localeStore.ts";
 import { useI18n } from "vue-i18n";
+const { t } = useI18n({ useScope: 'global' })
 
-const locales = ref(
-  Object.keys(supportedLocales).map((code) => ({
-    code,
-    name: supportedLocales[code].name,
-  })),
-);
+const countries = computed(() => [
+  { name: t('english'), code: "en", icon: "🇬🇧" },
+  { name: t('german'), code: "de", icon: "🇩🇪" },
+]);
 
-// selectedLocal is the string of the selected locale from i18n matched with the locales array
-const selectedLocale: Ref<any> = ref();
+function displayIcon(code: string) {
+  return countries.value.find((country) => country.code === code)?.icon;
+}
 
-const i18n1 = (i18n.vueI18n);
+function displayCountry(code: string) {
+  return countries.value.find((country) => country.code === code)?.name;
+}
 
-function onLocaleChange() {
-  const newLocale: string = selectedLocale.value.code;
-
-  // If the selected locale is the same as the
-  // active one, do nothing
-  if (newLocale === i18n.vueI18n.global.locale) {
-    return;
-  }
-  i18n1.global.locale = newLocale;
-  router.push(`/${newLocale}`);
+function updateLocale(locale: string) {
+  localeStore().setLocale(locale);
 }
 </script>
 <template>
   <Dropdown
-    :options="locales"
-    optionLabel="name"
-    v-model="selectedLocale"
-    @change="onLocaleChange"
+    :options="$i18n.availableLocales"
+    v-model="$i18n.locale"
+    @change="updateLocale($event.data)"
+    option-label="name"
+    placeholder="Select a Language"
+    class="w-full md:w-14rem"
   >
+    <template #value="slotProps">
+      <div v-if="slotProps.value" class="flex align-items-center">
+        <div class="mr-2 flag">{{ displayIcon(slotProps.value) }}</div>
+        <div>{{ displayCountry(slotProps.value) }}</div>
+      </div>
+      <span v-else>
+        {{ slotProps.placeholder }}
+      </span>
+    </template>
+    <template #option="slotProps">
+      <div class="flex align-items-center">
+        <div class="mr-2 flag">{{ displayIcon(slotProps.option) }}</div>
+        <div>{{ displayCountry(slotProps.option) }}</div>
+      </div>
+    </template>
   </Dropdown>
-</template>
+</template>

frontend/src/components/MenuBar.vue

@@ -1,58 +1,50 @@
 <script lang="ts" setup>
-import { ref } from "vue";
+import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import LocaleSwitcher from "./LocaleSwitcher.vue";
-import i18n from "../i18n";
+const { t } = useI18n({ useScope: 'global' })
 
-const { t, locale } = useI18n();
-
-console.debug("locale", locale);
-console.debug(useI18n().locale)
-
-const items = ref([
+const items = computed(() => [
   {
     label: t("createCalendar"),
     icon: "pi pi-fw pi-plus",
-    url: `/${locale}`,
+    to: "/",
   },
   {
     label: t("editCalendar"),
     icon: "pi pi-fw pi-pencil",
-    url: `/${locale}/edit`,
+    to: "/edit",
   },
   {
     label: t("roomFinder"),
     icon: "pi pi-fw pi-calendar",
-    url: `/${locale}/rooms`,
+    to: `rooms`,
   },
   {
     label: t("faq"),
     icon: "pi pi-fw pi-book",
-    url: `/${i18n.vueI18n.global.locale}/faq`,
+    to: `faq`,
   },
   {
     label: t("imprint"),
     icon: "pi pi-fw pi-id-card",
-    url: `/${i18n.vueI18n.global.locale}/imprint`,
+    to: `imprint`,
   },
   {
     label: t("privacy"),
     icon: "pi pi-fw pi-exclamation-triangle",
-    url: `/${i18n.vueI18n.global.locale}/privacy-policy`,
+    to: `privacy-policy`,
   },
 ]);
 
-function removeAllItems() {
-  items.value = [];
-}
 </script>
 
 <template>
   <Menubar :model="items" class="menubar justify-content-center">
-    <template #start></template>
+    <template #start>
+    </template>
     <template #end>
       <LocaleSwitcher></LocaleSwitcher>
-      <Button @click="removeAllItems()"></Button>
     </template>
   </Menubar>
 </template>

frontend/src/i18n/index.ts

@@ -1,23 +1,25 @@
 import { createI18n } from "vue-i18n";
-import { nextTick } from "vue";
-import defaultMessages from './translations/en.json'
+import en from './translations/en.json'
+import de from './translations/de.json'
+import localeStore from "../store/localeStore.ts";
 
 export const supportedLocales= {
   'en': { name: 'English'},
   'de': { name: 'Deutsch'},
 }
-export let defaultLocale = 'en'
 // Private instance of VueI18n object
 let _i18n: any
 // Initializer
-function setup(options = { locale: defaultLocale }) {
+function setup() {
   _i18n = createI18n({
     legacy: false,
-    locale: options.locale,
-    fallbackLocale: defaultLocale,
-    messages: { [defaultLocale]: defaultMessages },
+    locale: localeStore().locale,
+    fallbackLocale: "en",
+    messages: {
+      en,
+      de
+    },
   })
-  setLocale(options.locale)
   return _i18n
 }
 
@@ -27,16 +29,6 @@ function setLocale(newLocale : any) {
   setDocumentAttributesFor(newLocale)
 }
 
-async function loadMessagesFor(locale: any) {
-  const messages = await import(
-    `./translations/${locale}.json`
-    )
-
-  _i18n.global.setLocaleMessage(locale, messages.default)
-
-  return nextTick()
-}
-
 function setDocumentAttributesFor(locale: any) {
   const htmlElement = document.querySelector('html')
 
@@ -51,5 +43,4 @@ export default {
   },
   setup,
   setLocale,
-  loadMessagesFor,
 }

frontend/src/i18n/translations/de.json

@@ -4,5 +4,12 @@
   "roomFinder": "Raumfinder",
   "faq": "FAQ",
   "imprint": "Impressum",
-  "privacy": "Datenschutz"
+  "privacy": "Datenschutz",
+  "english": "Englisch",
+    "german": "Deutsch",
+  "courseSelection": {
+    "winterSemester": "Wintersemester",
+    "summerSemester": "Sommersemester",
+    "selectCourse": "Bitte wähle eine Gruppe und das Semester aus"
+  }
 }

frontend/src/i18n/translations/en.json

@@ -4,5 +4,12 @@
   "roomFinder": "Room Finder",
   "faq": "FAQ",
   "imprint": "Imprint",
-  "privacy": "Privacy"
+  "privacy": "Privacy",
+  "english": "English",
+  "german": "German",
+  "courseSelection": {
+    "winterSemester": "winter semester",
+    "summerSemester": "summer semester",
+    "selectCourse": "Please select a course and semester"
+  }
 }

frontend/src/main.ts

@@ -35,13 +35,13 @@ import i18n from "./i18n";
 const app = createApp(App);
 const pinia = createPinia();
 
-i18n.setup();
-app.use(i18n.vueI18n);
 app.use(PrimeVue);
 app.use(router);
 app.use(ToastService);
 app.use(pinia);
 app.use(DialogService);
+i18n.setup();
+app.use(i18n.vueI18n);
 app.component("Button", Button);
 app.component("Menu", Menu);
 app.component("Menubar", Menubar);

frontend/src/router/index.ts

@@ -10,75 +10,66 @@ import EditCalendarView from "../view/editCalendarView.vue";
 import EditAdditionalModules from "../components/editCalendar/EditAdditionalModules.vue";
 import EditModules from "../components/editCalendar/EditModules.vue";
 import CourseSelection from "../components/CourseSelection.vue";
-import i18n, { defaultLocale } from "../i18n";
+import i18n from "../i18n";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-    {
-      path: "/",
-      redirect: `/${defaultLocale}`,
-    },
-    {
-      path: "/:locale",
-      children: [
         {
-          path: "",
+          path: "/",
           name: "course-selection",
           component: CourseSelection,
         },
         {
-          path: "rooms",
+          path: "/rooms",
           name: "room-finder",
           component: RoomFinder,
         },
         {
-          path: "faq",
+          path: "/faq",
           name: "faq",
           component: Faq,
         },
         {
-          path: "additional-modules",
+          path: "/additional-modules",
           name: "additional-modules",
           component: AdditionalModules,
         },
         {
-          path: "edit-additional-modules",
+          path: "/edit-additional-modules",
           name: "edit-additional-modules",
           component: EditAdditionalModules,
         },
         {
-          path: "edit-calendar",
+          path: "/edit-calendar",
           name: "edit-calendar",
           component: EditModules,
         },
         {
-          path: "calendar-link",
+          path: "/calendar-link",
           name: "calendar-link",
           component: CalendarLink,
         },
         {
-          path: "edit",
+          path: "/edit",
           name: "edit",
           component: EditCalendarView,
         },
         {
-          path: "privacy-policy",
+          path: "/privacy-policy",
           name: "privacy-policy",
           component: PrivacyPolicy,
         },
         {
-          path: "imprint",
+          path: "/imprint",
           name: "imprint",
           component: Imprint,
         },
         {
-          path: "rename-modules",
+          path: "/rename-modules",
           name: "rename-modules",
           component: RenameModules,
-        },
-      ],
-    },
+        }
   ],
 });
 
@@ -89,8 +80,6 @@ router.beforeEach(async (to, from) => {
   if (newLocale === prevLocale) {
     return
   }
-
-  await i18n.loadMessagesFor(newLocale)
   i18n.setLocale(newLocale)
 })
 

frontend/src/store/localeStore.ts

@@ -0,0 +1,17 @@
+import { defineStore } from "pinia";
+import { useLocalStorage } from "@vueuse/core"
+
+const localeStore = defineStore("localeStore", {
+  state: () => {
+    return {
+      locale: useLocalStorage('locale', "en"), //useLocalStorage takes in a key of 'count' and default value of 0
+    };
+  },
+  actions: {
+    setLocale(locale: string) {
+      this.locale = locale;
+    },
+  },
+});
+
+export default localeStore;