feat:#60 added switch button (not working)

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"
+}