Playing with new translations, merging branches

This commit is contained in:
Pieter Vander Vennet 2020-07-21 01:13:51 +02:00
commit 6f8c29d401
32 changed files with 609 additions and 163 deletions

View file

@ -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 {
@ -40,11 +41,11 @@ export class CenterMessageBox extends UIElement {
return this._centermessage.data;
}
if (this._queryRunning.data) {
return "Data is loading...";
return Translations.t.centerMessage.loadingData.txt;
} else if (this._zoomInMore.data) {
return "Zoom in more to see the data";
return Translations.t.centerMessage.zoomIn.txt;
}
return "Done!";
return Translations.t.centerMessage.ready.txt;
}

View file

@ -30,7 +30,7 @@ export class FeatureInfoBox extends UIElement {
constructor(
tagsES: UIEventSource<any>,
title: TagRenderingOptions,
title: TagRenderingOptions | UIElement,
elementsToShow: TagDependantUIElementConstructor[],
changes: Changes,
userDetails: UIEventSource<UserDetails>
@ -56,10 +56,14 @@ export class FeatureInfoBox extends UIElement {
}
)
this._title = new TagRenderingOptions(title.options).construct(deps);
this._osmLink =new OsmLink().construct(deps);
if (title instanceof UIElement) {
this._title = title;
} else {
this._title = new TagRenderingOptions(title.options).construct(deps);
}
this._osmLink = new OsmLink().construct(deps);
this._wikipedialink = new WikipediaLink().construct(deps);
}

View file

