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

- Eerste stap in het opnieuw laten werken van de chat client...

Browse Source
This commit is contained in:
Josako
2025-07-18 16:07:13 +02:00
parent f3a243698c
commit 11b1d548bd
20 changed files with 1201 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
eveai_chat_client/static/assets/js/components/LanguageSelector.js
View File

@@ -1,4 +1,3 @@
export const LanguageSelector = {
name: 'LanguageSelector',
props: {
@@ -6,6 +5,10 @@ export const LanguageSelector = {
type: String,
default: 'nl'
},
currentLanguage: {
type: String,
default: null
},
supportedLanguageDetails: {
type: Object,
default: () => ({})
@@ -13,22 +16,44 @@ export const LanguageSelector = {
allowedLanguages: {
type: Array,
default: () => ['nl', 'en', 'fr', 'de']
}
},
},
computed: {
availableLanguages() {
// Maak een array van taalobjecten op basis van de toegestane talen
// en de ondersteunde taaldetails
const languages = [];
data() {
const startLanguage = this.currentLanguage || this.initialLanguage;
return {
selectedLanguage: startLanguage,
internalCurrentLanguage: startLanguage
};
},
mounted() {
// console.log('🔍 [DEBUG] LanguageSelector mounted');
// console.log('🔍 [DEBUG] Props:', {
// initialLanguage: this.initialLanguage,
// currentLanguage: this.currentLanguage,
// supportedLanguageDetails: this.supportedLanguageDetails,
// allowedLanguages: this.allowedLanguages
// });
// Als er geen toegestane talen zijn of de lijst is leeg, gebruik een standaardlijst
const languagesToUse = (this.allowedLanguages && this.allowedLanguages.length > 0)
? this.allowedLanguages
// Render the component
this.renderComponent();
// Emit initial language
this.$emit('language-changed', this.selectedLanguage);
// DOM event
const event = new CustomEvent('vue:language-changed', {
detail: { language: this.selectedLanguage }
});
document.dispatchEvent(event);
},
methods: {
getAvailableLanguages() {
const languages = [];
const languagesToUse = (this.allowedLanguages && this.allowedLanguages.length > 0)
? this.allowedLanguages
: ['nl', 'en', 'fr', 'de'];
// Loop door alle ondersteunde taaldetails
if (this.supportedLanguageDetails && Object.keys(this.supportedLanguageDetails).length > 0) {
// Vind talen die overeenkomen met toegestane taalcodes
for (const [langName, langDetails] of Object.entries(this.supportedLanguageDetails)) {
const isoCode = langDetails['iso 639-1'];
if (languagesToUse.includes(isoCode)) {
@@ -40,7 +65,6 @@ export const LanguageSelector = {
}
}
} else {
// Fallback als er geen taaldetails beschikbaar zijn
const defaultLanguages = {
'nl': { name: 'Nederlands', flag: '🇳🇱' },
'en': { name: 'English', flag: '🇬🇧' },
@@ -52,67 +76,87 @@ export const LanguageSelector = {
if (defaultLanguages[code]) {
languages.push({
code: code,
name: defaultLanguages[code].code,
name: defaultLanguages[code].name,
flag: defaultLanguages[code].flag
});
}
});
}
console.log('LanguageSelector: availableLanguages computed:', languages);
return languages;
}
},
emits: ['language-changed'],
data() {
return {
selectedLanguage: this.initialLanguage,
currentLanguage: this.initialLanguage
};
},
mounted() {
console.log('LanguageSelector mounted with:', {
initialLanguage: this.initialLanguage,
selectedLanguage: this.selectedLanguage,
availableLanguages: this.availableLanguages
});
},
// Stuur het language-changed event uit met de initiële taal
console.log(`LanguageSelector: Emitting language-changed event for initial language ${this.initialLanguage}`);
this.$emit('language-changed', this.initialLanguage);
},
methods: {
changeLanguage(languageCode) {
console.log(`LanguageSelector: changeLanguage called with ${languageCode}, current: ${this.currentLanguage}`);
console.log(`LanguageSelector: changeLanguage called with ${languageCode}`);
if (this.currentLanguage !== languageCode) {
console.log(`LanguageSelector: Emitting language-changed event for ${languageCode}`);
this.currentLanguage = languageCode;
if (this.internalCurrentLanguage !== languageCode) {
this.internalCurrentLanguage = languageCode;
this.selectedLanguage = languageCode;
// Vue component emit
this.$emit('language-changed', languageCode);
} else {
console.log(`LanguageSelector: No change needed, already ${languageCode}`);
// DOM event
const event = new CustomEvent('vue:language-changed', {
detail: { language: languageCode }
});
document.dispatchEvent(event);
}
},
renderComponent() {
// We gaan direct de container manipuleren
const container = document.getElementById('language-selector-container');
if (!container) {
console.error('Container niet gevonden voor LanguageSelector');
return;
}
const availableLanguages = this.getAvailableLanguages();
// console.log('🔍 [DEBUG] Available languages:', availableLanguages);
const optionsHtml = availableLanguages.map(lang =>
`<option value="${lang.code}" ${lang.code === this.selectedLanguage ? 'selected' : ''}>${lang.flag} ${lang.name}</option>`
).join('');
container.innerHTML = `
<div class="language-selector">
<label for="language-select">Taal / Language:</label>
<div class="select-wrapper">
<select id="language-select" class="language-select">
${optionsHtml}
</select>
</div>
</div>
`;
// Add event listener
const selectElement = container.querySelector('#language-select');
if (selectElement) {
selectElement.addEventListener('change', (e) => {
this.changeLanguage(e.target.value);
});
}
// console.log('🔍 [DEBUG] Component rendered successfully');
}
}
},
// Stap 1: Ondersteun zowel template-based rendering als manual rendering
// Door beide methoden te ondersteunen, werkt het component in beide scenario's
template: `
<div class="language-selector">
<label for="language-select">Taal / Language:</label>
<div class="select-wrapper">
<select
id="language-select"
v-model="selectedLanguage"
@change="changeLanguage(selectedLanguage); currentLanguage = selectedLanguage"
class="language-select"
>
<option
v-for="lang in availableLanguages"
:key="lang.code"
:value="lang.code"
>
{{ lang.flag }} {{ lang.name }}
</option>
<select id="language-select" class="language-select" v-model="selectedLanguage" @change="changeLanguage(selectedLanguage)">
<option v-for="lang in getAvailableLanguages()" :key="lang.code" :value="lang.code">{{ lang.flag }} {{ lang.name }}</option>
</select>
</div>
</div>
`
`,
// Minimale render functie als fallback
render() {
return document.createElement('div');
}
};