- introductie van vue files - bijna werkende versie van eveai_chat_client.

eveai_chat_client/static/assets/js/components/LanguageSelector.js

@@ -26,16 +26,13 @@ export const LanguageSelector = {
         };
     },
     mounted() {
-        // console.log('🔍 [DEBUG] LanguageSelector mounted');
-        // console.log('🔍 [DEBUG] Props:', {
-        //     initialLanguage: this.initialLanguage,
-        //     currentLanguage: this.currentLanguage,
-        //     supportedLanguageDetails: this.supportedLanguageDetails,
-        //     allowedLanguages: this.allowedLanguages
-        // });
-
-        // Render the component
-        this.renderComponent();
+        console.log('🔍 [DEBUG] LanguageSelector mounted with Vue template');
+        console.log('🔍 [DEBUG] Props:', {
+            initialLanguage: this.initialLanguage,
+            currentLanguage: this.currentLanguage,
+            supportedLanguageDetails: this.supportedLanguageDetails,
+            allowedLanguages: this.allowedLanguages
+        });
 
         // Emit initial language
         this.$emit('language-changed', this.selectedLanguage);
@@ -102,48 +99,9 @@ export const LanguageSelector = {
                 });
                 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>
@@ -153,10 +111,5 @@ export const LanguageSelector = {
                 </select>
             </div>
         </div>
-    `,
-
-    // Minimale render functie als fallback
-    render() {
-        return document.createElement('div');
-    }
+    `
 };