From 0d6bef5c41c47e1564f0b5ddbdaa8a29975866e5 Mon Sep 17 00:00:00 2001
From: cproudlock <cproudlock@localhost>
Date: Tue, 18 Nov 2025 09:13:56 -0500
Subject: [PATCH] Fix carousel reset on data refresh - preserve index
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The carousel was resetting to index 0 every 10 seconds when the dashboard
refreshed data from the API. This caused the carousel to show:
- 0s: test 2 (index 0)
- 5s: test again (index 1)
- 10s: DATA REFRESH → reset to test 2 (index 0) ❌

Fixed by:
- Preserving currentUpcomingIndex across renderEvents() calls
- Only reset index if it's out of range for new data
- Render the currently active event instead of always starting at 0
- Added logging to show index preservation

Now the carousel cycles continuously through all 4 events without
resetting when the page refreshes data every 10 seconds.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 shopfloor-dashboard/index.html | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/shopfloor-dashboard/index.html b/shopfloor-dashboard/index.html
index e5eb38f..a4a0f59 100644
--- a/shopfloor-dashboard/index.html
+++ b/shopfloor-dashboard/index.html
@@ -867,18 +867,26 @@
                 // Store for carousel
                 upcomingEvents = sortedUpcoming;
 
+                // Preserve current index if it's still valid, otherwise reset
+                if (currentUpcomingIndex >= sortedUpcoming.length) {
+                    console.log(`Carousel: Index ${currentUpcomingIndex} out of range, resetting to 0`);
+                    currentUpcomingIndex = 0;
+                } else {
+                    console.log(`Carousel: Preserving index ${currentUpcomingIndex} across refresh`);
+                }
+
                 html += '<div class="events-section">';
                 html += '<div class="section-title upcoming">UPCOMING (Next 72 Hours)</div>';
                 html += '<div class="upcoming-carousel-container">';
                 html += '<div class="upcoming-carousel-wrapper" id="upcomingCarousel">';
 
-                // Render all upcoming events (only first will be visible)
+                // Render all upcoming events (preserve current active index)
                 sortedUpcoming.forEach((event, index) => {
                     const borderColor = getColorFromType(event.typecolor);
                     const ticketBadge = event.ticketnumber
                         ? `<a href="${getServiceNowUrl(event.ticketnumber)}" target="_blank" class="event-ticket">${escapeHtml(event.ticketnumber)}</a>`
                         : '';
-                    const activeClass = index === 0 ? 'active' : 'enter-down';
+                    const activeClass = index === currentUpcomingIndex ? 'active' : 'enter-down';
                     html += `
                         <div class="event-card upcoming carousel-item ${activeClass}" data-index="${index}" style="border-left-color: ${borderColor};">
                             <div>${ticketBadge}</div>
@@ -896,9 +904,6 @@
                 html += '</div>'; // Close carousel wrapper
                 html += '</div>'; // Close carousel container
                 html += '</div>'; // Close section
-
-                // Reset carousel index
-                currentUpcomingIndex = 0;
             }
 
             // No events message