added UI for burg group filter

- Code for filtering burgs.
- Added new pop up menu when clicking the button "reassign burgs".

index.html

@@ -5506,6 +5506,65 @@
         </div>
       </div>
 
+      <div id="burgMassAssignment" class="dialog" style="display: none">
+        <div style="display: flex; align-items: center">
+          <div id="burgMassAssignmentBody" style="padding-bottom: 0.3em">Include:
+            <div>
+            <input type="checkbox" class="checkbox" id="burgsAssignmentIncludePorts" name="burgsAssignmentIncludePorts"/>
+            <label for="burgsAssignmentIncludePorts" class="checkbox-label"><i>Burgs with ports</i></label>
+            </div>
+
+            <div>
+            <input type="checkbox" class="checkbox" id="burgsAssignmentIncludeCitadels" name="burgsAssignmentIncludeCitadels"/>
+            <label for="burgsAssignmentIncludeCitadels" class="checkbox-label"><i>Burgs with citadels</i></label>
+            </div>
+
+             <div>
+            <input type="checkbox" class="checkbox" id="burgsAssignmentIncludeWalls" name="burgsAssignmentIncludeWalls"/>
+            <label for="burgsAssignmentIncludeWalls" class="checkbox-label"><i>Burgs with walls</i></label>
+            </div>
+
+            <div>
+            <input type="checkbox" class="checkbox" id="burgsAssignmentIncludePlazas" name="burgsAssignmentIncludePlazas"/>
+            <label for="burgsAssignmentIncludePlazas" class="checkbox-label"><i>Burgs with plazas</i></label>
+            </div>
+
+            <div>
+            <input type="checkbox" class="checkbox" id="burgsAssignmentIncludeTemples" name="burgsAssignmentIncludeTemples"/>
+            <label for="burgsAssignmentIncludeTemples" class="checkbox-label"><i>Burgs with temples</i></label>
+            </div>
+
+            <div>
+            <input type="checkbox" class="checkbox" id="burgsAssignmentIncludeShantyTowns" name="burgsAssignmentIncludeShantyTowns"/>
+            <label for="burgsAssignmentIncludeShantyTowns" class="checkbox-label"><i>Burgs with shanty towns</i></label>
+            </div>
+
+             <div>States:
+            <select id="burgsAssignmentSelectedState" name="burgsAssignmentSelectedState"><option value="-1" selected>all</select>
+            </div>
+            <div>Cultures:
+            <select id="burgsAssignmentSelectedCulture" name="burgsAssignmentSelectedCulture"><option value="-1" selected>All</select>
+            </div>
+
+            <div>Minimum population: 
+            <input type="checkbox" class="checkbox" id="burgsAssignmentCheckPopMin" name="burgsAssignmentCheckPopMin"/>
+            <label for="burgsAssignmentCheckPopMin" class="checkbox-label"><i>&gt;= </i></label>
+            <input type="number" id="burgsAssignmentMinimumPopulation" name="burgsAssignmentMinimumPopulation" size=10 value="1000"/>
+            </div>
+
+            <div>Maximum population: 
+            <input type="checkbox" class="checkbox" id="burgsAssignmentCheckPopMax" name="burgsAssignmentCheckPopMax"/>
+            <label for="burgsAssignmentCheckPopMax" class="checkbox-label"><i>&lt;=</i></label>
+            <input type="number" id="burgsAssignmentMaximumPopulation" name="burgsAssignmentMaximumPopulation" size=10 value="99999999"/>
+            </div>
+
+             <div>Add to group: 
+            <select id="burgsAssignmentAddToGroup" name="burgsAssignmentAddToGroup"><option>Cities<option selected>Towns</select>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div id="routesOverview" class="dialog stable" style="display: none">
         <div id="routesHeader" class="header" style="grid-template-columns: 17em 8em 8em">
           <div data-tip="Click to sort by route name" class="sortable alphabetically" data-sortby="name">

modules/ui/burg-editor.js

