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

feat: update mock

Browse Source
This commit is contained in:
0x1d
2025-09-20 13:38:51 +02:00
parent 22adf7d65f
commit cde3861c84
6 changed files with 96 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -14,6 +14,8 @@ Zero-configuration web interface for monitoring and managing SPORE embedded syst
![UI](./assets/cluster.png) ![UI](./assets/cluster.png)
### Topology ### Topology
![UI](./assets/topology.png) ![UI](./assets/topology.png)
### Monitoring
![UI](./assets/monitoring.png)
### Firmware ### Firmware
![UI](./assets/firmware.png) ![UI](./assets/firmware.png)

BIN
assets/cluster.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 390 KiB

After

Width:  |  Height:  |  Size: 371 KiB

BIN
assets/firmware.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 316 KiB

After

Width:  |  Height:  |  Size: 310 KiB

BIN
assets/monitoring.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 433 KiB

BIN
assets/topology.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 395 KiB

After

Width:  |  Height:  |  Size: 399 KiB

96
test/mock-ui.html
View File

@@ -26,6 +26,7 @@
<script src="/scripts/components/ClusterViewComponent.js"></script> <script src="/scripts/components/ClusterViewComponent.js"></script>
<script src="/scripts/components/ClusterStatusComponent.js"></script> <script src="/scripts/components/ClusterStatusComponent.js"></script>
<script src="/scripts/components/TopologyGraphComponent.js"></script> <script src="/scripts/components/TopologyGraphComponent.js"></script>
<script src="/scripts/components/MonitoringViewComponent.js"></script>
<script src="/scripts/components/ComponentsLoader.js"></script> <script src="/scripts/components/ComponentsLoader.js"></script>
<script src="/scripts/theme-manager.js"></script> <script src="/scripts/theme-manager.js"></script>
<script src="/scripts/app.js"></script> <script src="/scripts/app.js"></script>
@@ -41,6 +42,7 @@
<div class="nav-left"> <div class="nav-left">
<button class="nav-tab active" data-view="cluster">🌐 Cluster</button> <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="topology">🔗 Topology</button>
<button class="nav-tab" data-view="monitoring">📡 Monitoring</button>
<button class="nav-tab" data-view="firmware">📦 Firmware</button> <button class="nav-tab" data-view="firmware">📦 Firmware</button>
</div> </div>
<div class="nav-right"> <div class="nav-right">
@@ -114,12 +116,102 @@
</button> </button>
</div> </div>
<div class="firmware-content" id="firmware-container"> <div class="firmware-content" id="firmware-container">
<!-- Firmware content will be rendered here --> <div class="firmware-overview">
<div class="firmware-actions">
<div class="action-group">
<h3>🚀 Firmware Update</h3>
<div class="firmware-upload-compact">
<div class="compact-upload-row">
<div class="file-upload-area">
<div class="target-options">
<label class="target-option">
<input type="radio" name="target-type" value="all" checked>
<span class="radio-custom"></span>
<span class="target-label">All Nodes</span>
</label>
<label class="target-option specific-node-option">
<input type="radio" name="target-type" value="specific">
<span class="radio-custom"></span>
<span class="target-label">Specific Node</span>
<select id="specific-node-select" class="node-select">
<option value="">Select a node...</option>
</select>
</label>
<label class="target-option by-label-option">
<input type="radio" name="target-type" value="labels">
<span class="radio-custom"></span>
<span class="target-label">By Label</span>
<select id="label-select" class="label-select"
style="min-width: 220px; display: inline-block; vertical-align: middle;">
<option value="">Select a label...</option>
</select>
<div id="selected-labels-container" class="selected-labels"></div>
</label>
</div>
<div class="file-input-wrapper">
<input type="file" id="global-firmware-file" accept=".bin,.hex"
style="display: none;">
<button class="upload-btn-compact"
onclick="document.getElementById('global-firmware-file').click()">
📁 Choose File
</button>
<span class="file-info" id="file-info">No file selected</span>
</div>
</div>
<button class="deploy-btn" id="deploy-btn" disabled>🚀 Deploy</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="firmware-nodes-list" id="firmware-nodes-list">
<!-- Nodes will be populated here -->
</div>
</div>
</div>
</div>
<div id="monitoring-view" class="view-content">
<div class="monitoring-view-section">
<div class="monitoring-header">
<h2>📡 Monitoring</h2>
<button class="refresh-btn" id="refresh-monitoring-btn">
<svg class="refresh-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<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>
Refresh
</button>
</div>
<div class="monitoring-content">
<div class="cluster-summary" id="cluster-summary">
<div class="loading">
<div>Loading cluster resource summary...</div>
</div>
</div>
<div class="nodes-monitoring" id="nodes-monitoring">
<div class="loading">
<div>Loading node resource data...</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Mock status indicator -->
<div class="mock-status" id="mock-status">
<div class="mock-status-content">
<span class="mock-status-icon">🎭</span>
<span class="mock-status-text">Mock Mode</span>
<button class="btn-sm" id="mock-info-btn">Info</button>
</div>
</div>
<script> <script>
// Mock server status indicator // Mock server status indicator
@@ -145,7 +237,7 @@
<style> <style>
.mock-status { .mock-status {
position: fixed; position: fixed;
top: 20px; bottom: 20px;
right: 20px; right: 20px;
background: rgba(255, 193, 7, 0.9); background: rgba(255, 193, 7, 0.9);
color: #000; color: #000;