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

@@ -70,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">
@@ -80,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 = `
@@ -282,7 +298,7 @@ async function loadTasksData(container, nodeStatus) {
 }
 
 // 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) {
@@ -340,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)
@@ -409,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);