diff --git a/client/debug.html b/client/debug.html new file mode 100644 index 0000000..f0536d3 --- /dev/null +++ b/client/debug.html @@ -0,0 +1,77 @@ + + + + + + SeReact Debug + + + +

SeReact Debug Page

+ +
+

Debug Controls

+ + + + +
+ +
+

Configuration

+
+
+
+ +
+
+
+
+ +
+
+ + +
+
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/client/js/app.js b/client/js/app.js index 3c80470..3124706 100644 --- a/client/js/app.js +++ b/client/js/app.js @@ -27,6 +27,9 @@ document.addEventListener('DOMContentLoaded', () => { // Initialize the application function initializeApp() { + // Initialize UI components + initializeUI(); + // Update navigation state based on configuration updateNavigationState(); @@ -175,8 +178,7 @@ function initializeRouting() { // Handle hash changes for deep linking window.addEventListener('hashchange', handleRouteChange); - // Handle initial route - handleRouteChange(); + // Don't handle initial route here - let initializeUI handle it } // Handle route changes @@ -184,15 +186,29 @@ function handleRouteChange() { const hash = window.location.hash.substring(1); const route = hash || 'home'; + console.log('=== handleRouteChange called ==='); + console.log('Current hash:', hash); + console.log('Route to show:', route); + console.log('Current app page:', app.currentPage); + // Validate route const validRoutes = ['home', 'config', 'images', 'search', 'teams', 'users', 'apiKeys']; if (validRoutes.includes(route)) { - showPage(route); + // Only call showPage if we're not already on this page + if (app.currentPage !== route) { + console.log('Route changed, calling showPage for:', route); + app.currentPage = route; + showPage(route); + } else { + console.log('Already on page:', route, '- not calling showPage'); + } } else { + console.log('Invalid route:', route, '- redirecting to home'); // Invalid route, redirect to home window.location.hash = 'home'; } + console.log('=== handleRouteChange completed ==='); } // Set up periodic health checks diff --git a/client/js/config.js b/client/js/config.js index 9aafb06..93f40b0 100644 --- a/client/js/config.js +++ b/client/js/config.js @@ -45,20 +45,37 @@ const config = new Config(); // Initialize configuration form function initializeConfigForm() { + console.log('initializeConfigForm called'); + const form = document.getElementById('configForm'); const apiBaseUrlInput = document.getElementById('apiBaseUrl'); const apiKeyInput = document.getElementById('apiKey'); + if (!form || !apiBaseUrlInput || !apiKeyInput) { + console.error('Config form elements not found:', { + form: !!form, + apiBaseUrlInput: !!apiBaseUrlInput, + apiKeyInput: !!apiKeyInput + }); + return; + } + + console.log('Config form elements found, initializing...'); + // Load current values apiBaseUrlInput.value = config.getApiBaseUrl(); apiKeyInput.value = config.getApiKey(); + // Remove any existing event listeners to prevent duplicates + const newForm = form.cloneNode(true); + form.parentNode.replaceChild(newForm, form); + // Handle form submission - form.addEventListener('submit', (e) => { + newForm.addEventListener('submit', (e) => { e.preventDefault(); - const newBaseUrl = apiBaseUrlInput.value.trim(); - const newApiKey = apiKeyInput.value.trim(); + const newBaseUrl = document.getElementById('apiBaseUrl').value.trim(); + const newApiKey = document.getElementById('apiKey').value.trim(); if (!newBaseUrl) { showAlert('API Base URL is required', 'danger'); @@ -75,6 +92,8 @@ function initializeConfigForm() { // Update navigation state updateNavigationState(); }); + + console.log('Config form initialized successfully'); } // Test API connection @@ -169,4 +188,19 @@ function updateNavigationState() { if (!isConfigured && window.location.hash !== '#config') { showAlert('Please configure your API settings first.', 'warning', true); } -} \ No newline at end of file +} + +// Test function for debugging config page +function testConfigPage() { + console.log('Testing config page...'); + console.log('Config page element:', document.getElementById('configPage')); + console.log('Config form element:', document.getElementById('configForm')); + console.log('API Base URL input:', document.getElementById('apiBaseUrl')); + console.log('API Key input:', document.getElementById('apiKey')); + + // Try to show config page + showPage('config'); +} + +// Make test function available globally +window.testConfigPage = testConfigPage; \ No newline at end of file diff --git a/client/js/ui.js b/client/js/ui.js index 19b6264..1521ed3 100644 --- a/client/js/ui.js +++ b/client/js/ui.js @@ -2,32 +2,56 @@ // Page navigation function showPage(pageId) { - console.log('showPage called with pageId:', pageId); - - // Hide all pages - const pages = document.querySelectorAll('.page'); - console.log('Found pages:', pages.length); - pages.forEach(page => { - page.style.display = 'none'; - }); + try { + console.log('=== showPage called with pageId:', pageId, '==='); + + // Hide all pages + const pages = document.querySelectorAll('.page'); + console.log('Found pages:', pages.length); + pages.forEach((page, index) => { + console.log(`Page ${index}: ${page.id}, currently visible: ${page.style.display !== 'none'}`); + page.style.display = 'none'; + }); - // Show the selected page - const targetPage = document.getElementById(pageId + 'Page'); - console.log('Target page element:', targetPage); - if (targetPage) { - targetPage.style.display = 'block'; + // Show the selected page + const targetPageId = pageId + 'Page'; + const targetPage = document.getElementById(targetPageId); + console.log('Looking for page with ID:', targetPageId); + console.log('Target page element:', targetPage); - // Update URL hash - window.location.hash = pageId; - - // Update navigation active state - updateNavActiveState(pageId); - - // Load page data if needed - console.log('Loading page data for:', pageId); - loadPageData(pageId); - } else { - console.error('Target page not found:', pageId + 'Page'); + if (targetPage) { + console.log('Setting target page display to block'); + targetPage.style.display = 'block'; + console.log('Target page is now visible:', targetPage.style.display === 'block'); + + // Update URL hash only if it's different to avoid loops + const currentHash = window.location.hash.substring(1); + if (currentHash !== pageId) { + console.log('Updating URL hash from', currentHash, 'to:', pageId); + window.location.hash = pageId; + } else { + console.log('Hash already correct, not updating'); + } + + // Update navigation active state + updateNavActiveState(pageId); + + // Update app state + if (window.SeReactApp) { + window.SeReactApp.currentPage = pageId; + } + + // Load page data if needed + console.log('About to load page data for:', pageId); + loadPageData(pageId); + console.log('=== showPage completed for:', pageId, '==='); + } else { + console.error('Target page not found:', targetPageId); + console.log('Available page IDs:', Array.from(document.querySelectorAll('.page')).map(p => p.id)); + } + } catch (error) { + console.error('Error in showPage:', error); + showAlert('Error loading page: ' + error.message, 'danger'); } } @@ -45,34 +69,43 @@ function updateNavActiveState(activePageId) { // Load page-specific data function loadPageData(pageId) { - console.log('loadPageData called with pageId:', pageId); - switch (pageId) { - case 'config': - console.log('Loading config page'); - initializeConfigForm(); - break; - case 'images': - console.log('Loading images page'); - loadImages(); - break; - case 'teams': - console.log('Loading teams page'); - loadTeams(); - break; - case 'users': - console.log('Loading users page'); - loadUsers(); - break; - case 'apiKeys': - console.log('Loading apiKeys page'); - loadApiKeys(); - break; - case 'search': - console.log('Loading search page'); - initializeSearchForm(); - break; - default: - console.log('No specific loader for page:', pageId); + console.log('=== loadPageData called with pageId:', pageId, '==='); + try { + switch (pageId) { + case 'config': + console.log('Loading config page - about to call initializeConfigForm'); + // Add a small delay to ensure the page is visible before initializing the form + setTimeout(() => { + console.log('Timeout fired, calling initializeConfigForm now'); + initializeConfigForm(); + }, 100); + break; + case 'images': + console.log('Loading images page'); + loadImages(); + break; + case 'teams': + console.log('Loading teams page'); + loadTeams(); + break; + case 'users': + console.log('Loading users page'); + loadUsers(); + break; + case 'apiKeys': + console.log('Loading apiKeys page'); + loadApiKeys(); + break; + case 'search': + console.log('Loading search page'); + initializeSearchForm(); + break; + default: + console.log('No specific loader for page:', pageId); + } + console.log('=== loadPageData completed for:', pageId, '==='); + } catch (error) { + console.error('Error in loadPageData:', error); } } @@ -272,17 +305,9 @@ function createImagePreview(file) { }); } -// Handle hash changes for navigation -window.addEventListener('hashchange', () => { - const hash = window.location.hash.substring(1); - if (hash) { - showPage(hash); - } -}); - -// Initialize page on load -document.addEventListener('DOMContentLoaded', () => { - console.log('UI.js DOMContentLoaded fired'); +// Initialize UI components (called from app.js) +function initializeUI() { + console.log('UI initialization called from app.js'); // Initialize tooltips and popovers initializeTooltips(); @@ -295,8 +320,14 @@ document.addEventListener('DOMContentLoaded', () => { const hash = window.location.hash.substring(1); const initialPage = hash || 'home'; console.log('Initial page:', initialPage); + + // Set initial app state + if (window.SeReactApp) { + window.SeReactApp.currentPage = initialPage; + } + showPage(initialPage); -}); +} // Test function for debugging function testPageNavigation() {