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>

22
client/js/app.js
View File

@ -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

40
client/js/config.js
View File

@ -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
@ -170,3 +189,18 @@ function updateNavigationState() {
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;

153
client/js/ui.js
View File

@ -2,32 +2,56 @@
// Page navigation
function showPage(pageId) {
console.log('showPage called with pageId:', pageId);
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 => {
page.style.display = 'none';
});
// 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;
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 navigation active state
updateNavActiveState(pageId);
// 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');
}
// Load page data if needed
console.log('Loading page data for:', pageId);
loadPageData(pageId);
} else {
console.error('Target page not found:', pageId + 'Page');
// 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() {