iot/spore-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add mock mode

Browse Source
This commit is contained in:
0x1d
2025-09-17 22:22:11 +02:00
parent bfe973afe6
commit 1062691e7b
15 changed files with 1964 additions and 456 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
test/mock-ui.html Normal file
View File

@@ -0,0 +1,181 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SPORE UI - Mock Mode</title>
<!-- Include all the same styles as the main UI -->
<link rel="stylesheet" href="/styles/main.css">
<link rel="stylesheet" href="/styles/theme.css">
<!-- Include D3.js for topology visualization -->
<script src="/vendor/d3.v7.min.js"></script>
<!-- Include framework and components in correct order -->
<script src="/scripts/constants.js"></script>
<script src="/scripts/framework.js"></script>
<script src="/test/mock-api-client.js"></script>
<script src="/scripts/view-models.js"></script>
<script src="/scripts/components/DrawerComponent.js"></script>
<script src="/scripts/components/PrimaryNodeComponent.js"></script>
<script src="/scripts/components/NodeDetailsComponent.js"></script>
<script src="/scripts/components/ClusterMembersComponent.js"></script>
<script src="/scripts/components/FirmwareComponent.js"></script>
<script src="/scripts/components/FirmwareViewComponent.js"></script>
<script src="/scripts/components/ClusterViewComponent.js"></script>
<script src="/scripts/components/ClusterStatusComponent.js"></script>
<script src="/scripts/components/TopologyGraphComponent.js"></script>
<script src="/scripts/components/ComponentsLoader.js"></script>
<script src="/scripts/theme-manager.js"></script>
<script src="/scripts/app.js"></script>
</head>
<body>
<div class="container">
<div class="main-navigation">
<button class="burger-btn" id="burger-btn" aria-label="Menu" title="Menu">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 6h18M3 12h18M3 18h18" />
</svg>
</button>
<div class="nav-left">
<button class="nav-tab active" data-view="cluster">🌐 Cluster</button>
<button class="nav-tab" data-view="topology">🔗 Topology</button>
<button class="nav-tab" data-view="firmware">📦 Firmware</button>
</div>
<div class="nav-right">
<div class="theme-switcher">
<button class="theme-toggle" id="theme-toggle" title="Toggle theme">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="5"/>
<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
</svg>
</button>
</div>
<div class="cluster-status">🚀 Cluster Online</div>
</div>
</div>
<div id="cluster-view" class="view-content active">
<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" id="select-random-primary-btn"
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>
<div class="cluster-header-right">
<button class="refresh-btn" id="refresh-cluster-btn" title="Refresh cluster data">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16"
height="16">
<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
<path d="M21 3v5h-5" />
<path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
<path d="M3 21v-5h5" />
</svg>
</button>
</div>
</div>
<div class="cluster-members" id="cluster-members-container">
<!-- Cluster members will be rendered here -->
</div>
</div>
</div>
<div id="topology-view" class="view-content">
<div class="topology-section">
<div class="topology-graph" id="topology-graph-container">
<!-- Topology graph will be rendered here -->
</div>
</div>
</div>
<div id="firmware-view" class="view-content">
<div class="firmware-section">
<div class="firmware-header">
<h2>Firmware Management</h2>
<button class="refresh-btn" id="refresh-firmware-btn" title="Refresh firmware">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16"
height="16">
<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
<path d="M21 3v5h-5" />
<path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
<path d="M3 21v-5h5" />
</svg>
</button>
</div>
<div class="firmware-content" id="firmware-container">
<!-- Firmware content will be rendered here -->
</div>
</div>
</div>
</div>
<script>
// Mock server status indicator
document.addEventListener('DOMContentLoaded', function() {
const mockStatus = document.getElementById('mock-status');
const mockInfoBtn = document.getElementById('mock-info-btn');
mockInfoBtn.addEventListener('click', function() {
alert('🎭 Mock\n\n' +
'This UI is connected to the mock server on port 3002.\n' +
'All data is simulated and updates automatically.\n\n' +
'To switch to real server:\n' +
'1. Start real server: npm start\n' +
'2. Open: http://localhost:3001\n\n' +
'To change mock configuration:\n' +
'npm run mock:degraded\n' +
'npm run mock:large\n' +
'npm run mock:unstable');
});
});
</script>
<style>
.mock-status {
position: fixed;
top: 20px;
right: 20px;
background: rgba(255, 193, 7, 0.9);
color: #000;
padding: 10px 15px;
border-radius: 25px;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
z-index: 1000;
font-size: 14px;
font-weight: 500;
}
.mock-status-content {
display: flex;
align-items: center;
gap: 8px;
}
.mock-status-icon {
font-size: 16px;
}
.mock-status-text {
white-space: nowrap;
}
.btn-sm {
padding: 4px 8px;
font-size: 12px;
border-radius: 12px;
}
</style>
</body>
</html>