show the current filter values

Author: slead

index.html

@@ -275,6 +275,7 @@ <h5 class="modal-title">Share URL</h5>
         </div>
         <button id="btnRemoveFilter" class="btn btn-secondary">Remove filter</button>
         <button id="btnApplyFilter" class="btn btn-warning">Apply filter</button>
+        <p class="btn-secondary" id="filterOutput"><span id="filterText"></span></p>
     </div>
 </script>
 

src/js/app.js

@@ -1679,7 +1679,8 @@ function updateOperator(evt){
   var filterTask = bootleaf.filterTasks.find(x => x.layerId === layerId);
   var filter = filterTask.filters.find(x => x.name === fieldName);
   filter.operator = evt.target.value;
-  console.log("update operator", filter)
+  console.log("update operator", filter);
+  updateFilterText();
 }
 
 function updateValue(evt){
@@ -1692,7 +1693,8 @@ function updateValue(evt){
     var operator = $("#filterWidgetOperator option:selected").val();
     filter.operator = operator;
   }
-  console.log("update value", filter)
+  console.log("update value", filter);
+  updateFilterText();
 }
 
 function updateFilterParams(control){
@@ -1726,6 +1728,7 @@ function updateFilterParams(control){
     }
   }
 
+  updateFilterText();
 }
 
 function updateFilterOperator(option){
@@ -1764,6 +1767,32 @@ function updateFilterOperator(option){
   });
   $("#filterWidgetOperator").append(operatorOptions);
 
+  updateFilterText();
+}
+
+function updateFilterText(){
+  var layerId = $("#filterWidgetLayer option:selected").val()
+  var filterTask = bootleaf.filterTasks.find(x => x.layerId === layerId);
+  var filterText;
+  for (var i = 0; i < filterTask.filters.length; i++){
+    var filter = filterTask.filters[i];
+    if (filter.operator && filter.value) {
+      if (!filterText) {
+        filterText = filter.alias + " " + filter.operator + " " + filter.value;
+      } else {
+        filterText += " and " + filter.alias + " " + filter.operator + " " + filter.value;
+      }
+      $("#filterText").html(filterText);
+      console.log("update filter text", filter)
+    }
+  }
+
+  if (filterText !== undefined){
+    applyFilter();
+  } else {
+    $("#filterOutput").hide();
+  }
+
 }
 
 function applyFilter() {
@@ -1880,6 +1909,7 @@ function applyFilter() {
     }
   }
 
+  $("#filterOutput").show();
 }
 
 function removeFilter() {

style.css

@@ -77,3 +77,12 @@ div.dataTables_wrapper div.dataTables_paginate {
 .leaflet-draw-toolbar .leaflet-draw-draw-circlemarker {
   display: none;
 }
+
+#filterOutput {
+  margin-top: 15px;
+  font-style: italic;
+  font-size: 14px;
+  color: white;
+  padding: 15px;
+  display: none;
+}