feat: add fw tab

public/index.html

@@ -13,6 +13,12 @@
             <div class="status">🚀 Cluster Online</div>
         </div>
         
+        <div class="main-navigation">
+            <button class="nav-tab active" data-view="cluster">🌐 Cluster Members</button>
+            <button class="nav-tab" data-view="firmware">📦 Firmware Management</button>
+        </div>
+        
+        <div id="cluster-view" class="view-content active">
             <div class="cluster-section">
                 <div class="cluster-header">
                     <div class="cluster-title">🌐 Cluster Members</div>
@@ -29,6 +35,69 @@
             </div>
         </div>
         
+        <div id="firmware-view" class="view-content">
+            <div class="firmware-section">
+                <div class="firmware-header">
+                    <div class="firmware-title">📦 Firmware Management</div>
+                    <button class="refresh-btn" onclick="refreshFirmwareView()">
+                        🔄 Refresh
+                    </button>
+                </div>
+                
+                <div id="firmware-container">
+                    <div class="firmware-overview">
+                        <div class="firmware-stats">
+                            <div class="stat-card">
+                                <div class="stat-title">Total Nodes</div>
+                                <div class="stat-value" id="total-nodes">-</div>
+                            </div>
+                            <div class="stat-card">
+                                <div class="stat-title">Available Updates</div>
+                                <div class="stat-value" id="available-updates">-</div>
+                            </div>
+                            <div class="stat-card">
+                                <div class="stat-title">Last Update</div>
+                                <div class="stat-value" id="last-update">-</div>
+                            </div>
+                        </div>
+                        
+                        <div class="firmware-actions">
+                            <div class="action-group">
+                                <h3>📁 Upload New Firmware</h3>
+                                <div class="upload-area-large">
+                                    <input type="file" id="global-firmware-file" accept=".bin,.hex" style="display: none;">
+                                    <button class="upload-btn-large" onclick="document.getElementById('global-firmware-file').click()">
+                                        📁 Choose Firmware File
+                                    </button>
+                                    <div class="upload-info-large">Select a .bin or .hex file to upload to all nodes</div>
+                                </div>
+                            </div>
+                            
+                            <div class="action-group">
+                                <h3>🎯 Target Selection</h3>
+                                <div class="target-selection">
+                                    <label>
+                                        <input type="radio" name="target-type" value="all" checked> All Nodes
+                                    </label>
+                                    <label>
+                                        <input type="radio" name="target-type" value="specific"> Specific Node
+                                    </label>
+                                    <select id="specific-node-select" style="display: none;">
+                                        <option value="">Select a node...</option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="firmware-nodes-list" id="firmware-nodes-list">
+                        <!-- Nodes will be populated here -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <script src="script.js"></script>
 </body>
 </html> 

public/script.js

