- Translation of ProgressTracker.vue constants OK

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';
@@ -133,6 +134,40 @@ export function createLanguageProvider(initialLanguage = 'en', apiPrefix = '') {
         });
     };
 
+    // === 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),
@@ -146,7 +181,10 @@ export function createLanguageProvider(initialLanguage = 'en', apiPrefix = '') {
         clearAllCaches,
 
         // Computed
-        componentTranslations: computed(() => componentTranslations)
+        componentTranslations: computed(() => componentTranslations),
+
+        // Cleanup method
+        cleanup: cleanupDOMListeners
     };
 }
 

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 }
                 });

eveai_chat_client/static/assets/vue-components/ProgressTracker.vue

@@ -119,40 +119,17 @@ export default {
         }
     },
     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() {
         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');