#585 - highlight selected buttons on click

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

@@ -36,15 +36,6 @@
     font-size: 1.2rem;
 }
 
-.chart-button i {
-    font-size: 2.2rem;
-}
-
-.chart-button-name {
-    margin-left: 1rem;
-    font-weight: bold;
-}
-
 .chart-preview:hover {
     cursor: pointer;
 }
@@ -56,6 +47,14 @@
     padding: 1rem;
 }
 
+.button-display-type.active {
+    background-color: var(--color-green) !important;
+}
+
+.button-group-type.active {
+    background-color: var(--color-blue-baby) !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

@@ -87,6 +87,16 @@ $(document).ready(function()
     {
         handleQuickDate(this);
     });
+
+    $('.button-display-type').click(function()
+    {
+        toggleChartTypeButtons('button-display-type', this);
+    });
+
+    $('.button-group-type').click(function()
+    {
+        toggleChartTypeButtons('button-group-type', this);
+    });
 });
 
 function createDatePickerEnd(minDate, selectedDate)
@@ -227,3 +237,14 @@ function setDateRange(startDate, endDate)
     chartPickerEndDate.destroy();
     chartPickerEndDate = createDatePickerEnd(chartPickerStartDate.date, endDate.startOf('day').toDate());
 }
+
+function toggleChartTypeButtons(styleClassName, item)
+{
+    let siblings = document.getElementsByClassName(styleClassName);
+    for(let i = 0; i < siblings.length; i++)
+    {
+        siblings[i].classList.toggle('active', false);
+    }
+
+    item.classList.toggle('active', true);
+}
\ No newline at end of file

src/main/resources/templates/charts/charts.ftl

@@ -33,7 +33,7 @@
                         <div class="row hide-on-small-and-down">
                             <div class="col s12 center-align">
                                 <#list displayTypes as displayType>
-                                    <@chartTypeButton displayType/>
+                                    <@chartTypeButton item=displayType buttonClass="button-display-type"/>
                                 </#list>
                             </div>
                         </div>
@@ -43,7 +43,7 @@
                         <div class="row hide-on-small-and-down">
                             <div class="col s12 center-align">
                                 <#list groupTypes as groupType>
-                                    <@chartTypeButton groupType/>
+                                    <@chartTypeButton item=groupType buttonClass="button-group-type"/>
                                 </#list>
                             </div>
                         </div>
@@ -263,8 +263,8 @@
     </@stepCollapsible>
 </#macro>
 
-<#macro chartTypeButton item>
-    <a class="waves-effect waves-light btn-large background-grey text-black">
+<#macro chartTypeButton item buttonClass>
+    <a class="waves-effect waves-light btn-large background-grey text-black ${buttonClass}" data-value="${item.name()}">
         <#if item.hasFontAwesomeIcon()>
             <i class="${item.getIcon()} left"></i> ${locale.getString(item.getLocalizationKey())}
         <#else>
@@ -274,7 +274,7 @@
 </#macro>
 
 <#macro chartPreview chart>
-    <div class="col s6 m4 l3 center-align">
+    <div class="col s6 m4 l3 center-align chart-preview-column" data-display-type="${chart.getDisplayType()}" data-group-type="${chart.getGroupType()}">
         <div class="card chart-preview background-grey-dark">
             <div class="card-image">
                 <img src="<@s.url '/images/charts/' + chart.getPreviewImageFileName()!"placeholder.png"/>">