Improve detail event display

script.js

@@ -44,6 +44,36 @@ let updateInterval;
 let lastRenderedEonstrip = null;
 let currentDetailCob = null;
 
+function hexToRgba(hex, alpha) {
+    if (!hex) return '';
+    let c = hex.replace('#', '');
+    if (c.length === 3) {
+        c = c.split('').map(x => x + x).join('');
+    }
+    const r = parseInt(c.substring(0,2),16);
+    const g = parseInt(c.substring(2,4),16);
+    const b = parseInt(c.substring(4,6),16);
+    return `rgba(${r},${g},${b},${alpha})`;
+}
+
+function getContrastColor(hex) {
+    if (!hex) return '#fff';
+    let c = hex.replace('#','');
+    if (c.length === 3) c = c.split('').map(x=>x+x).join('');
+    const r = parseInt(c.substr(0,2),16);
+    const g = parseInt(c.substr(2,2),16);
+    const b = parseInt(c.substr(4,2),16);
+    const yiq = (r*299 + g*587 + b*114) / 1000;
+    return yiq >= 128 ? '#000' : '#fff';
+}
+
+function applyEventColors(elem, color, alpha) {
+    if (!color || !elem) return;
+    elem.style.setProperty('--bg-color', hexToRgba(color, alpha));
+    elem.style.setProperty('--border-color', color);
+    elem.style.setProperty('--text-color', getContrastColor(color));
+}
+
 function getTimezoneOffsetSeconds(date) {
     if (currentTimezone === 'UTC') return 0;
     if (currentTimezone === 'TAI') return getTAIOffsetAt(date);
@@ -761,6 +791,7 @@ function showEonstripDetail(index, startCob) {
                 const relEnd   = (occ + duration - start) / COBIE_UNITS.eonstrip;
                 events.push({
                     label: ev.label,
+                    color: ev.color,
                     start: relStart,
                     end: relEnd,
                     cobStart: occ,
@@ -772,16 +803,30 @@ function showEonstripDetail(index, startCob) {
             }
         });
         events.sort((a,b)=>a.start-b.start);
-        const columns = [];
+
+        const groups = [];
+        let active = [];
         events.forEach(ev=>{
+            active = active.filter(a=>a.end>ev.start);
+            if (active.length===0) {
+                groups.push({events:[],columns:[],maxCols:0});
+            }
+            const g = groups[groups.length-1];
             let col=0;
-            while(columns[col] && columns[col] > ev.start) col++;
-            columns[col] = ev.end;
+            while(g.columns[col] && g.columns[col] > ev.start) col++;
+            g.columns[col] = ev.end;
             ev.col = col;
+            g.maxCols = Math.max(g.maxCols, col+1);
+            g.events.push(ev);
+            active.push(ev);
         });
-        const width = 100 / (columns.length || 1);
+        groups.forEach(g=>{
+            const width = 100/(g.maxCols||1);
+            g.events.forEach(ev=>ev.width=width);
+        });
+
         events.forEach(ev=>{
-            const left = ev.col * width;
+            const left = ev.col * ev.width;
             const displayStart = Math.max(0, ev.start);
             const displayEnd   = Math.min(1, ev.end);
             const elem = document.createElement('div');
@@ -799,7 +844,9 @@ function showEonstripDetail(index, startCob) {
             }
             elem.style.top = (displayStart * 100) + '%';
             elem.style.left = `calc(var(--scale-width) + ${left}%)`;
-            elem.style.width = `calc(${width}% - 2px)`;
+            elem.style.width = `calc(${ev.width}% - 2px)`;
+
+            if (ev.color) applyEventColors(elem, ev.color, 0.4);
 
             if (elem.classList.contains('small-event') || elem.className === 'event-line') {
                 const label = document.createElement('span');
@@ -809,6 +856,7 @@ function showEonstripDetail(index, startCob) {
                 }
                 label.textContent = ev.label;
                 elem.appendChild(label);
+                if (ev.color) applyEventColors(label, ev.color, 0.5);
             } else {
                 elem.textContent = ev.label;
             }