Änderung: Verbesserung der Sprachenerkennung und -verwaltung

Änderungen:
- Erweiterung der Logik zur Erkennung der Browsersprache in main.js und im Store, um auch spezifische deutsche Dialekte und Länder zu berücksichtigen.
- Implementierung einer Überwachung der Sprachänderungen im Store, die die i18n-Konfiguration entsprechend aktualisiert.

Diese Anpassungen verbessern die Benutzererfahrung durch präzisere Sprachenerkennung und dynamische Anpassung der Sprache in der Anwendung.
This commit is contained in:
Torsten Schulz (local)
2025-09-15 10:53:50 +02:00
parent f2db16cd0f
commit eedb1aa7d5
3 changed files with 91 additions and 3 deletions

View File

@@ -81,4 +81,12 @@ const i18n = createI18n({
messages messages
}); });
// Überwache Änderungen der Sprache im Store und aktualisiere i18n entsprechend
store.watch(
(state) => state.language,
(newLanguage) => {
i18n.global.locale.value = newLanguage;
}
);
export default i18n; export default i18n;

View File

@@ -9,12 +9,38 @@ import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives'; import * as directives from 'vuetify/directives';
function getBrowserLanguage() { function getBrowserLanguage() {
// Prüfe zuerst die bevorzugte Sprache
const browserLanguage = navigator.language || navigator.languages[0]; const browserLanguage = navigator.language || navigator.languages[0];
// Deutschsprachige Länder: Deutschland, Österreich, Schweiz, Liechtenstein
const germanSpeakingCountries = ['de', 'at', 'ch', 'li'];
// Prüfe ob die Sprache mit 'de' beginnt (deutsch)
if (browserLanguage.startsWith('de')) { if (browserLanguage.startsWith('de')) {
return 'de'; return 'de';
} else {
return 'en';
} }
// Prüfe alle verfügbaren Sprachen für deutschsprachige Länder
const allLanguages = navigator.languages || [navigator.language];
for (const lang of allLanguages) {
// Prüfe auf de-XX Format (z.B. de-DE, de-AT, de-CH, de-LI)
if (lang.startsWith('de-')) {
const countryCode = lang.split('-')[1]?.toLowerCase();
if (germanSpeakingCountries.includes(countryCode)) {
return 'de';
}
}
// Prüfe auch auf direkte Länderkennung (z.B. de_AT, de_CH)
if (lang.startsWith('de_')) {
const countryCode = lang.split('_')[1]?.toLowerCase();
if (germanSpeakingCountries.includes(countryCode)) {
return 'de';
}
}
}
// Fallback: Englisch für alle anderen Sprachen
return 'en';
} }
const vuetify = createVuetify({ const vuetify = createVuetify({

View File

@@ -10,7 +10,33 @@ const store = createStore({
isLoggedIn: localStorage.getItem('isLoggedIn') === 'true', isLoggedIn: localStorage.getItem('isLoggedIn') === 'true',
connectionStatus: 'disconnected', // 'connected', 'connecting', 'disconnected', 'error' connectionStatus: 'disconnected', // 'connected', 'connecting', 'disconnected', 'error'
user: JSON.parse(localStorage.getItem('user')) || null, user: JSON.parse(localStorage.getItem('user')) || null,
language: navigator.language.startsWith('de') ? 'de' : 'en', language: (() => {
// Verwende die gleiche Logik wie in main.js
const browserLanguage = navigator.language || navigator.languages[0];
const germanSpeakingCountries = ['de', 'at', 'ch', 'li'];
if (browserLanguage.startsWith('de')) {
return 'de';
}
const allLanguages = navigator.languages || [navigator.language];
for (const lang of allLanguages) {
if (lang.startsWith('de-')) {
const countryCode = lang.split('-')[1]?.toLowerCase();
if (germanSpeakingCountries.includes(countryCode)) {
return 'de';
}
}
if (lang.startsWith('de_')) {
const countryCode = lang.split('_')[1]?.toLowerCase();
if (germanSpeakingCountries.includes(countryCode)) {
return 'de';
}
}
}
return 'en';
})(),
menu: JSON.parse(localStorage.getItem('menu')) || [], menu: JSON.parse(localStorage.getItem('menu')) || [],
socket: null, socket: null,
daemonSocket: null, daemonSocket: null,
@@ -34,6 +60,34 @@ const store = createStore({
localStorage.removeItem('user'); localStorage.removeItem('user');
localStorage.removeItem('menu'); localStorage.removeItem('menu');
state.menuNeedsUpdate = false; state.menuNeedsUpdate = false;
// Setze die Sprache auf die Browser-Sprache zurück
const browserLanguage = navigator.language || navigator.languages[0];
const germanSpeakingCountries = ['de', 'at', 'ch', 'li'];
if (browserLanguage.startsWith('de')) {
state.language = 'de';
} else {
const allLanguages = navigator.languages || [navigator.language];
let isGerman = false;
for (const lang of allLanguages) {
if (lang.startsWith('de-')) {
const countryCode = lang.split('-')[1]?.toLowerCase();
if (germanSpeakingCountries.includes(countryCode)) {
isGerman = true;
break;
}
}
if (lang.startsWith('de_')) {
const countryCode = lang.split('_')[1]?.toLowerCase();
if (germanSpeakingCountries.includes(countryCode)) {
isGerman = true;
break;
}
}
}
state.language = isGerman ? 'de' : 'en';
}
}, },
setLanguage(state, language) { setLanguage(state, language) {
state.language = language; state.language = language;