feature/framework (#1)

Reviewed-on: #1
2025-08-28 10:21:14 +02:00
parent e23b40e0cb
commit 6c58e479af
26 changed files with 7056 additions and 1361 deletions
--- a/public/debug.html
+++ b/public/debug.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Debug Framework</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 20px; }
+        .debug-section { margin: 20px 0; padding: 20px; border: 1px solid #ccc; }
+        .log { background: #f5f5f5; padding: 10px; margin: 10px 0; font-family: monospace; }
+    </style>
+</head>
+<body>
+    <h1>Framework Debug</h1>
+    
+    <div class="debug-section">
+        <h2>Console Log</h2>
+        <div id="console-log" class="log"></div>
+        <button onclick="clearLog()">Clear Log</button>
+    </div>
+    
+    <div class="debug-section">
+        <h2>Test Cluster View</h2>
+        <div id="cluster-view">
+            <div class="cluster-section">
+                <div class="cluster-header">
+                    <div class="cluster-header-left">
+                        <div class="primary-node-info">
+                            <span class="primary-node-label">Primary Node:</span>
+                            <span class="primary-node-ip" id="primary-node-ip">Discovering...</span>
+                            <button class="primary-node-refresh" title="🎲 Select random primary node">
+                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
+                                    <path d="M1 4v6h6M23 20v-6h-6"/>
+                                    <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                    <button class="refresh-btn">Refresh</button>
+                </div>
+                <div id="cluster-members-container">
+                    <div class="loading">Loading cluster members...</div>
+                </div>
+            </div>
+        </div>
+        <button onclick="testClusterView()">Test Cluster View</button>
+    </div>
+
+    <script src="framework.js"></script>
+    <script src="api-client.js"></script>
+    <script src="view-models.js"></script>
+    <script src="components.js"></script>
+    
+    <script>
+        // Override console.log to capture output
+        const originalLog = console.log;
+        const originalError = console.error;
+        const logElement = document.getElementById('console-log');
+        
+        function addToLog(message, type = 'log') {
+            const timestamp = new Date().toLocaleTimeString();
+            const logEntry = document.createElement('div');
+            logEntry.style.color = type === 'error' ? 'red' : 'black';
+            logEntry.textContent = `[${timestamp}] ${message}`;
+            logElement.appendChild(logEntry);
+            logElement.scrollTop = logElement.scrollHeight;
+        }
+        
+        console.log = function(...args) {
+            originalLog.apply(console, args);
+            addToLog(args.join(' '));
+        };
+        
+        console.error = function(...args) {
+            originalError.apply(console, args);
+            addToLog(args.join(' '), 'error');
+        };
+        
+        function clearLog() {
+            logElement.innerHTML = '';
+        }
+        
+        // Test cluster view
+        function testClusterView() {
+            try {
+                console.log('Testing cluster view...');
+                
+                // Create view model
+                const clusterVM = new ClusterViewModel();
+                console.log('ClusterViewModel created:', clusterVM);
+                
+                // Create component
+                const container = document.getElementById('cluster-view');
+                const clusterComponent = new ClusterViewComponent(container, clusterVM, null);
+                console.log('ClusterViewComponent created:', clusterComponent);
+                
+                // Mount component
+                clusterComponent.mount();
+                console.log('Component mounted');
+                
+                // Test data loading
+                console.log('Testing data loading...');
+                clusterVM.updateClusterMembers();
+                
+            } catch (error) {
+                console.error('Error testing cluster view:', error);
+            }
+        }
+        
+        // Initialize framework
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('DOM loaded, initializing framework...');
+            
+            if (window.app) {
+                console.log('Framework app found:', window.app);
+                window.app.init();
+                console.log('Framework initialized');
+            } else {
+                console.error('Framework app not found');
+            }
+        });
+    </script>
+</body>
+</html>