#435 - mark button red if filter is active (check with JS)

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

@@ -4,6 +4,11 @@ $( document ).ready(function() {
         $('#modalConfirmDelete').modal('open');
     }
 
+    if($("#modalFilter").length)
+    {
+       var modalFilter =  $('#modalFilter').modal();
+    }
+
     if($(".datepicker").length)
     {
         var pickerStartDate = M.Datepicker.init(document.getElementById('chart-datepicker'), {
@@ -86,4 +91,31 @@ $( document ).ready(function() {
             formatSubmit: 'dd.mm.yyyy'
         });
     }
+
+    $("#filter-button-close").click(function()
+    {
+        var filterButton = document.getElementById("modalFilterTrigger");
+
+        if(isDefaultFilter())
+        {
+            filterButton.classList.toggle("budgetmaster-blue", true);
+            filterButton.classList.toggle("budgetmaster-red", false);
+            filterButton.childNodes[1].nodeValue = filterNotActive;
+        }
+        else
+        {
+            filterButton.classList.toggle("budgetmaster-blue", false);
+            filterButton.classList.toggle("budgetmaster-red", true);
+            filterButton.childNodes[1].nodeValue = filterActive;
+        }
+
+        modalFilter.modal('close');
+    });
 });
+
+function isDefaultFilter()
+{
+    var allCheckBoxesChecked = $("#filterSettings input[type=checkbox]:checked").length === $("#filterSettings input[type=checkbox]").length;
+    var textInputEmpty = $("#filter-name").val().length === 0;
+    return allCheckBoxesChecked && textInputEmpty
+}
\ No newline at end of file

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

@@ -110,6 +110,10 @@
         <!-- Pass localization to JS -->
         <#import "../helpers/globalDatePicker.ftl" as datePicker>
         <@datePicker.datePickerLocalization/>
+        <script>
+            filterActive = "${locale.getString("filter.active")}"
+            filterNotActive = "${locale.getString("title.filter")}"
+        </script>
 
         <!-- Scripts-->
         <#import "../helpers/scripts.ftl" as scripts>

src/main/resources/templates/filter/filterMacros.ftl

@@ -51,7 +51,7 @@
 </#macro>
 
 <#macro buttonReset>
-    <a href="<@s.url '/filter/reset'/>" class="waves-effect waves-light btn budgetmaster-blue"><i class="material-icons left">settings_backup_restore</i>${locale.getString("filter.reset")}</a>
+    <a href="<@s.url '/filter/reset'/>" id="button-filter-reset" class="waves-effect waves-light btn budgetmaster-blue"><i class="material-icons left">settings_backup_restore</i>${locale.getString("filter.reset")}</a>
 </#macro>
 
 <#macro buttonApply>
@@ -61,7 +61,7 @@
 </#macro>
 
 <#macro buttonClose>
-    <a class="modal-action modal-close waves-effect waves-light budgetmaster-blue btn-flat white-text"><i class="fas fa-filter left"></i>${locale.getString("filter.apply")}</a>
+    <a id="filter-button-close" class="waves-effect waves-light budgetmaster-blue btn white-text"><i class="fas fa-filter left"></i>${locale.getString("filter.apply")}</a>
 </#macro>
 
 <#macro buttonsAllOrNone>
@@ -99,7 +99,7 @@
             <@buttonsCharts/>
         </div>
         <div class="modal-footer background-color">
-            <a href="" class="modal-action modal-close waves-effect waves-light red btn-flat white-text">${locale.getString("cancel")}</a>
+            <a class="modal-action modal-close waves-effect waves-light red btn-flat white-text">${locale.getString("cancel")}</a>
         </div>
     </div>
 </#macro>