From 2c92f5bbe2c71ca555e3dcf62118bc150d5f2a03 Mon Sep 17 00:00:00 2001 From: Pieter Fiers Date: Mon, 20 Jul 2020 23:43:42 +0200 Subject: [PATCH] Add translations + bike Shops --- Customizations/Layers/BikeParkings.ts | 9 +- Customizations/Layers/BikeShops.ts | 50 ++++++++ Customizations/Layers/BikeStations.ts | 7 +- Customizations/Layouts/Cyclofix.ts | 3 +- .../Questions/bike/ParkingOperator.ts | 27 ++++ Customizations/Questions/bike/ParkingType.ts | 42 +++---- .../Questions/bike/PumpManometer.ts | 10 +- Customizations/Questions/bike/PumpManual.ts | 8 +- .../Questions/bike/PumpOperational.ts | 8 +- Customizations/Questions/bike/PumpValves.ts | 17 +-- Customizations/Questions/bike/ShopPump.ts | 19 +++ Customizations/Questions/bike/ShopRental.ts | 19 +++ Customizations/Questions/bike/ShopRepair.ts | 19 +++ Customizations/Questions/bike/ShopRetail.ts | 19 +++ Customizations/Questions/bike/StationBrand.ts | 2 + Customizations/Questions/bike/StationChain.ts | 8 +- .../Questions/bike/StationOperator.ts | 20 +-- .../Questions/bike/StationPumpTools.ts | 10 +- Customizations/Questions/bike/StationStand.ts | 4 +- UI/CenterMessageBox.ts | 7 +- UI/ImageUploadFlow.ts | 16 +-- UI/i18n/Locale.ts | 7 +- UI/i18n/Translation.ts | 6 +- UI/i18n/Translations.ts | 119 +++++++++++++++++- index.css | 3 + index.ts | 14 ++- 26 files changed, 390 insertions(+), 83 deletions(-) create mode 100644 Customizations/Layers/BikeShops.ts create mode 100644 Customizations/Questions/bike/ParkingOperator.ts create mode 100644 Customizations/Questions/bike/ShopPump.ts create mode 100644 Customizations/Questions/bike/ShopRental.ts create mode 100644 Customizations/Questions/bike/ShopRepair.ts create mode 100644 Customizations/Questions/bike/ShopRetail.ts diff --git a/Customizations/Layers/BikeParkings.ts b/Customizations/Layers/BikeParkings.ts index ccd737e..141ba29 100644 --- a/Customizations/Layers/BikeParkings.ts +++ b/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() ]; diff --git a/Customizations/Layers/BikeShops.ts b/Customizations/Layers/BikeShops.ts new file mode 100644 index 0000000..d829eeb --- /dev/null +++ b/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] + }) + }; + }; + } +} diff --git a/Customizations/Layers/BikeStations.ts b/Customizations/Layers/BikeStations.ts index ca25fac..65b43f0 100644 --- a/Customizations/Layers/BikeStations.ts +++ b/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 ]; } diff --git a/Customizations/Layouts/Cyclofix.ts b/Customizations/Layouts/Cyclofix.ts index 328acda..9c9148b 100644 --- a/Customizations/Layouts/Cyclofix.ts +++ b/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, diff --git a/Customizations/Questions/bike/ParkingOperator.ts b/Customizations/Questions/bike/ParkingOperator.ts new file mode 100644 index 0000000..f554444 --- /dev/null +++ b/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()} + ] + }); + } +} diff --git a/Customizations/Questions/bike/ParkingType.ts b/Customizations/Questions/bike/ParkingType.ts index 4b5074f..f621b8d 100644 --- a/Customizations/Questions/bike/ParkingType.ts +++ b/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 `` - } - 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) => `` + 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: $$$", - renderTemplate: "Dit is een fietsenparking van het type: {bicycle_parking}", - placeholder: "Specifieer" + template: to.template.txt, + renderTemplate: to.render.txt, + placeholder: Translations.t.cylofix.freeFormPlaceholder.txt, }, mappings: [ - {k: new Tag("bicycle_parking", "stands"), txt: ParkingType.toImgTxt(ParkingType.images.stands)}, - {k: new Tag("bicycle_parking", "wall_loops"), txt: ParkingType.toImgTxt(ParkingType.images.wall_loops)}, - {k: new Tag("bicycle_parking", "handlebar_holder"), txt: ParkingType.toImgTxt(ParkingType.images.handlebar_holder)}, - {k: new Tag("bicycle_parking", "shed"), txt: ParkingType.toImgTxt(ParkingType.images.shed)}, - {k: new Tag("bicycle_parking", "two-tier"), txt: ParkingType.toImgTxt(ParkingType.images["two-tier"])} + {k: new Tag("bicycle_parking", "stands"), txt: `${to.stands.Render()}, bijvoorbeeld: ${toImg(images.stands)}`}, + {k: new Tag("bicycle_parking", "wall_loops"), txt: `${to.loops.Render()}, bijvoorbeeld: ${toImg(images.loops)}`}, + {k: new Tag("bicycle_parking", "handlebar_holder"), txt: `${to.handlebar.Render()}, bijvoorbeeld: ${toImg(images.handlebar)}`}, + {k: new Tag("bicycle_parking", "shed"), txt: `${to.shed.Render()}, bijvoorbeeld: ${toImg(images.shed)}`}, + {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)}`} ] }); } diff --git a/Customizations/Questions/bike/PumpManometer.ts b/Customizations/Questions/bike/PumpManometer.ts index bc97a03..6d5e0a7 100644 --- a/Customizations/Questions/bike/PumpManometer.ts +++ b/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","broken"), txt: "Yes, but it is broken"}, - {k: new Tag("manometer", "yes"), txt: "No"} + {k: new Tag("manometer", "yes"), txt: to.yes.Render()}, + {k: new Tag("manometer", "no"), txt: to.no.Render()}, + {k: new Tag("manometer", "broken"), txt: to.broken.Render()} ] }); } diff --git a/Customizations/Questions/bike/PumpManual.ts b/Customizations/Questions/bike/PumpManual.ts index 18b79e6..4346b67 100644 --- a/Customizations/Questions/bike/PumpManual.ts +++ b/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", "no"), txt: "Electric pump"} + {k: new Tag("manual", "yes"), txt: to.manual.Render()}, + {k: new Tag("manual", "no"), txt: to.electric.Render()} ] }); } diff --git a/Customizations/Questions/bike/PumpOperational.ts b/Customizations/Questions/bike/PumpOperational.ts index d7abe0f..8aa052b 100644 --- a/Customizations/Questions/bike/PumpOperational.ts +++ b/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",""), txt: "This pump is operational"} + {k: new Tag("service:bicycle:pump:operational_status","broken"), txt: to.broken.txt}, + {k: new Tag("service:bicycle:pump:operational_status",""), txt: to.operational.txt} ] }); } diff --git a/Customizations/Questions/bike/PumpValves.ts b/Customizations/Questions/bike/PumpValves.ts index ae9ebb4..5789ae9 100644 --- a/Customizations/Questions/bike/PumpValves.ts +++ b/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", "sclaverand"), txt: "Only Sclaverand (also known as Dunlop)"}, - {k: new Tag("valves", "auto"), txt: "Only auto"}, + {k: new Tag("valves", "dunlop"), txt: to.dunlop.Render()}, + {k: new Tag("valves", "sclaverand"), txt: to.sclaverand.Render()}, + {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 $$$", - renderTemplate: "Supported valves are {valves}" + template: to.template.txt, + renderTemplate: to.render.txt } }); } diff --git a/Customizations/Questions/bike/ShopPump.ts b/Customizations/Questions/bike/ShopPump.ts new file mode 100644 index 0000000..5c3882b --- /dev/null +++ b/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()}, + ] + }); + } +} diff --git a/Customizations/Questions/bike/ShopRental.ts b/Customizations/Questions/bike/ShopRental.ts new file mode 100644 index 0000000..899100f --- /dev/null +++ b/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()}, + ] + }); + } +} diff --git a/Customizations/Questions/bike/ShopRepair.ts b/Customizations/Questions/bike/ShopRepair.ts new file mode 100644 index 0000000..7ad84d0 --- /dev/null +++ b/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()}, + ] + }); + } +} diff --git a/Customizations/Questions/bike/ShopRetail.ts b/Customizations/Questions/bike/ShopRetail.ts new file mode 100644 index 0000000..37eb35a --- /dev/null +++ b/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()}, + ] + }); + } +} diff --git a/Customizations/Questions/bike/StationBrand.ts b/Customizations/Questions/bike/StationBrand.ts index 61dbc44..b763bf6 100644 --- a/Customizations/Questions/bike/StationBrand.ts +++ b/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 = { diff --git a/Customizations/Questions/bike/StationChain.ts b/Customizations/Questions/bike/StationChain.ts index eb5c36a..00893b7 100644 --- a/Customizations/Questions/bike/StationChain.ts +++ b/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", "no"), txt: "There is no chain tool."}, + {k: new Tag("service:bicycle:chain_tool", "yes"), txt: to.yes.Render()}, + {k: new Tag("service:bicycle:chain_tool", "no"), txt: to.no.Render()}, ] }); } diff --git a/Customizations/Questions/bike/StationOperator.ts b/Customizations/Questions/bike/StationOperator.ts index 001f920..3013723 100644 --- a/Customizations/Questions/bike/StationOperator.ts +++ b/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...)?", - freeform: { - key: "operator", - template: "This bike station is operated by $$$", - renderTemplate: "This bike station is operated by {operator}", - placeholder: "organisatie" - }, + question: to.question.Render(), 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" + } }); } } diff --git a/Customizations/Questions/bike/StationPumpTools.ts b/Customizations/Questions/bike/StationPumpTools.ts index be81c8b..26866aa 100644 --- a/Customizations/Questions/bike/StationPumpTools.ts +++ b/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", "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", "yes")]), txt: "There are both tools and 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: to.tools.Render()}, + {k: new And([new Tag("service:bicycle:tools", "yes"), new Tag("service:bicycle:pump", "yes")]), txt: to.both.Render()} ] }); } diff --git a/Customizations/Questions/bike/StationStand.ts b/Customizations/Questions/bike/StationStand.ts index 0b6fce1..be6ac4a 100644 --- a/Customizations/Questions/bike/StationStand.ts +++ b/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"}, ] }); diff --git a/UI/CenterMessageBox.ts b/UI/CenterMessageBox.ts index b08d0d2..19c5d1a 100644 --- a/UI/CenterMessageBox.ts +++ b/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; } diff --git a/UI/ImageUploadFlow.ts b/UI/ImageUploadFlow.ts index 6542824..b04070a 100644 --- a/UI/ImageUploadFlow.ts +++ b/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: "CC-BY-SA 4.0", shown: "onder een CC-BY-SA-licentie"}, - {value: "CC-BY 4.0", shown: "onder een CC-BY-licentie"} + {value: "CC0", shown: Translations.t.image.cco.txt}, + {value: "CC-BY-SA 4.0", shown: Translations.t.image.ccbs.txt}, + {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 "
Gelieve je aan te melden om een foto toe te voegen of vragen te beantwoorden
"; + return `
${Translations.t.image.pleaseLogin.Render()}
`; } if (this._isUploading.data == 1) { - return "Bezig met een foto te uploaden..." + return `${Translations.t.image.uploadingPicture.Render()}` } if (this._isUploading.data > 0) { return "Bezig met uploaden, nog " + this._isUploading.data + " foto's te gaan..." @@ -81,7 +81,7 @@ export class ImageUploadFlow extends UIElement { "
" + "upload image " + - "Voeg foto toe" + + `${Translations.t.image.addPicture.Render()}` + "
"+ "
" + this._licensePicker.Render() + diff --git a/UI/i18n/Locale.ts b/UI/i18n/Locale.ts index 52c45bb..466d889 100644 --- a/UI/i18n/Locale.ts +++ b/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 = 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' } } diff --git a/UI/i18n/Translation.ts b/UI/i18n/Translation.ts index 4b53b17..74e12db 100644 --- a/UI/i18n/Translation.ts +++ b/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) { diff --git a/UI/i18n/Translations.ts b/UI/i18n/Translations.ts index edf0561..91b6d9b 100644 --- a/UI/i18n/Translations.ts +++ b/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'}), - description: new Translation({ + title: new T({en: 'Cyclofix bicycle infrastructure', nl: 'Cyclofix fietsinfrastructuur', fr: 'TODO: FRENCH 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'}), } } } diff --git a/index.css b/index.css index 672e558..3c7afcf 100644 --- a/index.css +++ b/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 { diff --git a/index.ts b/index.ts index 0e41b1f..e4ad766 100644 --- a/index.ts +++ b/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 -// eLanguageSelect.addEventListener('selectionchange') +const eLanguageSelect = document.getElementById('language-select') as HTMLOptionElement +eLanguageSelect.addEventListener('input', e => { + // @ts-ignore + const selectedLanguage = e.target.value as string + Locale.language.setData(selectedLanguage.toLowerCase()) +})