start extra filter functionality

Customizations/JSON/FilterConfig.ts

@@ -0,0 +1,27 @@
+import { TagsFilter } from "../../Logic/Tags/TagsFilter";
+import { Translation } from "../../UI/i18n/Translation";
+import Translations from "../../UI/i18n/Translations";
+import FilterConfigJson from "./FilterConfigJson";
+import { FromJSON } from "./FromJSON";
+
+export default class FilterConfig {
+  readonly options: {
+    question: Translation;
+    osmTags: TagsFilter;
+  }[];
+
+  constructor(json: FilterConfigJson, context: string) {
+    this.options = json.options.map((option, i) => {
+      const question = Translations.T(
+        option.question,
+        context + ".options-[" + i + "].question"
+      );
+      const osmTags = FromJSON.Tag(
+        option.osmTags,
+        `${context}.options-[${i}].osmTags`
+      );
+
+      return { question: question, osmTags: osmTags };
+    });
+  }
+}

Customizations/JSON/FilterConfigJson.ts

@@ -0,0 +1,11 @@
+import { AndOrTagConfigJson } from "./TagConfigJson";
+
+export default interface FilterConfigJson {
+  /**
+   * The options for a filter
+   * If there are multiple options these will be a list of radio buttons
+   * 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 }[];
+}

Customizations/JSON/LayerConfigJson.ts

@@ -1,6 +1,7 @@
 import {TagRenderingConfigJson} from "./TagRenderingConfigJson";
 import {AndOrTagConfigJson} from "./TagConfigJson";
 import {DeleteConfigJson} from "./DeleteConfigJson";
+import FilterConfigJson from "./FilterConfigJson";
 
 /**
  * Configuration for a single layer
@@ -233,6 +234,12 @@ export interface LayerConfigJson {
      */
     tagRenderings?: (string | TagRenderingConfigJson) [],
 
+
+    /**
+     * All the extra questions for filtering
+     */
+    filter?: (FilterConfigJson) [],
+
     /**
      * This block defines under what circumstances the delete dialog is shown for objects of this layer.
      * If set, a dialog is shown to the user to (soft) delete the point.

UI/BigComponents/FilterView.ts

@@ -39,11 +39,11 @@ export default class FilterView extends ScrollableFullScreen {
       const checkboxes: BaseUIElement[] = [];
 
       for (const layer of activeLayers.data) {
-        const icon = new Combine([Svg.checkbox_filled]).SetStyle(
-          "width:1.5rem;height:1.5rem"
-        );
+        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(
-          "width:1.5rem;height:1.5rem"
+          iconStyle
         );
 
         if (layer.layerDef.name === undefined) {
@@ -53,13 +53,22 @@ export default class FilterView extends ScrollableFullScreen {
         const style = "display:flex;align-items:center;color:#007759";
 
         const name: Translation = Translations.WT(layer.layerDef.name)?.Clone();
-        name.SetStyle("font-size:large;");
 
-        const layerChecked = new Combine([icon, name.Clone()]).SetStyle(style);
+        const styledNameChecked = name
+          .Clone()
+          .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]).SetStyle(
+          style
+        );
 
         const layerNotChecked = new Combine([
           iconUnselected,
-          name.Clone(),
+          styledNameUnChecked,
         ]).SetStyle(style);
 
         checkboxes.push(