Add language change method to footer

client/src/components/AppFooter.vue

@@ -1,7 +1,14 @@
 <script setup lang="ts">
+import { loadLocaleMessages, setI18nLanguage } from "@/i18n";
 import * as log from "loglevel";
 
 log.debug("AppFooter created");
+
+async function changeLocale(event: Event) {
+  const target = event.target as HTMLSelectElement;
+  await loadLocaleMessages(target.value);
+  setI18nLanguage(target.value);
+}
 </script>
 
 <template>
@@ -13,6 +20,11 @@ log.debug("AppFooter created");
     <div class="flex-grow"></div>
     <div>VBV_VERSION_BUILD_NUMBER_VBV</div>
     <div class="lg:ml-8">Deutsch</div>
+    <!--div class="locale-changer">
+      <select @change="changeLocale($event)">
+        <option v-for="locale in ['de', 'fr']" :key="`locale-${locale}`" :value="locale">{{ locale }}</option>
+      </select>
+    </div-->
     <div class="lg:ml-8">{{ $t("footer.contact") }}</div>
   </footer>
 </template>

client/src/i18n.ts

@@ -3,14 +3,15 @@ import { createI18n } from "vue-i18n";
 
 // https://vue-i18n.intlify.dev/guide/advanced/lazy.html
 export const SUPPORT_LOCALES = ["de", "fr", "it"];
+let i18n: any = null;
 
 export function setupI18n(options = { locale: "de", legacy: false }) {
-  const i18n = createI18n(options);
+  i18n = createI18n(options);
-  setI18nLanguage(i18n, options.locale);
+  setI18nLanguage(options.locale);
   return i18n;
 }
 
