diff --git a/software/package-lock.json b/software/package-lock.json index 2c9f066..8755535 100644 --- a/software/package-lock.json +++ b/software/package-lock.json @@ -22,6 +22,7 @@ "sqlite3": "^5.1.7", "ts-node": "^10.9.2", "vue": "^3.4.29", + "vue-i18n": "^9.14.0", "vue-router": "^4.4.3", "vuetify": "^3.7.1", "wait-on": "^8.0.0" @@ -519,6 +520,50 @@ "@hapi/hoek": "^9.0.0" } }, + "node_modules/@intlify/core-base": { + "version": "9.14.0", + "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.14.0.tgz", + "integrity": "sha512-zJn0imh9HIsZZUtt9v8T16PeVstPv6bP2YzlrYJwoF8F30gs4brZBwW2KK6EI5WYKFi3NeqX6+UU4gniz5TkGg==", + "license": "MIT", + "dependencies": { + "@intlify/message-compiler": "9.14.0", + "@intlify/shared": "9.14.0" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://github.com/sponsors/kazupon" + } + }, + "node_modules/@intlify/message-compiler": { + "version": "9.14.0", + "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.14.0.tgz", + "integrity": "sha512-sXNsoMI0YsipSXW8SR75drmVK56tnJHoYbPXUv2Cf9lz6FzvwsosFm6JtC1oQZI/kU+n7qx0qRrEWkeYFTgETA==", + "license": "MIT", + "dependencies": { + "@intlify/shared": "9.14.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://github.com/sponsors/kazupon" + } + }, + "node_modules/@intlify/shared": { + "version": "9.14.0", + "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.14.0.tgz", + "integrity": "sha512-r+N8KRQL7LgN1TMTs1A2svfuAU0J94Wu9wWdJVJqYsoMMLIeJxrPjazihfHpmJqfgZq0ah3Y9Q4pgWV2O90Fyg==", + "license": "MIT", + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://github.com/sponsors/kazupon" + } + }, "node_modules/@jridgewell/resolve-uri": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", @@ -4650,6 +4695,26 @@ } } }, + "node_modules/vue-i18n": { + "version": "9.14.0", + "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.14.0.tgz", + "integrity": "sha512-LxmpRuCt2rI8gqU+kxeflRZMQn4D5+4M3oP3PWZdowW/ePJraHqhF7p4CuaME52mUxdw3Mmy2yAUKgfZYgCRjA==", + "license": "MIT", + "dependencies": { + "@intlify/core-base": "9.14.0", + "@intlify/shared": "9.14.0", + "@vue/devtools-api": "^6.5.0" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://github.com/sponsors/kazupon" + }, + "peerDependencies": { + "vue": "^3.0.0" + } + }, "node_modules/vue-router": { "version": "4.4.3", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.3.tgz", diff --git a/software/package.json b/software/package.json index f69906f..707cac4 100644 --- a/software/package.json +++ b/software/package.json @@ -31,6 +31,7 @@ "sqlite3": "^5.1.7", "ts-node": "^10.9.2", "vue": "^3.4.29", + "vue-i18n": "^9.14.0", "vue-router": "^4.4.3", "vuetify": "^3.7.1", "wait-on": "^8.0.0" diff --git a/software/src/App.vue b/software/src/App.vue index fded46e..81f06bc 100644 --- a/software/src/App.vue +++ b/software/src/App.vue @@ -1,27 +1,18 @@ @@ -35,11 +26,11 @@ requestAllCategories() - Einkaufen + {{ $t('menu.shopping') }} - - + + @@ -50,21 +41,21 @@ requestAllCategories() - Account + {{ $t('menu.account') }} - - - + + + - System & Hilfe + {{ $t('menu.systemAndHelp') }} - - + + diff --git a/software/src/data/enums/languageEnum.ts b/software/src/data/enums/languageEnum.ts index b173d8a..715e910 100644 --- 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" } \ No newline at end of file diff --git a/software/src/locales/english.json b/software/src/locales/english.json new file mode 100644 index 0000000..6957d01 --- /dev/null +++ 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!" +} \ No newline at end of file diff --git a/software/src/locales/german.json b/software/src/locales/german.json new file mode 100644 index 0000000..bb5176c --- /dev/null +++ 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!" +} \ No newline at end of file diff --git a/software/src/main.ts b/software/src/main.ts index 3536f3a..53bd27b 100644 --- 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') diff --git a/software/src/pages/basketPage/index.vue b/software/src/pages/basketPage/index.vue index 94e7057..b456ef7 100644 --- a/software/src/pages/basketPage/index.vue +++ b/software/src/pages/basketPage/index.vue @@ -9,21 +9,26 @@ const basketStore = useBasketStore() - + - {{ basketStore.itemsInBasket.length }} Artikel + + {{ basketStore.itemsInBasket.length }} {{ $t('product') }} + + + {{ basketStore.itemsInBasket.length }} {{ $t('products') }} + - Total: {{ basketStore.getTotalPrice }} € + {{ $t('totalPrice') }}: {{ basketStore.getTotalPrice }} € @@ -31,7 +36,7 @@ const basketStore = useBasketStore() prepend-icon="mdi-basket-check" :disabled="basketStore.itemsInBasket.length == 0" > - Bestellen + {{ $t('orderNow') }} diff --git a/software/src/pages/basketPage/productsTable.vue b/software/src/pages/basketPage/productsTable.vue index 6f3eee0..d51060b 100644 --- a/software/src/pages/basketPage/productsTable.vue +++ b/software/src/pages/basketPage/productsTable.vue @@ -15,12 +15,12 @@ function removeFromBasket(basketItem: BasketItemModel) { - Category - Brand - Products - Quantity - Product price - Total price + {{ $t('category') }} + {{ $t('brand') }} + {{ $t('products') }} + {{ $t('quantity') }} + {{ $t('productPrice') }} + {{ $t('totalPrice') }} diff --git a/software/src/pages/loginPage/loginForm.vue b/software/src/pages/loginPage/loginForm.vue index 34736fd..dfcedf8 100644 --- a/software/src/pages/loginPage/loginForm.vue +++ b/software/src/pages/loginPage/loginForm.vue @@ -2,24 +2,24 @@ - + - + - + - Login + {{ $t('login') }} @@ -31,8 +31,7 @@ rel="noopener noreferrer" target="_blank" > - - Nicht keinen Account? Jetzt anmelden! + {{ $t('noAccountRegister') }} diff --git a/software/src/pages/preferencesPage/pageSetup.vue b/software/src/pages/preferencesPage/pageSetup.vue index 4e4926c..30a4bfa 100644 --- 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 } - + - + - + diff --git a/software/src/pages/preferencesPage/systemSetup.vue b/software/src/pages/preferencesPage/systemSetup.vue index cc0b20d..38dd619 100644 --- a/software/src/pages/preferencesPage/systemSetup.vue +++ b/software/src/pages/preferencesPage/systemSetup.vue @@ -20,14 +20,18 @@ function resetSettings() { - + - Datenbank zurücksetzen + + {{ $t('preferences.resetDatabase') }} + - Einstellungen zurücksetzen + + {{ $t('preferences.resetPreferences') }} + diff --git a/software/src/pages/productsPage/filterBar.vue b/software/src/pages/productsPage/filterBar.vue index 303e09e..24608ce 100644 --- 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 - {{ numberOfItems }} Produkt - - - {{ numberOfItems }} Produkte - + {{ numberOfItems }} {{ $t('product') }} + + + {{ numberOfItems }} {{ $t('products') }} + - + - + @@ -54,7 +54,7 @@ const onlyDiscounts = defineModel("onlyDiscounts", { required: true, type: Boole - + diff --git a/software/src/pages/productsPage/productDetails.vue b/software/src/pages/productsPage/productDetails.vue index c110fed..a4a15ab 100644 --- a/software/src/pages/productsPage/productDetails.vue +++ b/software/src/pages/productsPage/productDetails.vue @@ -44,7 +44,7 @@ function addProductToBasket() { - Zum Einkaufswagen hinzufügen + {{ $t('addToBasket') }} diff --git a/software/src/plugins/i18n.ts b/software/src/plugins/i18n.ts new file mode 100644 index 0000000..82d4a0b --- /dev/null +++ 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 + } +}) \ No newline at end of file