feat:#60 added switch button (not working)

frontend/src/App.vue

@@ -1,10 +1,12 @@
 <script lang="ts" setup>
 import MenuBar from "./components/MenuBar.vue";
+import { RouterView } from "vue-router";
 </script>
 
 <template>
-  <MenuBar />
-  <router-view></router-view>
+<MenuBar />
+<RouterView />
+
 </template>
 
 <style scoped></style>

frontend/src/api/fetchCourse.ts

@@ -6,7 +6,13 @@ export async function fetchCourse(): Promise<string[]> {
   const courses: string[] = [];
   await fetch("/api/courses")
     .then((response) => {
-      return response.json();
+      //check if response type is json
+      const contentType = response.headers.get("content-type");
+      if (contentType && contentType.indexOf("application/json") !== -1) {
+        return response.json();
+      } else {
+        return [];
+      }
     })
     .then((coursesResponse) => {
       coursesResponse.forEach((course: string) => courses.push(course));

frontend/src/components/LocaleSwitcher.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import i18n, { supportedLocales } from "../i18n";
+import { Ref, ref } from "vue";
+import router from "../router";
+import { useI18n } from "vue-i18n";
+
+const locales = ref(
+  Object.keys(supportedLocales).map((code) => ({
+    code,
+    name: supportedLocales[code].name,
+  })),
+);
+
+// selectedLocal is the string of the selected locale from i18n matched with the locales array
+const selectedLocale: Ref<any> = ref();
+
+const i18n1 = (i18n.vueI18n);
+
+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}`);
+}
+</script>
+<template>
+  <Dropdown
+    :options="locales"
+    optionLabel="name"
+    v-model="selectedLocale"
+    @change="onLocaleChange"
+  >
+  </Dropdown>
+</template>

frontend/src/components/MenuBar.vue

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

frontend/src/i18n/index.ts

@@ -1,11 +1,55 @@
-import { createI18n } from 'vue-i18n'
-import messages from "./messages.ts";
+import { createI18n } from "vue-i18n";
+import { nextTick } from "vue";
+import defaultMessages from './translations/en.json'
 
-const i18n = createI18n({
-  legacy: false,
-  globalInjection: true,
-  locale: 'en',
-  messages,
-})
+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 }) {
+  _i18n = createI18n({
+    legacy: false,
+    locale: options.locale,
+    fallbackLocale: defaultLocale,
+    messages: { [defaultLocale]: defaultMessages },
+  })
+  setLocale(options.locale)
+  return _i18n
+}
 
-export default i18n
+// Sets the active locale.
+function setLocale(newLocale : any) {
+  _i18n.global.locale = newLocale
+  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')
+
+  htmlElement?.setAttribute('lang', locale)
+}
+
+// Public interface
+export default {
+  // Expose the VueI18n instance via a getter
+  get vueI18n() {
+    return _i18n
+  },
+  setup,
+  setLocale,
+  loadMessagesFor,
+}

frontend/src/i18n/messages.ts

@@ -1,18 +1,18 @@
 export default {
-  en: {
-      createCalendar: 'Create Calendar',
-      editCalendar: 'Edit Calendar',
-      roomFinder: 'Room Finder',
-      faq: 'FAQ',
-      imprint: 'Imprint',
-      privacy: 'Privacy',
+  en : {
+    createCalendar: "Create Calendar",
+    editCalendar: "Edit Calendar",
+    roomFinder: "Room Finder",
+    faq: "FAQ",
+    imprint: "Imprint",
+    privacy: "Privacy Policy",
   },
-  de: {
-      createCalendar: 'Kalender erstellen',
-      editCalendar: 'Kalender bearbeiten',
-      roomFinder: 'Raumfinder',
-      faq: 'FAQ',
-      imprint: 'Impressum',
-      privacy: 'Datenschutz',
+  de : {
+    createCalendar: "Kalender erstellen",
+    editCalendar: "Kalender bearbeiten",
+    roomFinder: "Raumfinder",
+    faq: "FAQ",
+    imprint: "Impressum",
+    privacy: "Datenschutz"
   }
 }

frontend/src/i18n/translations/de.json

@@ -0,0 +1,8 @@
+{
+   "createCalendar": "Kalender erstellen",
+  "editCalendar": "Kalender bearbeiten",
+  "roomFinder": "Raumfinder",
+  "faq": "FAQ",
+  "imprint": "Impressum",
+  "privacy": "Datenschutz"
+}

frontend/src/i18n/translations/en.json

@@ -0,0 +1,8 @@
+{
+  "createCalendar": "Create Calendar",
+  "editCalendar": "Edit Calendar",
+  "roomFinder": "Room Finder",
+  "faq": "FAQ",
+  "imprint": "Imprint",
+  "privacy": "Privacy"
+}

frontend/src/main.ts

@@ -35,12 +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);
-app.use(i18n);
 app.component("Button", Button);
 app.component("Menu", Menu);
 app.component("Menubar", Menubar);

frontend/src/router/index.ts

@@ -1,6 +1,5 @@
 import { createRouter, createWebHistory } from "vue-router";
 import Faq from "../components/FaqPage.vue";
-import CourseSelection from "../components/CourseSelection.vue";
 import AdditionalModules from "../components/AdditionalModules.vue";
 import CalendarLink from "../components/CalendarLink.vue";
 import Imprint from "../components/ImprintPage.vue";
@@ -10,70 +9,89 @@ import RoomFinder from "../components/RoomFinder.vue";
 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";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: "/",
-      name: "course-selection",
-      component: CourseSelection,
+      redirect: `/${defaultLocale}`,
     },
     {
-      path: "/rooms",
-      name: "room-finder",
-      component: RoomFinder,
-    },
-    {
-      path: "/faq",
-      name: "faq",
-      component: Faq,
-    },
-    {
-      path: "/additional-modules",
-      name: "additional-modules",
-      component: AdditionalModules,
-    },
-    {
-      path: "/edit-additional-modules",
-      name: "edit-additional-modules",
-      component: EditAdditionalModules,
-    },
-    {
-      path: "/edit-calendar",
-      name: "edit-calendar",
-      component: EditModules,
-    },
-    {
-      path: "/calendar-link",
-      name: "calendar-link",
-      component: CalendarLink,
-    },
-    {
-      path: "/edit",
-      name: "edit",
-      component: EditCalendarView,
-    },
-    {
-      path: "/privacy-policy",
-      name: "privacy-policy",
-      component: PrivacyPolicy,
-    },
-    {
-      path: "/imprint",
-      name: "imprint",
-      component: Imprint,
-    },
-    {
-      path: "/rename-modules",
-      name: "rename-modules",
-      component: RenameModules,
-    },
-    {
-      path: "/:catchAll(.*)",
-      redirect: "/",
+      path: "/:locale",
+      children: [
+        {
+          path: "",
+          name: "course-selection",
+          component: CourseSelection,
+        },
+        {
+          path: "rooms",
+          name: "room-finder",
+          component: RoomFinder,
+        },
+        {
+          path: "faq",
+          name: "faq",
+          component: Faq,
+        },
+        {
+          path: "additional-modules",
+          name: "additional-modules",
+          component: AdditionalModules,
+        },
+        {
+          path: "edit-additional-modules",
+          name: "edit-additional-modules",
+          component: EditAdditionalModules,
+        },
+        {
+          path: "edit-calendar",
+          name: "edit-calendar",
+          component: EditModules,
+        },
+        {
+          path: "calendar-link",
+          name: "calendar-link",
+          component: CalendarLink,
+        },
+        {
+          path: "edit",
+          name: "edit",
+          component: EditCalendarView,
+        },
+        {
+          path: "privacy-policy",
+          name: "privacy-policy",
+          component: PrivacyPolicy,
+        },
+        {
+          path: "imprint",
+          name: "imprint",
+          component: Imprint,
+        },
+        {
+          path: "rename-modules",
+          name: "rename-modules",
+          component: RenameModules,
+        },
+      ],
     },
   ],
 });
 
+router.beforeEach(async (to, from) => {
+  const newLocale = to.params.locale
+  const prevLocale = from.params.locale
+  // If the locale hasn't changed, do nothing
+  if (newLocale === prevLocale) {
+    return
+  }
+
+  await i18n.loadMessagesFor(newLocale)
+  i18n.setLocale(newLocale)
+})
+
 export default router;