-export function setI18nLanguage(i18n: any, locale: string) {
+export function setI18nLanguage(locale: string) {
   if (i18n.mode === "legacy") {
     i18n.global.locale = locale;
   } else {
@@ -26,7 +27,7 @@ export function setI18nLanguage(i18n: any, locale: string) {
   document.querySelector("html")?.setAttribute("lang", locale);
 }
 
-export async function loadLocaleMessages(i18n: any, locale: any) {
+export async function loadLocaleMessages(locale: any) {
   // load locale messages with dynamic import
   const messages = await import(
     /* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json`

client/src/locales/fr.json

@@ -0,0 +1,159 @@
+{
+  "general": {
+    "nextStep": "Prochaine étape",
+    "start": "Commencer",
+    "backToLearningPath": "zurück zum Lernpfad",
+    "backToCircle": "zurück zum Circle",
+    "next": "Weiter",
+    "back": "zurück",
+    "backCapitalized": "@.capitalize:general.back",
+    "save": "Speichern",
+    "learningUnit": "Lerneinheit",
+    "learningPath": "Lernpfad",
+    "learningSequence": "Lernsequenz",
+    "show": "Anschauen",
+    "circles": "Circles",
+    "transferTask": "Transferauftrag | Transferaufträge",
+    "feedback": "Feedback | Feedbacks",
+    "exam": "Prüfung | Prüfungen",
+    "examResult": "Prüfungsresultat | Prüfungsresultate",
+    "certificate": "Zertifikat | Zertifikate",
+    "notification": "Benachrichtigung | Benachrichtigungen",
+    "profileLink": "Profil anzeigen",
+    "shop": "Shop",
+    "yes": "Ja",
+    "no": "Nein"
+  },
+  "mainNavigation": {
+    "logout": "Abmelden",
+    "settings": "Kontoeinstellungen"
+  },
+  "dashboard": {
+    "welcome": "Willkommen, {name}"
+  },
+  "learningPathPage": {
+    "welcomeBack": "Willkommen zurück, {name}",
+    "showListView": "Listenansicht anzeigen",
+    "nextStep": "Nächster Schritt"
+  },
+  "circlePage": {
+    "duration": "Dauer",
+    "circleContentBoxTitle": "Das lernst du in diesem Circle.",
+    "gotQuestions": "Hast du Fragen?",
+    "contactExpertButton": "Fachexpertin kontaktieren",
+    "contactExpertDescription": "Tausche dich mit der Fachexpertin für den Circle {circleName} aus.",
+    "learnMore": "Erfahre mehr dazu",
+    "documents": {
+      "title": "Unterlagen",
+      "expertDescription": "Stelle deinen Lernenden zusätzliche Inhalte zur Verfügung.",
+      "userDescription": "Hier findest du die Unterlagen, die dir die Fachexpertin zur Verfügung gestellt hat.",
+      "action": "Unterlagen hochladen",
+      "modalAction": "Datei auswählen",
+      "fileLabel": "Datei",
+      "modalFileName": "Name",
+      "modalNameInformation": "Max. 70 Zeichen",
+      "chooseSequence": "Wähle eine Lernsequenz aus",
+      "selectFile": "Bitte wähle eine Datei aus",
+      "chooseName": "Bitte wähle einen Namen",
+      "chooseLearningSequence": "Bitte wähle eine Lernsequenz aus",
+      "uploadErrorMessage": "Beim Hochladen ist ein Fehler aufgetreten. Bitte versuche es erneut.",
+      "maxFileSize": "Maximale Dateigrösse: 20 MB"
+    }
+  },
+  "learningContent": {
+    "completeAndContinue": "Als erledigt markieren"
+  },
+  "selfEvaluation": {
+    "selfEvaluation": "Selbsteinschätzung",
+    "title": "@:selfEvaluation.selfEvaluation {title}",
+    "steps": "Schritt {current} von {max}",
+    "instruction": [
+      "Überprüfe, ob du in der Lernheinheit",
+      "alles verstanden hast.",
+      "Lies die folgende Aussage und bewerte sie:"
+    ],
+    "yes": "Ja, ich kann das",
+    "no": "Das muss ich nochmals anschauen",
+    "progressText": "Schau dein Fortschritt in deinem KompetenzNavi:",
+    "progressLink": "KompetenzNavi öffnen",
+    "selfEvaluationYes": "@:selfEvaluation: Ich kann das.",
+    "selfEvaluationNo": "@:selfEvaluation: Muss ich nochmals anschauen."
+  },
+  "competences": {
+    "competences": "Kompetenzen",
+    "title": "KompetenzNavi",
+    "lastImprovements": "Letzte verbesserte Kompetenzen",
+    "showAll": "Alle anschauen",
+    "assessment": "Einschätzungen",
+    "notAssessed": "Nicht eingeschätzt",
+    "assessAgain": "Sich nochmals einschätzen"
+  },
+  "mediaLibrary": {
+    "title": "Mediathek",
+    "learningMedia": {
+      "titel": "Lernmedien",
+      "description": "Finde eine vollständige Liste der Bücher und anderen Medien, auf die im Kurs verwiesen wird."
+    },
+    "handlungsfelder": {
+      "title": "Handlungsfeld | Handlungsfelder",
+      "description": "Finde alle Ressourcen der Handlungsfelder wie Lernmedien, Links und andere nützliche Informationen."
+    }
+  },
+  "footer": {
+    "dataProtection": "Datenschutzbestimmungen",
+    "imprint": "Impressum",
+    "contact": "Kontakt",
+    "faq": "FAQ"
+  },
+  "cockpit": {
+    "title": "Cockpit",
+    "tasksDone": "Erledigte Transferaufträge von Teilnehmer.",
+    "feedbacksDone": "Abgeschickte Feedbacks von Teilnehmer.",
+    "examsDone": "Abgelegte Prüfungen von Teilnehmer.",
+    "progress": "Fortschritt",
+    "profileLink": "Profil anzeigen"
+  },
+  "messages": {
+    "sendMessage": "Nachricht schreiben"
+  },
+  "feedback": {
+    "intro": "{name}, dein/e Trainer/-in, bittet dich, ihm/ihr Feedback zu geben. Das ist freiwillig, würde aber ihm/ihr helfen, deine Lernerlebniss zu verbessern.",
+    "areYouSatisfied": "Wie zufrieden bist du?",
+    "recommendLabel": "Würden Sie den Kurs weiterempfehlen?",
+    "satisfactionLabel": "Zufriedenheit insgesamt",
+    "goalAttainmentLabel": "Zielerreichung insgesamt",
+    "proficiencyLabel": "Wie beurteilen Sie Ihre Sicherheit bezüglichen den Themen nach dem Kurs?",
+    "receivedMaterialsLabel": "Haben Sie Vorbereitungsunterlagen (z.B. eLearning) erhalten?",
+    "materialsRatingLabel": "Falls ja: Wie beurteilen Sie die Vorbereitungsunterlagen (z.B. eLearning)?",
+    "instructorCompetenceLabel": "Der Kursleiter war themenstark, fachkompetent.",
+    "instructorRespectLabel": "Fragen und Anregungen der Kursteilnehmenden wurden ernst genommen und aufgegriffen.",
+    "instructorOpenFeedbackLabel": "Was ich dem Kursleiter sonst noch sagen wollte:",
+    "courseNegativeFeedbackLabel": "Wo sehen Sie Verbesserungspotenzial?",
+    "coursePositiveFeedbackLabel": "Was hat Ihnen besonders gut gefallen?",
+    "completionTitle": "Schicke dein Feedback an {name}",
+    "completionDescription": "Dein Feedback ist anonym. Dein Vor- und Nachname werden bei deiner Trainer/-in nicht angezeigt.",
+    "sendFeedback": "Feedback abschicken",
+    "feedbackSent": "Dein Feedback wurde abgeschickt",
+    "circleFeedback": "Feedback zum Circle",
+    "showDetails": "Details anzeigen",
+    "sentByUsers": "Von {count} Teilnehmern ausgefüllt",
+    "feedbackPageTitle": "Feedback zum Lehrgang",
+    "feedbackPageInfo": "Teilnehmer haben das Feedback ausgefüllt",
+    "questionTitle": "Frage",
+    "veryUnhappy": "Sehr unzufrieden",
+    "unhappy": "Unzufrieden",
+    "happy": "Zufrieden",
+    "veryHappy": "Sehr zufrieden",
+    "average": "Durchschnitt",
+    "answers": "Antworten",
+    "noFeedbacks": "Es wurden noch keine Feedbacks abgegeben"
+  },
+  "constants": {
+    "yes": "Ja",
+    "no": "Nein",
+    "verySatisfied": "sehr zufrieden",
+    "satisfied": "zufrieden",
+    "unsatisfied": "unzufrieden",
+    "veryUnsatisfied": "sehr unzufrieden"
+  }
+}

client/src/main.ts

@@ -39,7 +39,7 @@ Sentry.init({
 });
 
 // todo: define lang setup
-loadLocaleMessages(i18n, "de").then(() => {
+loadLocaleMessages("de").then(() => {
   app.use(router);
 
   const pinia = createPinia();