@@ -529,8 +529,157 @@ function displayClusterMembers(members, expandedCards = new Map()) {
 // Load cluster members when page loads
 document.addEventListener('DOMContentLoaded', function() {
     refreshClusterMembers();
+    setupNavigation();
+    setupFirmwareView();
 });
 
 // Auto-refresh every 30 seconds
 // FIXME not working properly: scroll position is not preserved, if there is an upload happening, this mus also be handled
 //setInterval(refreshClusterMembers, 30000);
+
+// Setup navigation menu
+function setupNavigation() {
+    const navTabs = document.querySelectorAll('.nav-tab');
+    const viewContents = document.querySelectorAll('.view-content');
+    
+    navTabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+            const targetView = tab.dataset.view;
+            
+            // Update active tab
+            navTabs.forEach(t => t.classList.remove('active'));
+            tab.classList.add('active');
+            
+            // Update active view
+            viewContents.forEach(view => view.classList.remove('active'));
+            const targetViewElement = document.getElementById(`${targetView}-view`);
+            if (targetViewElement) {
+                targetViewElement.classList.add('active');
+            }
+            
+            // Refresh the active view
+            if (targetView === 'cluster') {
+                refreshClusterMembers();
+            } else if (targetView === 'firmware') {
+                refreshFirmwareView();
+            }
+        });
+    });
+}
+
+// Setup firmware view
+function setupFirmwareView() {
+    // Setup global firmware file input
+    const globalFirmwareFile = document.getElementById('global-firmware-file');
+    if (globalFirmwareFile) {
+        globalFirmwareFile.addEventListener('change', handleGlobalFirmwareUpload);
+    }
+    
+    // Setup target selection
+    const targetRadios = document.querySelectorAll('input[name="target-type"]');
+    const specificNodeSelect = document.getElementById('specific-node-select');
+    
+    targetRadios.forEach(radio => {
+        radio.addEventListener('change', () => {
+            if (radio.value === 'specific') {
+                specificNodeSelect.style.display = 'block';
+                populateNodeSelect();
+            } else {
+                specificNodeSelect.style.display = 'none';
+            }
+        });
+    });
+}
+
+// Handle global firmware upload
+async function handleGlobalFirmwareUpload(event) {
+    const file = event.target.files[0];
+    if (!file) return;
+    
+    const targetType = document.querySelector('input[name="target-type"]:checked').value;
+    const specificNode = document.getElementById('specific-node-select').value;
+    
+    if (targetType === 'specific' && !specificNode) {
+        alert('Please select a specific node to update.');
+        return;
+    }
+    
+    try {
+        if (targetType === 'all') {
+            await uploadFirmwareToAllNodes(file);
+        } else {
+            await uploadFirmwareToSpecificNode(file, specificNode);
+        }
+    } catch (error) {
+        console.error('Global firmware upload failed:', error);
+        alert(`Upload failed: ${error.message}`);
+    }
+    
+    // Clear file input
+    event.target.value = '';
+}
+
+// Upload firmware to all nodes
+async function uploadFirmwareToAllNodes(file) {
+    const response = await client.getClusterMembers();
+    const nodes = response.members || [];
+    
+    if (nodes.length === 0) {
+        alert('No nodes available for firmware update.');
+        return;
+    }
+    
+    const confirmed = confirm(`Upload firmware to all ${nodes.length} nodes? This will update: ${nodes.map(n => n.hostname || n.ip).join(', ')}`);
+    if (!confirmed) return;
+    
+    // TODO: Implement batch upload logic
+    alert(`Firmware upload to all ${nodes.length} nodes initiated. This feature is coming soon!`);
+}
+
+// Upload firmware to specific node
+async function uploadFirmwareToSpecificNode(file, nodeIp) {
+    const confirmed = confirm(`Upload firmware to node ${nodeIp}?`);
+    if (!confirmed) return;
+    
+    // TODO: Implement single node upload logic
+    alert(`Firmware upload to node ${nodeIp} initiated. This feature is coming soon!`);
+}
+
+// Populate node select dropdown
+function populateNodeSelect() {
+    const select = document.getElementById('specific-node-select');
+    if (!select) return;
+    
+    // Clear existing options
+    select.innerHTML = '<option value="">Select a node...</option>';
+    
+    // Get current cluster members and populate
+    const container = document.getElementById('cluster-members-container');
+    const memberCards = container.querySelectorAll('.member-card');
+    
+    memberCards.forEach(card => {
+        const memberIp = card.dataset.memberIp;
+        const hostname = card.querySelector('.member-name')?.textContent || memberIp;
+        
+        const option = document.createElement('option');
+        option.value = memberIp;
+        option.textContent = `${hostname} (${memberIp})`;
+        select.appendChild(option);
+    });
+}
+
+// Refresh firmware view
+function refreshFirmwareView() {
+    updateFirmwareStats();
+    populateNodeSelect();
+}
+
+// Update firmware statistics
+function updateFirmwareStats() {
+    const container = document.getElementById('cluster-members-container');
+    const memberCards = container.querySelectorAll('.member-card');
+    
+    document.getElementById('total-nodes').textContent = memberCards.length;
+    document.getElementById('available-updates').textContent = '0'; // TODO: Implement update checking
+    document.getElementById('last-update').textContent = 'Never'; // TODO: Implement last update tracking
+} 

public/styles.css

@@ -499,6 +499,309 @@ p {
     opacity: 0.5;
 }
 
