63 lines
2.2 KiB
HTML
63 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Test Topology with Member Card Overlay</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<script src="./d3.v7.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Test Topology with Member Card Overlay</h1>
|
|
|
|
<div class="test-section">
|
|
<h2>Topology View with Clickable Nodes</h2>
|
|
<p>Click on any node in the topology to see the member card overlay.</p>
|
|
<button id="refresh-topology-btn">Refresh Topology</button>
|
|
</div>
|
|
|
|
<div id="topology-graph-container">
|
|
<div class="loading">
|
|
<div>Loading network topology...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="member-card-overlay" class="member-card-overlay"></div>
|
|
</div>
|
|
|
|
<script src="./demo-topology-data.js"></script>
|
|
<script src="./framework.js"></script>
|
|
<script src="./components.js"></script>
|
|
<script>
|
|
// Test the topology view with member card overlay
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('Setting up test topology with member card overlay...');
|
|
|
|
// Override the API client with demo data
|
|
window.apiClient = window.demoApiClient;
|
|
|
|
// Create topology view model
|
|
const topologyVM = new TopologyViewModel();
|
|
|
|
// Create the topology component
|
|
const topologyComponent = new TopologyGraphComponent(
|
|
document.getElementById('topology-graph-container'),
|
|
topologyVM,
|
|
new EventBus()
|
|
);
|
|
|
|
// Mount the component
|
|
topologyComponent.mount();
|
|
|
|
// Refresh button
|
|
const refreshBtn = document.getElementById('refresh-topology-btn');
|
|
refreshBtn.addEventListener('click', function() {
|
|
topologyVM.updateNetworkTopology();
|
|
});
|
|
|
|
console.log('Test topology setup complete');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |