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

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

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

@@ -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');