Add translations + bike Shops

Customizations/Layers/BikeParkings.ts

@@ -5,12 +5,15 @@ import * as L from "leaflet";
 import FixedText from "../Questions/FixedText";
 import ParkingType from "../Questions/bike/ParkingType";
 import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
+import BikeStationOperator from "../Questions/bike/StationOperator";
+import Translations from "../../UI/i18n/Translations";
+import ParkingOperator from "../Questions/bike/ParkingOperator";
 
 
 export default class BikeParkings extends LayerDefinition {
     constructor() {
         super();
-        this.name = "bike_parking";
+        this.name = Translations.t.cylofix.parking.name.txt;
         this.icon = "./assets/bike/parking.svg";
         this.overpassFilter = new Tag("amenity", "bicycle_parking");
         this.newElementTags = [
@@ -20,10 +23,10 @@ export default class BikeParkings extends LayerDefinition {
 
         this.minzoom = 13;
         this.style = this.generateStyleFunction();
-        this.title = new FixedText("Fietsparking");
+        this.title = new FixedText(Translations.t.cylofix.parking.title.txt)
         this.elementsToShow = [
             new ImageCarouselWithUploadConstructor(),
-            new OperatorTag(),
+            //new ParkingOperator(),
             new ParkingType()
         ];
 

Customizations/Layers/BikeShops.ts

@@ -0,0 +1,50 @@
+import { LayerDefinition } from "../LayerDefinition";
+import Translations from "../../UI/i18n/Translations";
+import { Tag } from "../../Logic/TagsFilter";
+import FixedText from "../Questions/FixedText";
+import { ImageCarouselWithUploadConstructor } from "../../UI/Image/ImageCarouselWithUpload";
+import * as L from "leaflet";
+import ShopRetail from "../Questions/bike/ShopRetail";
+import ShopPump from "../Questions/bike/ShopPump";
+import ShopRental from "../Questions/bike/ShopRental";
+import ShopRepair from "../Questions/bike/ShopRepair";
+
+
+export default class BikeShops extends LayerDefinition {
+    constructor() {
+        super();
+        this.name = Translations.t.cylofix.shop.name.txt;
+        this.icon = "./assets/bike/shop.svg";
+        this.overpassFilter = new Tag("shop", "bicycle");
+        this.newElementTags = [
+            new Tag("shop", "bicycle"),
+        ];
+        this.maxAllowedOverlapPercentage = 10;
+
+        this.minzoom = 13;
+        this.style = this.generateStyleFunction();
+        this.title = new FixedText(Translations.t.cylofix.shop.title.txt)
+        this.elementsToShow = [
+            new ImageCarouselWithUploadConstructor(),
+            //new ParkingOperator(),
+            new ShopRetail(),
+            new ShopRental(),
+            new ShopRepair(),
+            new ShopPump(),
+        ];
+
+    }
+
+    private generateStyleFunction() {
+        const self = this;
+        return function (properties: any) {
+            return {
+                color: "#00bb00",
+                icon: L.icon({
+                    iconUrl: self.icon,
+                    iconSize: [50, 50]
+                })
+            };
+        };
+    }
+}

Customizations/Layers/BikeStations.ts

@@ -12,6 +12,7 @@ import PumpManometer from "../Questions/bike/PumpManometer";
 import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
 import PumpOperational from "../Questions/bike/PumpOperational";
 import PumpValves from "../Questions/bike/PumpValves";
+import Translations from "../../UI/i18n/Translations";
 
 
 export default class BikeStations extends LayerDefinition {
@@ -22,7 +23,7 @@ export default class BikeStations extends LayerDefinition {
 
     constructor() {
         super();
-        this.name = "bike station or pump";
+        this.name = Translations.t.cylofix.station.name.txt;
         this.icon = "./assets/wrench.svg";
 
         this.overpassFilter = new And([
@@ -37,7 +38,7 @@ export default class BikeStations extends LayerDefinition {
 
         this.minzoom = 13;
         this.style = this.generateStyleFunction();
-        this.title = new FixedText("Bike station");
+        this.title = new FixedText(Translations.t.cylofix.station.title.txt)
 
         this.elementsToShow = [
             new ImageCarouselWithUploadConstructor(),
@@ -51,7 +52,7 @@ export default class BikeStations extends LayerDefinition {
             new PumpValves().OnlyShowIf(this.pump),
             new PumpOperational().OnlyShowIf(this.pump),
 
-            new BikeStationOperator(),
+            // new BikeStationOperator(),
             // new BikeStationBrand()   DISABLED
         ];
     }

Customizations/Layouts/Cyclofix.ts

@@ -1,6 +1,7 @@
 import {Layout} from "../Layout";
 import BikeParkings from "../Layers/BikeParkings";
 import BikeServices from "../Layers/BikeStations";
+import BikeShops from "../Layers/BikeShops";
 import {GhostBike} from "../Layers/GhostBike";
 import Translations from "../../UI/i18n/Translations";
 
@@ -10,7 +11,7 @@ export default class Cyclofix extends Layout {
         super(
             "pomp",
             Translations.t.cylofix.title,
-            [new GhostBike(), new BikeServices(), new BikeParkings()],
+            [/*new GhostBike(),*/ new BikeServices(), new BikeParkings(), new BikeShops],
             16,
             50.8465573,
             4.3516970,

Customizations/Questions/bike/ParkingOperator.ts

@@ -0,0 +1,27 @@
+import {TagRenderingOptions} from "../../TagRendering";
+import {Tag, And} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
+
+
+export default class ParkingOperator extends TagRenderingOptions {
+    constructor() {
+        const to = Translations.t.cylofix.parking.operator
+        super({
+            priority: 15,
+            question: to.question.Render(),
+            freeform: {
+                key: "operator",
+                template: to.template.txt,
+                renderTemplate: to.render.txt,
+                placeholder: Translations.t.cylofix.freeFormPlaceholder.txt
+            },
+            mappings: [
+                {k: new Tag("operator", "KU Leuven"), txt: "KU Leuven"},
+                {k: new Tag("operator", "Stad Halle"), txt: "Stad Halle"},
+                {k: new Tag("operator", "Saint Gilles - Sint Gillis"), txt: "Saint Gilles - Sint Gillis"},
+                {k: new Tag("operator", "Jette"), txt: "Jette"},
+                {k: new And([new Tag("operator", ""), new Tag("operator:type", "private")]), txt: to.private.Render()}
+            ]
+        });
+    }
+}

Customizations/Questions/bike/ParkingType.ts

@@ -1,37 +1,37 @@
 import {TagRenderingOptions} from "../../TagRendering";
 import {Tag} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
 
 
 export default class ParkingType extends TagRenderingOptions {
-    private static images = {
-        stands: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Bike_racks_at_north-west_of_Westfield_-_geograph.org.uk_-_1041057.jpg/100px-Bike_racks_at_north-west_of_Westfield_-_geograph.org.uk_-_1041057.jpg",
-        wall_loops: "https://wiki.openstreetmap.org/w/images/thumb/c/c2/Bike-parking-wheelbender.jpg/100px-Bike-parking-wheelbender.jpg",
-        handlebar_holder: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Bicycle_parking_handlebar_holder.jpg/100px-Bicycle_parking_handlebar_holder.jpg",
-        shed: "https://wiki.openstreetmap.org/w/images/thumb/b/b2/Bike-shelter.jpg/100px-Bike-shelter.jpg",
-        "two-tier": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Bicis_a_l%27estaci%C3%B3_de_Leiden.JPG/100px-Bicis_a_l%27estaci%C3%B3_de_Leiden.JPG"
-    }
-
-    private static toImgTxt(url: string) {
-        return `<img src=${url}>`
-    }
-
     constructor() {
+        const images = {
+            stands: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Bike_racks_at_north-west_of_Westfield_-_geograph.org.uk_-_1041057.jpg/100px-Bike_racks_at_north-west_of_Westfield_-_geograph.org.uk_-_1041057.jpg",
+            loops: "https://wiki.openstreetmap.org/w/images/thumb/c/c2/Bike-parking-wheelbender.jpg/100px-Bike-parking-wheelbender.jpg",
+            handlebar: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Bicycle_parking_handlebar_holder.jpg/100px-Bicycle_parking_handlebar_holder.jpg",
+            shed: "https://wiki.openstreetmap.org/w/images/thumb/b/b2/Bike-shelter.jpg/100px-Bike-shelter.jpg",
+            rack: "https://wiki.openstreetmap.org/w/images/thumb/4/41/Triton_Bike_Rack.png/100px-Triton_Bike_Rack.png",
+            double: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Bicis_a_l%27estaci%C3%B3_de_Leiden.JPG/100px-Bicis_a_l%27estaci%C3%B3_de_Leiden.JPG"
+        }
+        const toImg = (url) => `<img src=${url}>`
+        const to = Translations.t.cylofix.parking.type
         super({
             priority: 5,
-            question: "Van welk type is deze fietsenparking?",
+            question: to.question.Render(),
             freeform: {
                 key: "bicycle_parking",
                 extraTags: new Tag("fixme", "Freeform bicycle_parking= tag used: possibly a wrong value"),
-                template: "Iets anders: $$$",
+                template: to.template.txt,
-                renderTemplate: "Dit is een fietsenparking van het type: {bicycle_parking}",
+                renderTemplate: to.render.txt,
-                placeholder: "Specifieer"
+                placeholder: Translations.t.cylofix.freeFormPlaceholder.txt,
             },
             mappings: [
-                {k: new Tag("bicycle_parking", "stands"), txt: ParkingType.toImgTxt(ParkingType.images.stands)},
+                {k: new Tag("bicycle_parking", "stands"), txt: `${to.stands.Render()}, bijvoorbeeld: ${toImg(images.stands)}`},
-                {k: new Tag("bicycle_parking", "wall_loops"), txt: ParkingType.toImgTxt(ParkingType.images.wall_loops)},
+                {k: new Tag("bicycle_parking", "wall_loops"), txt: `${to.loops.Render()}, bijvoorbeeld: ${toImg(images.loops)}`},
-                {k: new Tag("bicycle_parking", "handlebar_holder"), txt: ParkingType.toImgTxt(ParkingType.images.handlebar_holder)},
+                {k: new Tag("bicycle_parking", "handlebar_holder"), txt: `${to.handlebar.Render()}, bijvoorbeeld: ${toImg(images.handlebar)}`},
-                {k: new Tag("bicycle_parking", "shed"), txt: ParkingType.toImgTxt(ParkingType.images.shed)},
+                {k: new Tag("bicycle_parking", "shed"), txt: `${to.shed.Render()}, bijvoorbeeld: ${toImg(images.shed)}`},
-                {k: new Tag("bicycle_parking", "two-tier"), txt: ParkingType.toImgTxt(ParkingType.images["two-tier"])}
+                {k: new Tag("bicycle_parking", "rack"), txt: `${to.rack.Render()}, bijvoorbeeld: ${toImg(images.rack)}`},
+                {k: new Tag("bicycle_parking", "two-tier"), txt: `${to.double.Render()}, bijvoorbeeld: ${toImg(images.double)}`}
             ]
         });
     }

Customizations/Questions/bike/PumpManometer.ts

@@ -1,15 +1,17 @@
 import {TagRenderingOptions} from "../../TagRendering";
 import {Tag} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
 
 
 export default class PumpManometer extends TagRenderingOptions {
     constructor() {
+        const to = Translations.t.cylofix.station.manometer
         super({
-            question: "Does the pump have a pressure indicator or manometer?",
+            question: to.question.Render(),
             mappings: [
-                {k: new Tag("manometer", "yes"), txt: "Yes, there is a manometer"},
+                {k: new Tag("manometer", "yes"), txt: to.yes.Render()},
-                {k: new Tag("manometer","broken"), txt: "Yes, but it is broken"},
+                {k: new Tag("manometer", "no"), txt: to.no.Render()},
-                {k: new Tag("manometer", "yes"), txt: "No"}
+                {k: new Tag("manometer", "broken"), txt: to.broken.Render()}
             ]
         });   
     }

Customizations/Questions/bike/PumpManual.ts

@@ -1,15 +1,17 @@
 import {TagRenderingOptions} from "../../TagRendering";
 import {Tag} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
 
 
 export default class PumpManual extends TagRenderingOptions {
     constructor() {
+        const to = Translations.t.cylofix.station.electric
         super({
             priority: 5,
-            question: "Is this an electric bike pump?",
+            question: to.question.Render(),
             mappings: [
-                {k: new Tag("manual", "yes"), txt: "Manual pump"},
+                {k: new Tag("manual", "yes"), txt: to.manual.Render()},
-                {k: new Tag("manual", "no"), txt: "Electric pump"}
+                {k: new Tag("manual", "no"), txt: to.electric.Render()}
             ]
         });
     }

Customizations/Questions/bike/PumpOperational.ts

@@ -1,14 +1,16 @@
 import {TagRenderingOptions} from "../../TagRendering";
 import {Tag} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
 
 
 export default class PumpOperational extends TagRenderingOptions {
     constructor() {
+        const to = Translations.t.cylofix.station.operational
         super({
-            question: "Is the bicycle pump still operational?",
+            question: to.question.Render(),
             mappings: [
-                {k: new Tag("service:bicycle:pump:operational_status","broken"), txt: "This pump is broken"},
+                {k: new Tag("service:bicycle:pump:operational_status","broken"), txt: to.broken.txt},
-                {k: new Tag("service:bicycle:pump:operational_status",""), txt: "This pump is operational"}
+                {k: new Tag("service:bicycle:pump:operational_status",""), txt: to.operational.txt}
             ]
         });
     }

Customizations/Questions/bike/PumpValves.ts

@@ -1,24 +1,27 @@
 import {TagRenderingOptions} from "../../TagRendering";
 import {Tag} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
 
 
 export default class PumpValves extends TagRenderingOptions{
     constructor() {
+        const to = Translations.t.cylofix.station.valves
         super({
-            question: "What valves are supported?",
+            question: to.question.Render(),
             mappings: [
                 {
                     k: new Tag("valves", " sclaverand;schrader;dunlop"),
-                    txt: "There is a default head, so Presta, Dunlop and Auto"
+                    txt: to.default.Render()
                 },
-                {k: new Tag("valves", "dunlop"), txt: "Only dunlop"},
+                {k: new Tag("valves", "dunlop"), txt: to.dunlop.Render()},
-                {k: new Tag("valves", "sclaverand"), txt: "Only Sclaverand (also known as Dunlop)"},
+                {k: new Tag("valves", "sclaverand"), txt: to.sclaverand.Render()},
-                {k: new Tag("valves", "auto"), txt: "Only auto"},
+                {k: new Tag("valves", "auto"), txt: to.auto.Render()},
             ],
             freeform: {
+                extraTags: new Tag("fixme", "Freeform valves= tag used: possibly a wrong value"),
                 key: "valves",
-                template: "Supported valves are $$$",
+                template: to.template.txt,
-                renderTemplate: "Supported valves are {valves}"
+                renderTemplate: to.render.txt
             }
         });
     }

Customizations/Questions/bike/ShopPump.ts

@@ -0,0 +1,19 @@
+import {TagRenderingOptions} from "../../TagRendering";
+import {Tag} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
+
+
+export default class ShopPump extends TagRenderingOptions {
+    constructor() {
+        const key = 'service:bicycle:pump'
+        const to = Translations.t.cylofix.shop.pump
+        super({
+            priority: 5,
+            question: to.question.Render(),
+            mappings: [
+                {k: new Tag(key, "yes"), txt: to.yes.Render()},
+                {k: new Tag(key, "no"), txt: to.no.Render()},
+            ]
+        });
+    }
+}

Customizations/Questions/bike/ShopRental.ts

@@ -0,0 +1,19 @@
+import {TagRenderingOptions} from "../../TagRendering";
+import {Tag} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
+
+
+export default class ShopRental extends TagRenderingOptions {
+    constructor() {
+        const key = 'service:bicycle:rental'
+        const to = Translations.t.cylofix.shop.rental
+        super({
+            priority: 5,
+            question: to.question.Render(),
+            mappings: [
+                {k: new Tag(key, "yes"), txt: to.yes.Render()},
+                {k: new Tag(key, "no"), txt: to.no.Render()},
+            ]
+        });
+    }
+}

Customizations/Questions/bike/ShopRepair.ts

@@ -0,0 +1,19 @@
+import {TagRenderingOptions} from "../../TagRendering";
+import {Tag} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
+
+
+export default class ShopRepair extends TagRenderingOptions {
+    constructor() {
+        const key = 'service:bicycle:repair'
+        const to = Translations.t.cylofix.shop.repair
+        super({
+            priority: 5,
+            question: to.question.Render(),
+            mappings: [
+                {k: new Tag(key, "yes"), txt: to.yes.Render()},
+                {k: new Tag(key, "no"), txt: to.no.Render()},
+            ]
+        });
+    }
+}

Customizations/Questions/bike/ShopRetail.ts

@@ -0,0 +1,19 @@
+import {TagRenderingOptions} from "../../TagRendering";
+import {Tag} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
+
+
+export default class ShopRetail extends TagRenderingOptions {
+    constructor() {
+        const key = 'service:bicycle:retail'
+        const to = Translations.t.cylofix.shop.retail
+        super({
+            priority: 5,
+            question: to.question.Render(),
+            mappings: [
+                {k: new Tag(key, "yes"), txt: to.yes.Render()},
+                {k: new Tag(key, "no"), txt: to.no.Render()},
+            ]
+        });
+    }
+}

Customizations/Questions/bike/StationBrand.ts

@@ -4,6 +4,8 @@ import {Tag} from "../../../Logic/TagsFilter";
 
 /**
  * Currently not used in Cyclofix because it's a little vague
+ * 
+ * TODO: Translations
  */
 export default class BikeStationBrand extends TagRenderingOptions {
     private static options = {

Customizations/Questions/bike/StationChain.ts

@@ -1,15 +1,17 @@
 import {TagRenderingOptions} from "../../TagRendering";
 import {Tag} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
 
 
 export default class StationChain extends TagRenderingOptions {
     constructor() {
+        const to = Translations.t.cylofix.station.chain
         super({
             priority: 5,
-            question: "Does this bike station have a special tool to repair your bike chain?",
+            question: to.question.Render(),
             mappings: [
-                {k: new Tag("service:bicycle:chain_tool", "yes"), txt: "There is a chain tool."},
+                {k: new Tag("service:bicycle:chain_tool", "yes"), txt: to.yes.Render()},
-                {k: new Tag("service:bicycle:chain_tool", "no"), txt: "There is no chain tool."},
+                {k: new Tag("service:bicycle:chain_tool", "no"), txt: to.no.Render()},
             ]
         });
     }

Customizations/Questions/bike/StationOperator.ts

@@ -1,25 +1,27 @@
 import {TagRenderingOptions} from "../../TagRendering";
 import {Tag} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
 
 
 export default class BikeStationOperator extends TagRenderingOptions {
     constructor() {
+        const to = Translations.t.cylofix.station.operator
         super({
             priority: 15,
-            question: "Who operates this bike station (name of university, shop, city...)?",
+            question: to.question.Render(),
-            freeform: {
-                key: "operator",
-                template: "This bike station is operated by $$$",
-                renderTemplate: "This bike station is operated by {operator}",
-                placeholder: "organisatie"
-            },
             mappings: [
                 {k: new Tag("operator", "KU Leuven"), txt: "KU Leuven"},
                 {k: new Tag("operator", "Stad Halle"), txt: "Stad Halle"},
                 {k: new Tag("operator", "Saint Gilles - Sint Gillis"), txt: "Saint Gilles - Sint Gillis"},
                 {k: new Tag("operator", "Jette"), txt: "Jette"},
-                {k: new Tag("operator", "private"), txt: "Beheer door een privépersoon"}
+                {k: new Tag("operator", "private"), txt: to.private.Render()}
-            ]
+            ],
+            freeform: {
+                key: "operator",
+                template: to.template.txt,
+                renderTemplate: to.render.txt,
+                placeholder: "organisatie"
+            }
         });
     }
 }

Customizations/Questions/bike/StationPumpTools.ts

@@ -1,16 +1,18 @@
 import {TagRenderingOptions} from "../../TagRendering";
 import {Tag, And} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
 
 
 export default class BikeStationPumpTools extends TagRenderingOptions {
     constructor() {
+        const to = Translations.t.cylofix.station.services
         super({
             priority: 15,
-            question: "Which services are available at this bike station?",
+            question: to.question.Render(),
             mappings: [
-                {k: new And([new Tag("service:bicycle:tools", "no"), new Tag("service:bicycle:pump", "yes")]), txt: "There is only a pump available."},
+                {k: new And([new Tag("service:bicycle:tools", "no"), new Tag("service:bicycle:pump", "yes")]), txt: to.pump.Render()},
-                {k: new And([new Tag("service:bicycle:tools", "yes"), new Tag("service:bicycle:pump", "no")]), txt: "There are only tools (screwdrivers, pliers...) available."},
+                {k: new And([new Tag("service:bicycle:tools", "yes"), new Tag("service:bicycle:pump", "no")]), txt: to.tools.Render()},
-                {k: new And([new Tag("service:bicycle:tools", "yes"), new Tag("service:bicycle:pump", "yes")]), txt: "There are both tools and a pump available."}
+                {k: new And([new Tag("service:bicycle:tools", "yes"), new Tag("service:bicycle:pump", "yes")]), txt: to.both.Render()}
             ]
         });
     }

Customizations/Questions/bike/StationStand.ts

@@ -1,14 +1,16 @@
 import {TagRenderingOptions} from "../../TagRendering";
 import {Tag} from "../../../Logic/TagsFilter";
+import Translations from "../../../UI/i18n/Translations";
 
 
 export default class BikeStationStand extends TagRenderingOptions {
     constructor() {
+        const to = Translations
         super({
             priority: 10,
             question: "Does this bike station have a hook to suspend your bike with or a stand to elevate it?",
             mappings: [
-                {k: new Tag("service:bicycle:stand", "yes"), txt: "There is a hook or stand."},
+                {k: new Tag("service:bicycle:stand", "yes"), txt: "There is a hook or stand"},
                 {k: new Tag("service:bicycle:stand", "no"), txt: "There is no hook or stand"},
             ]
         });

UI/CenterMessageBox.ts

@@ -1,6 +1,7 @@
 import {UIElement} from "./UIElement";
 import {UIEventSource} from "./UIEventSource";
 import {OsmConnection} from "../Logic/OsmConnection";
+import Translations from "./i18n/Translations";
 
 export class CenterMessageBox extends UIElement {
 
@@ -41,11 +42,11 @@ export class CenterMessageBox extends UIElement {
         }
 
         if (this._zoomInMore.data) {
-            return "Zoom in om de data te zien en te bewerken";
+            return Translations.t.centerMessage.zoomIn.txt;
         } else if (this._queryRunning.data) {
-            return "Data wordt geladen...";
+            return Translations.t.centerMessage.loadingData.txt;
         }
-        return "Klaar!";
+        return Translations.t.centerMessage.ready.txt;
     }
 
 

UI/ImageUploadFlow.ts

@@ -5,6 +5,7 @@ import {Imgur} from "../Logic/Imgur";
 import {UserDetails} from "../Logic/OsmConnection";
 import {DropDownUI} from "./Base/DropDownUI";
 import {VariableUiElement} from "./Base/VariableUIElement";
+import Translations from "./i18n/Translations";
 
 export class ImageUploadFlow extends UIElement {
     private _licensePicker: UIElement;
@@ -31,12 +32,11 @@ export class ImageUploadFlow extends UIElement {
         this._uploadOptions = uploadOptions;
         this.ListenTo(this._isUploading);
 
-        const licensePicker = new DropDownUI("Jouw foto wordt gepubliceerd ",
+        const licensePicker = new DropDownUI(Translations.t.image.willBePublished.txt,
-
             [
-                {value: "CC0", shown: "in het publiek domein"},
+                {value: "CC0", shown: Translations.t.image.cco.txt},
-                {value: "CC-BY-SA 4.0", shown: "onder een CC-BY-SA-licentie"},
+                {value: "CC-BY-SA 4.0", shown: Translations.t.image.ccbs.txt},
-                {value: "CC-BY 4.0", shown: "onder een CC-BY-licentie"}
+                {value: "CC-BY 4.0", shown: Translations.t.image.ccb.txt}
             ],
             preferedLicense
         );
@@ -65,10 +65,10 @@ export class ImageUploadFlow extends UIElement {
     protected InnerRender(): string {
 
         if (!this._userdetails.data.loggedIn) {
-            return "<div class='activate-osm-authentication'>Gelieve je aan te melden om een foto toe te voegen of vragen te beantwoorden</div>";
+            return `<div class='activate-osm-authentication'>${Translations.t.image.pleaseLogin.Render()}</div>`;
         }
         if (this._isUploading.data == 1) {
-            return "<b>Bezig met een foto te uploaden...</b>"
+            return `<b>${Translations.t.image.uploadingPicture.Render()}</b>`
         }
         if (this._isUploading.data > 0) {
             return "<b>Bezig met uploaden, nog " + this._isUploading.data + " foto's te gaan...</b>"
@@ -81,7 +81,7 @@ export class ImageUploadFlow extends UIElement {
             
             "<div class='imageflow-file-input-wrapper'>" +
             "<img src='./assets/camera-plus.svg' alt='upload image'/> " +
-            "<span class='imageflow-add-picture'>Voeg foto toe</span>" +
+            `<span class='imageflow-add-picture'>${Translations.t.image.addPicture.Render()}</span>` +
             "<div class='break'></div>"+
             "</div>" +
             this._licensePicker.Render() +

UI/i18n/Locale.ts

@@ -1,18 +1,23 @@
 import { UIEventSource } from "../UIEventSource";
+import ParkingType from "../../Customizations/Questions/bike/ParkingType";
 
 
 const LANGUAGE_KEY = 'language'
 
 export default class Locale {
+    const 
     public static language: UIEventSource<string> = new UIEventSource(Locale.getInitialLanguage())
 
     public static init() {
         Locale.language.addCallback(data => {
             localStorage.setItem(LANGUAGE_KEY, data)
+            if (window.confirm('In order to change the displayed language, the page needs to be reloaded. Reload now?')) {
+                location.reload()
+            }
         })
     }
 
     private static getInitialLanguage() {
-        return localStorage.getItem(LANGUAGE_KEY)
+        return localStorage.getItem(LANGUAGE_KEY) || 'en'
     }
 }

UI/i18n/Translation.ts

@@ -3,10 +3,14 @@ import Locale from "./Locale"
 
 
 export default class Translation extends UIElement{
-    protected InnerRender(): string {
+    get txt(): string {
         return this.translations[Locale.language.data]
     }
 
+    protected InnerRender(): string {
+        return this.txt
+    }
+
     public readonly translations: object
     
     constructor(translations: object) {

UI/i18n/Translations.ts

@@ -1,18 +1,129 @@
-import Translation from "./Translation";
+import T from "./Translation";
 
 
 export default class Translations {
     static t = {
         cylofix: {
-            title: new Translation({en: 'Cyclofix bicycle infrastructure', nl: 'Cyclofix fietsinfrastructuur', fr: 'TODO: FRENCH TRANSLATION'}),
+            title: new T({en: 'Cyclofix bicycle infrastructure', nl: 'Cyclofix fietsinfrastructuur', fr: 'TODO: FRENCH TRANSLATION'}),
-            description: new Translation({
+            description: new T({
                 en: "On this map we want to collect data about the whereabouts of bicycle pumps and public racks in Brussels." +
                     "As a result, cyclists will be able to quickly find the nearest infrastructure for their needs.",
                 nl: "Op deze kaart willen we gegevens verzamelen over de locatie van fietspompen en openbare stelplaatsen in Brussel." +
                     "Hierdoor kunnen fietsers snel de dichtstbijzijnde infrastructuur vinden die voldoet aan hun behoeften.",
                 fr: "Sur cette carte, nous voulons collecter des données sur la localisation des pompes à vélo et des supports publics à Bruxelles." +
                     "Les cyclistes pourront ainsi trouver rapidement l'infrastructure la plus proche de leurs besoins."
-            })
+            }),
+            freeFormPlaceholder: new T({en: 'specify', nl: 'specifieer', fr: 'TODO: fr'}),
+            parking: {
+                name: new T({en: 'bike parking', nl: 'fietsparking', fr: 'TODO: fr'}),
+                title: new T({en: 'Bike parking', nl: 'Fietsparking', fr: 'TODO: fr'}),
+                type: {
+                    render: new T({en: 'This is a bicycle parking of the type: {bicycle_parking}', nl: 'Dit is een fietsenparking van het type: {bicycle_parking}', fr: 'TODO: fr'}),
+                    template: new T({en: 'Some other type: $$$', nl: 'Een ander type: $$$', fr: 'TODO: fr'}),
+                    question: new T({en: 'What is the type of this bicycle parking?', nl: 'Van welk type is deze fietsenparking?', fr: 'TODO: fr'}),
+                    stands: new T({en: 'Staple racks', nl: 'Nietjes', fr: 'TODO: fr'}),
+                    loops: new T({en: 'Wheel rack/loops', nl: 'Wielrek/lussen', fr: 'TODO: fr'}),
+                    handlebar: new T({en: 'Handlebar holder', nl: 'Stuurhouder', fr: 'TODO: fr'}),
+                    shed: new T({en: 'Shed', nl: 'Schuur', fr: 'TODO: fr'}),
+                    rack: new T({en: 'Rack', nl: 'Rek', fr: 'TODO: fr'}),
+                    double: new T({en: 'Two-tiered', nl: 'Dubbel (twee verdiepingen)', fr: 'TODO: fr'}),
+                },
+                operator: {
+                    render: new T({en: 'This bike parking is operated by {operator}', nl: 'Deze fietsenparking wordt beheerd door {operator}', fr: 'TODO: fr'}),
+                    template: new T({en: 'A different operator: $$$', nl: 'Een andere beheerder: $$$', fr: 'TODO: fr'}),
+                    question: new T({en: 'Who operates this bike station (name of university, shop, city...)?', nl: 'Wie beheert deze fietsenparking (naam universiteit, winkel, stad...)?', fr: 'TODO: fr'}),
+                    private: new T({en: 'Operated by a private person', nl: 'Wordt beheerd door een privépersoon', fr: 'TODO: fr'}),
+                }
+            },
+            station: {
+                name: new T({en: 'bike station (repair, pump or both)', nl: 'fietsstation (herstel, pomp of allebei)', fr: 'TODO: fr'}),
+                title: new T({en: 'Bike station', nl: 'Fietsstation', fr: 'TODO: fr'}),
+                manometer: {
+                    question: new T({en: 'Does the pump have a pressure indicator or manometer?', nl: 'Heeft deze pomp een luchtdrukmeter?', fr: 'TODO: fr'}),
+                    yes: new T({en: 'There is a manometer', nl: 'Er is een luchtdrukmeter', fr: 'TODO: fr'}),
+                    no: new T({en: 'There is no manometer', nl: 'Er is geen luchtdrukmeter', fr: 'TODO: fr'}),
+                    broken: new T({en: 'There is manometer but it is broken', nl: 'Er is een luchtdrukmeter maar die is momenteel defect', fr: 'TODO: fr'})
+                },
+                electric: {
+                    question: new T({en: 'Is this an electric bike pump?', nl: 'Is dit een electrische fietspomp?', fr: 'TODO: fr'}),
+                    manual: new T({en: 'Manual pump', nl: 'Manuele pomp', fr: 'TODO: fr'}),
+                    electric: new T({en: 'Electrical pump', nl: 'Electrische pomp', fr: 'TODO: fr'})
+                },
+                operational: {
+                    question: new T({en: 'Is the bike pump still operational?', nl: 'Werkt de fietspomp nog?', fr: 'TODO: fr'}),
+                    operational: new T({en: 'The bike pump is operational', nl: 'De fietspomp werkt nog', fr: 'TODO: fr'}),
+                    broken: new T({en: 'The bike pump is broken', nl: 'De fietspomp is kapot', fr: 'TODO: fr'})
+                },
+                valves: {
+                    question: new T({en: 'What valves are supported?', nl: 'Welke ventielen werken er met de pomp?', fr: 'TODO: fr'}),
+                    default: new T({en: 'There is a default head, so Dunlop, Sclaverand and auto', nl: 'Er is een standaard aansluiting, die dus voor Dunlop, Sclaverand en auto\'s werkt', fr: 'TODO: fr'}),
+                    dunlop: new T({en: 'Only Dunlop', nl: 'Enkel Dunlop', fr: 'TODO: fr'}),
+                    sclaverand: new T({en: 'Only Sclaverand (also known as Presta)', nl: 'Enkel Sclaverand (ook gekend als Presta)', fr: 'TODO: fr'}),
+                    auto: new T({en: 'Only for cars', nl: 'Enkel voor auto\'s', fr: 'TODO: fr'}),
+                    render: new T({en: 'This pump supports the following valves: {valves}', nl: 'Deze pomp werkt met de volgende ventielen: {valves}', fr: 'TODO: fr'}),
+                    template: new T({en: 'Some other valve(s): $$$', nl: 'Een ander type ventiel(en): $$$', fr: 'TODO: fr'})
+                },
+                chain: {
+                    question: new T({en: 'Does this bike station have a special tool to repair your bike chain?', nl: 'Heeft dit fietsstation een speciale reparatieset voor je ketting?', fr: 'TODO: fr'}),
+                    yes: new T({en: 'There is a chain tool', nl: 'Er is een reparatieset voor je ketting', fr: 'TODO: fr'}),
+                    no: new T({en: 'There is no chain tool', nl: 'Er is geen reparatieset voor je ketting', fr: 'TODO: fr'}),
+                },
+                operator: {
+                    render: new T({en: 'This bike station is operated by {operator}', nl: 'Dit fietsstation wordt beheerd door {operator}', fr: 'TODO: fr'}),
+                    template: new T({en: 'A different operator: $$$', nl: 'Een andere beheerder: $$$', fr: 'TODO: fr'}),
+                    question: new T({en: 'Who operates this bike station (name of university, shop, city...)?', nl: 'Wie beheert dit fietsstation (naam universiteit, winkel, stad...)?', fr: 'TODO: fr'}),
+                    private: new T({en: 'Operated by a private person', nl: 'Wordt beheerd door een privépersoon', fr: 'TODO: fr'}),
+                },
+                services: {
+                    question: new T({en: 'Which services are available at this bike station?', nl: 'Welke functies biedt dit fietsstation?', fr: 'TODO: fr'}),
+                    pump: new T({en: 'There is only a pump available', nl: 'Er is enkel een pomp beschikbaar', fr: 'TODO: fr'}),
+                    tools: new T({en: 'There are only tools (screwdrivers, pliers...) available', nl: 'Er is enkel gereedschap beschikbaar (schroevendraaier, tang...)', fr: 'TODO: fr'}),
+                    both: new T({en: 'There are both tools and a pump available', nl: 'Er is zowel een pomp als gereedschap beschikbaar', fr: 'TODO: fr'}),
+                },
+                stand: {
+                    question: new T({en: 'Does this bike station have a hook to suspend your bike with or a stand to elevate it?', nl: 'Heeft dit fietsstation een haak of standaard om je fiets op te hangen/zetten?', fr: 'TODO: fr'}),
+                    yes: new T({en: 'There is a hook or stand', nl: 'Er is een haak of standaard', fr: 'TODO: fr'}),
+                    no: new T({en: 'There is no hook or stand', nl: 'Er is geen haak of standaard', fr: 'TODO: fr'}),
+                }
+            },
+            shop: {
+                name: new T({en: 'bike shop', nl: 'fietswinkel', fr: 'TODO: fr'}),
+                title: new T({en: 'Bike shop', nl: 'Fietswinkel', fr: 'TODO: fr'}),
+                retail: {
+                    question: new T({en: 'Does this shop sell bikes?', nl: 'Verkoopt deze winkel fietsen?', fr: 'TODO: fr'}),
+                    yes: new T({en: 'This shop sells bikes', nl: 'Deze winkel verkoopt fietsen', fr: 'TODO: fr'}),
+                    no: new T({en: 'This shop doesn\'t sell bikes', nl: 'Deze winkel verkoopt geen fietsen', fr: 'TODO: fr'}),
+                },
+                repair: {
+                    question: new T({en: 'Does this shop repair bikes?', nl: 'Verkoopt deze winkel fietsen?', fr: 'TODO: fr'}),
+                    yes: new T({en: 'This shop repairs bikes', nl: 'Deze winkel herstelt fietsen', fr: 'TODO: fr'}),
+                    no: new T({en: 'This shop doesn\'t repair bikes', nl: 'Deze winkel herstelt geen fietsen', fr: 'TODO: fr'}),
+                },
+                rental: {
+                    question: new T({en: 'Does this shop rent out bikes?', nl: 'Verhuurt deze winkel fietsen?', fr: 'TODO: fr'}),
+                    yes: new T({en: 'This shop rents out bikes', nl: 'Deze winkel verhuurt fietsen', fr: 'TODO: fr'}),
+                    no: new T({en: 'This shop doesn\'t rent out bikes', nl: 'Deze winkel verhuurt geen fietsen', fr: 'TODO: fr'}),
+                },
+                pump: {
+                    question: new T({en: 'Does this shop offer a bike pump for use by anyone?', nl: 'Biedt deze winkel een fietspomp aan voor iedereen?', fr: 'TODO: fr'}),
+                    yes: new T({en: 'This shop offers a bike pump for anyone', nl: 'Deze winkel biedt geen fietspomp aan voor eender wie', fr: 'TODO: fr'}),
+                    no: new T({en: 'This shop doesn\'t offer a bike pump for anyone', nl: 'Deze winkel biedt een fietspomp aan voor iedereen', fr: 'TODO: fr'}),
+                }
+            }
+        },
+        image: {
+            addPicture: new T({en: 'Add picture', nl: 'Voeg foto toe', fr: 'TODO: fr'}),
+            uploadingPicture: new T({en: 'Uploading your picture...', nl: 'Bezig met een foto te uploaden...', fr: 'TODO: fr'}),
+            pleaseLogin: new T({en: 'Please login to add a picure or to answer questions', nl: 'Gelieve je aan te melden om een foto toe te voegen of vragen te beantwoorden', fr: 'TODO: fr'}),
+            willBePublished: new T({en: 'Your picture will be published: ', nl: 'Jouw foto wordt gepubliceerd: ', fr: 'TODO: fr'}),
+            cco: new T({en: 'in the public domain', nl: 'in het publiek domein', fr: 'TODO: fr'}),
+            ccbs: new T({en: 'under the CC-BY-SA-license', nl: 'onder de CC-BY-SA-licentie', fr: 'TODO: fr'}),
+            ccb: new T({en: 'under the CC-BY-license', nl: 'onder de CC-BY-licentie', fr: 'TODO: fr'})
+        },
+        centerMessage: {
+            loadingData: new T({en: 'Loading data...', nl: 'Data wordt geladen...', fr: 'TODO: fr'}),
+            zoomIn: new T({en: 'Zoom in to view or edit the data', nl: 'Zoom in om de data te zien en te bewerken', fr: 'TODO: fr'}),
+            ready: new T({en: 'Done!', nl: 'Klaar!', fr: 'TODO: fr'}),
         }
     }
 }

index.css

@@ -241,6 +241,9 @@ form {
 #language-select {
     pointer-events: all;
     cursor: pointer;
+    position: absolute;
+    margin-left: 2em;
+    margin-top: 0.5em;
 }
 
 #messagesbox-wrapper {

index.ts

@@ -26,6 +26,7 @@ import Translations from "./UI/i18n/Translations";
 import Translation from "./UI/i18n/Translation";
 import Locale from "./UI/i18n/Locale";
 import { Layout } from "./Customizations/Layout";
+import ParkingType from "./Customizations/Questions/bike/ParkingType";
 
 
 
@@ -94,9 +95,10 @@ if (paramDict.test) {
 const layoutToUse: Layout = AllKnownLayouts.allSets[defaultLayout];
 console.log("Using layout: ", layoutToUse.name);
 
-document.title = layoutToUse.title.Render();
+const uiElToTxt = el => el instanceof Translation ? el.txt : el.Render()
+document.title = uiElToTxt(layoutToUse.title)
 Locale.language.addCallback(e => {
-    document.title = layoutToUse.title.Render();
+    document.title = uiElToTxt(layoutToUse.title)
 })
 
 
@@ -294,5 +296,9 @@ window.setLanguage = function(language:string) {
     Locale.language.setData(language)
 }
 
-// const eLanguageSelect = document.getElementById('language-select') as HTMLOptionElement
+const eLanguageSelect = document.getElementById('language-select') as HTMLOptionElement
-// eLanguageSelect.addEventListener('selectionchange')
+eLanguageSelect.addEventListener('input', e => {
+    // @ts-ignore
+    const selectedLanguage = e.target.value as string
+    Locale.language.setData(selectedLanguage.toLowerCase())
+})