From fbdb39ce134fe729bdbd8ae765d77f9b4f02854e Mon Sep 17 00:00:00 2001
From: cproudlock <cproudlock@localhost>
Date: Fri, 24 Oct 2025 09:54:49 -0400
Subject: [PATCH] Feature: Dynamic severity-based badge colors and UI
 improvements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Implemented dynamic Current Events badge color based on severity hierarchy:
  * RED (danger) if any Incident exists
  * YELLOW (warning) if any Change exists (and no incidents)
  * GREEN (success) if only Awareness/TBD exists
- Added getHighestSeverity() function to determine badge color
- Removed all emojis from UI for cleaner professional appearance
- Increased event card height (padding: 20px→30px vertical, 30px→40px horizontal)
- Increased color bar thickness from 40px to 60px for better visibility
- Improved visual hierarchy and clarity for TV display

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 public/index.html | 55 +++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 48 insertions(+), 7 deletions(-)

diff --git a/public/index.html b/public/index.html
index cce9ef1..ceef84b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -140,6 +140,24 @@
             box-shadow: 0 4px 20px rgba(220, 53, 69, 0.4);
         }
 
+        /* Dynamic severity colors for current events */
+        .section-title.current.severity-danger {
+            background: #dc3545; /* Red - Incident */
+            box-shadow: 0 4px 20px rgba(220, 53, 69, 0.4);
+        }
+
+        .section-title.current.severity-warning {
+            background: #ffc107; /* Yellow - Change */
+            color: #000;
+            box-shadow: 0 4px 20px rgba(255, 193, 7, 0.4);
+        }
+
+        .section-title.current.severity-success {
+            background: #0ad64f; /* Green - Awareness/TBD */
+            color: #00003d;
+            box-shadow: 0 4px 20px rgba(10, 214, 79, 0.4);
+        }
+
         .section-title.upcoming {
             background: #4181ff; /* GE Sky Blue */
             color: #fff;
@@ -149,11 +167,11 @@
         .event-card {
             background: #fff;
             color: #000;
-            padding: 20px 30px;
+            padding: 30px 40px;
             margin-bottom: 15px;
             border-radius: 8px;
             box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-            border-left: 40px solid;
+            border-left: 60px solid;
             transition: all 0.3s ease;
         }
 
@@ -292,7 +310,7 @@
         </div>
 
         <div id="eventsContainer">
-            <div class="loading">⏳ Loading events...</div>
+            <div class="loading">Loading events...</div>
         </div>
     </div>
 
@@ -357,8 +375,11 @@
 
             // Current Events (limit to MAX_CURRENT)
             if (data.current && data.current.length > 0) {
+                // Determine badge color based on highest severity
+                const severity = getHighestSeverity(data.current);
+
                 html += '<div class="events-section">';
-                html += '<div class="section-title current">🔴 CURRENT EVENTS</div>';
+                html += `<div class="section-title current severity-${severity}">CURRENT EVENTS</div>`;
 
                 const currentToShow = data.current.slice(0, MAX_CURRENT);
                 currentToShow.forEach(event => {
@@ -388,7 +409,7 @@
             // Upcoming Events (limit to MAX_UPCOMING)
             if (data.upcoming && data.upcoming.length > 0) {
                 html += '<div class="events-section">';
-                html += '<div class="section-title upcoming">⚠️ UPCOMING (Next 72 Hours)</div>';
+                html += '<div class="section-title upcoming">UPCOMING (Next 72 Hours)</div>';
 
                 const upcomingToShow = data.upcoming.slice(0, MAX_UPCOMING);
                 upcomingToShow.forEach(event => {
@@ -417,7 +438,7 @@
 
             // No events message
             if ((!data.current || data.current.length === 0) && (!data.upcoming || data.upcoming.length === 0)) {
-                html += '<div class="no-events">✅ No scheduled events for the next 72 hours</div>';
+                html += '<div class="no-events">No scheduled events for the next 72 hours</div>';
             }
 
             container.innerHTML = html;
@@ -441,6 +462,26 @@
             return colorMap[typecolor] || colorMap['secondary'];
         }
 
+        // Determine highest severity level from events (for badge color)
+        function getHighestSeverity(events) {
+            // Severity hierarchy: danger > warning > success > secondary
+            let highestSeverity = 'secondary';
+
+            events.forEach(event => {
+                const severity = event.typecolor;
+
+                if (severity === 'danger') {
+                    highestSeverity = 'danger'; // Highest priority
+                } else if (severity === 'warning' && highestSeverity !== 'danger') {
+                    highestSeverity = 'warning';
+                } else if (severity === 'success' && highestSeverity !== 'danger' && highestSeverity !== 'warning') {
+                    highestSeverity = 'success';
+                }
+            });
+
+            return highestSeverity;
+        }
+
         // Fetch notifications from API
         async function fetchNotifications() {
             try {
@@ -469,7 +510,7 @@
                 if (container.querySelector('.loading')) {
                     container.innerHTML = `
                         <div class="error-message">
-                            ⚠️ Unable to load events<br>
+                            Unable to load events<br>
                             <span style="font-size: 20px; margin-top: 10px; display: block;">Retrying...</span>
                         </div>
                     `;