pieter/eveAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Translation of ProgressTracker.vue constants OK

Browse Source
This commit is contained in:
Josako
2025-07-22 12:27:04 +02:00
parent 98db88b00b
commit a0f806ba4e
3 changed files with 78 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
eveai_chat_client/static/assets/js/services/LanguageProvider.js
View File

@@ -1,3 +1,4 @@
// LanguageProvider.js - Central language management system
import { ref, reactive, computed, provide, inject } from 'vue';
import { useConstantsTranslation } from '../composables/useTranslation.js';
@@ -14,19 +15,19 @@ export function createLanguageProvider(initialLanguage = 'en', apiPrefix = '') {
const currentLanguage = ref(initialLanguage);
const isTranslating = ref(false);
const translationError = ref(null);
// Translation composable
const { translateConstants, getCachedTranslations, clearCache } = useConstantsTranslation();
// Component-specific translations cache
const componentTranslations = reactive({});
/**
* Register a component for translations with component-specific caching
*/
const registerComponent = (componentName, originalTexts) => {
console.log(`LanguageProvider: Registering component ${componentName} with language ${currentLanguage.value}`);
if (!componentTranslations[componentName]) {
componentTranslations[componentName] = reactive({
original: originalTexts,
@@ -34,17 +35,17 @@ export function createLanguageProvider(initialLanguage = 'en', apiPrefix = '') {
isLoading: false,
error: null
});
// Force initial translation if current language is not English
if (currentLanguage.value !== 'en') {
console.log(`LanguageProvider: Component ${componentName} needs initial translation to ${currentLanguage.value}`);
translateComponentTexts(componentName, currentLanguage.value);
}
}
return componentTranslations[componentName];
};
/**
* Translate texts for a specific component
*/
@@ -54,10 +55,10 @@ export function createLanguageProvider(initialLanguage = 'en', apiPrefix = '') {
console.warn(`LanguageProvider: Component ${componentName} not found for translation`);
return;
}
component.isLoading = true;
component.error = null;
try {
if (targetLanguage === 'en') {
// For English, use original texts (no translation needed)
@@ -67,11 +68,11 @@ export function createLanguageProvider(initialLanguage = 'en', apiPrefix = '') {
// For other languages, translate from English
console.log(`LanguageProvider: Translating ${componentName} from English to ${targetLanguage}`);
const translatedTexts = await translateConstants(
component.original,
targetLanguage,
{
component.original,
targetLanguage,
{
context: componentName,
apiPrefix
apiPrefix
}
);
component.translated = translatedTexts;
@@ -86,7 +87,7 @@ export function createLanguageProvider(initialLanguage = 'en', apiPrefix = '') {
component.isLoading = false;
}
};
/**
* Update language for all registered components
*/
@@ -94,18 +95,18 @@ export function createLanguageProvider(initialLanguage = 'en', apiPrefix = '') {
if (currentLanguage.value === newLanguage) {
return;
}
console.log('LanguageProvider: Setting language to', newLanguage);
currentLanguage.value = newLanguage;
isTranslating.value = true;
translationError.value = null;
try {
// Update all registered components
const translationPromises = Object.keys(componentTranslations).map(componentName =>
const translationPromises = Object.keys(componentTranslations).map(componentName =>
translateComponentTexts(componentName, newLanguage)
);
await Promise.all(translationPromises);
console.log(`LanguageProvider: Successfully updated all components to ${newLanguage}`);
} catch (error) {
@@ -115,14 +116,14 @@ export function createLanguageProvider(initialLanguage = 'en', apiPrefix = '') {
isTranslating.value = false;
}
};
/**
* Get translations voor een specifieke component
*/
const getComponentTranslations = (componentName) => {
return componentTranslations[componentName] || null;
};
/**
* Clear alle caches
*/
@@ -132,21 +133,58 @@ export function createLanguageProvider(initialLanguage = 'en', apiPrefix = '') {
delete componentTranslations[key];
});
};
// === NIEUWE TOEVOEGING: DOM Event Integration ===
/**
* Setup DOM event listeners for backwards compatibility
*/
const setupDOMEventListeners = () => {
if (typeof document !== 'undefined') {
const handleLanguageChangeEvent = (event) => {
const newLanguage = event.detail?.language || event.detail;
console.log(`LanguageProvider: Received DOM language change event: ${newLanguage}`);
if (newLanguage && currentLanguage.value !== newLanguage) {
console.log(`LanguageProvider: Triggering setLanguage(${newLanguage}) from DOM event`);
setLanguage(newLanguage);
}
};
// Luister naar DOM language change events
document.addEventListener('language-changed', handleLanguageChangeEvent);
console.log('LanguageProvider: DOM event listener registered for language-changed events');
// Return cleanup function
return () => {
document.removeEventListener('language-changed', handleLanguageChangeEvent);
console.log('LanguageProvider: DOM event listener cleanup completed');
};
}
return () => {}; // No-op cleanup for non-browser environments
};
// Setup DOM event listeners immediately
const cleanupDOMListeners = setupDOMEventListeners();
return {
// State
currentLanguage: computed(() => currentLanguage.value),
isTranslating: computed(() => isTranslating.value),
translationError: computed(() => translationError.value),
// Methods
registerComponent,
setLanguage,
getComponentTranslations,
clearAllCaches,
// Computed
componentTranslations: computed(() => componentTranslations)
componentTranslations: computed(() => componentTranslations),
// Cleanup method
cleanup: cleanupDOMListeners
};
}