@@ -98,14 +98,10 @@ function editBurg(id) {
 
     // select group
     const group = elSelected.node().parentNode.id;
-    const select = byId("burgSelectGroup");
-    select.options.length = 0; // remove all options
 
-    burgLabels.selectAll("g").each(function () {
+    updateBurgsGroupFilter("burgSelectGroup", group);
-      select.options.add(new Option(this.id, this.id, false, this.id === group));
-    });
 
-    // set emlem image
+    // set emblem image
     const coaID = "burgCOA" + id;
     COArenderer.trigger(coaID, b.coa);
     byId("burgEmblem").setAttribute("href", "#" + coaID);
@@ -144,6 +140,15 @@ function editBurg(id) {
     byId("burgSelectGroup").style.display = "inline-block";
   }
 
+  function updateBurgsGroupFilter(id, alreadySelectedGroup) {
+    const select = document.getElementById(id);
+    select.options.length = 0; // remove all options
+
+    burgLabels.selectAll("g").each(function () {
+      select.options.add(new Option(this.id, this.id, false, this.id === alreadySelectedGroup));
+    });
+  }
+
   function changeGroup() {
     const id = +elSelected.attr("data-id");
     moveBurgToGroup(id, this.value);

modules/ui/burgs-overview.js

@@ -38,21 +38,26 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
   byId("burgsLockAll").addEventListener("click", toggleLockAll);
   byId("burgsRemoveAll").addEventListener("click", triggerAllBurgsRemove);
 
+//const indeterminates = document.querySelector("#burgMassAssignmentBody").querySelectorAll("input[type=checkbox]");
+//indeterminates.forEach(i => i.indeterminate = true);
+
   function refreshBurgsEditor() {
     updateFilter();
     burgsOverviewAddLines();
   }
 
-  function updateFilter() {
+  function updateStateFilter(id) {
-    const stateFilter = byId("burgsFilterState");
+    const stateFilter = byId(id);
     const selectedState = settings.stateId !== null ? settings.stateId : stateFilter.value || -1;
     stateFilter.options.length = 0; // remove all options
     stateFilter.options.add(new Option("all", -1, false, selectedState === -1));
     stateFilter.options.add(new Option(pack.states[0].name, 0, false, selectedState === 0));
     const statesSorted = pack.states.filter(s => s.i && !s.removed).sort((a, b) => (a.name > b.name ? 1 : -1));
     statesSorted.forEach(s => stateFilter.options.add(new Option(s.name, s.i, false, s.i == selectedState)));
+  }
 
-    const cultureFilter = byId("burgsFilterCulture");
+  function updateCultureFilter(id) {
+    const cultureFilter = byId(id);
     const selectedCulture = settings.cultureId !== null ? settings.cultureId : cultureFilter.value || -1;
     cultureFilter.options.length = 0; // remove all options
     cultureFilter.options.add(new Option(`all`, -1, false, selectedCulture === -1));
@@ -61,6 +66,14 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
     culturesSorted.forEach(c => cultureFilter.options.add(new Option(c.name, c.i, false, c.i == selectedCulture)));
   }
 
+  function updateFilter() {
+    updateStateFilter("burgsFilterState");
+    updateStateFilter("burgsAssignmentSelectedState");
+
+    updateCultureFilter("burgsFilterCulture");
+    updateCultureFilter("burgsAssignmentSelectedCulture");
+ }
+
   // add line for each burg
   function burgsOverviewAddLines() {
     const selectedStateId = +byId("burgsFilterState").value;
@@ -587,31 +600,74 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
     });
   }
 
-  function burgGroupAssignInBulk() {
+  function updateBurgsGroupFilter(id, alreadySelectedGroup) {
-  // Define the constants separately
+    const select = document.getElementById(id);
-  let minpop = 1000 / populationRate;
+    select.options.length = 0; // remove all options
-  let maxpop = null / populationRate;
+
+    burgLabels.selectAll("g").each(function () {
+      select.options.add(new Option(this.id, this.id, false, this.id === alreadySelectedGroup));
+    });
+  }
+
+  function burgGroupAssignInBulk() {
+    updateBurgsGroupFilter("burgsAssignmentAddToGroup", burgsAssignmentAddToGroup.value);
+
+    $("#burgMassAssignment").dialog({
+      title: "Mass Burg Assignment",
+      resizable: false,
+      width: fitContent(),
+      //position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"},
+      position: {my: "center", at: "center", of: "svg"},
+      buttons: {
+        Proceed: function () {
+         $(this).dialog("close");
+          filterAndAssignBurgs();
+        },
+        Cancel: function () {
+         $(this).dialog("close");
+        }
+     }
+    });
+  }
+
+  // Define the function to filter and assign burgs to burg groups
+  function filterAndAssignBurgs() {
+    // Define the constants separately
+    let minpop = +burgsAssignmentMinimumPopulation.value / populationRate;
+    let maxpop = +burgsAssignmentMaximumPopulation.value / populationRate;
+    let checkPorts = burgsAssignmentIncludePorts.checked;
+    let checkCitadels = burgsAssignmentIncludeCitadels.checked;
+    let checkWalls = burgsAssignmentIncludeWalls.checked;
+      let checkPlazas = burgsAssignmentIncludePlazas.checked;
+    let checkTemples = burgsAssignmentIncludeTemples.checked;
+    let checkShantyTowns = burgsAssignmentIncludeShantyTowns.checked;
+    let checkPopMin = burgsAssignmentCheckPopMin.checked;
+    let checkPopMax = burgsAssignmentCheckPopMax.checked;
+    let selectedState = burgsAssignmentSelectedState.value;
+    let selectedCulture = burgsAssignmentSelectedCulture.value;
+
+    const burgs = pack.burgs;
 
-  // Define the function to filter and move burgs
-  const filterAndMoveBurgs = (burgs) => {
   // Filter the burgs based on certain conditions using the previously defined constants
     const filteredBurgs = burgs.filter(b => 
+      !b.locked &&
       b.cell && 
-    b.port && 
+      (checkPorts && b.port) && 
-    !b.citadel && 
+      b.citadel && 
       b.walls && 
       b.plaza && 
       b.temple && 
       b.shanty && 
-    b.population >= minpop && 
+      (checkPopMin && b.population >= minpop) && 
-    b.population <= maxpop && 
+      (checkPopMax && b.population <= maxpop) && 
+      (selectedState >= 0 && b.state == selectedState) &&
+      (selectedCulture >= 0 && b.culture == selectedCulture) &&
       !b.capital
     );
 
     // Move the filtered burgs to the 'towns' group
     filteredBurgs.forEach(b => moveBurgToGroup(b.i, 'towns'));
   }
- }
 
   function triggerAllBurgsRemove() {
     const number = pack.burgs.filter(b => b.i && !b.removed && !b.capital && !b.lock).length;

modules/ui/editors.js

@@ -204,6 +204,7 @@ function addBurg(point) {
 }
 
 function moveBurgToGroup(id, g) {
+  console.log("moveBurgToGroup(" + pack.burgs[id].name + ", " + g + ")");
   const label = document.querySelector("#burgLabels [data-id='" + id + "']");
   const icon = document.querySelector("#burgIcons [data-id='" + id + "']");
   const anchor = document.querySelector("#anchors [data-id='" + id + "']");