From 2c269d5d2c07a5cb8f2ffc42a9649cc2579143a0 Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Mon, 7 Feb 2022 00:20:20 +0300
Subject: [PATCH] zone editor - hide filtered zone

---
 modules/ui/zones-editor.js | 41 +++++++++++++++++---------------------
 1 file changed, 18 insertions(+), 23 deletions(-)

diff --git a/modules/ui/zones-editor.js b/modules/ui/zones-editor.js
index 8dae2c8c..122ea083 100644
--- a/modules/ui/zones-editor.js
+++ b/modules/ui/zones-editor.js
@@ -21,7 +21,7 @@ function editZones() {
 
   // add listeners
   document.getElementById("zonesFilterType").addEventListener("click", updateFilters);
-  document.getElementById("zonesFilterType").addEventListener("change", zonesEditorAddLines);
+  document.getElementById("zonesFilterType").addEventListener("change", filterZonesByType);
   document.getElementById("zonesEditorRefresh").addEventListener("click", zonesEditorAddLines);
   document.getElementById("zonesEditStyle").addEventListener("click", () => editStyle("zones"));
   document.getElementById("zonesLegend").addEventListener("click", toggleLegend);
@@ -87,7 +87,7 @@ function editZones() {
       const focused = defs.select("#fog #focus" + zoneEl.id).size();
 
       return `<div class="states" data-id="${zoneEl.id}" data-fill="${fill}" data-description="${description}"
-        data-cells=${c.length} data-area=${area} data-population=${population}>
+        data-type="${type}" data-cells=${c.length} data-area=${area} data-population=${population}>
         <fill-box fill="${fill}"></fill-box>
         <input data-tip="Zone description. Click and type to change" style="width: 11em" class="zoneName" value="${description}" autocorrect="off" spellcheck="false">
         <input data-tip="Zone type. Click and type to change" class="zoneType" value="${type}">
@@ -136,6 +136,19 @@ function editZones() {
     zones.select("#" + zone).style("outline", null);
   }
 
+  function filterZonesByType() {
+    const typeToFilterBy = this.value;
+    const zones = Array.from(document.querySelectorAll("#zones > g"));
+
+    for (const zone of zones) {
+      const type = zone.dataset.type;
+      const visible = typeToFilterBy === "all" || type === typeToFilterBy;
+      zone.style.display = visible ? "block" : "none";
+    }
+
+    zonesEditorAddLines();
+  }
+
   $(body).sortable({items: "div.states", handle: ".icon-resize-vertical", containment: "parent", axis: "y", update: movezone});
   function movezone(ev, ui) {
     const zone = $("#" + ui.item.attr("data-id"));
@@ -265,7 +278,7 @@ function editZones() {
   function exitZonesManualAssignment(close) {
     customization = 0;
     removeCircle();
-    document.querySelectorAll("#zonesBottom > button").forEach(el => (el.style.display = "inline-block"));
+    document.querySelectorAll("#zonesBottom > *").forEach(el => (el.style.display = "inline-block"));
     document.getElementById("zonesManuallyButtons").style.display = "none";
 
     zonesEditor.querySelectorAll(".hide:not(.show)").forEach(el => el.classList.remove("hidden"));
@@ -355,27 +368,9 @@ function editZones() {
     const description = "Unknown zone";
     const type = "Unknown";
     const fill = "url(#hatch" + (id.slice(4) % 42) + ")";
-    zones.append("g").attr("id", id).attr("data-description", description).attr("data-cells", "").attr("fill", fill);
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
+    zones.append("g").attr("id", id).attr("data-description", description).attr("data-type", type).attr("data-cells", "").attr("fill", fill);
 
-    const line = `<div class="states" data-id="${id}" data-fill="${fill}" data-description="${description}" data-cells=0 data-area=0 data-population=0>
-      <fill-box fill="${fill}"></fill-box>
-      <input data-tip="Zone description. Click and type to change" style="width: 11em" class="zoneName" value="${description}" autocorrect="off" spellcheck="false">
-      <input data-tip="Zone type. Click and type to change" value="${type}">
-      <span data-tip="Cells count" class="icon-check-empty hide"></span>
-      <div data-tip="Cells count" class="stateCells hide">0</div>
-      <span data-tip="Zone area" style="padding-right:4px" class="icon-map-o hide"></span>
-      <div data-tip="Zone area" class="biomeArea hide">0 ${unit}</div>
-      <span class="icon-male hide"></span>
-      <div class="culturePopulation hide">0</div>
-      <span data-tip="Drag to raise or lower the zone" class="icon-resize-vertical hide"></span>
-      <span data-tip="Toggle zone focus" class="icon-pin inactive hide placeholder"></span>
-      <span data-tip="Toggle zone visibility" class="icon-eye hide placeholder"></span>
-      <span data-tip="Remove zone" class="icon-trash-empty hide"></span>
-    </div>`;
-
-    body.insertAdjacentHTML("beforeend", line);
-    zonesFooterNumber.innerHTML = zones.selectAll("g").size();
+    zonesEditorAddLines();
   }
 
   function downloadZonesData() {