feat: implement framework and refactor everything

2025-08-26 20:35:15 +02:00
parent e23b40e0cb
commit 918c019dd5
23 changed files with 6291 additions and 1279 deletions
--- a/public/app.js
+++ b/public/app.js
@@ -0,0 +1,99 @@
+// Main SPORE UI Application
+
+// Initialize the application when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('=== SPORE UI Application Initialization ===');
+    
+    // Initialize the framework (but don't navigate yet)
+    console.log('App: Creating framework instance...');
+    const app = window.app;
+    
+    // Create view models
+    console.log('App: Creating view models...');
+    const clusterViewModel = new ClusterViewModel();
+    const firmwareViewModel = new FirmwareViewModel();
+    console.log('App: View models created:', { clusterViewModel, firmwareViewModel });
+    
+    // Connect firmware view model to cluster data
+    clusterViewModel.subscribe('members', (members) => {
+        console.log('App: Members subscription triggered:', members);
+        if (members && members.length > 0) {
+            // Extract node information for firmware view
+            const nodes = members.map(member => ({
+                ip: member.ip,
+                hostname: member.hostname || member.ip
+            }));
+            firmwareViewModel.updateAvailableNodes(nodes);
+            console.log('App: Updated firmware view model with nodes:', nodes);
+        } else {
+            firmwareViewModel.updateAvailableNodes([]);
+            console.log('App: Cleared firmware view model nodes');
+        }
+    });
+    
+    // Register routes with their view models
+    console.log('App: Registering routes...');
+    app.registerRoute('cluster', ClusterViewComponent, 'cluster-view', clusterViewModel);
+    app.registerRoute('firmware', FirmwareViewComponent, 'firmware-view', firmwareViewModel);
+    console.log('App: Routes registered and components pre-initialized');
+    
+    // Set up navigation event listeners
+    console.log('App: Setting up navigation...');
+    app.setupNavigation();
+    
+    // Set up periodic updates for cluster view with state preservation
+    // setupPeriodicUpdates(); // Disabled automatic refresh
+    
+    // Now navigate to the default route
+    console.log('App: Navigating to default route...');
+    app.navigateTo('cluster');
+    
+    console.log('=== SPORE UI Application initialization completed ===');
+});
+
+// Set up periodic updates with state preservation
+function setupPeriodicUpdates() {
+    // Auto-refresh cluster members every 30 seconds using smart update
+    setInterval(() => {
+        if (window.app.currentView && window.app.currentView.viewModel) {
+            const viewModel = window.app.currentView.viewModel;
+            
+            // Use smart update if available, otherwise fall back to regular update
+            if (viewModel.smartUpdate && typeof viewModel.smartUpdate === 'function') {
+                console.log('App: Performing smart update to preserve UI state...');
+                viewModel.smartUpdate();
+            } else if (viewModel.updateClusterMembers && typeof viewModel.updateClusterMembers === 'function') {
+                console.log('App: Performing regular update...');
+                viewModel.updateClusterMembers();
+            }
+        }
+    }, 30000);
+    
+    // Update primary node display every 10 seconds (this is lightweight and doesn't affect UI state)
+    setInterval(() => {
+        if (window.app.currentView && window.app.currentView.viewModel) {
+            const viewModel = window.app.currentView.viewModel;
+            if (viewModel.updatePrimaryNodeDisplay && typeof viewModel.updatePrimaryNodeDisplay === 'function') {
+                viewModel.updatePrimaryNodeDisplay();
+            }
+        }
+    }, 10000);
+}
+
+// Global error handler
+window.addEventListener('error', function(event) {
+    console.error('Global error:', event.error);
+});
+
+// Global unhandled promise rejection handler
+window.addEventListener('unhandledrejection', function(event) {
+    console.error('Unhandled promise rejection:', event.reason);
+});
+
+// Clean up on page unload
+window.addEventListener('beforeunload', function() {
+    if (window.app) {
+        console.log('App: Cleaning up cached components...');
+        window.app.cleanup();
+    }
+});