#585 - highlight selected chart preview

src/main/resources/static/css/charts.css

@@ -55,6 +55,10 @@
     background-color: var(--color-blue-baby) !important;
 }
 
+.chart-preview.active .card-action {
+    background-color: var(--color-red-light) !important;
+}
+
 #chart-date-card {
     background-color: var(--color-grey-dark-almost-transparent);
 }
\ No newline at end of file

src/main/resources/static/js/charts.js

@@ -99,6 +99,13 @@ $(document).ready(function()
         toggleChartTypeButtons('button-group-type', this);
         filterChartPreviews();
     });
+
+    $('.chart-preview').click(function()
+    {
+        unsetActiveChartPreview();
+
+        this.classList.toggle('active', true);
+    });
 });
 
 function createDatePickerEnd(minDate, selectedDate)
@@ -267,4 +274,15 @@ function filterChartPreviews()
     {
         chartPreviews[i].style.display = '';
     }
+
+    unsetActiveChartPreview();
+}
+
+function unsetActiveChartPreview()
+{
+    let allChartPreviews = document.getElementsByClassName('chart-preview');
+    for(let i = 0; i < allChartPreviews.length; i++)
+    {
+        allChartPreviews[i].classList.toggle('active', false);
+    }
 }