diff --git a/README.md b/README.md index fdeb34d..ec4fe86 100644 --- a/README.md +++ b/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  @@ -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` diff --git a/public/README.md b/public/README.md deleted file mode 100644 index f78226c..0000000 --- a/public/README.md +++ /dev/null @@ -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. \ No newline at end of file diff --git a/public/script.js b/public/script.js index 9d0db02..23e1ef7 100644 --- a/public/script.js +++ b/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 = `