more custom filter on layers

Svg.ts

@@ -54,6 +54,16 @@ export default class Svg {
     public static camera_plus_svg() { return new Img(Svg.camera_plus, true);}
     public static camera_plus_ui() { return new FixedUiElement(Svg.camera_plus_img);}
 
+    public static checkbox_empty = "<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <rect x=\"1\" y=\"1\" width=\"16\" height=\"16\" rx=\"3\" stroke=\"#007759\" stroke-width=\"2\"/> </svg> "
+    public static checkbox_empty_img = Img.AsImageElement(Svg.checkbox_empty)
+    public static checkbox_empty_svg() { return new Img(Svg.checkbox_empty, true);}
+    public static checkbox_empty_ui() { return new FixedUiElement(Svg.checkbox_empty_img);}
+
+    public static checkbox_filled = "<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <rect x=\"1\" y=\"1\" width=\"16\" height=\"16\" rx=\"3\" fill=\"#007759\" stroke=\"#007759\" stroke-width=\"2\"/> <path d=\"M3.5 8L8 13L14 5\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"/> </svg> "
+    public static checkbox_filled_img = Img.AsImageElement(Svg.checkbox_filled)
+    public static checkbox_filled_svg() { return new Img(Svg.checkbox_filled, true);}
+    public static checkbox_filled_ui() { return new FixedUiElement(Svg.checkbox_filled_img);}
+
     public static checkmark = "<svg width=\"26\" height=\"18\" viewBox=\"0 0 26 18\"  xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3 7.28571L10.8261 15L23 3\" stroke=\"black\" stroke-width=\"4\" stroke-linejoin=\"round\" style=\"fill:none !important;\"/></svg>"
     public static checkmark_img = Img.AsImageElement(Svg.checkmark)
     public static checkmark_svg() { return new Img(Svg.checkmark, true);}
@@ -359,4 +369,4 @@ export default class Svg {
     public static wikipedia_svg() { return new Img(Svg.wikipedia, true);}
     public static wikipedia_ui() { return new FixedUiElement(Svg.wikipedia_img);}
 
-public static All = {"SocialImageForeground.svg": Svg.SocialImageForeground,"add.svg": Svg.add,"addSmall.svg": Svg.addSmall,"ampersand.svg": Svg.ampersand,"arrow-left-smooth.svg": Svg.arrow_left_smooth,"arrow-left-thin.svg": Svg.arrow_left_thin,"arrow-right-smooth.svg": Svg.arrow_right_smooth,"back.svg": Svg.back,"bug.svg": Svg.bug,"camera-plus.svg": Svg.camera_plus,"checkmark.svg": Svg.checkmark,"circle.svg": Svg.circle,"clock.svg": Svg.clock,"close.svg": Svg.close,"compass.svg": Svg.compass,"cross_bottom_right.svg": Svg.cross_bottom_right,"crosshair-blue-center.svg": Svg.crosshair_blue_center,"crosshair-blue.svg": Svg.crosshair_blue,"crosshair.svg": Svg.crosshair,"delete_icon.svg": Svg.delete_icon,"direction.svg": Svg.direction,"direction_gradient.svg": Svg.direction_gradient,"direction_masked.svg": Svg.direction_masked,"direction_outline.svg": Svg.direction_outline,"direction_stroke.svg": Svg.direction_stroke,"down.svg": Svg.down,"envelope.svg": Svg.envelope,"filter.svg": Svg.filter,"floppy.svg": Svg.floppy,"gear.svg": Svg.gear,"help.svg": Svg.help,"home.svg": Svg.home,"home_white_bg.svg": Svg.home_white_bg,"josm_logo.svg": Svg.josm_logo,"layers.svg": Svg.layers,"layersAdd.svg": Svg.layersAdd,"location.svg": Svg.location,"logo.svg": Svg.logo,"logout.svg": Svg.logout,"mapcomplete_logo.svg": Svg.mapcomplete_logo,"mapillary.svg": Svg.mapillary,"mapillary_black.svg": Svg.mapillary_black,"min-zoom.svg": Svg.min_zoom,"min.svg": Svg.min,"no_checkmark.svg": Svg.no_checkmark,"or.svg": Svg.or,"osm-copyright.svg": Svg.osm_copyright,"osm-logo-us.svg": Svg.osm_logo_us,"osm-logo.svg": Svg.osm_logo,"pencil.svg": Svg.pencil,"phone.svg": Svg.phone,"pin.svg": Svg.pin,"plus-zoom.svg": Svg.plus_zoom,"plus.svg": Svg.plus,"pop-out.svg": Svg.pop_out,"reload.svg": Svg.reload,"ring.svg": Svg.ring,"search.svg": Svg.search,"send_email.svg": Svg.send_email,"share.svg": Svg.share,"square.svg": Svg.square,"star.svg": Svg.star,"star_half.svg": Svg.star_half,"star_outline.svg": Svg.star_outline,"star_outline_half.svg": Svg.star_outline_half,"statistics.svg": Svg.statistics,"translate.svg": Svg.translate,"up.svg": Svg.up,"wikidata.svg": Svg.wikidata,"wikimedia-commons-white.svg": Svg.wikimedia_commons_white,"wikipedia.svg": Svg.wikipedia};}
+public static All = {"SocialImageForeground.svg": Svg.SocialImageForeground,"add.svg": Svg.add,"addSmall.svg": Svg.addSmall,"ampersand.svg": Svg.ampersand,"arrow-left-smooth.svg": Svg.arrow_left_smooth,"arrow-left-thin.svg": Svg.arrow_left_thin,"arrow-right-smooth.svg": Svg.arrow_right_smooth,"back.svg": Svg.back,"bug.svg": Svg.bug,"camera-plus.svg": Svg.camera_plus,"checkbox-empty.svg": Svg.checkbox_empty,"checkbox-filled.svg": Svg.checkbox_filled,"checkmark.svg": Svg.checkmark,"circle.svg": Svg.circle,"clock.svg": Svg.clock,"close.svg": Svg.close,"compass.svg": Svg.compass,"cross_bottom_right.svg": Svg.cross_bottom_right,"crosshair-blue-center.svg": Svg.crosshair_blue_center,"crosshair-blue.svg": Svg.crosshair_blue,"crosshair.svg": Svg.crosshair,"delete_icon.svg": Svg.delete_icon,"direction.svg": Svg.direction,"direction_gradient.svg": Svg.direction_gradient,"direction_masked.svg": Svg.direction_masked,"direction_outline.svg": Svg.direction_outline,"direction_stroke.svg": Svg.direction_stroke,"down.svg": Svg.down,"envelope.svg": Svg.envelope,"filter.svg": Svg.filter,"floppy.svg": Svg.floppy,"gear.svg": Svg.gear,"help.svg": Svg.help,"home.svg": Svg.home,"home_white_bg.svg": Svg.home_white_bg,"josm_logo.svg": Svg.josm_logo,"layers.svg": Svg.layers,"layersAdd.svg": Svg.layersAdd,"location.svg": Svg.location,"logo.svg": Svg.logo,"logout.svg": Svg.logout,"mapcomplete_logo.svg": Svg.mapcomplete_logo,"mapillary.svg": Svg.mapillary,"mapillary_black.svg": Svg.mapillary_black,"min-zoom.svg": Svg.min_zoom,"min.svg": Svg.min,"no_checkmark.svg": Svg.no_checkmark,"or.svg": Svg.or,"osm-copyright.svg": Svg.osm_copyright,"osm-logo-us.svg": Svg.osm_logo_us,"osm-logo.svg": Svg.osm_logo,"pencil.svg": Svg.pencil,"phone.svg": Svg.phone,"pin.svg": Svg.pin,"plus-zoom.svg": Svg.plus_zoom,"plus.svg": Svg.plus,"pop-out.svg": Svg.pop_out,"reload.svg": Svg.reload,"ring.svg": Svg.ring,"search.svg": Svg.search,"send_email.svg": Svg.send_email,"share.svg": Svg.share,"square.svg": Svg.square,"star.svg": Svg.star,"star_half.svg": Svg.star_half,"star_outline.svg": Svg.star_outline,"star_outline_half.svg": Svg.star_outline_half,"statistics.svg": Svg.statistics,"translate.svg": Svg.translate,"up.svg": Svg.up,"wikidata.svg": Svg.wikidata,"wikimedia-commons-white.svg": Svg.wikimedia_commons_white,"wikipedia.svg": Svg.wikipedia};}

