start creating extra filter

InitUiElements.ts

@@ -44,6 +44,7 @@ import AvailableBaseLayers from "./Logic/Actors/AvailableBaseLayers";
 import { SimpleMapScreenshoter } from "leaflet-simple-map-screenshoter";
 import jsPDF from "jspdf";
 import FilterView from "./UI/BigComponents/FilterView";
+import { TagsFilter } from "./Logic/Tags/TagsFilter";
 
 export class InitUiElements {
   static InitAll(
@@ -59,8 +60,7 @@ export class InitUiElements {
         `Error: incorrect layout <i>${layoutName}</i><br/><a href='https://${window.location.host}/'>Go back</a>`
       )
         .AttachTo("centermessage")
-                .onClick(() => {
+        .onClick(() => {});
-                });
       throw "Incorrect layout";
     }
 
@@ -222,7 +222,6 @@ export class InitUiElements {
       State.state.locationControl.ping();
     });
 
-
     // To download pdf of leaflet you need to turn it into and image first
     // Then export that image as a pdf
     // leaflet-simple-map-screenshoter: to make image
@@ -237,10 +236,10 @@ export class InitUiElements {
       console.log("Debug - Screenshot");
       screenshotter.addTo(State.state.leafletMap.data);
       let doc = new jsPDF();
-            screenshotter.takeScreen('image').then(image => {
+      screenshotter.takeScreen("image").then((image) => {
         // TO DO: scale image on pdf to its original size
-                doc.addImage(image, 'PNG', 0, 0, screen.width / 10, screen.height / 10);
+        doc.addImage(image, "PNG", 0, 0, screen.width / 10, screen.height / 10);
-                doc.setDisplayMode('fullheight');
+        doc.setDisplayMode("fullheight");
         doc.save("Screenshot");
       });
       //screenshotter.remove();
@@ -249,7 +248,9 @@ export class InitUiElements {
     });
 
     new Combine(
-            [plus, min, geolocationButton, screenshot].map((el) => el.SetClass("m-0.5 md:m-1"))
+      [plus, min, geolocationButton, screenshot].map((el) =>
+        el.SetClass("m-0.5 md:m-1")
+      )
     )
       .SetClass("flex flex-col")
       .AttachTo("bottom-right");
@@ -396,31 +397,29 @@ export class InitUiElements {
       State.state.featureSwitchLayers
     );
 
-        const filterView = new FilterView(State.state.FilterIsOpened).SetClass(
+    // const filterView = new FilterView(State.state.FilterIsOpened).SetClass(
-            "block p-1 rounded-full"
+    //     "block p-1 rounded-full"
-        );
+    // );
 
-        const filterMapControlButton = new MapControlButton(
+    // const filterMapControlButton = new MapControlButton(
-            new CenterFlexedElement(
+    //     new CenterFlexedElement(
-                Img.AsImageElement(Svg.filter, "", "width:1.25rem;height:1.25rem")
+    //         Img.AsImageElement(Svg.filter, "", "width:1.25rem;height:1.25rem")
-            )
+    //     )
-        );
+    // );
 
-        const filterButton = new Toggle(
+    // const filterButton = new Toggle(
-            filterView,
+    //     filterView,
-            filterMapControlButton,
+    //     filterMapControlButton,
-            State.state.FilterIsOpened
+    //     State.state.FilterIsOpened
-        ).ToggleOnClick();
+    // ).ToggleOnClick();
 
-        const filterControl = new Toggle(
+    // const filterControl = new Toggle(
-            filterButton,
+    //     filterButton,
-            "",
+    //     "",
-            State.state.featureSwitchFilter
+    //     State.state.featureSwitchFilter
-        );
+    // );
 
-        new Combine([copyrightButton, layerControl, filterControl]).AttachTo(
+    new Combine([copyrightButton, layerControl]).AttachTo("bottom-left");
-            "bottom-left"
-        );
 
     State.state.locationControl.addCallback(() => {
       // Close the layer selection when the map is moved
@@ -435,7 +434,8 @@ export class InitUiElements {
   }
 
   private static InitBaseMap() {
-        State.state.availableBackgroundLayers = AvailableBaseLayers.AvailableLayersAt(State.state.locationControl);
+    State.state.availableBackgroundLayers =
+      AvailableBaseLayers.AvailableLayersAt(State.state.locationControl);
     State.state.backgroundLayer = State.state.backgroundLayerId.map(
       (selectedId: string) => {
         if (selectedId === undefined) {
@@ -519,6 +519,7 @@ export class InitUiElements {
         const flayer = {
           isDisplayed: isDisplayed,
           layerDef: layer,
+          appliedFilters: new UIEventSource<TagsFilter>(undefined)
         };
         flayers.push(flayer);
       }

Logic/FeatureSource/FilteringFeatureSource.ts

@@ -3,64 +3,85 @@ import {UIEventSource} from "../UIEventSource";
 import LayerConfig from "../../Customizations/JSON/LayerConfig";
 import Loc from "../../Models/Loc";
 import Hash from "../Web/Hash";
+import { TagsFilter } from "../Tags/TagsFilter";
 
 export default class FilteringFeatureSource implements FeatureSource {
-    public features: UIEventSource<{ feature: any; freshness: Date }[]> = new UIEventSource<{ feature: any; freshness: Date }[]>([]);
+  public features: UIEventSource<{ feature: any; freshness: Date }[]> =
-    public readonly name = "FilteringFeatureSource"
+    new UIEventSource<{ feature: any; freshness: Date }[]>([]);
+  public readonly name = "FilteringFeatureSource";
 
-    constructor(layers: UIEventSource<{
+  constructor(
-                    isDisplayed: UIEventSource<boolean>,
+    layers: UIEventSource<
-                    layerDef: LayerConfig
+      {
-                }[]>,
+        isDisplayed: UIEventSource<boolean>;
+        layerDef: LayerConfig;
+        appliedFilters: UIEventSource<TagsFilter>;
+      }[]
+    >,
     location: UIEventSource<Loc>,
     selectedElement: UIEventSource<any>,
-                upstream: FeatureSource) {
+    upstream: FeatureSource
-
+  ) {
     const self = this;
 
     function update() {
-
       const layerDict = {};
       if (layers.data.length == 0) {
-                console.warn("No layers defined!")
+        console.warn("No layers defined!");
         return;
       }
       for (const layer of layers.data) {
         layerDict[layer.layerDef.id] = layer;
       }
 
-            const features: { feature: any, freshness: Date }[] = upstream.features.data;
+      const features: { feature: any; freshness: Date }[] =
+        upstream.features.data;
 
       const missingLayers = new Set<string>();
 
-            const newFeatures = features.filter(f => {
+      const newFeatures = features.filter((f) => {
         const layerId = f.feature._matching_layer_id;
 
-                if(selectedElement.data?.id === f.feature.id || f.feature.id === Hash.hash.data){
+        if (
+          selectedElement.data?.id === f.feature.id ||
+          f.feature.id === Hash.hash.data
+        ) {
           // This is the selected object - it gets a free pass even if zoom is not sufficient
           return true;
         }
 
         if (layerId !== undefined) {
           const layer: {
-                        isDisplayed: UIEventSource<boolean>,
+            isDisplayed: UIEventSource<boolean>;
-                        layerDef: LayerConfig
+            layerDef: LayerConfig;
+            appliedFilters: UIEventSource<TagsFilter>;
           } = layerDict[layerId];
           if (layer === undefined) {
-                        missingLayers.add(layerId)
+            missingLayers.add(layerId);
             return true;
           }
 
-                    const isShown = layer.layerDef.isShown
+          const isShown = layer.layerDef.isShown;
           const tags = f.feature.properties;
           if (isShown.IsKnown(tags)) {
-                        const result = layer.layerDef.isShown.GetRenderValue(f.feature.properties).txt;
+            const result = layer.layerDef.isShown.GetRenderValue(
+              f.feature.properties
+            ).txt;
             if (result !== "yes") {
               return false;
             }
           }
 
           if (FilteringFeatureSource.showLayer(layer, location)) {
+            const tagsFilter = layer.appliedFilters.data;
+
+            if (tagsFilter) {
+              const properties = f.feature.properties;
+              if (!tagsFilter.matchesProperties(properties)) {
+                return false;
+              }
+            }
+
             return true;
           }
         }
@@ -69,25 +90,36 @@ export default class FilteringFeatureSource implements FeatureSource {
           if (!FilteringFeatureSource.showLayer(toCheck, location)) {
             continue;
           }
-                    if (toCheck.layerDef.source.osmTags.matchesProperties(f.feature.properties)) {
+          if (
+            toCheck.layerDef.source.osmTags.matchesProperties(
+              f.feature.properties
+            )
+          ) {
             return true;
           }
         }
         return false;
-
       });
-            console.log("Filtering layer source: input: ", upstream.features.data?.length, "output:", newFeatures.length)
+      console.log(
+        "Filtering layer source: input: ",
+        upstream.features.data?.length,
+        "output:",
+        newFeatures.length
+      );
       self.features.setData(newFeatures);
       if (missingLayers.size > 0) {
-                console.error("Some layers were not found: ", Array.from(missingLayers))
+        console.error(
+          "Some layers were not found: ",
+          Array.from(missingLayers)
+        );
       }
     }
 
-
     upstream.features.addCallback(() => {
-            update()
+      update();
     });
-        location.map(l => {
+    location
+      .map((l) => {
         // We want something that is stable for the shown layers
         const displayedLayerIndexes = [];
         for (let i = 0; i < layers.data.length; i++) {
@@ -103,32 +135,40 @@ export default class FilteringFeatureSource implements FeatureSource {
           }
           displayedLayerIndexes.push(i);
         }
-            return displayedLayerIndexes.join(",")
+        return displayedLayerIndexes.join(",");
-        }).addCallback(() => {
+      })
+      .addCallback(() => {
         update();
       });
 
     layers.addCallback(update);
 
     const registered = new Set<UIEventSource<boolean>>();
-        layers.addCallbackAndRun(layers => {
+    layers.addCallbackAndRun((layers) => {
       for (const layer of layers) {
         if (registered.has(layer.isDisplayed)) {
           continue;
         }
         registered.add(layer.isDisplayed);
         layer.isDisplayed.addCallback(() => update());
+        layer.appliedFilters.addCallback(() => update());
       }
-        })
+    });
 
     update();
-
   }
 
-    private static showLayer(layer: {
+  private static showLayer(
-        isDisplayed: UIEventSource<boolean>,
+    layer: {
-        layerDef: LayerConfig
+      isDisplayed: UIEventSource<boolean>;
-    }, location: UIEventSource<Loc>) {
+      layerDef: LayerConfig;
-        return layer.isDisplayed.data && (layer.layerDef.minzoom <= location.data.zoom) && (layer.layerDef.maxzoom >= location.data.zoom)
+    },
+    location: UIEventSource<Loc>
+  ) {
+    return (
+      layer.isDisplayed.data &&
+      layer.layerDef.minzoom <= location.data.zoom &&
+      layer.layerDef.maxzoom >= location.data.zoom
+    );
   }
 }

State.ts

@@ -20,6 +20,7 @@ import PendingChangesUploader from "./Logic/Actors/PendingChangesUploader";
 import {Relation} from "./Logic/Osm/ExtractRelations";
 import OsmApiFeatureSource from "./Logic/FeatureSource/OsmApiFeatureSource";
 import FeaturePipeline from "./Logic/FeatureSource/FeaturePipeline";
+import { TagsFilter } from "./Logic/Tags/TagsFilter";
 
 /**
  * Contains the global state: a bunch of UI-event sources
@@ -62,9 +63,11 @@ export default class State {
 
     public filteredLayers: UIEventSource<{
         readonly isDisplayed: UIEventSource<boolean>;
+        readonly appliedFilters: UIEventSource<TagsFilter>;
         readonly layerDef: LayerConfig;
     }[]> = new UIEventSource<{
         readonly isDisplayed: UIEventSource<boolean>;
+        readonly appliedFilters: UIEventSource<TagsFilter>;
         readonly layerDef: LayerConfig;
     }[]>([]);
 

UI/Base/VariableUIElement.ts

@@ -2,45 +2,42 @@ import {UIEventSource} from "../../Logic/UIEventSource";
 import BaseUIElement from "../BaseUIElement";
 
 export class VariableUiElement extends BaseUIElement {
-
   private _element: HTMLElement;
 
-    constructor(contents: UIEventSource<string | BaseUIElement | BaseUIElement[]>) {
+  constructor(
+    contents: UIEventSource<string | BaseUIElement | BaseUIElement[]>
+  ) {
     super();
 
-        this._element = document.createElement("span")
+    this._element = document.createElement("span");
-        const el = this._element
+    const el = this._element;
-        contents.addCallbackAndRun(contents => {
+    contents.addCallbackAndRun((contents) => {
       while (el.firstChild) {
-                el.removeChild(
+        el.removeChild(el.lastChild);
-                    el.lastChild
-                )
       }
 
       if (contents === undefined) {
         return el;
       }
       if (typeof contents === "string") {
-                el.innerHTML = contents
+        el.innerHTML = contents;
       } else if (contents instanceof Array) {
         for (const content of contents) {
           const c = content.ConstructElement();
           if (c !== undefined && c !== null) {
-                        el.appendChild(c)  
+            el.appendChild(c);
           }
-
         }
       } else {
         const c = contents.ConstructElement();
         if (c !== undefined && c !== null) {
-                    el.appendChild(c)
+          el.appendChild(c);
         }
       }
-        })
+    });
   }
 
   protected InnerConstructElement(): HTMLElement {
     return this._element;
   }
-
 }

UI/BigComponents/FilterView.ts

@@ -1,3 +1,6 @@
+import { Utils } from "./../../Utils";
+import { FixedInputElement } from "./../Input/FixedInputElement";
+import { RadioButton } from "./../Input/RadioButton";
 import { FixedUiElement } from "./../Base/FixedUiElement";
 import { LayerConfigJson } from "./../../Customizations/JSON/LayerConfigJson";
 import { UIEventSource } from "../../Logic/UIEventSource";
@@ -11,34 +14,28 @@ import BaseUIElement from "../BaseUIElement";
 import { Translation } from "../i18n/Translation";
 import ScrollableFullScreen from "../Base/ScrollableFullScreen";
 import Svg from "../../Svg";
+import FilterConfig from "../../Customizations/JSON/FilterConfig";
+import CheckBoxes from "../Input/Checkboxes";
+import { InputElement } from "../Input/InputElement";
+import { TagsFilter } from "../../Logic/Tags/TagsFilter";
+import InputElementMap from "../Input/InputElementMap";
+import { And } from "../../Logic/Tags/And";
 
 /**
  * Shows the filter
  */
-export default class FilterView extends ScrollableFullScreen {
-  constructor(isShown: UIEventSource<boolean>) {
-    super(FilterView.GenTitle, FilterView.Generatecontent, "filter", isShown);
-  }
 
-  private static GenTitle(): BaseUIElement {
+export default class FilterView extends VariableUiElement {
-    return new FixedUiElement(`Filter`).SetClass(
+  constructor(filteredLayer) {
-      "text-2xl break-words font-bold p-2"
+    super(
+      filteredLayer.map((filteredLayers) =>
+        filteredLayers.map(FilterView.createOneFilteredLayerElement)
+      )
     );
   }
 
-  private static Generatecontent(): BaseUIElement {
+  static createOneFilteredLayerElement(filteredLayer) {
-    let filterPanel: BaseUIElement = new FixedUiElement("");
+    const layer: LayerConfig = filteredLayer.layerDef;
-
-    if (State.state.filteredLayers.data.length > 1) {
-      let activeLayers = State.state.filteredLayers;
-
-      if (activeLayers === undefined) {
-        throw "ActiveLayers should be defined...";
-      }
-
-      const checkboxes: BaseUIElement[] = [];
-
-      for (const layer of activeLayers.data) {
     const iconStyle = "width:1.5rem;height:1.5rem;margin-left:1.25rem";
 
     const icon = new Combine([Svg.checkbox_filled]).SetStyle(iconStyle);
@@ -46,13 +43,15 @@ export default class FilterView extends ScrollableFullScreen {
       iconStyle
     );
 
-        if (layer.layerDef.name === undefined) {
+    if (filteredLayer.layerDef.name === undefined) {
-          continue;
+      return;
     }
 
     const style = "display:flex;align-items:center;color:#007759";
 
-        const name: Translation = Translations.WT(layer.layerDef.name)?.Clone();
+    const name: Translation = Translations.WT(
+      filteredLayer.layerDef.name
+    )?.Clone();
 
     const styledNameChecked = name
       .Clone()
@@ -62,28 +61,57 @@ export default class FilterView extends ScrollableFullScreen {
       .Clone()
       .SetStyle("font-size:large;padding-left:1.25rem");
 
-        const layerChecked = new Combine([icon, styledNameChecked]).SetStyle(
+    const layerChecked = new Combine([icon, styledNameChecked]).SetStyle(style);
-          style
-        );
 
     const layerNotChecked = new Combine([
       iconUnselected,
       styledNameUnChecked,
     ]).SetStyle(style);
 
-        checkboxes.push(
+    let listFilterElements: InputElement<TagsFilter>[] = layer.filters.map(
-          new Toggle(layerChecked, layerNotChecked, layer.isDisplayed)
+      FilterView.createFilter
+    );
+
+    function update() {
+      let listTagsFilters = Utils.NoNull(
+        listFilterElements.map((input) => input.GetValue().data)
+      );
+      filteredLayer.appliedTags.setData(new And(listTagsFilters));
+    }
+
+    listFilterElements.forEach((inputElement) =>
+      inputElement.GetValue().addCallback((_) => update())
+    );
+
+    return new Toggle(
+      new Combine([layerChecked, ...listFilterElements]),
+      layerNotChecked,
+      filteredLayer.isDisplayed
+    )
       .ToggleOnClick()
-            .SetStyle("margin:0.3em;")
+      .SetStyle("margin:0.3em;");
+  }
+
+  static createFilter(filterConfig: FilterConfig): InputElement<TagsFilter> {
+    if (filterConfig.options.length === 1) {
+      let option = filterConfig.options[0];
+      let checkboxes = new CheckBoxes([option.question.Clone()]);
+
+      return new InputElementMap(
+        checkboxes,
+        (t0, t1) => t0 === t1,
+        (numbers) => (numbers.length > 0 ? option.osmTags : undefined),
+        (tagsFilter) => (tagsFilter == undefined ? [] : [0])
       );
     }
 
-      let combinedCheckboxes = new Combine(checkboxes);
+    let options = filterConfig.options;
-      combinedCheckboxes.SetStyle("display:flex;flex-direction:column;");
 
-      filterPanel = new Combine([combinedCheckboxes]);
+    return new RadioButton(
-
+      options.map(
-      return filterPanel;
+        (option) =>
-    }
+          new FixedInputElement(option.question.Clone(), option.osmTags)
+      )
+    );
   }
 }

UI/BigComponents/LayerControlPanel.ts

@@ -8,41 +8,52 @@ import {UIEventSource} from "../../Logic/UIEventSource";
 import BaseUIElement from "../BaseUIElement";
 import Toggle from "../Input/Toggle";
 import { ExportDataButton } from "./ExportDataButton";
+import FilterView from "./FilterView";
 
 export default class LayerControlPanel extends ScrollableFullScreen {
-
   constructor(isShown: UIEventSource<boolean>) {
-        super(LayerControlPanel.GenTitle, LayerControlPanel.GeneratePanel, "layers", isShown);
+    super(
+      LayerControlPanel.GenTitle,
+      LayerControlPanel.GeneratePanel,
+      "layers",
+      isShown
+    );
   }
 
   private static GenTitle(): BaseUIElement {
-        return Translations.t.general.layerSelection.title.Clone().SetClass("text-2xl break-words font-bold p-2")
+    return Translations.t.general.layerSelection.title
+      .Clone()
+      .SetClass("text-2xl break-words font-bold p-2");
   }
 
   private static GeneratePanel(): BaseUIElement {
-        const elements: BaseUIElement[] = []
+    const elements: BaseUIElement[] = [];
 
     if (State.state.layoutToUse.data.enableBackgroundLayerSelection) {
       const backgroundSelector = new BackgroundSelector();
       backgroundSelector.SetStyle("margin:1em");
-            backgroundSelector.onClick(() => {
+      backgroundSelector.onClick(() => {});
-            });
+      elements.push(backgroundSelector);
-            elements.push(backgroundSelector)
     }
 
-        elements.push(new Toggle(
+    elements.push(
-            new LayerSelection(State.state.filteredLayers),
+      new Toggle(
+        new FilterView(State.state.filteredLayers),
         undefined,
-            State.state.filteredLayers.map(layers => layers.length > 1)
+        State.state.filteredLayers.map(
-        ))
+          (layers) => layers.length > 1 || layers[0].layerDef.filters.length > 0
+        )
+      )
+    );
 
-        elements.push(new Toggle(
+    elements.push(
+      new Toggle(
         new ExportDataButton(),
         undefined,
         State.state.featureSwitchEnableExport
-        ))
+      )
+    );
 
-        return new Combine(elements).SetClass("flex flex-col")
+    return new Combine(elements).SetClass("flex flex-col");
   }
-
 }

assets/layers/public_bookcase/public_bookcase.json

@@ -71,9 +71,7 @@
         "ru": "Книжный шкаф",
         "it": "Microbiblioteca"
       },
-      "tags": [
+      "tags": ["amenity=public_bookcase"],
-        "amenity=public_bookcase"
-      ],
       "preciseInput": {
         "preferredBackground": "photo"
       }
@@ -107,10 +105,7 @@
       "mappings": [
         {
           "if": {
-            "and": [
+            "and": ["noname=yes", "name="]
-              "noname=yes",
-              "name="
-            ]
           },
           "then": {
             "en": "This bookcase doesn't have a name",
@@ -316,18 +311,12 @@
             "it": "Fa parte della rete 'Little Free Library'"
           },
           "if": {
-            "and": [
+            "and": ["brand=Little Free Library", "nobrand="]
-              "brand=Little Free Library",
-              "nobrand="
-            ]
           }
         },
         {
           "if": {
-            "and": [
+            "and": ["nobrand=yes", "brand="]
-              "nobrand=yes",
-              "brand="
-            ]
           },
           "then": {
             "en": "This public bookcase is not part of a bigger network",
@@ -368,11 +357,7 @@
             "it": "Questa microbiblioteca non fa parte di una rete"
           },
           "if": {
-            "and": [
+            "and": ["nobrand=yes", "brand=", "ref="]
-              "nobrand=yes",
-              "brand=",
-              "ref="
-            ]
           }
         }
       ]
@@ -424,11 +409,18 @@
   ],
   "deletion": {
     "softDeletionTags": {
-      "and": [
+      "and": ["disused:amenity=public_bookcase", "amenity="]
-        "disused:amenity=public_bookcase",
-        "amenity="
-      ]
     },
     "neededChangesets": 5
+  },
+  "filter": [
+    {
+      "options": [
+        {
+          "question": "Kinderboeken aanwezig?",
+          "osmTags": "books~.*children.*"
         }
+      ]
+    }
+  ]
 }