Translation

software/src/pages/basketPage/index.vue

@@ -9,21 +9,26 @@ const basketStore = useBasketStore()
   <v-container max-width="1000">
     <v-row>
       <v-col>
-        <v-card title="Warenkorb" >
+        <v-card :title="$t('menu.basket')" prepend-icon="mdi-cart">
           <v-card-subtitle v-if="basketStore.itemsInBasket.length > 0">
-            {{ basketStore.itemsInBasket.length }} Artikel
+            <div v-if="basketStore.itemsInBasket.length == 1">
+              {{ basketStore.itemsInBasket.length }} {{ $t('product') }}
+            </div>
+            <div v-else>
+              {{ basketStore.itemsInBasket.length }} {{ $t('products') }}
+            </div>
           </v-card-subtitle>
 
           <products-table v-if="basketStore.itemsInBasket.length > 0" />
 
           <v-empty-state v-else
             icon="mdi-basket-off"
-            title="Keine Artikel im Warenkorb"
-            text="Gehe zu unseren Produkten und lege Artikel in den Warenkorb"
+            :title="$t('emptyBasketTitle')"
+            :text="$t('emptyBasketText')"
           />
 
           <v-card-text class="text-right" v-if="basketStore.itemsInBasket.length > 0">
-            Total: {{ basketStore.getTotalPrice }} €
+            {{ $t('totalPrice') }}: {{ basketStore.getTotalPrice }} €
           </v-card-text>
 
           <v-card-actions>
@@ -31,7 +36,7 @@ const basketStore = useBasketStore()
               prepend-icon="mdi-basket-check"
               :disabled="basketStore.itemsInBasket.length == 0"
             >
-              Bestellen
+              {{ $t('orderNow') }}
             </v-btn>
           </v-card-actions>
         </v-card>

software/src/pages/basketPage/productsTable.vue

@@ -15,12 +15,12 @@ function removeFromBasket(basketItem: BasketItemModel) {
     <thead>
       <tr>
         <th></th>
-        <th>Category</th>
-        <th>Brand</th>
-        <th>Products</th>
-        <th class="text-center">Quantity</th>
-        <th class="text-right">Product price</th>
-        <th class="text-right">Total price</th>
+        <th>{{ $t('category') }}</th>
+        <th>{{ $t('brand') }}</th>
+        <th>{{ $t('products') }}</th>
+        <th class="text-center">{{ $t('quantity') }}</th>
+        <th class="text-right">{{ $t('productPrice') }}</th>
+        <th class="text-right">{{ $t('totalPrice') }}</th>
       </tr>
     </thead>
 

software/src/pages/loginPage/loginForm.vue

@@ -2,24 +2,24 @@
 </script>
 
 <template>
-  <v-card title="Login" prepend-icon="mdi-login" elevation="8">
+  <v-card :title="$t('menu.login')" prepend-icon="mdi-login" elevation="8">
     <v-container>
       <v-row>
         <v-col>
-          <v-text-field label="Username" prepend-icon="mdi-account" clearable />
+          <v-text-field :label="$t('username')" prepend-icon="mdi-account" clearable />
         </v-col>
       </v-row>
 
       <v-row>
         <v-col>
-          <v-text-field label="Passwort" prepend-icon="mdi-key" type="password" clearable />
+          <v-text-field :label="$t('password')" prepend-icon="mdi-key" type="password" clearable />
         </v-col>
       </v-row>
 
       <v-row>
         <v-col>
           <!-- todo -->
-          <v-btn prepend-icon="mdi-send" color="primary" block>Login</v-btn>
+          <v-btn prepend-icon="mdi-send" color="primary" block>{{ $t('login') }}</v-btn>
         </v-col>
       </v-row>
     </v-container>
@@ -31,8 +31,7 @@
         rel="noopener noreferrer"
         target="_blank"
       >
-      <!-- todo -->
-        Nicht keinen Account? Jetzt anmelden! <v-icon icon="mdi-chevron-right"></v-icon>
+        {{ $t('noAccountRegister') }} <v-icon icon="mdi-chevron-right"/>
       </a>
     </v-card-text>
   </v-card>

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>

software/src/pages/productsPage/filterBar.vue

@@ -28,21 +28,21 @@ const onlyDiscounts = defineModel("onlyDiscounts", { required: true, type: Boole
   <v-card>
     <v-card-title>
       <div v-if="numberOfItems == 1">
-            {{ numberOfItems }} Produkt
-          </div>
-          <div v-else>
-            {{ numberOfItems }} Produkte
-          </div>
+        {{ numberOfItems }} {{ $t('product') }}
+      </div>
+      <div v-else>
+        {{ numberOfItems }} {{ $t('products') }}
+      </div>
     </v-card-title>
     <v-container class="pb-0">
       <v-row>
         <v-spacer />
         <v-col class="d-flex justify-center align-center">
-          <v-checkbox label="Angebote" v-model="onlyDiscounts" />
+          <v-checkbox :label="$t('offers')" v-model="onlyDiscounts" />
         </v-col>
 
         <v-col class="d-flex justify-left align-center">
-          <v-select :items="categories" label="Categories" v-model="selectedCategory" >
+          <v-select :items="categories" :label="$t('categories')" v-model="selectedCategory" >
             <template v-slot:item="{ props, item }">
               <v-list-item v-bind="props" :prepend-icon="item.raw.icon" :title="item.raw.name" />
             </template>
@@ -54,7 +54,7 @@ const onlyDiscounts = defineModel("onlyDiscounts", { required: true, type: Boole
         </v-col>
 
         <v-col class="d-flex justify-left align-center">
-          <v-select label="Sortieren nach" :items="sortBy" v-model="sortedBy" >
+          <v-select :label="$t('sortBy')" :items="sortBy" v-model="sortedBy" >
             <template v-slot:item="{ props, item }">
               <v-list-item v-bind="props" :prepend-icon="item.raw.icon" :title="item.raw.name" />
             </template>

software/src/pages/productsPage/productDetails.vue

@@ -44,7 +44,7 @@ function addProductToBasket() {
             <v-number-input
               :reverse="false"
               controlVariant="default"
-              label="Anzahl"
+              :label="$t('quantity')"
               :hideInput="false"
               :inset="false"
               v-model="nrOfArticles"
@@ -67,7 +67,7 @@ function addProductToBasket() {
           prepend-icon="mdi-cart-plus"
           @click="addProductToBasket"
         >
-          Zum Einkaufswagen hinzufügen
+          {{ $t('addToBasket') }}
         </v-btn>
       </v-card-actions>
     </v-card>