From cf6d97b01ad45b8d5b9f7030018f185d6108ad4b Mon Sep 17 00:00:00 2001
From: Anne-Marie Rusu <annierusu@gmail.com>
Date: Sat, 1 Jun 2024 10:57:26 +0200
Subject: [PATCH] add selection persistence

---
 Milestone3/csvManipulator.js | 10 ++++++++--
 Milestone3/styles.css        |  5 +++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/Milestone3/csvManipulator.js b/Milestone3/csvManipulator.js
index 441d926..f126625 100644
--- a/Milestone3/csvManipulator.js
+++ b/Milestone3/csvManipulator.js
@@ -136,7 +136,14 @@ function displayList(data) {
             updateSelectedSong(song);
             updateAttributeBars(song);
             const track = await getTrackById(song.id);
-            
+
+            //Make selected song appear selected, but remove selection if another song is selected
+            const allSongBoxes = document.querySelectorAll('.song-box');
+            allSongBoxes.forEach(box => {
+                box.classList.remove('selected');
+            });
+            songBox.classList.add('selected');
+
             // If the track exists and has a preview URL, show the audio player and play the song
             if (track && track.preview_url) {
                 document.getElementById('audio-player-container').style.display = 'block';
@@ -562,7 +569,6 @@ function resetAllFilters(){
 function setHighlight(element){
     element.style.color = '#ff7332';
     setTimeout(function(){ element.style.color = '#1B1141'; }, 1500);
-
 }
 
 /** When clicking on a bar, set the respective filter on the DJ board and apply it */
diff --git a/Milestone3/styles.css b/Milestone3/styles.css
index d8b1643..aac1ecd 100644
--- a/Milestone3/styles.css
+++ b/Milestone3/styles.css
@@ -210,6 +210,11 @@ body {
     box-shadow: 1px 1px var(--accent-color); 
 }
 
+.song-box.selected {
+    background-color: var(--accent-color); /* Change background color when selected */
+    box-shadow: 1px 1px var(--accent-color); 
+}
+
 /* Styling the scrollbar for the song container
 .song-container-scrollable::-webkit-scrollbar {
     width: 8px;