johnpccd/image_management_api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cp

Browse Source
This commit is contained in:
johnpccd 2025-05-24 15:47:40 +02:00
parent 3208307eaa
commit 73c1ae4c58
4 changed files with 229 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
client/debug.html Normal file
View File

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SeReact Debug</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
button { margin: 5px; padding: 10px; }
.page { display: none; padding: 20px; border: 1px solid #ccc; margin: 10px; }
.debug { background: #f0f0f0; padding: 10px; margin: 10px; }
</style>
</head>
<body>
<h1>SeReact Debug Page</h1>
<div class="debug">
<h3>Debug Controls</h3>
<button onclick="testConfigPage()">Test Config Page</button>
<button onclick="testPageNavigation()">Test Navigation</button>
<button onclick="showPage('config')">Show Config</button>
<button onclick="console.log('Config object:', config)">Log Config</button>
</div>
<div id="configPage" class="page">
<h2>Configuration</h2>
<form id="configForm">
<div>
<label for="apiBaseUrl">API Base URL:</label><br>
<input type="url" id="apiBaseUrl" placeholder="http://localhost:8000" style="width: 300px;">
</div>
<br>
<div>
<label for="apiKey">API Key:</label><br>
<input type="password" id="apiKey" placeholder="Enter your API key" style="width: 300px;">
</div>
<br>
<button type="submit">Save Configuration</button>
<button type="button" onclick="testConnection()">Test Connection</button>
</form>
</div>
<div id="alertContainer"></div>
<script>
// Mock functions for testing
function showAlert(message, type) {
const alertDiv = document.createElement('div');
alertDiv.style.padding = '10px';
alertDiv.style.margin = '10px';
alertDiv.style.border = '1px solid';
alertDiv.style.backgroundColor = type === 'success' ? '#d4edda' : type === 'danger' ? '#f8d7da' : '#fff3cd';
alertDiv.textContent = `${type.toUpperCase()}: ${message}`;
document.getElementById('alertContainer').appendChild(alertDiv);
setTimeout(() => alertDiv.remove(), 5000);
}
function updateNavigationState() {
console.log('updateNavigationState called');
}
</script>
<script src="js/config.js"></script>
<script src="js/ui.js"></script>
<script>
// Initialize after scripts load
document.addEventListener('DOMContentLoaded', () => {
console.log('Debug page loaded');
console.log('Config object:', config);
// Test showing config page
showPage('config');
});
</script>
</body>
</html>

20
client/js/app.js
View File

@ -27,6 +27,9 @@ document.addEventListener('DOMContentLoaded', () => {
// Initialize the application // Initialize the application
function initializeApp() { function initializeApp() {
// Initialize UI components
initializeUI();
// Update navigation state based on configuration // Update navigation state based on configuration
updateNavigationState(); updateNavigationState();
@ -175,8 +178,7 @@ function initializeRouting() {
// Handle hash changes for deep linking // Handle hash changes for deep linking
window.addEventListener('hashchange', handleRouteChange); window.addEventListener('hashchange', handleRouteChange);
// Handle initial route // Don't handle initial route here - let initializeUI handle it
handleRouteChange();
} }
// Handle route changes // Handle route changes
@ -184,15 +186,29 @@ function handleRouteChange() {
const hash = window.location.hash.substring(1); const hash = window.location.hash.substring(1);
const route = hash || 'home'; 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 // Validate route
const validRoutes = ['home', 'config', 'images', 'search', 'teams', 'users', 'apiKeys']; const validRoutes = ['home', 'config', 'images', 'search', 'teams', 'users', 'apiKeys'];
if (validRoutes.includes(route)) { if (validRoutes.includes(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); showPage(route);
} else { } else {
console.log('Already on page:', route, '- not calling showPage');
}
} else {
console.log('Invalid route:', route, '- redirecting to home');
// Invalid route, redirect to home // Invalid route, redirect to home
window.location.hash = 'home'; window.location.hash = 'home';
} }
console.log('=== handleRouteChange completed ===');
} }
// Set up periodic health checks // Set up periodic health checks

40
client/js/config.js
View File

@ -45,20 +45,37 @@ const config = new Config();
// Initialize configuration form // Initialize configuration form
function initializeConfigForm() { function initializeConfigForm() {
console.log('initializeConfigForm called');
const form = document.getElementById('configForm'); const form = document.getElementById('configForm');
const apiBaseUrlInput = document.getElementById('apiBaseUrl'); const apiBaseUrlInput = document.getElementById('apiBaseUrl');
const apiKeyInput = document.getElementById('apiKey'); 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 // Load current values
apiBaseUrlInput.value = config.getApiBaseUrl(); apiBaseUrlInput.value = config.getApiBaseUrl();
apiKeyInput.value = config.getApiKey(); 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 // Handle form submission
form.addEventListener('submit', (e) => { newForm.addEventListener('submit', (e) => {
e.preventDefault(); e.preventDefault();
const newBaseUrl = apiBaseUrlInput.value.trim(); const newBaseUrl = document.getElementById('apiBaseUrl').value.trim();
const newApiKey = apiKeyInput.value.trim(); const newApiKey = document.getElementById('apiKey').value.trim();
if (!newBaseUrl) { if (!newBaseUrl) {
showAlert('API Base URL is required', 'danger'); showAlert('API Base URL is required', 'danger');
@ -75,6 +92,8 @@ function initializeConfigForm() {
// Update navigation state // Update navigation state
updateNavigationState(); updateNavigationState();
}); });
console.log('Config form initialized successfully');
} }
// Test API connection // Test API connection
@ -170,3 +189,18 @@ function updateNavigationState() {
showAlert('Please configure your API settings first.', 'warning', true); showAlert('Please configure your API settings first.', 'warning', true);
} }
} }
// 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;

75
client/js/ui.js
View File

@ -2,32 +2,56 @@
// Page navigation // Page navigation
function showPage(pageId) { function showPage(pageId) {
console.log('showPage called with pageId:', pageId); try {
console.log('=== showPage called with pageId:', pageId, '===');
// Hide all pages // Hide all pages
const pages = document.querySelectorAll('.page'); const pages = document.querySelectorAll('.page');
console.log('Found pages:', pages.length); console.log('Found pages:', pages.length);
pages.forEach(page => { pages.forEach((page, index) => {
console.log(`Page ${index}: ${page.id}, currently visible: ${page.style.display !== 'none'}`);
page.style.display = 'none'; page.style.display = 'none';
}); });
// Show the selected page // Show the selected page
const targetPage = document.getElementById(pageId + 'Page'); const targetPageId = pageId + 'Page';
const targetPage = document.getElementById(targetPageId);
console.log('Looking for page with ID:', targetPageId);
console.log('Target page element:', targetPage); console.log('Target page element:', targetPage);
if (targetPage) {
targetPage.style.display = 'block';
// Update URL hash 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; window.location.hash = pageId;
} else {
console.log('Hash already correct, not updating');
}
// Update navigation active state // Update navigation active state
updateNavActiveState(pageId); updateNavActiveState(pageId);
// Update app state
if (window.SeReactApp) {
window.SeReactApp.currentPage = pageId;
}
// Load page data if needed // Load page data if needed
console.log('Loading page data for:', pageId); console.log('About to load page data for:', pageId);
loadPageData(pageId); loadPageData(pageId);
console.log('=== showPage completed for:', pageId, '===');
} else { } else {
console.error('Target page not found:', pageId + 'Page'); 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,11 +69,16 @@ function updateNavActiveState(activePageId) {
// Load page-specific data // Load page-specific data
function loadPageData(pageId) { function loadPageData(pageId) {
console.log('loadPageData called with pageId:', pageId); console.log('=== loadPageData called with pageId:', pageId, '===');
try {
switch (pageId) { switch (pageId) {
case 'config': case 'config':
console.log('Loading config page'); 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(); initializeConfigForm();
}, 100);
break; break;
case 'images': case 'images':
console.log('Loading images page'); console.log('Loading images page');
@ -74,6 +103,10 @@ function loadPageData(pageId) {
default: default:
console.log('No specific loader for page:', pageId); console.log('No specific loader for page:', pageId);
} }
console.log('=== loadPageData completed for:', pageId, '===');
} catch (error) {
console.error('Error in loadPageData:', error);
}
} }
// Alert system // Alert system
@ -272,17 +305,9 @@ function createImagePreview(file) {
}); });
} }
// Handle hash changes for navigation // Initialize UI components (called from app.js)
window.addEventListener('hashchange', () => { function initializeUI() {
const hash = window.location.hash.substring(1); console.log('UI initialization called from app.js');
if (hash) {
showPage(hash);
}
});
// Initialize page on load
document.addEventListener('DOMContentLoaded', () => {
console.log('UI.js DOMContentLoaded fired');
// Initialize tooltips and popovers // Initialize tooltips and popovers
initializeTooltips(); initializeTooltips();
@ -295,8 +320,14 @@ document.addEventListener('DOMContentLoaded', () => {
const hash = window.location.hash.substring(1); const hash = window.location.hash.substring(1);
const initialPage = hash || 'home'; const initialPage = hash || 'home';
console.log('Initial page:', initialPage); console.log('Initial page:', initialPage);
// Set initial app state
if (window.SeReactApp) {
window.SeReactApp.currentPage = initialPage;
}
showPage(initialPage); showPage(initialPage);
}); }
// Test function for debugging // Test function for debugging
function testPageNavigation() { function testPageNavigation() {