+/* Main Navigation Styles */
+.main-navigation {
+    display: flex;
+    gap: 0.25rem;
+    margin-bottom: 2.5rem;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 16px;
+    padding: 0.5rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+}
+
+.nav-tab {
+    background: transparent;
+    border: none;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 0.875rem 1.75rem;
+    border-radius: 12px;
+    cursor: pointer;
+    font-size: 0.95rem;
+    font-weight: 500;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+}
+
+.nav-tab::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.nav-tab:hover {
+    color: rgba(255, 255, 255, 0.9);
+    transform: translateY(-1px);
+}
+
+.nav-tab:hover::before {
+    opacity: 1;
+}
+
+.nav-tab.active {
+    background: rgba(255, 255, 255, 0.15);
+    color: #ffffff;
+    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
+    transform: translateY(-1px);
+}
+
+.nav-tab.active::before {
+    opacity: 0;
+}
+
+/* View Content Styles */
+.view-content {
+    display: none;
+}
+
+.view-content.active {
+    display: block;
+}
+
+/* Firmware Section Styles */
+.firmware-section {
+    background: rgba(0, 0, 0, 0.25);
+    border-radius: 24px;
+    backdrop-filter: blur(15px);
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    padding: 2.5rem;
+    margin-bottom: 2rem;
+    position: relative;
+    overflow: hidden;
+}
+
+.firmware-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+}
+
+.firmware-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2.5rem;
+    padding-bottom: 1.5rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.firmware-title {
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: #ffffff;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Firmware Stats */
+.firmware-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 3rem;
+}
+
+.stat-card {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 16px;
+    padding: 2rem 1.5rem;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.stat-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, #667eea, #764ba2);
+    opacity: 0.7;
+}
+
+.stat-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+.stat-title {
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.6);
+    margin-bottom: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-weight: 600;
+}
+
+.stat-value {
+    font-size: 2.5rem;
+    font-weight: 800;
+    color: #ffffff;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+/* Firmware Actions */
+.firmware-actions {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 2.5rem;
+    margin-bottom: 3rem;
+}
+
+.action-group {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 20px;
+    padding: 2rem;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    position: relative;
+    overflow: hidden;
+}
+
+.action-group::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
+}
+
+.action-group h3 {
+    color: #ffffff;
+    margin-bottom: 1.5rem;
+    font-size: 1.2rem;
+    font-weight: 600;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.upload-area-large {
+    text-align: center;
+    padding: 2.5rem;
+    border: 2px dashed rgba(255, 255, 255, 0.15);
+    border-radius: 16px;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
+    transition: all 0.3s ease;
+}
+
+.upload-area-large:hover {
+    border-color: rgba(255, 255, 255, 0.25);
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
+}
+
+.upload-btn-large {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: #ffffff;
+    padding: 1.25rem 2.5rem;
+    border-radius: 12px;
+    cursor: pointer;
+    font-size: 1.1rem;
+    font-weight: 600;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    margin-bottom: 1.5rem;
+    position: relative;
+    overflow: hidden;
+}
+
+.upload-btn-large::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.5s ease;
+}
+
+.upload-btn-large:hover {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.12) 100%);
+    transform: translateY(-3px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+}
+
+.upload-btn-large:hover::before {
+    left: 100%;
+}
+
+.upload-info-large {
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.7);
+    line-height: 1.5;
+}
+
+/* Target Selection */
+.target-selection {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+}
+
+.target-selection label {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    color: rgba(255, 255, 255, 0.9);
+    cursor: pointer;
+    padding: 0.75rem;
+    border-radius: 10px;
+    transition: all 0.2s ease;
+    border: 1px solid transparent;
+}
+
+.target-selection label:hover {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.1);
+}
+
+.target-selection input[type="radio"] {
+    margin: 0;
+    width: 18px;
+    height: 18px;
+    accent-color: #667eea;
+}
+
+.target-selection select {
+    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.3) 100%);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    color: #ffffff;
+    padding: 0.75rem 1rem;
+    border-radius: 10px;
+    margin-top: 0.75rem;
+    font-size: 0.95rem;
+    transition: all 0.2s ease;
+    cursor: pointer;
+}
+
+.target-selection select:hover {
+    border-color: rgba(255, 255, 255, 0.25);
+    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.4) 100%);
+}
+
+.target-selection select:focus {
+    outline: none;
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
 /* Responsive design for smaller screens */
 @media (max-width: 768px) {
     .header {
@@ -516,6 +819,52 @@ p {
         font-size: 0.9rem;
     }
     
+    /* Mobile navigation */
+    .main-navigation {
+        flex-direction: column;
+        gap: 0.25rem;
+        padding: 0.75rem;
+    }
+    
+    .nav-tab {
+        padding: 0.75rem 1rem;
+        font-size: 0.9rem;
+        border-radius: 10px;
+        text-align: center;
+    }
+    
+    /* Mobile firmware stats */
+    .firmware-stats {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+    
+    .stat-card {
+        padding: 1.5rem 1rem;
+    }
+    
+    .stat-value {
+        font-size: 2rem;
+    }
+    
+    .firmware-actions {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+    }
+    
+    .action-group {
+        padding: 1.5rem;
+    }
+    
+    .upload-area-large {
+        padding: 2rem 1.5rem;
+    }
+    
+    .upload-btn-large {
+        padding: 1rem 2rem;
+        font-size: 1rem;
+    }
+    
     /* Mobile tab responsiveness */
     .tabs-header {
         flex-wrap: wrap;