From b2350a77d7ebe5ccafeb133e8361b5a9a6505f47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81ngel=20Montero=20Lamas?= <angel.montero1@gmail.com>
Date: Thu, 20 Jan 2022 14:37:22 +0100
Subject: [PATCH] correct filter button and prompt

The filter button now works on click with an added zonesEditorAddLines(); on function toggleFilterTable().

If the table is empty, a message appears on a line giving advice.
---
 modules/ui/zones-editor.js | 27 ++++++---------------------
 1 file changed, 6 insertions(+), 21 deletions(-)

diff --git a/modules/ui/zones-editor.js b/modules/ui/zones-editor.js
index 66dae021..a7729d50 100644
--- a/modules/ui/zones-editor.js
+++ b/modules/ui/zones-editor.js
@@ -99,7 +99,7 @@ function editZones() {
 
 // add line for each zone
   function zonesEditorAddLines() {
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
+    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
     let lines = "";
 
     const selectedType = zonesFilterType.value || "All";
@@ -111,7 +111,8 @@ function editZones() {
 
     zones.selectAll("g").each(function () {
       const zoneType = this.dataset.type;
-      if (zonesFilterButton.classList.contains("pressed") && zoneType !== selectedType) return;
+      //if (zonesFilterButton.classList.contains("pressed") && zoneType !== selectedType) return;
+	  if (selectedType !== "All" && (zonesFilterButton.classList.contains("pressed") && zoneType !== selectedType)) return;
 
       const c = this.dataset.cells ? this.dataset.cells.split(",").map(c => +c) : [];
       const description = this.dataset.description;
@@ -143,6 +144,8 @@ function editZones() {
     });
 
     body.innerHTML = lines;
+		  if (body.innerHTML === "") { body.innerHTML = `<div class="states"><span>Zero entries for this type. To see entries again, select "All" or disable the filter button</span>
+		        </div>`; }
 
     // update footer
     const totalArea = (zonesFooterArea.dataset.area = graphWidth * graphHeight * distanceScaleInput.value ** 2);
@@ -387,28 +390,10 @@ function editZones() {
       zonesEditorAddLines();
     }
   }
-  
     
   function toggleFilterTable() {
     this.classList.toggle("pressed");
-    const selectedType = zonesFilterType.value || "All";
-    const FilterTable = document.getElementById("zonesFilterButton").classList.contains("pressed");
-      /*if (FilterTable) {
-        // hide the elements from the list
-        selection.forEach(i => {
-          const index = zones.id(i);
-          if (index === -1) return;
-          zone.select("polygon#" + base + i).remove();
-          cells.splice(index, 1);
-        });
-      } else {
-        // keep the elements visible
-        selection.forEach(i => {
-          if (zones.includes(i)) return;
-          zone
-            .attr("id", base + i);
-        });
-      }*/
+    zonesEditorAddLines();
   }
 
   function addZonesLayer() {