feat: add member details overlay to topology

2025-08-30 15:18:50 +02:00
parent f28b4f8797
commit 7bac42c58e
4 changed files with 537 additions and 1 deletions
--- a/public/test-member-overlay.html
+++ b/public/test-member-overlay.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Test Member Card Overlay</title>
+    <link rel="stylesheet" href="styles.css">
+    <script src="./d3.v7.min.js"></script>
+</head>
+<body>
+    <div class="container">
+        <h1>Test Member Card Overlay</h1>
+        
+        <div class="test-section">
+            <h2>Test Data</h2>
+            <button id="test-overlay-btn">Show Test Member Overlay</button>
+        </div>
+        
+        <div id="member-card-overlay" class="member-card-overlay"></div>
+    </div>
+
+    <script src="./framework.js"></script>
+    <script src="./components.js"></script>
+    <script>
+        // Test the member card overlay
+        document.addEventListener('DOMContentLoaded', function() {
+            const testBtn = document.getElementById('test-overlay-btn');
+            const overlayContainer = document.getElementById('member-card-overlay');
+            
+            // Create test view model and event bus
+            const testVM = new ViewModel();
+            const testEventBus = new EventBus();
+            
+            // Create the overlay component
+            const overlayComponent = new MemberCardOverlayComponent(overlayContainer, testVM, testEventBus);
+            overlayComponent.mount();
+            
+            // Test data
+            const testMember = {
+                ip: '192.168.1.100',
+                hostname: 'test-node-01',
+                status: 'active',
+                latency: 15,
+                labels: {
+                    'environment': 'production',
+                    'region': 'us-west',
+                    'role': 'worker'
+                }
+            };
+            
+            // Show overlay on button click
+            testBtn.addEventListener('click', function() {
+                overlayComponent.show(testMember);
+            });
+        });
+    </script>
+</body>
+</html>