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

- Full implementation of tab bar next to logo in mobile client

Browse Source 
- Customisation option in Tenant Make
- Splitting all controls in the newly created tabs
This commit is contained in:
Josako
2025-11-27 11:32:46 +01:00
parent d68dfde52a
commit 14273b8a70
11 changed files with 524 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
nginx/frontend_src/js/chat-client.js
View File

@@ -30,7 +30,6 @@ import LanguageSelector from '../../../eveai_chat_client/static/assets/vue-compo
import ChatApp from '../../../eveai_chat_client/static/assets/vue-components/ChatApp.vue';
import ChatRoot from '../../../eveai_chat_client/static/assets/vue-components/ChatRoot.vue';
import SideBar from '../../../eveai_chat_client/static/assets/vue-components/SideBar.vue';
import MobileHeader from '../../../eveai_chat_client/static/assets/vue-components/MobileHeader.vue';
// VueUse-setup voor de chatclient (maakt composables beschikbaar via window.VueUse)
import './vueuse-setup.js';
@@ -51,9 +50,6 @@ document.addEventListener('DOMContentLoaded', function() {
// Initialiseer sidebar (vervangt fillSidebarExplanation en initializeLanguageSelector)
initializeSidebar();
// Initialiseer mobile header
initializeMobileHeader();
// Initialiseer chat app (simpel)
initializeChatApp();
});
@@ -121,85 +117,8 @@ function initializeSidebar() {
}
}
/**
* Initialiseert de mobile header component
*/
function initializeMobileHeader() {
const container = document.getElementById('mobile-header-container');
if (!container) {
console.error('#mobile-header-container niet gevonden');
return;
}
try {
// Maak props voor de component
const props = {
tenantMake: {
name: window.chatConfig.tenantMake?.name || '',
logo_url: window.chatConfig.tenantMake?.logo_url || '',
subtitle: window.chatConfig.tenantMake?.subtitle || ''
},
initialLanguage: window.chatConfig.language || 'nl',
supportedLanguageDetails: window.chatConfig.supportedLanguageDetails || {},
allowedLanguages: window.chatConfig.allowedLanguages || ['nl', 'en', 'fr', 'de'],
apiPrefix: window.chatConfig.apiPrefix || ''
};
// Mount de component
const app = createApp(MobileHeader, props);
// Create and provide LanguageProvider for mobile header components
const initialLanguage = window.chatConfig?.language || 'nl';
const apiPrefix = window.chatConfig?.apiPrefix || '';
const languageProvider = createLanguageProvider(initialLanguage, apiPrefix);
app.provide(LANGUAGE_PROVIDER_KEY, languageProvider);
// Error handler
app.config.errorHandler = (err, vm, info) => {
console.error('🚨 [Vue Error in MobileHeader]', err);
console.error('Component:', vm);
console.error('Error Info:', info);
};
const mountedApp = app.mount(container);
// Dynamisch de headerhoogte doorgeven aan CSS
const updateHeaderHeightVar = () => {
const isMobile = window.matchMedia('(max-width: 768px)').matches;
if (!isMobile) {
document.documentElement.style.removeProperty('--mobile-header-height');
return;
}
const h = container.offsetHeight || 60; // fallback
document.documentElement.style.setProperty('--mobile-header-height', `${h}px`);
};
// Initieel instellen en bij gebeurtenissen herberekenen
requestAnimationFrame(updateHeaderHeightVar);
window.addEventListener('resize', updateHeaderHeightVar);
// Listen to language change events and update the mobile header's language provider
const languageChangeHandler = (event) => {
if (event.detail && event.detail.language) {
console.log('MobileHeader: Received language change event:', event.detail.language);
languageProvider.setLanguage(event.detail.language);
// taalwissel kan headerhoogte veranderen
requestAnimationFrame(updateHeaderHeightVar);
}
};
document.addEventListener('language-changed', languageChangeHandler);
// Store the handler for cleanup if needed
mountedApp._languageChangeHandler = languageChangeHandler;
mountedApp._updateHeaderHeightVar = updateHeaderHeightVar;
console.log('✅ MobileHeader component successfully mounted with LanguageProvider en dynamische headerhoogte');
return mountedApp;
} catch (error) {
console.error('🚨 [CRITICAL ERROR] Bij initialiseren mobile header:', error);
}
}
// initializeMobileHeader is verwijderd; de mobiele header wordt nu volledig
// binnen ChatApp.vue beheerd.
/**
* Initialiseert de chat app (Vue component)