UI/BigComponents/FilterView.ts

@@ -10,6 +10,7 @@ import LayerConfig from "../../Customizations/JSON/LayerConfig";
 import BaseUIElement from "../BaseUIElement";
 import { Translation } from "../i18n/Translation";
 import ScrollableFullScreen from "../Base/ScrollableFullScreen";
+import Svg from "../../Svg";
 
 /**
  * Shows the filter
@@ -26,14 +27,54 @@ export default class FilterView extends ScrollableFullScreen {
   }
 
   private static Generatecontent(): BaseUIElement {
-    let filterPanel: BaseUIElement = new FixedUiElement("more stuff");
+    let filterPanel: BaseUIElement = new FixedUiElement("");
 
     if (State.state.filteredLayers.data.length > 1) {
-      let layers = State.state.filteredLayers;
+      let activeLayers = State.state.filteredLayers;
-      console.log(layers);
+
-      filterPanel = new Combine(["layerssss", "<br/>", filterPanel]);
+      if (activeLayers === undefined) {
+        throw "ActiveLayers should be defined...";
       }
 
+      const checkboxes: BaseUIElement[] = [];
+
+      for (const layer of activeLayers.data) {
+        const icon = new Combine([Svg.checkbox_filled]).SetStyle(
+          "width:1.5rem;height:1.5rem"
+        );
+        const iconUnselected = new Combine([Svg.checkbox_empty]).SetStyle(
+          "width:1.5rem;height:1.5rem"
+        );
+
+        if (layer.layerDef.name === undefined) {
+          continue;
+        }
+
+        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 layerNotChecked = new Combine([
+          iconUnselected,
+          name.Clone(),
+        ]).SetStyle(style);
+
+        checkboxes.push(
+          new Toggle(layerChecked, layerNotChecked, layer.isDisplayed)
+            .ToggleOnClick()
+            .SetStyle("margin:0.3em;")
+        );
+      }
+
+      let combinedCheckboxes = new Combine(checkboxes);
+      combinedCheckboxes.SetStyle("display:flex;flex-direction:column;");
+
+      filterPanel = new Combine([combinedCheckboxes]);
+
       return filterPanel;
     }
   }
+}

assets/svg/checkbox-empty.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="16" height="16" rx="3" stroke="#007759" stroke-width="2"/>
+</svg>

assets/svg/checkbox-filled.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="16" height="16" rx="3" fill="#007759" stroke="#007759" stroke-width="2"/>
+<path d="M3.5 8L8 13L14 5" stroke="white" stroke-width="2" stroke-linecap="round"/>
+</svg>

assets/svg/license_info.json

@@ -614,5 +614,29 @@
     "path": "filter.svg",
     "license": "CC0",
     "sources": []
+  },
+  {
+    "authors": [
+      "Hannah Declerck"
+    ],
+    "path": "checkbox-empty.svg",
+    "license": "CC0",
+    "sources": []
+  },
+  {
+    "authors": [
+      "Hannah Declerck"
+    ],
+    "path": "checkbox-filled.svg",
+    "license": "CC0",
+    "sources": []
+  },
+  {
+    "authors": [
+      "Hannah Declerck"
+    ],
+    "path": "arrow-left-thin.svg",
+    "license": "CC0",
+    "sources": []
   }
 ]