Translation

2024-09-09 20:55:09 +02:00
parent 40586f18b2
commit 5a1b28dd60
15 changed files with 226 additions and 60 deletions
--- a/software/src/App.vue
+++ b/software/src/App.vue
@@ -1,27 +1,18 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import axios from 'axios';
 import { useTheme } from 'vuetify/lib/framework.mjs';
 import { useUserStore } from './data/stores/userStore';
 import vuetify from './plugins/vuetify';
 import { useBasketStore } from './data/stores/basketStore';
+import { i18n } from './plugins/i18n';

 const userStore = useUserStore()
 const basketStore = useBasketStore()
-const categories = ref([])
 const theme = useTheme()
 const navRail = ref(vuetify.display.mobile)

 theme.global.name.value = userStore.theme
-
-function requestAllCategories() {
-  axios.get('http://127.0.0.1:3000/categories')
-    .then(function (response) {
-      categories.value = response.data
-    })
-}
-
-requestAllCategories()
+i18n.global.locale = userStore.language
 </script>

 <template>
@@ -35,11 +26,11 @@ requestAllCategories()
    <v-navigation-drawer :rail="navRail" permanent>
      <v-list>
        <v-list-subheader>
-          <div v-if="!navRail">Einkaufen</div>
+          <div v-if="!navRail">{{ $t('menu.shopping') }}</div>
          <div v-else></div>
        </v-list-subheader>
-        <v-list-item title="Produkte" prepend-icon="mdi-store" to="/products" link />
-        <v-list-item to="/basket" link title="Warenkorb">
+        <v-list-item :title="$t('menu.products')" prepend-icon="mdi-store" to="/products" link />
+        <v-list-item :title="$t('menu.basket')" to="/basket" link >
          <template v-slot:prepend>
            <v-badge color="primary" :content="basketStore.itemsInBasket.length">
              <v-icon icon="mdi-cart" />
@@ -50,21 +41,21 @@ requestAllCategories()
        <v-divider />

        <v-list-subheader>
-          <div v-if="!navRail">Account</div>
+          <div v-if="!navRail">{{ $t('menu.account') }}</div>
          <div v-else></div>
        </v-list-subheader>
-        <v-list-item title="Login" prepend-icon="mdi-login" to="/login" link />
-        <v-list-item title="Account" prepend-icon="mdi-account" to="/account" link />
-        <v-list-item title="Bestellungen" prepend-icon="mdi-cart-check" to="/orders" link />
+        <v-list-item :title="$t('menu.login')" prepend-icon="mdi-login" to="/login" link />
+        <v-list-item :title="$t('menu.account')" prepend-icon="mdi-account" to="/account" link />
+        <v-list-item :title="$t('menu.orders')" prepend-icon="mdi-cart-check" to="/orders" link />

        <v-divider />
        
        <v-list-subheader>
-          <div v-if="!navRail">System & Hilfe</div>
+          <div v-if="!navRail">{{ $t('menu.systemAndHelp') }}</div>
          <div v-else></div>
        </v-list-subheader>
-        <v-list-item title="Hilfestellung" prepend-icon="mdi-chat-question" to="/help" link />
-        <v-list-item title="Einstellungen" prepend-icon="mdi-cog" to="/preferences" link />
+        <v-list-item :title="$t('menu.helpInstructions')" prepend-icon="mdi-chat-question" to="/help" link />
+        <v-list-item :title="$t('menu.preferences')" prepend-icon="mdi-cog" to="/preferences" link />
      </v-list>
    </v-navigation-drawer>

--- a/software/src/data/enums/languageEnum.ts
+++ b/software/src/data/enums/languageEnum.ts
@@ -1,4 +1,4 @@
 export enum LanguageEnum {
-  GERMAN = "Deutsch",
-  ENGLISH = "English"
+  GERMAN = "de",
+  ENGLISH = "en"
 }
