Remove dutch hardcoded texts for now; add a simple bikeshop quest

Customizations/Layers/BikeShop.ts

@@ -1,8 +1,15 @@
 import {TagRenderingOptions} from "../TagRendering";
 import {LayerDefinition} from "../LayerDefinition";
 import {Tag} from "../../Logic/TagsFilter";
+import L from "leaflet";
+import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
+import {NameQuestion} from "../Questions/NameQuestion";
 
-export class BikeShop extends LayerDefinition{
+export class BikeShop extends LayerDefinition {
+
+
+    const
+    sellsBikes = new Tag("service:bicycle:retail", "yes");
 
     constructor() {
         super(
@@ -10,21 +17,67 @@ export class BikeShop extends LayerDefinition{
                 name: "bike shop or repair",
                 icon: "assets/bike/repair_shop.svg",
                 minzoom: 14,
-                overpassFilter: new Tag("shop","bicycle"), 
+                overpassFilter: new Tag("shop", "bicycle"),
-            newElementTags: [new Tag("shop","bicycle")]
+                newElementTags: [new Tag("shop", "bicycle")]
             }
         );
 
         this.title = new TagRenderingOptions({
-            mappings:[
+            mappings: [
-                {k:new Tag("service:bicycle:retail","yes"), txt: "Bicycle shop"},
+                {k: this.sellsBikes, txt: "Bicycle shop"},
-                {k:new Tag("service:bicycle:retail","no"), txt: "Bicycle repair"},
+                {k: new Tag("service:bicycle:retail", "no"), txt: "Bicycle repair"},
-                {k:new Tag("service:bicycle:retail",""), txt: "Bicycle repair/shop"},
+                {k: new Tag("service:bicycle:retail", ""), txt: "Bicycle repair/shop"},
             ]
         })
         
         
-        this.style()
+        this.elementsToShow = [
+            new ImageCarouselWithUploadConstructor(),
+            new TagRenderingOptions({
+                question: "What is the name of this bicycle shop?",
+                freeform:{
+                    key:"name",
+                    renderTemplate: "The name of this bicycle shop is {name}",
+                    template: "The name of this bicycle shop is $$$"
+                }
+            }),
+
+            new TagRenderingOptions({
+                question: "Can one buy a new bike here?",
+                mappings: [
+                    {k: this.sellsBikes, txt: "Bikes are sold here"},
+                    {k: new Tag("service:bicycle:retail", "no"), txt: "No bikes can be bought here"},
+                ]
+            }),
+            
+            
+           
+            new TagRenderingOptions({
+                question: "Does this shop repair bicycles?",
+                mappings: [
+                    {k: this.sellsBikes, txt: "Bikes can be repaired here"},
+                    {k: new Tag("service:bicycle:retail", "no"), txt: "No bikes can be bought here"},
+                ]
+            }),
+        ]
+
+
+        this.style = (tags) => {
+            let icon = "assets/bike/repair_shop.svg";
+
+            if (this.sellsBikes.matchesProperties(tags)) {
+                icon = "assets/bike/shop.svg";
+            }
+
+            return {
+                color: "#ff0000",
+                icon: L.icon({
+                    iconUrl: icon,
+                    iconSize: [50, 50],
+                    iconAnchor: [25, 50]
+                })
+            }
+        }
 
 
     }

UI/CenterMessageBox.ts

@@ -40,11 +40,11 @@ export class CenterMessageBox extends UIElement {
             return this._centermessage.data;
         }
         if (this._queryRunning.data) {
-            return "Data wordt geladen...";
+            return "Data is loading...";
         } else if (this._zoomInMore.data) {
-            return "Zoom in om de data te zien en te bewerken";
+            return "Zoom in more to see the data";
         }
-        return "Klaar!";
+        return "Done!";
     }
 
 

UI/SearchAndGo.ts

@@ -8,8 +8,8 @@ import {Basemap} from "../Logic/Basemap";
 
 export class SearchAndGo extends UIElement {
 
-    private _placeholder = new UIEventSource("Zoek naar een locatie...")
+    private _placeholder = new UIEventSource("Search a location...")
-    private _searchField = new TextField(this._placeholder);
+    private _searchField = new TextField(this._placeholder, undefined);
 
     private _foundEntries = new UIEventSource([]);
     private _map: Basemap;
@@ -35,7 +35,7 @@ export class SearchAndGo extends UIElement {
     private RunSearch() {
         const searchString = this._searchField.value.data;
         this._searchField.Clear();
-        this._placeholder.setData("Bezig met zoeken...");
+        this._placeholder.setData("Searching...");
         const self = this;
         Geocoding.Search(searchString, this._map, (result) => {
 
@@ -50,10 +50,10 @@ export class SearchAndGo extends UIElement {
                     [bb[1], bb[3]]
                 ]
                 self._map.map.fitBounds(bounds);
-                this._placeholder.setData("Zoek naar een locatie...");
+                this._placeholder.setData("Search a location...");
             },
             () => {
-                this._placeholder.setData("Niets gevonden: er ging iets mis");
+                this._placeholder.setData("Something went wrong. Try again.");
             });
 
     }

UI/SimpleAddUI.ts

@@ -61,18 +61,18 @@ export class SimpleAddUI extends UIElement {
     }
 
     protected InnerRender(): string {
-        const header = "<h2>Geen selectie</h2>" +
+        const header = "<h2>No data here</h2>" +
-            "Je klikte ergens waar er nog geen gezochte data is.<br/>";
+            "You clicked somewhere where no data is known yet.<br/>";
         if (!this._userDetails.data.loggedIn) {
-            return header + "<a class='activate-osm-authentication'>Gelieve je aan te melden om een nieuw punt toe te voegen</a>"
+            return header + "<a class='activate-osm-authentication'>Please log in to add a new point</a>"
         }
 
         if (this._zoomlevel.data.zoom < 19) {
-            return header + "Zoom verder in om een element toe te voegen.";
+            return header + "Zoom in further to add a point.";
         }
 
         if (this._dataIsLoading.data) {
-            return header + "De data is nog aan het laden. Nog even geduld, dan kan je een punt toevoegen";
+            return header + "The data is still loading. Please wait a bit before you add a new point";
         }
 
         var html = "";