Fix filters

Customizations/JSON/FilterConfig.ts

@@ -17,7 +17,7 @@ export default class FilterConfig {
         context + ".options-[" + i + "].question"
       );
       const osmTags = FromJSON.Tag(
-        option.osmTags,
+        option.osmTags ?? {and:[]},
         `${context}.options-[${i}].osmTags`
       );
 

Customizations/JSON/FilterConfigJson.ts

@@ -7,5 +7,5 @@ export default interface FilterConfigJson {
    * If there is only one option this will be a checkbox
    * Filtering is done based on the given osmTags that are compared to the objects in that layer.
    */
-  options: { question: string | any; osmTags: AndOrTagConfigJson | string }[];
+  options: { question: string | any; osmTags?: AndOrTagConfigJson | string }[];
 }

UI/BigComponents/FilterView.ts

@@ -1,123 +1,134 @@
-import { Utils } from "./../../Utils";
+import {Utils} from "../../Utils";
-import { FixedInputElement } from "./../Input/FixedInputElement";
+import {FixedInputElement} from "../Input/FixedInputElement";
-import { RadioButton } from "./../Input/RadioButton";
+import {RadioButton} from "../Input/RadioButton";
-import { VariableUiElement } from "../Base/VariableUIElement";
+import {VariableUiElement} from "../Base/VariableUIElement";
 import Toggle from "../Input/Toggle";
 import Combine from "../Base/Combine";
 import Translations from "../i18n/Translations";
 import LayerConfig from "../../Customizations/JSON/LayerConfig";
-import { Translation } from "../i18n/Translation";
+import {Translation} from "../i18n/Translation";
 import Svg from "../../Svg";
 import FilterConfig from "../../Customizations/JSON/FilterConfig";
