fix: preserve UI state after refresh

README.md

@@ -7,7 +7,6 @@ A modern web interface for monitoring and managing SPORE embedded systems.
 - **🌐 Cluster Monitoring**: Real-time view of all cluster members
 - **📊 Node Details**: Expandable cards with detailed system information
 - **🚀 Modern UI**: Beautiful glassmorphism design with smooth animations
-- **⚡ Auto-refresh**: Keeps data current every 30 seconds
 - **📱 Responsive**: Works on all devices and screen sizes
 
 ![UI](./assets/ui.png)
@@ -33,14 +32,6 @@ spore-ui/
 └── README.md              # This file
 ```
 
-## Completed Tasks
-
-- [x] bootstrap an express.js app that serves a simple html page
-- [x] generate js client from api/openapi.yaml
-- [x] use getClusterStatus client function to get all members and display these members on the html page, use only vanilla JS
-- [x] when clicking on one of the members in the UI, it should expand and display all informations from /api/node/status
-- [x] create separate files for CSS and JS
-
 ## Getting Started
 
 1. **Install dependencies**: `npm install`

public/README.md

@@ -1,38 +0,0 @@
-# SPORE UI Frontend
-
-This directory contains the frontend files for the SPORE UI application.
-
-## File Structure
-
-- **`index.html`** - Main HTML page with minimal markup
-- **`styles.css`** - All CSS styles and animations
-- **`script.js`** - All JavaScript functionality and API interactions
-
-## Features
-
-- **Responsive Design**: Works on all screen sizes
-- **Modern UI**: Glassmorphism design with smooth animations
-- **Interactive Cards**: Clickable cluster member cards
-- **Real-time Data**: Auto-refreshes every 30 seconds
-- **Expandable Details**: Click cards to see detailed node information
-
-## How It Works
-
-1. **HTML Structure**: Clean, semantic markup
-2. **CSS Styling**: Modern design with CSS Grid and Flexbox
-3. **JavaScript Logic**: API client, event handling, and DOM manipulation
-
-## Browser Support
-
-- Modern browsers with ES6+ support
-- CSS Grid and Flexbox support required
-- Fetch API support required
-
-## Development
-
-To modify the UI:
-- **Layout**: Edit `index.html`
-- **Styling**: Edit `styles.css`
-- **Functionality**: Edit `script.js`
-
-All files are automatically served by the Express backend. 

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
@@ -51,6 +70,22 @@ const client = new FrontendApiClient();
 async function refreshClusterMembers() {
     const container = document.getElementById('cluster-members-container');
     
+    // Store the currently expanded cards BEFORE showing loading state
+    const expandedCards = new Map();
+    const existingCards = container.querySelectorAll('.member-card');
+    existingCards.forEach(card => {
+        if (card.classList.contains('expanded')) {
+            const memberIp = card.dataset.memberIp;
+            const memberDetails = card.querySelector('.member-details');
+            if (memberDetails) {
+                expandedCards.set(memberIp, memberDetails.innerHTML);
+                console.log(`Storing expanded state for ${memberIp}`);
+            }
+        }
+    });
+    
+    console.log(`Stored ${expandedCards.size} expanded cards for restoration`);
+    
     // Show loading state
     container.innerHTML = `
         <div class="loading">
@@ -61,7 +96,7 @@ async function refreshClusterMembers() {
     try {
         const response = await client.getClusterMembers();
         console.log(response);
-        displayClusterMembers(response.members);
+        displayClusterMembers(response.members, expandedCards);
     } catch (error) {
         console.error('Failed to fetch cluster members:', error);
         container.innerHTML = `
@@ -101,6 +136,15 @@ function displayNodeDetails(container, nodeStatus) {
     console.log('Node status data:', nodeStatus);
     
     container.innerHTML = `
+        <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>
@@ -121,19 +165,140 @@ function displayNodeDetails(container, nodeStatus) {
                     <span class="detail-label">Flash Size:</span>
                     <span class="detail-value">${Math.round(nodeStatus.flashChipSize / 1024)}KB</span>
                 </div>
-        <div class="api-endpoints">
+            </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) {
+function displayClusterMembers(members, expandedCards = new Map()) {
     const container = document.getElementById('cluster-members-container');
     
     if (!members || members.length === 0) {
@@ -191,6 +356,22 @@ function displayClusterMembers(members) {
             
             console.log(`Setting up card ${index} with IP: ${memberIp}`);
 
+            // Restore expanded state if this card was expanded before refresh
+            if (expandedCards.has(memberIp)) {
+                console.log(`Restoring expanded state for ${memberIp}`);
+                const restoredContent = expandedCards.get(memberIp);
+                console.log(`Restored content length: ${restoredContent.length} characters`);
+                memberDetails.innerHTML = restoredContent;
+                card.classList.add('expanded');
+                expandIcon.classList.add('expanded');
+                
+                // Re-setup tabs for restored content
+                setupTabs(memberDetails);
+                console.log(`Successfully restored expanded state for ${memberIp}`);
+            } else {
+                console.log(`No expanded state to restore for ${memberIp}`);
+            }
+
             // Make the entire card clickable
             card.addEventListener('click', async (e) => {
                 // Don't trigger if clicking on the expand icon (to avoid double-triggering)
@@ -260,4 +441,5 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 
 // Auto-refresh every 30 seconds
-setInterval(refreshClusterMembers, 30000); 
+// FIXME not working properly: scroll position is not preserved, if there is an upload happening, this mus also be handled
+//setInterval(refreshClusterMembers, 30000); 

public/styles.css

@@ -100,13 +100,14 @@ p {
 }
 
 .member-card {
-    background: rgba(0, 0, 0, 0.4);
+    background: rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 12px;
     padding: 1.5rem;
     transition: all 0.3s ease;
     cursor: pointer;
     position: relative;
+    margin-bottom: 0.5rem;
 }
 
 .member-card::before {
@@ -128,7 +129,6 @@ p {
 }
 
 .member-card:hover {
-    transform: translateY(-4px);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
 }
 
@@ -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;