feat: introduce tabs in member cards

public/script.js

@@ -42,6 +42,25 @@ class FrontendApiClient {
             throw new Error(`Request failed: ${error.message}`);
         }
     }
+
+    async getTasksStatus() {
+        try {
+            const response = await fetch('/api/tasks/status', {
+                method: 'GET',
+                headers: {
+                    'Accept': 'application/json'
+                }
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+
+            return await response.json();
+        } catch (error) {
+            throw new Error(`Request failed: ${error.message}`);
+        }
+    }
 }
 
 // Global client instance
@@ -101,37 +120,167 @@ function displayNodeDetails(container, nodeStatus) {
     console.log('Node status data:', nodeStatus);
     
     container.innerHTML = `
-        <div class="detail-row">
-            <span class="detail-label">Free Heap:</span>
-            <span class="detail-value">${Math.round(nodeStatus.freeHeap / 1024)}KB</span>
-        </div>
-        <div class="detail-row">
-            <span class="detail-label">Chip ID:</span>
-            <span class="detail-value">${nodeStatus.chipId}</span>
-        </div>
-        <div class="detail-row">
-            <span class="detail-label">SDK Version:</span>
-            <span class="detail-value">${nodeStatus.sdkVersion}</span>
-        </div>
-        <div class="detail-row">
-            <span class="detail-label">CPU Frequency:</span>
-            <span class="detail-value">${nodeStatus.cpuFreqMHz}MHz</span>
-        </div>
-        <div class="detail-row">
-            <span class="detail-label">Flash Size:</span>
-            <span class="detail-value">${Math.round(nodeStatus.flashChipSize / 1024)}KB</span>
-        </div>
-        <div class="api-endpoints">
-            <h4>Available API Endpoints:</h4>
-            ${nodeStatus.api ? nodeStatus.api.map(endpoint => 
-                `<div class="endpoint-item">${endpoint.method === 1 ? 'GET' : 'POST'} ${endpoint.uri}</div>`
-            ).join('') : '<div class="endpoint-item">No API endpoints available</div>'}
+        <div class="tabs-container">
+            <div class="tabs-header">
+                <button class="tab-button active" data-tab="status">Status</button>
+                <button class="tab-button" data-tab="endpoints">Endpoints</button>
+                <button class="tab-button" data-tab="tasks">Tasks</button>
+                <button class="tab-button" data-tab="firmware">Firmware</button>
+            </div>
+            
+            <div class="tab-content active" id="status-tab">
+                <div class="detail-row">
+                    <span class="detail-label">Free Heap:</span>
+                    <span class="detail-value">${Math.round(nodeStatus.freeHeap / 1024)}KB</span>
+                </div>
+                <div class="detail-row">
+                    <span class="detail-label">Chip ID:</span>
+                    <span class="detail-value">${nodeStatus.chipId}</span>
+                </div>
+                <div class="detail-row">
+                    <span class="detail-label">SDK Version:</span>
+                    <span class="detail-value">${nodeStatus.sdkVersion}</span>
+                </div>
+                <div class="detail-row">
+                    <span class="detail-label">CPU Frequency:</span>
+                    <span class="detail-value">${nodeStatus.cpuFreqMHz}MHz</span>
+                </div>
+                <div class="detail-row">
+                    <span class="detail-label">Flash Size:</span>
+                    <span class="detail-value">${Math.round(nodeStatus.flashChipSize / 1024)}KB</span>
+                </div>
+            </div>
+            
+            <div class="tab-content" id="endpoints-tab">
+                <h4>Available API Endpoints:</h4>
+                ${nodeStatus.api ? nodeStatus.api.map(endpoint => 
+                    `<div class="endpoint-item">${endpoint.method === 1 ? 'GET' : 'POST'} ${endpoint.uri}</div>`
+                ).join('') : '<div class="endpoint-item">No API endpoints available</div>'}
+            </div>
+            
+            <div class="tab-content" id="tasks-tab">
+                <div class="loading-tasks">Loading tasks...</div>
+            </div>
+            
+            <div class="tab-content" id="firmware-tab">
+                <div class="firmware-upload">
+                    <h4>Firmware Update</h4>
+                    <div class="upload-area">
+                        <input type="file" id="firmware-file" accept=".bin,.hex" style="display: none;">
+                        <button class="upload-btn" data-action="select-file">
+                            📁 Choose Firmware File
+                        </button>
+                        <div class="upload-info">Select a .bin or .hex file to upload</div>
+                    </div>
+                </div>
+            </div>
         </div>
     `;
     
+    // Set up tab switching
+    setupTabs(container);
+    
+    // Load tasks data for the tasks tab
+    loadTasksData(container, nodeStatus);
+    
     console.log('Node details HTML set successfully');
 }
 
+// Function to set up tab switching
+function setupTabs(container) {
+    const tabButtons = container.querySelectorAll('.tab-button');
+    const tabContents = container.querySelectorAll('.tab-content');
+    
+    tabButtons.forEach(button => {
+        button.addEventListener('click', (e) => {
+            // Prevent the click event from bubbling up to the card
+            e.stopPropagation();
+            
+            const targetTab = button.dataset.tab;
+            
+            // Remove active class from all buttons and contents
+            tabButtons.forEach(btn => btn.classList.remove('active'));
+            tabContents.forEach(content => content.classList.remove('active'));
+            
+            // Add active class to clicked button and corresponding content
+            button.classList.add('active');
+            const targetContent = container.querySelector(`#${targetTab}-tab`);
+            if (targetContent) {
+                targetContent.classList.add('active');
+            }
+        });
+    });
+    
+    // Also prevent event propagation on tab content areas
+    tabContents.forEach(content => {
+        content.addEventListener('click', (e) => {
+            e.stopPropagation();
+        });
+    });
+    
+    // Set up firmware upload button
+    const uploadBtn = container.querySelector('.upload-btn[data-action="select-file"]');
+    if (uploadBtn) {
+        uploadBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const fileInput = container.querySelector('#firmware-file');
+            if (fileInput) {
+                fileInput.click();
+            }
+        });
+    }
+}
+
+// Function to load tasks data
+async function loadTasksData(container, nodeStatus) {
+    const tasksTab = container.querySelector('#tasks-tab');
+    if (!tasksTab) return;
+    
+    try {
+        const response = await client.getTasksStatus();
+        console.log('Tasks data received:', response);
+        
+        if (response && response.length > 0) {
+            const tasksHTML = response.map(task => `
+                <div class="task-item">
+                    <div class="task-header">
+                        <span class="task-name">${task.name || 'Unknown Task'}</span>
+                        <span class="task-status ${task.running ? 'running' : 'stopped'}">
+                            ${task.running ? '🟢 Running' : '🔴 Stopped'}
+                        </span>
+                    </div>
+                    <div class="task-details">
+                        <span class="task-interval">Interval: ${task.interval}ms</span>
+                        <span class="task-enabled">${task.enabled ? '🟢 Enabled' : '🔴 Disabled'}</span>
+                    </div>
+                </div>
+            `).join('');
+            
+            tasksTab.innerHTML = `
+                <h4>Active Tasks</h4>
+                ${tasksHTML}
+            `;
+        } else {
+            tasksTab.innerHTML = `
+                <div class="no-tasks">
+                    <div>📋 No active tasks found</div>
+                    <div style="font-size: 0.9rem; margin-top: 0.5rem; opacity: 0.7;">
+                        This node has no running tasks
+                    </div>
+                </div>
+            `;
+        }
+    } catch (error) {
+        console.error('Failed to load tasks:', error);
+        tasksTab.innerHTML = `
+            <div class="error">
+                <strong>Error loading tasks:</strong><br>
+                ${error.message}
+            </div>
+        `;
+    }
+}
+
 // Function to display cluster members
 function displayClusterMembers(members) {
     const container = document.getElementById('cluster-members-container');

public/styles.css

@@ -283,6 +283,154 @@ p {
     border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
+/* Tab Styles */
+.tabs-container {
+    margin-top: 1rem;
+}
+
+.tabs-header {
+    display: flex;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    margin-bottom: 1rem;
+    gap: 0.5rem;
+}
+
+.tab-button {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.7);
+    padding: 0.5rem 1rem;
+    border-radius: 8px 8px 0 0;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: all 0.3s ease;
+    border-bottom: none;
+}
+
+.tab-button:hover {
+    background: rgba(0, 0, 0, 0.5);
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.tab-button.active {
+    background: rgba(255, 255, 255, 0.1);
+    color: #ecf0f1;
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+.tab-content {
+    display: none;
+    padding: 1rem 0;
+}
+
+.tab-content.active {
+    display: block;
+}
+
+/* Task Styles */
+.task-item {
+    background: rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    padding: 1rem;
+    margin-bottom: 0.75rem;
+}
+
+.task-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+.task-name {
+    font-weight: 600;
+    color: #ecf0f1;
+}
+
+.task-status {
+    font-size: 0.85rem;
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    font-weight: 500;
+}
+
+.task-status.running {
+    background: rgba(76, 175, 80, 0.2);
+    color: #4caf50;
+    border: 1px solid rgba(76, 175, 80, 0.3);
+}
+
+.task-status.stopped {
+    background: rgba(244, 67, 54, 0.2);
+    color: #f44336;
+    border: 1px solid rgba(244, 67, 54, 0.3);
+}
+
+.task-details {
+    display: flex;
+    gap: 1rem;
+    font-size: 0.8rem;
+    opacity: 0.8;
+}
+
+.task-interval, .task-enabled {
+    background: rgba(0, 0, 0, 0.2);
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+/* Firmware Upload Styles */
+.firmware-upload h4 {
+    margin-bottom: 1rem;
+    color: #ecf0f1;
+}
+
+.upload-area {
+    text-align: center;
+    padding: 2rem;
+    border: 2px dashed rgba(255, 255, 255, 0.2);
+    border-radius: 12px;
+    background: rgba(0, 0, 0, 0.2);
+}
+
+.upload-btn {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: #ecf0f1;
+    padding: 0.75rem 1.5rem;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 1rem;
+    transition: all 0.3s ease;
+    margin-bottom: 1rem;
+}
+
+.upload-btn:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: translateY(-2px);
+}
+
+.upload-info {
+    font-size: 0.9rem;
+    opacity: 0.7;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.no-tasks {
+    text-align: center;
+    padding: 2rem;
+    opacity: 0.7;
+}
+
+.loading-tasks {
+    text-align: center;
+    padding: 1rem;
+    opacity: 0.7;
+    font-style: italic;
+}
+
 .loading {
     text-align: center;
     padding: 2rem;