-import CheckBoxes from "../Input/Checkboxes";
+import {TagsFilter} from "../../Logic/Tags/TagsFilter";
-import { InputElement } from "../Input/InputElement";
+import {And} from "../../Logic/Tags/And";
-import { TagsFilter } from "../../Logic/Tags/TagsFilter";
+import {UIEventSource} from "../../Logic/UIEventSource";
-import InputElementMap from "../Input/InputElementMap";
+import BaseUIElement from "../BaseUIElement";
-import { And } from "../../Logic/Tags/And";
-import { UIEventSource } from "../../Logic/UIEventSource";
 
 /**
  * Shows the filter
  */
 
 export default class FilterView extends VariableUiElement {
-  constructor(filteredLayer) {
+    constructor(filteredLayer) {
-    super(
+        super(
-      filteredLayer.map((filteredLayers) =>
+            filteredLayer.map((filteredLayers) =>
-        filteredLayers.map(FilterView.createOneFilteredLayerElement)
+                filteredLayers.map(FilterView.createOneFilteredLayerElement)
-      )
+            )
-    );
+        );
-  }
-
-  static createOneFilteredLayerElement(filteredLayer) {
-    const layer: LayerConfig = filteredLayer.layerDef;
-    const iconStyle = "width:1.5rem;height:1.5rem;margin-left:1.25rem";
-
-    const icon = new Combine([Svg.checkbox_filled]).SetStyle(iconStyle);
-    const iconUnselected = new Combine([Svg.checkbox_empty]).SetStyle(
-      iconStyle
-    );
-
-    if (filteredLayer.layerDef.name === undefined) {
-      return;
     }
 
-    const style =
+    static createOneFilteredLayerElement(filteredLayer) {
-      "display:flex;align-items:center;color:#007759;padding:0.5rem 0;";
+        const iconStyle = "width:1.5rem;height:1.5rem;margin-left:1.25rem";
 
-    const name: Translation = Translations.WT(
+        const icon = new Combine([Svg.checkbox_filled]).SetStyle(iconStyle);
-      filteredLayer.layerDef.name
+        const iconUnselected = new Combine([Svg.checkbox_empty]).SetStyle(
-    )?.Clone();
+            iconStyle
+        );
 
-    const styledNameChecked = name
+        if (filteredLayer.layerDef.name === undefined) {
-      .Clone()
+            return;
-      .SetStyle("font-size:large;padding-left:1.25rem");
+        }
 
-    const styledNameUnChecked = name
-      .Clone()
-      .SetStyle("font-size:large;padding-left:1.25rem");
 
-    const layerChecked = new Combine([icon, styledNameChecked])
+        const name: Translation = Translations.WT(
-      .SetStyle(style)
+            filteredLayer.layerDef.name
-      .onClick(() => filteredLayer.isDisplayed.setData(false));
+        )?.Clone();
 
-    const layerNotChecked = new Combine([iconUnselected, styledNameUnChecked])
+        const styledNameChecked = name
-      .SetStyle(style)
+            .Clone()
-      .onClick(() => filteredLayer.isDisplayed.setData(true));
+            .SetStyle("font-size:large;padding-left:1.25rem");
 
-    let listFilterElements: InputElement<TagsFilter>[] = layer.filters.map(
+        const styledNameUnChecked = name
-      FilterView.createFilter
+            .Clone()
-    );
+            .SetStyle("font-size:large;padding-left:1.25rem");
 
-    const update = () => {
+        const style =
-      let listTagsFilters = Utils.NoNull(
+            "display:flex;align-items:center;color:#007759;padding:0.5rem 0;";
-        listFilterElements.map((input) => input.GetValue().data)
+        const layerChecked = new Combine([icon, styledNameChecked])
-      );
+            .SetStyle(style)
-      filteredLayer.appliedFilters.setData(new And(listTagsFilters));
+            .onClick(() => filteredLayer.isDisplayed.setData(false));
-    };
 
-    listFilterElements.forEach((inputElement) =>
+        const layerNotChecked = new Combine([iconUnselected, styledNameUnChecked])
-      inputElement.GetValue().addCallback((_) => update())
+            .SetStyle(style)
-    );
+            .onClick(() => filteredLayer.isDisplayed.setData(true));
 
-    return new Toggle(
-      new Combine([layerChecked, ...listFilterElements]),
-      layerNotChecked,
-      filteredLayer.isDisplayed
-    ).SetStyle("margin:0.3em;");
-  }
         
-  static createFilter(filterConfig: FilterConfig): InputElement<TagsFilter> {
+        const filterPanel: BaseUIElement = FilterView.createFilterPanel(filteredLayer)
-    if (filterConfig.options.length === 1) {
-      let option = filterConfig.options[0];
-      let checkboxes = new CheckBoxes(
-        [option.question.Clone()],
-        new UIEventSource<number[]>([]),
-        "background-color: #F1F1F1;padding:0.25rem 0.5rem;",
-        "border:none;padding-left:3rem;color:#007759;display:flex;margin:0;justify-content:center;align-items:center;flex-direction:row;flex-wrap:nowrap;",
-        "margin:0;padding:0;",
-        "margin:0;padding:0.25rem 0 0 0.25rem;"
-      );
         
-      return new InputElementMap(
+        return new Toggle(
-        checkboxes,
+            new Combine([layerChecked, filterPanel]),
-        (t0, t1) => t0 === t1,
+            layerNotChecked,
-        (numbers) => (numbers.length > 0 ? option.osmTags : undefined),
+            filteredLayer.isDisplayed
-        (tagsFilter) => (tagsFilter == undefined ? [] : [0])
+        );
-      );
     }
     
-    let options = filterConfig.options;
+    static createFilterPanel(flayer: {
+        layerDef: LayerConfig,
+        appliedFilters: UIEventSource<TagsFilter>
+    }): BaseUIElement{
+        const layer = flayer.layerDef
+        if(layer.filters.length === 0){
+            return undefined;
+        }
         
-    return new RadioButton(
+        let listFilterElements: [BaseUIElement, UIEventSource<TagsFilter>][] = layer.filters.map(
-      options.map(
+            FilterView.createFilter
-        (option) =>
+        );
-          new FixedInputElement(option.question.Clone(), option.osmTags)
+
-      ),
+        const update = () => {
-      true,
+            let listTagsFilters = Utils.NoNull(
-      "background-color: #F1F1F1;padding:0.25rem 0.5rem;",
+                listFilterElements.map((input) => input[1].data)
-      "border:none;padding-left:3rem;color:#007759;display:flex;margin:0;justify-content:center;align-items:center;flex-direction:row;flex-wrap:nowrap;",
+            );
-      "margin:0;padding:0;"
+            flayer.appliedFilters.setData(new And(listTagsFilters));
-    );
+        };
-  }
+
+        listFilterElements.forEach((inputElement) =>
+            inputElement[1].addCallback((_) => update())
+        );
+
+        return new Combine(listFilterElements.map(input => input[0].SetClass("mt-3")))
+            .SetClass("flex flex-col ml-8 bg-gray-300 rounded-xl p-2")
+
+    }
+
+    static createFilter(filterConfig: FilterConfig): [BaseUIElement, UIEventSource<TagsFilter>] {
+        if (filterConfig.options.length === 1) {
+            let option = filterConfig.options[0];
+
+            const icon = Svg.checkbox_filled_svg().SetClass("block mr-2");
+            const iconUnselected = Svg.checkbox_empty_svg().SetClass("block mr-2");
+
+            const toggle = new Toggle(
+                new Combine([icon, option.question.Clone()]).SetClass("flex"),
+                new Combine([iconUnselected, option.question.Clone()]).SetClass("flex")
+            )
+                .ToggleOnClick()
+                .SetClass("block m-1")
+
+            return [toggle, toggle.isEnabled.map(enabled => enabled ? option.osmTags : undefined)]
+        }
+
+        let options = filterConfig.options;
+
+        const radio = new RadioButton(
+            options.map(
+                (option) =>
+                    new FixedInputElement(option.question.Clone(), option.osmTags)
+            ),
+            {
+                dontStyle: true
+            }
+        );
+        return [radio, radio.GetValue()]
+    }
 }

UI/Input/Checkboxes.ts

@@ -11,26 +11,15 @@ export default class CheckBoxes extends InputElement<number[]> {
     IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
     private readonly value: UIEventSource<number[]>;
     private readonly _elements: BaseUIElement[];
-    private styleWrapperOverride = "";
-    private styleInputOverride = "";
-    private styleLabelOverride = "";
 
     constructor(
         elements: BaseUIElement[],
-        value = new UIEventSource<number[]>([]),
+        value = new UIEventSource<number[]>([])
-        styleFormOverride = "",
-        styleWrapperOverride = "",
-        styleInputOverride = "",
-        styleLabelOverride = ""
     ) {
         super();
         this.value = value;
         this._elements = Utils.NoNull(elements);
         this.SetClass("flex flex-col");
-        this.SetStyle(styleFormOverride);
-        this.styleWrapperOverride = styleWrapperOverride;
-        this.styleInputOverride = styleInputOverride;
-        this.styleLabelOverride = styleLabelOverride;
     }
 
     IsValid(ts: number[]): boolean {
@@ -56,7 +45,6 @@ export default class CheckBoxes extends InputElement<number[]> {
 
             input.type = "checkbox";
             input.classList.add("p-1", "cursor-pointer", "m-3", "pl-3", "mr-0");
-            input.style.cssText = this.styleInputOverride;
 
             const label = document.createElement("label");
             label.htmlFor = input.id;
@@ -68,7 +56,6 @@ export default class CheckBoxes extends InputElement<number[]> {
                 "cursor-pointer",
                 "bg-red"
             );
-            label.style.cssText = this.styleLabelOverride;
 
             const wrapper = document.createElement("span");
             wrapper.classList.add(
@@ -79,7 +66,6 @@ export default class CheckBoxes extends InputElement<number[]> {
                 "border-gray-400",
                 "m-1"
             );
-            wrapper.style.cssText = this.styleWrapperOverride;
             wrapper.appendChild(input);
             wrapper.appendChild(label);
             el.appendChild(wrapper);

UI/Input/RadioButton.ts

@@ -1,198 +1,204 @@
-import { InputElement } from "./InputElement";
+import {InputElement} from "./InputElement";
-import { UIEventSource } from "../../Logic/UIEventSource";
+import {UIEventSource} from "../../Logic/UIEventSource";
-import { Utils } from "../../Utils";
+import {Utils} from "../../Utils";
 
 export class RadioButton<T> extends InputElement<T> {
-  private static _nextId = 0;
+    private static _nextId = 0;
-  IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
+    IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
-  private readonly value: UIEventSource<T>;
+    private readonly value: UIEventSource<T>;
-  private _elements: InputElement<T>[];
+    private _elements: InputElement<T>[];
-  private _selectFirstAsDefault: boolean;
+    private _selectFirstAsDefault: boolean;
-  private styleFormOverride = "";
+    private _dontStyle: boolean
-  private styleBlockOverride = "";
-  private styleInputOverride = "";
-  private styleLabelOverride = "";
 
-  constructor(
+    constructor(
-    elements: InputElement<T>[],
+        elements: InputElement<T>[],
-    selectFirstAsDefault = true,
+        options?: {
-    styleFormOverride = "",
+            selectFirstAsDefault?: boolean,
-    styleBlockOverride = "",
+            dontStyle?: boolean
-    styleInputOverride = "",
-    styleLabelOverride = ""
-  ) {
-    super();
-    this._selectFirstAsDefault = selectFirstAsDefault;
-    this._elements = Utils.NoNull(elements);
-    this.value = new UIEventSource<T>(undefined);
-    this.styleFormOverride = styleFormOverride;
-    this.styleBlockOverride = styleBlockOverride;
-    this.styleInputOverride = styleInputOverride;
-    this.styleLabelOverride = styleLabelOverride;
-  }
-  protected InnerConstructElement(): HTMLElement {
-    const elements = this._elements;
-    const selectFirstAsDefault = this._selectFirstAsDefault;
-
-    const selectedElementIndex: UIEventSource<number> =
-      new UIEventSource<number>(null);
-
-    const value = UIEventSource.flatten(
-      selectedElementIndex.map((selectedIndex) => {
-        if (selectedIndex !== undefined && selectedIndex !== null) {
-          return elements[selectedIndex].GetValue();
         }
-      }),
+    ) {
-      elements.map((e) => e?.GetValue())
+        super();
-    );
+        options = options ?? {}
-    value.syncWith(this.value);
+        this._selectFirstAsDefault = options.selectFirstAsDefault ?? true;
+        this._elements = Utils.NoNull(elements);
+        this.value = new UIEventSource<T>(undefined);
+        this._dontStyle = options.dontStyle ?? false
+    }
 
-    if (selectFirstAsDefault) {
+    protected InnerConstructElement(): HTMLElement {
-      value.addCallbackAndRun((selected) => {
+        const elements = this._elements;
-        if (selected === undefined) {
+        const selectFirstAsDefault = this._selectFirstAsDefault;
-          for (const element of elements) {
+
-            const v = element.GetValue().data;
+        const selectedElementIndex: UIEventSource<number> =
-            if (v !== undefined) {
+            new UIEventSource<number>(null);
-              value.setData(v);
+
-              break;
+        const value = UIEventSource.flatten(
+            selectedElementIndex.map((selectedIndex) => {
+                if (selectedIndex !== undefined && selectedIndex !== null) {
+                    return elements[selectedIndex].GetValue();
+                }
+            }),
+            elements.map((e) => e?.GetValue())
+        );
+        value.syncWith(this.value);
+
+        if (selectFirstAsDefault) {
+            value.addCallbackAndRun((selected) => {
+                if (selected === undefined) {
+                    for (const element of elements) {
+                        const v = element.GetValue().data;
+                        if (v !== undefined) {
+                            value.setData(v);
+                            break;
+                        }
+                    }
+                }
+            });
+        }
+
+        for (let i = 0; i < elements.length; i++) {
+            // If an element is clicked, the radio button corresponding with it should be selected as well
+            elements[i]?.onClick(() => {
+                selectedElementIndex.setData(i);
+            });
+            elements[i].IsSelected.addCallback((isSelected) => {
+                if (isSelected) {
+                    selectedElementIndex.setData(i);
+                }
+            });
+            elements[i].GetValue().addCallback(() => {
+                selectedElementIndex.setData(i);
+            });
+        }
+
+        const groupId = "radiogroup" + RadioButton._nextId;
+        RadioButton._nextId++;
+
+        const form = document.createElement("form");
+
+        const inputs = [];
+        const wrappers: HTMLElement[] = [];
+
+        for (let i1 = 0; i1 < elements.length; i1++) {
+            let element = elements[i1];
+            const labelHtml = element.ConstructElement();
+            if (labelHtml === undefined) {
+                continue;
             }
+
+            const input = document.createElement("input");
+            input.id = "radio" + groupId + "-" + i1;
+            input.name = groupId;
+            input.type = "radio";
+            input.classList.add(
+                "cursor-pointer",
+                "p-1",
+                "mr-2"
+            );
+
+
+            if (!this._dontStyle) {
+                input.classList.add(
+                    "p-1",
+                    "ml-2",
+                    "pl-2",
+                    "pr-0",
+                    "m-3",
+                    "mr-0"
+                );
+            }
+            input.onchange = () => {
+                if (input.checked) {
+                    selectedElementIndex.setData(i1);
+                }
+            };
+
+            inputs.push(input);
+
+            const label = document.createElement("label");
+            label.appendChild(labelHtml);
+            label.htmlFor = input.id;
+            label.classList.add("block", "w-full", "cursor-pointer", "bg-red");
+
+            if (!this._dontStyle) {
+                labelHtml.classList.add("p-2")
+            }
+
+            const block = document.createElement("div");
+            block.appendChild(input);
+            block.appendChild(label);
+            block.classList.add(
+                "flex",
+                "w-full",
+            );
+            if (!this._dontStyle) {
+                block.classList.add(
+                    "m-1",
+                    "border",
+                    "rounded-3xl",
+                    "border-gray-400",
+                )
+            }
+            wrappers.push(block);
+
+            form.appendChild(block);
+        }
+
+        value.addCallbackAndRun((selected) => {
+            let somethingChecked = false;
+            for (let i = 0; i < inputs.length; i++) {
+                let input = inputs[i];
+                input.checked = !somethingChecked && elements[i].IsValid(selected);
+                somethingChecked = somethingChecked || input.checked;
+
+                if (input.checked) {
+                    wrappers[i].classList.remove("border-gray-400");
+                    wrappers[i].classList.add("border-black");
+                } else {
+                    wrappers[i].classList.add("border-gray-400");
+                    wrappers[i].classList.remove("border-black");
+                }
+            }
+        });
+
+        this.SetClass("flex flex-col");
+
+        return form;
+    }
+
+    IsValid(t: T): boolean {
+        for (const inputElement of this._elements) {
+            if (inputElement.IsValid(t)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    GetValue(): UIEventSource<T> {
+        return this.value;
+    }
+
+    /*
+      public ShowValue(t: T): boolean {
+          if (t === undefined) {
+              return false;
           }
-        }
+          if (!this.IsValid(t)) {
-      });
+              return false;
-    }
+          }
+          // We check that what is selected matches the previous rendering
+          for (let i = 0; i < this._elements.length; i++) {
+              const e = this._elements[i];
+              if (e.IsValid(t)) {
+                  this._selectedElementIndex.setData(i);
+                  e.GetValue().setData(t);
+                  const radio = document.getElementById(this.IdFor(i));
+                  // @ts-ignore
+                  radio?.checked = true;
+                  return;
+              }
   
-    for (let i = 0; i < elements.length; i++) {
+          }
-      // If an element is clicked, the radio button corresponding with it should be selected as well
+      }*/
-      elements[i]?.onClick(() => {
-        selectedElementIndex.setData(i);
-      });
-      elements[i].IsSelected.addCallback((isSelected) => {
-        if (isSelected) {
-          selectedElementIndex.setData(i);
-        }
-      });
-      elements[i].GetValue().addCallback(() => {
-        selectedElementIndex.setData(i);
-      });
-    }
-
-    const groupId = "radiogroup" + RadioButton._nextId;
-    RadioButton._nextId++;
-
-    const form = document.createElement("form");
-    form.style.cssText = this.styleFormOverride;
-
-    const inputs = [];
-    const wrappers: HTMLElement[] = [];
-
-    for (let i1 = 0; i1 < elements.length; i1++) {
-      let element = elements[i1];
-      const labelHtml = element.ConstructElement();
-      if (labelHtml === undefined) {
-        continue;
-      }
-
-      const input = document.createElement("input");
-      input.id = "radio" + groupId + "-" + i1;
-      input.name = groupId;
-      input.type = "radio";
-      input.classList.add(
-        "p-1",
-        "cursor-pointer",
-        "ml-2",
-        "pl-2",
-        "pr-0",
-        "m-3",
-        "mr-0"
-      );
-      input.style.cssText = this.styleInputOverride;
-
-      input.onchange = () => {
-        if (input.checked) {
-          selectedElementIndex.setData(i1);
-        }
-      };
-
-      inputs.push(input);
-
-      const label = document.createElement("label");
-      label.appendChild(labelHtml);
-      label.htmlFor = input.id;
-      label.classList.add("block", "w-full", "p-2", "cursor-pointer", "bg-red");
-      label.style.cssText = this.styleLabelOverride;
-
-      const block = document.createElement("div");
-      block.appendChild(input);
-      block.appendChild(label);
-      block.classList.add(
-        "flex",
-        "w-full",
-        "border",
-        "rounded-3xl",
-        "border-gray-400",
-        "m-1"
-      );
-      block.style.cssText = this.styleBlockOverride;
-      wrappers.push(block);
-
-      form.appendChild(block);
-    }
-
-    value.addCallbackAndRun((selected) => {
-      let somethingChecked = false;
-      for (let i = 0; i < inputs.length; i++) {
-        let input = inputs[i];
-        input.checked = !somethingChecked && elements[i].IsValid(selected);
-        somethingChecked = somethingChecked || input.checked;
-
-        if (input.checked) {
-          wrappers[i].classList.remove("border-gray-400");
-          wrappers[i].classList.add("border-black");
-        } else {
-          wrappers[i].classList.add("border-gray-400");
-          wrappers[i].classList.remove("border-black");
-        }
-      }
-    });
-
-    this.SetClass("flex flex-col");
-
-    return form;
-  }
-
-  IsValid(t: T): boolean {
-    for (const inputElement of this._elements) {
-      if (inputElement.IsValid(t)) {
-        return true;
-      }
-    }
-    return false;
-  }
-
-  GetValue(): UIEventSource<T> {
-    return this.value;
-  }
-
-  /*
-    public ShowValue(t: T): boolean {
-        if (t === undefined) {
-            return false;
-        }
-        if (!this.IsValid(t)) {
-            return false;
-        }
-        // We check that what is selected matches the previous rendering
-        for (let i = 0; i < this._elements.length; i++) {
-            const e = this._elements[i];
-            if (e.IsValid(t)) {
-                this._selectedElementIndex.setData(i);
-                e.GetValue().setData(t);
-                const radio = document.getElementById(this.IdFor(i));
-                // @ts-ignore
-                radio?.checked = true;
-                return;
-            }
-
-        }
-    }*/
 }

UI/Popup/TagRenderingQuestion.ts

@@ -164,7 +164,7 @@ export default class TagRenderingQuestion extends Combine {
         if (configuration.multiAnswer) {
             return TagRenderingQuestion.GenerateMultiAnswer(configuration, inputEls, ff, configuration.mappings.map(mp => mp.ifnot))
         } else {
-            return new RadioButton(inputEls, false)
+            return new RadioButton(inputEls, {selectFirstAsDefault: false})
         }
 
     }

assets/layers/nature_reserve/nature_reserve.json

@@ -419,5 +419,38 @@
         "nl": "Voeg een ontbrekend, erkend natuurreservaat toe, bv. een gebied dat beheerd wordt door het ANB of natuurpunt"
       }
     }
+  ],
+  "filter": [
+    {
+      "options": [
+        {
+          "question": {
+            "nl": "Vrij te bezoeken"
+          },
+          "osmTags": "access=yes"
+        }
+      ]
+    },
+    {
+      "options": [
+        {
+          "question": {
+            "nl": "Alle natuurgebieden"
+          }
+        },{
+          "question": {
+            "nl": "Honden mogen vrij rondlopen"
+          },
+          "osmTags": "dog=yes"
+        },{
+          "question": {
+            "nl": "Honden welkom aan de leiband"
+          },
+          "osmTags": {
+            "or": ["dog=yes","dog=leashed"]
+          }
+        }
+      ]
+    }
   ]
 }