@ -31,12 +31,11 @@ export class ImageUploadFlow extends UIElement {
this._uploadOptions = uploadOptions;
this.ListenTo(this._isUploading);
const licensePicker = new DropDown(
Translations.general.picture.licenseIntro,
const licensePicker = new DropDown(Translations.t.image.willBePublished,
[
{value: "CC0", shown: Translations.general.picture.publicDomain},
{value: "CC-BY-SA 4.0", shown:Translations.general.picture.ccbysa},
{value: "CC-BY 4.0", shown:Translations.general.picture.ccby}
{value: "CC0", shown: Translations.t.image.cco},
{value: "CC-BY-SA 4.0", shown: Translations.t.image.ccbs},
{value: "CC-BY 4.0", shown: Translations.t.image.ccb}
],
preferedLicense
);
@ -50,12 +49,12 @@ export class ImageUploadFlow extends UIElement {
InnerRender(): string {
if (!this._userdetails.data.loggedIn) {
return "<div class='activate-osm-authentication'>Please log in to add a picture</div>";
return `<div class='activate-osm-authentication'>${Translations.t.image.pleaseLogin.Render()}</div>`;
}
let uploadingMessage = "";
if (this._isUploading.data == 1) {
uploadingMessage = "<b>Uploading a picture...</b>"
return `<b>${Translations.t.image.uploadingPicture.Render()}</b>`
}
if (this._isUploading.data > 0) {
uploadingMessage = "<b>Uploading multiple pictures, " + this._isUploading.data + " left...</b>"
@ -68,8 +67,8 @@ 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'>"+Translations.general.picture.uploadAPicture.R()+"</span>" +
"<div class='break'></div>" +
`<span class='imageflow-add-picture'>${Translations.t.image.addPicture.R()}</span>` +
"<div class='break'></div>"+
"</div>" +
this._licensePicker.Render() + "<br/>" +

View file

@ -12,7 +12,7 @@ import Translations from "./i18n/Translations";
export class SearchAndGo extends UIElement {
private _placeholder = new UIEventSource<Translation>(Translations.general.search.search)
private _placeholder = new UIEventSource<Translation>(Translations.t.general.search.search)
private _searchField = new TextField<string>({
placeholder: new VariableUiElement(
this._placeholder.map(uiElement => uiElement.InnerRender(), [Locale.language])
@ -46,12 +46,12 @@ export class SearchAndGo extends UIElement {
private RunSearch() {
const searchString = this._searchField.GetValue().data;
this._searchField.Clear();
this._placeholder.setData(Translations.general.search.searching);
this._placeholder.setData(Translations.t.general.search.searching);
const self = this;
Geocoding.Search(searchString, this._map, (result) => {
if (result.length == 0) {
this._placeholder.setData(Translations.general.search.nothing);
this._placeholder.setData(Translations.t.general.search.nothing);
return;
}
@ -61,10 +61,10 @@ export class SearchAndGo extends UIElement {
[bb[1], bb[3]]
]
self._map.map.fitBounds(bounds);
this._placeholder.setData(Translations.general.search.search);
this._placeholder.setData(Translations.t.general.search.search);
},
() => {
this._placeholder.setData(Translations.general.search.error);
this._placeholder.setData(Translations.t.general.search.error);
});
}

View file

@ -64,7 +64,7 @@ export class UserBadge extends UIElement {
InnerRender(): string {
const user = this._userDetails.data;
if (!user.loggedIn) {
return "<div class='activate-osm-authentication'>" + Translations.general.loginWithOpenStreetMap.R()+ "</div>";
return "<div class='activate-osm-authentication'>" + Translations.t.general.loginWithOpenStreetMap.R()+ "</div>";
}

View file

@ -3,7 +3,7 @@ import {OsmConnection} from "../../Logic/OsmConnection";
export default class Locale {
public static language: UIEventSource<string> = Locale.getInitialLanguage()
public static language: UIEventSource<string> = Locale.getInitialLanguage();
private static getInitialLanguage() {
// The key to save in local storage
@ -12,13 +12,13 @@ export default class Locale {
const lng = new UIEventSource("en");
const saved = localStorage.getItem(LANGUAGE_KEY);
lng.setData(saved);
lng.addCallback(data => {
console.log("Selected language", data);
localStorage.setItem(LANGUAGE_KEY, data)
});
return lng;
}
}

View file

@ -4,6 +4,19 @@ import {FixedUiElement} from "../Base/FixedUiElement";
export default class Translation extends UIElement {
get txt(): string {
const txt = this.translations[Locale.language.data];
if (txt !== undefined) {
return txt;
}
const en = this.translations["en"];
console.warn("No translation for language ", Locale.language.data, "for", en);
return en;
}
InnerRender(): string {
return this.txt
}
public readonly translations: object
@ -12,19 +25,11 @@ export default class Translation extends UIElement {
this.translations = translations
}
public R(): string {
return new Translation(this.translations).Render();
}
InnerRender(): string {
const txt = this.translations[Locale.language.data];
if (txt !== undefined) {
return txt;
}
const en = this.translations["en"];
console.warn("No translation for language ", Locale.language.data, "for",en);
return en;
}
}

View file

@ -1,73 +1,321 @@
import Translation from "./Translation";
import T from "./Translation";
import {UIElement} from "../UIElement";
import {FixedUiElement} from "../Base/FixedUiElement";
export default class Translations {
static cylofix = {
title: new Translation({
en: 'Cyclofix bicycle infrastructure',
nl: 'Cyclofix fietsinfrastructuur',
fr: 'TODO: FRENCH TRANSLATION'
}),
description: new Translation({
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."
})
};
static general = {
loginWithOpenStreetMap: new Translation({
en: "Click here to login with OpenStreetMap",
nl: "Klik hier op je aan te melden met OpenStreetMap"
}),
search: {
search: new Translation({
en: "Search a location",
nl: "Zoek naar een locatie"
static t = {
cyclofix: {
title: new T({
en: 'Cyclofix bicycle infrastructure',
nl: 'Cyclofix fietsinfrastructuur',
fr: 'TODO: FRENCH TRANSLATION'
}),
searching: new Translation({
en: "Searching...",
nl: "Aan het zoeken..."
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."
}),
nothing: new Translation({
en: "Nothing found...",
nl: "Niet gevonden..."
}),
error: new Translation({
en: "Something went wrong...",
nl: "Niet gelukt..."
})
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'}),
},
general: {
loginWithOpenStreetMap: new T({en: "Login with OpenStreetMap", nl: "Aanmelden met OpenStreetMap"})
picture: {
uploadAPicture: new Translation({
en: "Add a picture",
nl: "Voeg een foto toe"
,
search: {
search: new Translation({
en: "Search a location",
nl: "Zoek naar een locatie"
}),
searching: new Translation({
en: "Searching...",
nl: "Aan het zoeken..."
}),
nothing: new Translation({
en: "Nothing found...",
nl: "Niet gevonden..."
}),
error: new Translation({
en: "Something went wrong...",
nl: "Niet gelukt..."
})
}),
licenseIntro: new Translation({
en: "Your picture is published",
nl: "Je foto wordt gepubliceerd"
}),
publicDomain: new Translation({
en: "in the public domain",
nl: "in het publiek domein"
}),
ccby: new Translation({
en: "with a CC-BY license",
nl: "met een CC-BY licentie"
}),
ccbysa: new Translation({
en: "with a CC-BY-SA license",
nl: "met een CC-BY-SA licentie"
})
}
}
}
}
public static W(s: string | UIElement): UIElement {