StillHammer
29bc112c0c
- Simplified loadPersistedVocabularyData() to use only VocabularyProgressManager - Updated calculateVocabularyProgress() to use unified data structure - Removed old system references from knowledge panel data loading - Fixed field names (drsDiscovered, drsMastered) for unified system - Knowledge panel now displays vocabulary progress correctly ✅ TESTED: Vocabulary Knowledge panel working with unified system 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
341 lines
10 KiB
HTML
341 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Settings/Debug Test - Class Generator 2.0</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
color: #333;
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.header h1 {
|
|
margin: 0 0 10px 0;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.header p {
|
|
margin: 0;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.controls {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
margin-bottom: 30px;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.controls h3 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.control-group {
|
|
display: flex;
|
|
gap: 15px;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.btn {
|
|
background: #3b82f6;
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 20px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn:hover {
|
|
background: #2563eb;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
|
|
}
|
|
|
|
.btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.btn.secondary {
|
|
background: #10b981;
|
|
}
|
|
|
|
.btn.secondary:hover {
|
|
background: #059669;
|
|
}
|
|
|
|
.btn.danger {
|
|
background: #ef4444;
|
|
}
|
|
|
|
.btn.danger:hover {
|
|
background: #dc2626;
|
|
}
|
|
|
|
#main-content {
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
min-height: 400px;
|
|
}
|
|
|
|
.status {
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.status-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 5px 0;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
|
|
.status-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.status-label {
|
|
font-weight: 500;
|
|
color: #495057;
|
|
}
|
|
|
|
.status-value {
|
|
color: #28a745;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.status-value.error {
|
|
color: #dc3545;
|
|
}
|
|
|
|
.status-value.warning {
|
|
color: #ffc107;
|
|
}
|
|
|
|
.footer {
|
|
text-align: center;
|
|
margin-top: 30px;
|
|
color: white;
|
|
opacity: 0.8;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>🔧 Settings/Debug Test Page</h1>
|
|
<p>Class Generator 2.0 - Ultra-Modular System</p>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<h3>🎛️ Test Controls</h3>
|
|
|
|
<div class="control-group">
|
|
<button class="btn" onclick="navigateToSettings()">
|
|
🔧 Navigate to Settings
|
|
</button>
|
|
<button class="btn secondary" onclick="testDirectShow()">
|
|
📱 Show Settings Direct
|
|
</button>
|
|
<button class="btn" onclick="testSystemStatus()">
|
|
⚙️ Test System Status
|
|
</button>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<button class="btn" onclick="testEventBus()">
|
|
📡 Test EventBus
|
|
</button>
|
|
<button class="btn secondary" onclick="testModuleLoader()">
|
|
📦 Test ModuleLoader
|
|
</button>
|
|
<button class="btn danger" onclick="clearAll()">
|
|
🗑️ Clear All
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status" id="status-panel">
|
|
<h3>📊 System Status</h3>
|
|
<div class="status-item">
|
|
<span class="status-label">Application:</span>
|
|
<span class="status-value" id="app-status">Loading...</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Settings Module:</span>
|
|
<span class="status-value" id="settings-module-status">Not Loaded</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Router:</span>
|
|
<span class="status-value" id="router-status">Not Ready</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Current Route:</span>
|
|
<span class="status-value" id="current-route">None</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main content container where Settings will render -->
|
|
<div id="main-content"></div>
|
|
|
|
<div class="footer">
|
|
<p>Open browser console (F12) to see detailed logs</p>
|
|
</div>
|
|
|
|
<!-- Load the modular system -->
|
|
<script type="module">
|
|
import app from './src/Application.js';
|
|
|
|
// Global access for debugging
|
|
window.app = app;
|
|
|
|
// Test functions
|
|
window.navigateToSettings = function() {
|
|
try {
|
|
console.log('🔧 Navigating to settings...');
|
|
const router = app.getCore()?.router;
|
|
if (router) {
|
|
router.navigate('/settings');
|
|
updateStatus();
|
|
} else {
|
|
console.error('❌ Router not available');
|
|
}
|
|
} catch (error) {
|
|
console.error('❌ Navigation error:', error);
|
|
}
|
|
};
|
|
|
|
window.testDirectShow = function() {
|
|
try {
|
|
console.log('📱 Testing direct settings show...');
|
|
const settingsModule = app.getModule('settingsDebug');
|
|
const container = document.getElementById('main-content');
|
|
|
|
if (settingsModule && container) {
|
|
settingsModule.show(container);
|
|
updateStatus();
|
|
} else {
|
|
console.error('❌ Settings module or container not available');
|
|
}
|
|
} catch (error) {
|
|
console.error('❌ Direct show error:', error);
|
|
}
|
|
};
|
|
|
|
window.testSystemStatus = function() {
|
|
console.log('⚙️ Testing system status...');
|
|
const status = app.getStatus();
|
|
console.table(status);
|
|
updateStatus();
|
|
};
|
|
|
|
window.testEventBus = function() {
|
|
try {
|
|
console.log('📡 Testing EventBus...');
|
|
const eventBus = app.getCore()?.eventBus;
|
|
if (eventBus) {
|
|
eventBus.emit('test:event', { message: 'Hello from test!' }, 'TestPage');
|
|
console.log('✅ EventBus test completed');
|
|
} else {
|
|
console.error('❌ EventBus not available');
|
|
}
|
|
updateStatus();
|
|
} catch (error) {
|
|
console.error('❌ EventBus test error:', error);
|
|
}
|
|
};
|
|
|
|
window.testModuleLoader = function() {
|
|
try {
|
|
console.log('📦 Testing ModuleLoader...');
|
|
const moduleLoader = app.getCore()?.moduleLoader;
|
|
if (moduleLoader) {
|
|
const status = moduleLoader.getStatus();
|
|
console.log('Loaded modules:', status.loaded);
|
|
console.log('Failed modules:', status.failed);
|
|
} else {
|
|
console.error('❌ ModuleLoader not available');
|
|
}
|
|
updateStatus();
|
|
} catch (error) {
|
|
console.error('❌ ModuleLoader test error:', error);
|
|
}
|
|
};
|
|
|
|
window.clearAll = function() {
|
|
console.log('🗑️ Clearing all...');
|
|
document.getElementById('main-content').innerHTML = '';
|
|
updateStatus();
|
|
};
|
|
|
|
// Update status display
|
|
function updateStatus() {
|
|
try {
|
|
const status = app.getStatus();
|
|
|
|
// Application status
|
|
document.getElementById('app-status').textContent =
|
|
status.isRunning ? 'Running ✅' : 'Stopped ❌';
|
|
|
|
// Settings module status
|
|
const settingsModule = app.getModule('settingsDebug');
|
|
document.getElementById('settings-module-status').textContent =
|
|
settingsModule ? 'Loaded ✅' : 'Not Loaded ❌';
|
|
|
|
// Router status
|
|
const router = app.getCore()?.router;
|
|
document.getElementById('router-status').textContent =
|
|
router ? 'Ready ✅' : 'Not Ready ❌';
|
|
|
|
// Current route
|
|
const currentRoute = router?.getCurrentRoute();
|
|
document.getElementById('current-route').textContent =
|
|
currentRoute?.path || window.location.pathname || 'None';
|
|
|
|
} catch (error) {
|
|
console.error('❌ Status update error:', error);
|
|
}
|
|
}
|
|
|
|
// Set up periodic status updates
|
|
setInterval(updateStatus, 2000);
|
|
|
|
// Initial status update when app is ready
|
|
app.getCore().eventBus.on('app:ready', () => {
|
|
console.log('🚀 Application ready! Running initial status update...');
|
|
setTimeout(updateStatus, 500);
|
|
}, 'TestPage');
|
|
|
|
// Listen for route changes
|
|
app.getCore().eventBus.on('router:route-changed', (event) => {
|
|
console.log('🛣️ Route changed:', event.data);
|
|
updateStatus();
|
|
}, 'TestPage');
|
|
|
|
// Initial update
|
|
setTimeout(updateStatus, 1000);
|
|
|
|
console.log('🧪 Test page loaded successfully!');
|
|
console.log('Available functions: navigateToSettings(), testDirectShow(), testSystemStatus()');
|
|
</script>
|
|
</body>
|
|
</html> |