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 // LanguageProvider.js - Central language management system
import { ref, reactive, computed, provide, inject } from 'vue'; import { ref, reactive, computed, provide, inject } from 'vue';
import { useConstantsTranslation } from '../composables/useTranslation.js'; import { useConstantsTranslation } from '../composables/useTranslation.js';
@@ -14,19 +15,19 @@ export function createLanguageProvider(initialLanguage = 'en', apiPrefix = '') {
const currentLanguage = ref(initialLanguage); const currentLanguage = ref(initialLanguage);
const isTranslating = ref(false); const isTranslating = ref(false);
const translationError = ref(null); const translationError = ref(null);
// Translation composable // Translation composable
const { translateConstants, getCachedTranslations, clearCache } = useConstantsTranslation(); const { translateConstants, getCachedTranslations, clearCache } = useConstantsTranslation();
// Component-specific translations cache // Component-specific translations cache
const componentTranslations = reactive({}); const componentTranslations = reactive({});
/** /**
* Register a component for translations with component-specific caching * Register a component for translations with component-specific caching
*/ */
const registerComponent = (componentName, originalTexts) => { const registerComponent = (componentName, originalTexts) => {
console.log(`LanguageProvider: Registering component ${componentName} with language ${currentLanguage.value}`); console.log(`LanguageProvider: Registering component ${componentName} with language ${currentLanguage.value}`);
if (!componentTranslations[componentName]) { if (!componentTranslations[componentName]) {
componentTranslations[componentName] = reactive({ componentTranslations[componentName] = reactive({
original: originalTexts, original: originalTexts,
@@ -34,17 +35,17 @@ export function createLanguageProvider(initialLanguage = 'en', apiPrefix = '') {
isLoading: false, isLoading: false,
error: null error: null
}); });
// Force initial translation if current language is not English // Force initial translation if current language is not English
if (currentLanguage.value !== 'en') { if (currentLanguage.value !== 'en') {
console.log(`LanguageProvider: Component ${componentName} needs initial translation to ${currentLanguage.value}`); console.log(`LanguageProvider: Component ${componentName} needs initial translation to ${currentLanguage.value}`);
translateComponentTexts(componentName, currentLanguage.value); translateComponentTexts(componentName, currentLanguage.value);
} }
} }
return componentTranslations[componentName]; return componentTranslations[componentName];
}; };
/** /**
* Translate texts for a specific component * 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`); console.warn(`LanguageProvider: Component ${componentName} not found for translation`);
return; return;
} }
component.isLoading = true; component.isLoading = true;
component.error = null; component.error = null;
try { try {
if (targetLanguage === 'en') { if (targetLanguage === 'en') {
// For English, use original texts (no translation needed) // For English, use original texts (no translation needed)
@@ -67,11 +68,11 @@ export function createLanguageProvider(initialLanguage = 'en', apiPrefix = '') {
// For other languages, translate from English // For other languages, translate from English
console.log(`LanguageProvider: Translating ${componentName} from English to ${targetLanguage}`); console.log(`LanguageProvider: Translating ${componentName} from English to ${targetLanguage}`);
const translatedTexts = await translateConstants( const translatedTexts = await translateConstants(
component.original, component.original,
targetLanguage, targetLanguage,
{ {
context: componentName, context: componentName,
apiPrefix apiPrefix
} }
); );
component.translated = translatedTexts; component.translated = translatedTexts;
@@ -86,7 +87,7 @@ export function createLanguageProvider(initialLanguage = 'en', apiPrefix = '') {
component.isLoading = false; component.isLoading = false;
} }
}; };
/** /**
* Update language for all registered components * Update language for all registered components
*/ */
@@ -94,18 +95,18 @@ export function createLanguageProvider(initialLanguage = 'en', apiPrefix = '') {
if (currentLanguage.value === newLanguage) { if (currentLanguage.value === newLanguage) {
return; return;
} }
console.log('LanguageProvider: Setting language to', newLanguage); console.log('LanguageProvider: Setting language to', newLanguage);
currentLanguage.value = newLanguage; currentLanguage.value = newLanguage;
isTranslating.value = true; isTranslating.value = true;
translationError.value = null; translationError.value = null;
try { try {
// Update all registered components // Update all registered components
const translationPromises = Object.keys(componentTranslations).map(componentName => const translationPromises = Object.keys(componentTranslations).map(componentName =>
translateComponentTexts(componentName, newLanguage) translateComponentTexts(componentName, newLanguage)
); );
await Promise.all(translationPromises); await Promise.all(translationPromises);
console.log(`LanguageProvider: Successfully updated all components to ${newLanguage}`); console.log(`LanguageProvider: Successfully updated all components to ${newLanguage}`);
} catch (error) { } catch (error) {
@@ -115,14 +116,14 @@ export function createLanguageProvider(initialLanguage = 'en', apiPrefix = '') {
isTranslating.value = false; isTranslating.value = false;
} }
}; };
/** /**
* Get translations voor een specifieke component * Get translations voor een specifieke component
*/ */
const getComponentTranslations = (componentName) => { const getComponentTranslations = (componentName) => {
return componentTranslations[componentName] || null; return componentTranslations[componentName] || null;
}; };
/** /**
* Clear alle caches * Clear alle caches
*/ */
@@ -132,21 +133,58 @@ export function createLanguageProvider(initialLanguage = 'en', apiPrefix = '') {
delete componentTranslations[key]; 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 { return {
// State // State
currentLanguage: computed(() => currentLanguage.value), currentLanguage: computed(() => currentLanguage.value),
isTranslating: computed(() => isTranslating.value), isTranslating: computed(() => isTranslating.value),
translationError: computed(() => translationError.value), translationError: computed(() => translationError.value),
// Methods // Methods
registerComponent, registerComponent,
setLanguage, setLanguage,
getComponentTranslations, getComponentTranslations,
clearAllCaches, clearAllCaches,
// Computed // Computed
componentTranslations: computed(() => componentTranslations) componentTranslations: computed(() => componentTranslations),
// Cleanup method
cleanup: cleanupDOMListeners
}; };
} }

17
eveai_chat_client/static/assets/vue-components/LanguageSelector.vue
View File

@@ -26,11 +26,12 @@ import { useLanguageProvider } from '../js/services/LanguageProvider.js';
export default { export default {
name: 'LanguageSelector', name: 'LanguageSelector',
setup() { setup() {
// Optionally use provider for reactive current language // Use provider for reactive current language and setLanguage method
try { try {
const provider = useLanguageProvider(); const provider = useLanguageProvider();
return { return {
providerLanguage: provider.currentLanguage providerLanguage: provider.currentLanguage,
providerSetLanguage: provider.setLanguage
}; };
} catch { } catch {
// Provider not available, use props // Provider not available, use props
@@ -125,10 +126,18 @@ export default {
this.internalCurrentLanguage = languageCode; this.internalCurrentLanguage = languageCode;
this.selectedLanguage = languageCode; this.selectedLanguage = languageCode;
// Vue component emit // Call LanguageProvider setLanguage method to trigger proper translation
if (this.providerSetLanguage) {
console.log(`LanguageSelector: Calling LanguageProvider.setLanguage(${languageCode})`);
this.providerSetLanguage(languageCode);
} else {
console.warn('LanguageSelector: LanguageProvider not available, using fallback DOM events only');
}
// Vue component emit (for backward compatibility)
this.$emit('language-changed', languageCode); this.$emit('language-changed', languageCode);
// DOM event // DOM event (for backward compatibility)
const event = new CustomEvent('language-changed', { const event = new CustomEvent('language-changed', {
detail: { language: languageCode } detail: { language: languageCode }
}); });

29
eveai_chat_client/static/assets/vue-components/ProgressTracker.vue
View File

@@ -119,40 +119,17 @@ export default {
} }
}, },
created() { created() {
// Create named handler for language changes // LanguageProvider system handles translation automatically
this.languageChangeHandler = (event) => { // No need for manual DOM event listeners when using useComponentTranslations
if (event.detail && event.detail.language) { console.log('ProgressTracker: Using LanguageProvider system for translations');
console.log('ProgressTracker: Received language change event:', event.detail.language);
// The LanguageProvider will automatically handle the translation update
// We just need to ensure the component is aware of the change
this.handleLanguageChange(event);
}
};
// Listen for language changes
document.addEventListener('language-changed', this.languageChangeHandler);
}, },
mounted() { mounted() {
this.connectToProgressStream(); this.connectToProgressStream();
}, },
beforeUnmount() { beforeUnmount() {
this.disconnectEventSource(); this.disconnectEventSource();
// Remove language change event listener
if (this.languageChangeHandler) {
document.removeEventListener('language-changed', this.languageChangeHandler);
}
}, },
methods: { methods: {
handleLanguageChange(event) {
if (event.detail && event.detail.language) {
console.log(`ProgressTracker: Language changed to ${event.detail.language}`);
// The LanguageProvider automatically updates translations through reactive system
// Force component update to ensure UI reflects the new translations
this.$forceUpdate();
}
},
connectToProgressStream() { connectToProgressStream() {
if (!this.taskId) { if (!this.taskId) {
console.error('Geen task ID beschikbaar voor progress tracking'); console.error('Geen task ID beschikbaar voor progress tracking');