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/simple-test.html
+++ b/public/simple-test.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simple Framework Test</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 20px; }
+        .test-section { margin: 20px 0; padding: 20px; border: 1px solid #ccc; }
+        .success { color: green; }
+        .error { color: red; }
+        button { margin: 5px; padding: 10px; }
+    </style>
+</head>
+<body>
+    <h1>Simple Framework Test</h1>
+    
+    <div class="test-section">
+        <h2>API Test</h2>
+        <button onclick="testAPI()">Test API Connection</button>
+        <div id="api-result"></div>
+    </div>
+    
+    <div class="test-section">
+        <h2>Framework Test</h2>
+        <button onclick="testFramework()">Test Framework</button>
+        <div id="framework-result"></div>
+    </div>
+
+    <script src="framework.js"></script>
+    <script src="api-client.js"></script>
+    <script src="view-models.js"></script>
+    
+    <script>
+        async function testAPI() {
+            const resultDiv = document.getElementById('api-result');
+            resultDiv.innerHTML = 'Testing...';
+            
+            try {
+                // Test cluster members API
+                const members = await window.apiClient.getClusterMembers();
+                console.log('Members:', members);
+                
+                // Test discovery API
+                const discovery = await window.apiClient.getDiscoveryInfo();
+                console.log('Discovery:', discovery);
+                
+                resultDiv.innerHTML = `
+                    <div class="success">
+                        ✅ API Test Successful!<br>
+                        Cluster Members: ${members.members?.length || 0}<br>
+                        Primary Node: ${discovery.primaryNode || 'None'}<br>
+                        Total Nodes: ${discovery.totalNodes || 0}
+                    </div>
+                `;
+            } catch (error) {
+                console.error('API test failed:', error);
+                resultDiv.innerHTML = `<div class="error">❌ API Test Failed: ${error.message}</div>`;
+            }
+        }
+        
+        function testFramework() {
+            const resultDiv = document.getElementById('framework-result');
+            resultDiv.innerHTML = 'Testing...';
+            
+            try {
+                // Test framework classes
+                if (typeof EventBus !== 'undefined' && 
+                    typeof ViewModel !== 'undefined' && 
+                    typeof Component !== 'undefined') {
+                    
+                    // Create a simple view model
+                    const vm = new ViewModel();
+                    vm.set('test', 'Hello World');
+                    
+                    if (vm.get('test') === 'Hello World') {
+                        resultDiv.innerHTML = `
+                            <div class="success">
+                                ✅ Framework Test Successful!<br>
+                                EventBus: ${typeof EventBus}<br>
+                                ViewModel: ${typeof ViewModel}<br>
+                                Component: ${typeof Component}<br>
+                                ViewModel test: ${vm.get('test')}
+                            </div>
+                        `;
+                    } else {
+                        throw new Error('ViewModel get/set not working');
+                    }
+                } else {
+                    throw new Error('Framework classes not found');
+                }
+            } catch (error) {
+                console.error('Framework test failed:', error);
+                resultDiv.innerHTML = `<div class="error">❌ Framework Test Failed: ${error.message}</div>`;
+            }
+        }
+        
+        // Initialize when page loads
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('Page loaded, framework ready');
+        });
+    </script>
+</body>
+</html>