Add colors to sidebar dependent on person type

benory · Feb 7, 2025 · 97f2af2 · 97f2af2
1 parent 35e0054
commit 97f2af2
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 5 deletions.
diff --git a/scripts-listeners.html b/scripts-listeners.html
@@ -142,6 +142,14 @@
 		const clusterMarkers = event.layer.getAllChildMarkers();
 		updateSidebarWithClusterMarkers(clusterMarkers);
 	});
+
+	// Ensure the sidebar updates when clusters spiderfy (expand)
+	markerCluster.on('spiderfied', function (event) {
+	    const clusterMarkers = event.markers; // Get expanded markers
+
+	    // Update the sidebar with the new visible markers
+	    updateSidebarWithClusterMarkers(clusterMarkers);
+	});
 
     map.on('moveend zoomend', () => {
 	    const input = document.querySelector("#input");

diff --git a/scripts-local.html b/scripts-local.html
@@ -741,7 +741,7 @@
             });
 
             if (!skipSidebarUpdate) {
-                updateMarkerSidebar({ text, personprocessed, locationprocessed, daterange, description }, true, eventid);
+                updateMarkerSidebar({ text, personID, personprocessed, locationprocessed, daterange, description }, true, eventid);
             }
         } else {
             markersToRemove.add(marker);
@@ -811,7 +811,7 @@
             if (!visibleMarkers.has(marker)) {
                 markerCluster.addLayer(marker);
             }
-            updateMarkerSidebar({ text, personprocessed, locationprocessed, daterange, description }, true, eventid);
+            updateMarkerSidebar({ text, personID, personprocessed, locationprocessed, daterange, description }, true, eventid);
         } else if (visibleMarkers.has(marker)) {
             removedMarkers.add(marker);
         }

diff --git a/scripts/sidebar.html b/scripts/sidebar.html
@@ -8,12 +8,12 @@
     tableBody.innerHTML = '';
 
     // Add visible markers to the sidebar
-    visibleMarkers.forEach(({ text, personprocessed, locationprocessed, daterange, description, eventid }) => {
-        updateMarkerSidebar({ text, personprocessed, locationprocessed, daterange, description }, true, eventid);
+    visibleMarkers.forEach(({ text, personID, personprocessed, locationprocessed, daterange, description, eventid }) => {
+        updateMarkerSidebar({ text, personID, personprocessed, locationprocessed, daterange, description }, true, eventid);
     });
 }
 
-function updateMarkerSidebar({ text, personprocessed, locationprocessed, daterange, description }, show, eventid) {
+function updateMarkerSidebar({ text, personID, personprocessed, locationprocessed, daterange, description }, show, eventid) {
     // Sanitize eventid for use as a DOM id
     const sanitizedEventId = sanitizeEventId(eventid);
 
@@ -27,6 +27,23 @@
             const row = document.createElement('tr');
             row.id = `marker-${sanitizedEventId}`; // Use sanitized id for the row
 
+            // Assign background color based on person type
+            const type = personID ? personID.substring(0, 3) : '';
+
+
+            let backgroundColor = 'rgba(68, 1, 84, 0.1)'; // Composer (BCO)
+
+            if (type === 'BMU') {
+                backgroundColor = 'rgba(35, 237, 92, 0.1)'; // Musician (BMU)
+            } else if (type === 'BNO') {
+                backgroundColor = 'rgba(253, 231, 37, 0.1)'; // Default: Non-musician (BNO)
+            }
+
+            // Set row styling
+            row.style.backgroundColor = backgroundColor;
+            row.style.padding = '8px';
+            row.style.borderBottom = '1px solid #ddd';
+
             // Create a single cell for the row
             const cell = document.createElement('td');
             const truncatedDescription = description
@@ -110,6 +127,7 @@
         if (markerData) {
             updateMarkerSidebar({
                 text: markerData.text,
+                personID: markerData.personID,
                 personprocessed: markerData.personprocessed,
                 locationprocessed: markerData.locationprocessed,
                 daterange: markerData.daterange,