From a0f806ba4eff0a0d540035ad9dcefbddbe8c1423 Mon Sep 17 00:00:00 2001 From: Josako Date: Tue, 22 Jul 2025 12:27:04 +0200 Subject: [PATCH] - Translation of ProgressTracker.vue constants OK --- .../assets/js/services/LanguageProvider.js | 86 +++++++++++++------ .../vue-components/LanguageSelector.vue | 17 +++- .../assets/vue-components/ProgressTracker.vue | 29 +------ 3 files changed, 78 insertions(+), 54 deletions(-) diff --git a/eveai_chat_client/static/assets/js/services/LanguageProvider.js b/eveai_chat_client/static/assets/js/services/LanguageProvider.js index ba11e79..a243216 100644 --- a/eveai_chat_client/static/assets/js/services/LanguageProvider.js +++ b/eveai_chat_client/static/assets/js/services/LanguageProvider.js @@ -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 }; } diff --git a/eveai_chat_client/static/assets/vue-components/LanguageSelector.vue b/eveai_chat_client/static/assets/vue-components/LanguageSelector.vue index 477b01b..a2d5ba7 100644 --- a/eveai_chat_client/static/assets/vue-components/LanguageSelector.vue +++ b/eveai_chat_client/static/assets/vue-components/LanguageSelector.vue @@ -26,11 +26,12 @@ import { useLanguageProvider } from '../js/services/LanguageProvider.js'; export default { name: 'LanguageSelector', setup() { - // Optionally use provider for reactive current language + // Use provider for reactive current language and setLanguage method try { const provider = useLanguageProvider(); return { - providerLanguage: provider.currentLanguage + providerLanguage: provider.currentLanguage, + providerSetLanguage: provider.setLanguage }; } catch { // Provider not available, use props @@ -125,10 +126,18 @@ export default { this.internalCurrentLanguage = 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); - // DOM event + // DOM event (for backward compatibility) const event = new CustomEvent('language-changed', { detail: { language: languageCode } }); diff --git a/eveai_chat_client/static/assets/vue-components/ProgressTracker.vue b/eveai_chat_client/static/assets/vue-components/ProgressTracker.vue index 8f82a59..5188b3e 100644 --- a/eveai_chat_client/static/assets/vue-components/ProgressTracker.vue +++ b/eveai_chat_client/static/assets/vue-components/ProgressTracker.vue @@ -119,40 +119,17 @@ export default { } }, created() { - // Create named handler for language changes - this.languageChangeHandler = (event) => { - if (event.detail && event.detail.language) { - 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); + // LanguageProvider system handles translation automatically + // No need for manual DOM event listeners when using useComponentTranslations + console.log('ProgressTracker: Using LanguageProvider system for translations'); }, mounted() { this.connectToProgressStream(); }, beforeUnmount() { this.disconnectEventSource(); - - // Remove language change event listener - if (this.languageChangeHandler) { - document.removeEventListener('language-changed', this.languageChangeHandler); - } }, 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() { if (!this.taskId) { console.error('Geen task ID beschikbaar voor progress tracking');