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,20 +1,18 @@
-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
@@ -30,7 +28,6 @@ export default class FilterView extends VariableUiElement {
     }
 
     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);
@@ -42,8 +39,6 @@ export default class FilterView extends VariableUiElement {
             return;
         }
 
-    const style =
-      "display:flex;align-items:center;color:#007759;padding:0.5rem 0;";
 
         const name: Translation = Translations.WT(
             filteredLayer.layerDef.name
@@ -57,6 +52,8 @@ export default class FilterView extends VariableUiElement {
             .Clone()
             .SetStyle("font-size:large;padding-left:1.25rem");
 
+        const style =
+            "display:flex;align-items:center;color:#007759;padding:0.5rem 0;";
         const layerChecked = new Combine([icon, styledNameChecked])
             .SetStyle(style)
             .onClick(() => filteredLayer.isDisplayed.setData(false));
@@ -65,59 +62,73 @@ export default class FilterView extends VariableUiElement {
             .SetStyle(style)
             .onClick(() => filteredLayer.isDisplayed.setData(true));
 
-    let listFilterElements: InputElement<TagsFilter>[] = layer.filters.map(
+        
+        const filterPanel: BaseUIElement = FilterView.createFilterPanel(filteredLayer)
+        
+        return new Toggle(
+            new Combine([layerChecked, filterPanel]),
+            layerNotChecked,
+            filteredLayer.isDisplayed
+        );
+    }
+    
+    static createFilterPanel(flayer: {
+        layerDef: LayerConfig,
+        appliedFilters: UIEventSource<TagsFilter>
+    }): BaseUIElement{
+        const layer = flayer.layerDef
+        if(layer.filters.length === 0){
+            return undefined;
+        }
+        
+        let listFilterElements: [BaseUIElement, UIEventSource<TagsFilter>][] = layer.filters.map(
             FilterView.createFilter
         );
 
         const update = () => {
             let listTagsFilters = Utils.NoNull(
-        listFilterElements.map((input) => input.GetValue().data)
+                listFilterElements.map((input) => input[1].data)
             );
-      filteredLayer.appliedFilters.setData(new And(listTagsFilters));
+            flayer.appliedFilters.setData(new And(listTagsFilters));
         };
 
         listFilterElements.forEach((inputElement) =>
-      inputElement.GetValue().addCallback((_) => update())
+            inputElement[1].addCallback((_) => update())
         );
 
-    return new Toggle(
+        return new Combine(listFilterElements.map(input => input[0].SetClass("mt-3")))
-      new Combine([layerChecked, ...listFilterElements]),
+            .SetClass("flex flex-col ml-8 bg-gray-300 rounded-xl p-2")
-      layerNotChecked,
+
-      filteredLayer.isDisplayed
-    ).SetStyle("margin:0.3em;");
     }
 
-  static createFilter(filterConfig: FilterConfig): InputElement<TagsFilter> {
+    static createFilter(filterConfig: FilterConfig): [BaseUIElement, UIEventSource<TagsFilter>] {
         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(
+            const icon = Svg.checkbox_filled_svg().SetClass("block mr-2");
-        checkboxes,
+            const iconUnselected = Svg.checkbox_empty_svg().SetClass("block mr-2");
-        (t0, t1) => t0 === t1,
+
-        (numbers) => (numbers.length > 0 ? option.osmTags : undefined),
+            const toggle = new Toggle(
-        (tagsFilter) => (tagsFilter == undefined ? [] : [0])
+                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;
 
-    return new RadioButton(
+        const radio = new RadioButton(
             options.map(
                 (option) =>
                     new FixedInputElement(option.question.Clone(), option.osmTags)
             ),
-      true,
+            {
-      "background-color: #F1F1F1;padding:0.25rem 0.5rem;",
+                dontStyle: true
-      "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;"
         );
+        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,6 +1,6 @@
-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;
@@ -8,28 +8,23 @@ export class RadioButton<T> extends InputElement<T> {
     private readonly value: UIEventSource<T>;
     private _elements: InputElement<T>[];
     private _selectFirstAsDefault: boolean;
-  private styleFormOverride = "";
+    private _dontStyle: boolean
-  private styleBlockOverride = "";
-  private styleInputOverride = "";
-  private styleLabelOverride = "";
 
     constructor(
         elements: InputElement<T>[],
-    selectFirstAsDefault = true,
+        options?: {
-    styleFormOverride = "",
+            selectFirstAsDefault?: boolean,
-    styleBlockOverride = "",
+            dontStyle?: boolean
-    styleInputOverride = "",
+        }
-    styleLabelOverride = ""
     ) {
         super();
-    this._selectFirstAsDefault = selectFirstAsDefault;
+        options = options ?? {}
+        this._selectFirstAsDefault = options.selectFirstAsDefault ?? true;
         this._elements = Utils.NoNull(elements);
         this.value = new UIEventSource<T>(undefined);
-    this.styleFormOverride = styleFormOverride;
+        this._dontStyle = options.dontStyle ?? false
-    this.styleBlockOverride = styleBlockOverride;
-    this.styleInputOverride = styleInputOverride;
-    this.styleLabelOverride = styleLabelOverride;
     }
+
     protected InnerConstructElement(): HTMLElement {
         const elements = this._elements;
         const selectFirstAsDefault = this._selectFirstAsDefault;
@@ -80,7 +75,6 @@ export class RadioButton<T> extends InputElement<T> {
         RadioButton._nextId++;
 
         const form = document.createElement("form");
-    form.style.cssText = this.styleFormOverride;
 
         const inputs = [];
         const wrappers: HTMLElement[] = [];
@@ -97,16 +91,22 @@ export class RadioButton<T> extends InputElement<T> {
             input.name = groupId;
             input.type = "radio";
             input.classList.add(
-        "p-1",
                 "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.style.cssText = this.styleInputOverride;
+            }
-
             input.onchange = () => {
                 if (input.checked) {
                     selectedElementIndex.setData(i1);
@@ -118,8 +118,11 @@ export class RadioButton<T> extends InputElement<T> {
             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.classList.add("block", "w-full", "cursor-pointer", "bg-red");
-      label.style.cssText = this.styleLabelOverride;
+
+            if (!this._dontStyle) {
+                labelHtml.classList.add("p-2")
+            }
 
             const block = document.createElement("div");
             block.appendChild(input);
@@ -127,12 +130,15 @@ export class RadioButton<T> extends InputElement<T> {
             block.classList.add(
                 "flex",
                 "w-full",
+            );
+            if (!this._dontStyle) {
+                block.classList.add(
+                    "m-1",
                     "border",
                     "rounded-3xl",
                     "border-gray-400",
-        "m-1"
+                )
-      );
+            }
-      block.style.cssText = this.styleBlockOverride;
             wrappers.push(block);
 
             form.appendChild(block);

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"]
+          }
+        }
+      ]
+    }
   ]
 }