--- a/software/src/locales/english.json
+++ b/software/src/locales/english.json
@@ -0,0 +1,40 @@
+{
+  "menu":
+  {
+    "shopping": "Shopping",
+    "products": "Products",
+    "basket": "Basket",
+    "login": "Login",
+    "account": "Account",
+    "orders": "Orders",
+    "systemAndHelp": "System & Help",
+    "helpInstructions": "Help instructions",
+    "preferences": "Preferences"
+  },
+  "preferences": {
+    "pageSetup": "Page setup",
+    "selectedTheme": "Selected theme",
+    "language": "Language",
+    "systemSetup": "System setup",
+    "resetDatabase": "Reset database",
+    "resetPreferences": "Reset preferences"
+  },
+  "products": "Products",
+  "product": "Product",
+  "offers": "Offers",
+  "categories": "Categories",
+  "sortBy": "Sort by",
+  "quantity": "Quantity",
+  "addToBasket": "Add to basket",
+  "emptyBasketTitle": "The basket is empty...",
+  "emptyBasketText": "Go to our products and add some of them to the basket",
+  "totalPrice": "Total price",
+  "orderNow": "Order now",
+  "category": "Category",
+  "brand": "Brand",
+  "productPrice": "Unit price",
+  "username": "Username",
+  "password": "Password",
+  "login": "Login",
+  "noAccountRegister": "No Account? Register now!"
+}
--- a/software/src/locales/german.json
+++ b/software/src/locales/german.json
@@ -0,0 +1,40 @@
+{
+  "menu":
+  {
+    "shopping": "Einkaufen",
+    "products": "Produkte",
+    "basket": "Warenkorb",
+    "login": "Login",
+    "account": "Account",
+    "orders": "Bestellungen",
+    "systemAndHelp": "System & Hilfe",
+    "helpInstructions": "Hilfestellung",
+    "preferences": "Einstellungen"
+  },
+  "preferences": {
+    "pageSetup": "Seiteneinstellungen",
+    "selectedTheme": "Ausgewähltes Theme",
+    "language": "Sprache",
+    "systemSetup": "Systemeinstellungen",
+    "resetDatabase": "Datenbank zurücksetzen",
+    "resetPreferences": "Einstellungen zurücksetzen"
+  },
+  "products": "Produkte",
+  "product": "Produkt",
+  "offers": "Angebote",
+  "categories": "Kategorien",
+  "sortBy": "Sortieren nach",
+  "quantity": "Anzahl",
+  "addToBasket": "Zum Warenkorb hinzufügen",
+  "emptyBasketTitle": "Keine Artikel im Warenkorb",
+  "emptyBasketText": "Gehe zu unseren Produkten und lege Artikel in den Warenkorb",
+  "totalPrice": "Gesamtpreis",
+  "orderNow": "Jetzt bestellen",
+  "category": "Kategorie",
+  "brand": "Marke",
+  "productPrice": "Einzelpreis",
+  "username": "Username",
+  "password": "Passwort",
+  "login": "Login",
+  "noAccountRegister": "Noch keinen Account? Jetzt anmelden!"
+}
--- a/software/src/main.ts
+++ b/software/src/main.ts
@@ -4,9 +4,11 @@ import App from './App.vue'
 import vuetify from './plugins/vuetify'
 import router from './plugins/router'
 import pinia from './plugins/pinia'
+import { i18n } from './plugins/i18n'

 createApp(App)
  .use(vuetify)
  .use(router)
  .use(pinia)
+  .use(i18n)
  .mount('#app')
--- a/software/src/pages/basketPage/index.vue
+++ b/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>
--- a/software/src/pages/basketPage/productsTable.vue
+++ b/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>

--- a/software/src/pages/loginPage/loginForm.vue
+++ b/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>
--- a/software/src/pages/preferencesPage/pageSetup.vue
+++ b/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>
--- a/software/src/pages/preferencesPage/systemSetup.vue
+++ b/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>
--- a/software/src/pages/productsPage/filterBar.vue
+++ b/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>
--- a/software/src/pages/productsPage/productDetails.vue
+++ b/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>
--- a/software/src/plugins/i18n.ts
+++ b/software/src/plugins/i18n.ts
@@ -0,0 +1,13 @@
+import { createI18n } from "vue-i18n";
+import german from './../locales/german.json'
+import english from './../locales/english.json'
+
+type MessageSchema = typeof german
+
+export const i18n = createI18n<[MessageSchema], 'de' | 'en'>({
+  locale: 'de',
+  messages: {
+    'de': german,
+    'en': english
+  }
+})