Translation

software/src/pages/preferencesPage/pageSetup.vue

@@ -2,34 +2,40 @@
 import { ThemeEnum } from '@/data/enums/themeEnums';
 import { useTheme } from 'vuetify/lib/framework.mjs';
 import { useUserStore } from '@/data/stores/userStore';
-import { LanguageEnum } from '@/data/enums/languageEnum';
+import { i18n } from '@/plugins/i18n';
 
 const userStore = useUserStore()
 const theme = useTheme()
 const themeEnums = Object.values(ThemeEnum)
-const languages = Object.values(LanguageEnum)
 
 function changeTheme() {
   theme.global.name.value = userStore.theme
 }
 
 function changeLanguage() {
-  // todo
+  i18n.global.locale = userStore.language
 }
 </script>
 
 <template>
-  <v-card title="Page Setup" prepend-icon="mdi-view-dashboard" elevation="8">
+  <v-card :title="$t('preferences.pageSetup')" prepend-icon="mdi-view-dashboard" elevation="8">
     <v-container>
       <v-row>
         <v-col>
-          <v-select v-model="userStore.theme" :items="themeEnums" label="Selected theme" @update:model-value="changeTheme" />
+          <v-select
+            v-model="userStore.theme"
+            :items="themeEnums"
+            :label="$t('preferences.selectedTheme')"
+            @update:model-value="changeTheme"
+          />
         </v-col>
       </v-row>
 
       <v-row>
         <v-col>
-          <v-select v-model="userStore.language" :items="languages" label="Sprache" @update:model-value="changeLanguage" />
+          <v-select v-model="userStore.language" :items="$i18n.availableLocales" :label="$t('preferences.language')"
+          @update:model-value="changeLanguage"
+        />
         </v-col>
       </v-row>
     </v-container>

software/src/pages/preferencesPage/systemSetup.vue

@@ -20,14 +20,18 @@ function resetSettings() {
 </script>
 
 <template>
-  <v-card title="System Setup" prepend-icon="mdi-engine" elevation="8">
+  <v-card :title="$t('preferences.systemSetup')" prepend-icon="mdi-engine" elevation="8">
     <v-container>
       <v-row>
         <v-col class="d-flex justify-center align-center">
-          <v-btn @click="resetDb" color="primary" prepend-icon="mdi-database-refresh">Datenbank zurücksetzen</v-btn>
+          <v-btn @click="resetDb" color="primary" prepend-icon="mdi-database-refresh">
+            {{ $t('preferences.resetDatabase') }}
+          </v-btn>
         </v-col>
         <v-col class="d-flex justify-center align-center">
-          <v-btn @click="resetDb" color="primary" prepend-icon="mdi-cog-counterclockwise">Einstellungen zurücksetzen</v-btn>
+          <v-btn @click="resetDb" color="primary" prepend-icon="mdi-cog-counterclockwise">
+            {{ $t('preferences.resetPreferences') }}
+          </v-btn>
         </v-col>
       </v-row>
     </v-container>