forked from MapComplete/MapComplete
Full, interactive i18n (still some quests to enable it though)
This commit is contained in:
Pieter Vander Vennet
parent
fd6f77c98e
commit
0f2dff8f41
15 changed files with 205 additions and 90 deletions
|
|
@ -50,7 +50,7 @@ export class LayerDefinition {
|
|||
/**
|
||||
* This UIElement is rendered as title element in the popup
|
||||
*/
|
||||
title: TagRenderingOptions | UIElement;
|
||||
title: TagRenderingOptions;
|
||||
/**
|
||||
* These are the questions/shown attributes in the popup
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,13 +1,18 @@
|
|||
import {LayerDefinition} from "./LayerDefinition";
|
||||
import { UIElement } from "../UI/UIElement";
|
||||
import {UIElement} from "../UI/UIElement";
|
||||
import {FixedUiElement} from "../UI/Base/FixedUiElement";
|
||||
import Translation from "../UI/i18n/Translation";
|
||||
import Translations from "../UI/i18n/Translations";
|
||||
import Locale from "../UI/i18n/Locale";
|
||||
import {VariableUiElement} from "../UI/Base/VariableUIElement";
|
||||
import {OsmConnection, UserDetails} from "../Logic/OsmConnection";
|
||||
import {UIEventSource} from "../UI/UIEventSource";
|
||||
|
||||
/**
|
||||
* A layout is a collection of settings of the global view (thus: welcome text, title, selection of layers).
|
||||
*/
|
||||
export class Layout {
|
||||
|
||||
public name: string;
|
||||
public title: UIElement;
|
||||
public layers: LayerDefinition[];
|
||||
|
|
@ -45,8 +50,8 @@ export class Layout {
|
|||
startLat: number,
|
||||
startLon: number,
|
||||
welcomeMessage: UIElement | string,
|
||||
gettingStartedPlzLogin: UIElement | string = "Please login to get started",
|
||||
welcomeBackMessage: UIElement | string = "You are logged in. Welcome back!",
|
||||
gettingStartedPlzLogin: UIElement | string = Translations.t.general.getStarted,
|
||||
welcomeBackMessage: UIElement | string = Translations.t.general.welcomeBack,
|
||||
welcomeTail: UIElement | string = ""
|
||||
) {
|
||||
this.supportedLanguages = supportedLanguages;
|
||||
|
|
@ -56,11 +61,62 @@ export class Layout {
|
|||
this.startzoom = startzoom;
|
||||
this.name = name;
|
||||
this.layers = layers;
|
||||
this.welcomeMessage =Translations.W(welcomeMessage)
|
||||
this.welcomeMessage = Translations.W(welcomeMessage)
|
||||
this.gettingStartedPlzLogin = Translations.W(gettingStartedPlzLogin);
|
||||
this.welcomeBackMessage = Translations.W(welcomeBackMessage);
|
||||
this.welcomeTail = Translations.W(welcomeTail);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
export class WelcomeMessage extends UIElement {
|
||||
private readonly layout: Layout;
|
||||
private readonly userDetails: UIEventSource<UserDetails>;
|
||||
private osmConnection: OsmConnection;
|
||||
|
||||
private readonly description: UIElement;
|
||||
private readonly plzLogIn: UIElement;
|
||||
private readonly welcomeBack: UIElement;
|
||||
private readonly tail: UIElement;
|
||||
|
||||
|
||||
constructor(layout: Layout, osmConnection: OsmConnection) {
|
||||
super(osmConnection.userDetails);
|
||||
this.ListenTo(Locale.language);
|
||||
this.osmConnection = osmConnection;
|
||||
this.layout = layout;
|
||||
this.userDetails = osmConnection.userDetails;
|
||||
|
||||
this.description = layout.welcomeMessage;
|
||||
console.log(" >>>>",this.description, "DESCR ")
|
||||
this.plzLogIn = layout.gettingStartedPlzLogin;
|
||||
this.welcomeBack = layout.welcomeBackMessage;
|
||||
this.tail = layout.welcomeTail;
|
||||
}
|
||||
|
||||
InnerRender(): string {
|
||||
return "<div id='welcomeMessage'>" +
|
||||
this.description.Render() +
|
||||
"<br/>"+
|
||||
(this.userDetails.data.loggedIn ? this.welcomeBack : this.plzLogIn).Render() +
|
||||
"<br/>"+
|
||||
this.tail.Render() +
|
||||
"</div>"
|
||||
|
||||
;
|
||||
/*
|
||||
return new VariableUiElement(
|
||||
this.userDetails.map((userdetails) => {
|
||||
}),
|
||||
function () {
|
||||
|
||||
}).ListenTo(Locale.language);*/
|
||||
}
|
||||
|
||||
protected InnerUpdate(htmlElement: HTMLElement) {
|
||||
this.osmConnection.registerActivateOsmAUthenticationClass()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,13 +19,14 @@ export default class Cyclofix extends Layout {
|
|||
16,
|
||||
50.8465573,
|
||||
4.3516970,
|
||||
/* Translations.t.cyclofix.title/*/
|
||||
new Combine([
|
||||
"<h3>",
|
||||
Translations.t.cyclofix.title,
|
||||
"</h3><br/><p>",
|
||||
Translations.t.cyclofix.description,
|
||||
"</p>"
|
||||
]),
|
||||
"", "");
|
||||
])//*/
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,38 +1,61 @@
|
|||
import {TagRenderingOptions} from "../../TagRendering";
|
||||
import {Tag} from "../../../Logic/TagsFilter";
|
||||
import Translations from "../../../UI/i18n/Translations";
|
||||
import Combine from "../../../UI/Base/Combine";
|
||||
|
||||
class ParkingTypeHelper {
|
||||
static GenerateMappings() {
|
||||
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",
|
||||
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",
|
||||
rack: "https://wiki.openstreetmap.org/w/images/thumb/4/41/Triton_Bike_Rack.png/100px-Triton_Bike_Rack.png",
|
||||
"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"
|
||||
};
|
||||
|
||||
|
||||
const toImg = (url) => `<img src=${url}>`
|
||||
const mappings = [];
|
||||
const to = Translations.t.cyclofix.parking.type
|
||||
|
||||
for (const imagesKey in images) {
|
||||
const mapping =
|
||||
{
|
||||
k: new Tag("bicycle_parking", imagesKey),
|
||||
txt: new Combine([
|
||||
to[imagesKey],
|
||||
to.eg,
|
||||
toImg(images[imagesKey])
|
||||
])
|
||||
};
|
||||
|
||||
mappings.push(mapping);
|
||||
|
||||
}
|
||||
|
||||
return mappings;
|
||||
}
|
||||
}
|
||||
|
||||
export default class ParkingType extends TagRenderingOptions {
|
||||
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.cyclofix.parking.type
|
||||
|
||||
|
||||
super({
|
||||
priority: 5,
|
||||
question: to.question.Render(),
|
||||
question: to.question,
|
||||
freeform: {
|
||||
key: "bicycle_parking",
|
||||
extraTags: new Tag("fixme", "Freeform bicycle_parking= tag used: possibly a wrong value"),
|
||||
template: to.template.txt,
|
||||
renderTemplate: to.render.txt,
|
||||
placeholder: Translations.t.cyclofix.freeFormPlaceholder.txt,
|
||||
placeholder: Translations.t.cyclofix.freeFormPlaceholder,
|
||||
},
|
||||
mappings: [
|
||||
{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)}`}
|
||||
]
|
||||
mappings: ParkingTypeHelper.GenerateMappings()
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@ export default class PumpManometer extends TagRenderingOptions {
|
|||
constructor() {
|
||||
const to = Translations.t.cyclofix.station.manometer
|
||||
super({
|
||||
question: to.question.Render(),
|
||||
question: to.question,
|
||||
mappings: [
|
||||
{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()}
|
||||
{k: new Tag("manometer", "yes"), txt: to.yes},
|
||||
{k: new Tag("manometer", "no"), txt: to.no},
|
||||
{k: new Tag("manometer", "broken"), txt: to.broken}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import {InputElementWrapper} from "../UI/Input/InputElementWrapper";
|
|||
import {FixedInputElement} from "../UI/Input/FixedInputElement";
|
||||
import {RadioButton} from "../UI/Input/RadioButton";
|
||||
import Translations from "../UI/i18n/Translations";
|
||||
import Locale from "../UI/i18n/Locale";
|
||||
|
||||
export class TagRenderingOptions implements TagDependantUIElementConstructor {
|
||||
|
||||
|
|
@ -29,7 +30,7 @@ export class TagRenderingOptions implements TagDependantUIElementConstructor {
|
|||
tagsPreprocessor?: (tags: any) => any;
|
||||
template: string;
|
||||
renderTemplate: string;
|
||||
placeholder?: string;
|
||||
placeholder?: string | UIElement;
|
||||
extraTags?: TagsFilter
|
||||
};
|
||||
mappings?: { k: TagsFilter; txt: string | UIElement; priority?: number, substitute?: boolean }[]
|
||||
|
|
@ -78,7 +79,7 @@ export class TagRenderingOptions implements TagDependantUIElementConstructor {
|
|||
freeform?: {
|
||||
key: string, template: string,
|
||||
renderTemplate: string
|
||||
placeholder?: string,
|
||||
placeholder?: string | UIElement,
|
||||
extraTags?: TagsFilter,
|
||||
},
|
||||
|
||||
|
|
@ -148,7 +149,7 @@ class TagRendering extends UIElement implements TagDependantUIElement {
|
|||
key: string, template: string,
|
||||
renderTemplate: string,
|
||||
|
||||
placeholder?: string,
|
||||
placeholder?: string | UIElement,
|
||||
extraTags?: TagsFilter
|
||||
};
|
||||
|
||||
|
|
@ -172,13 +173,14 @@ class TagRendering extends UIElement implements TagDependantUIElement {
|
|||
freeform?: {
|
||||
key: string, template: string,
|
||||
renderTemplate: string
|
||||
placeholder?: string,
|
||||
placeholder?: string | UIElement,
|
||||
extraTags?: TagsFilter,
|
||||
},
|
||||
tagsPreprocessor?: ((tags: any) => any),
|
||||
mappings?: { k: TagsFilter, txt: string | UIElement, priority?: number, substitute?: boolean }[]
|
||||
}) {
|
||||
super(tags);
|
||||
this.ListenTo(Locale.language);
|
||||
const self = this;
|
||||
this.ListenTo(this._questionSkipped);
|
||||
this.ListenTo(this._editMode);
|
||||
|
|
@ -264,13 +266,13 @@ class TagRendering extends UIElement implements TagDependantUIElement {
|
|||
|
||||
const cancelContents = this._editMode.map((isEditing) => {
|
||||
if (isEditing) {
|
||||
return "<span class='skip-button'>Cancel</span>";
|
||||
return "<span class='skip-button'>"+Translations.t.general.cancel.R()+"</span>";
|
||||
} else {
|
||||
return "<span class='skip-button'>Skip this question</span>";
|
||||
return "<span class='skip-button'>"+Translations.t.general.skip.R()+"</span>";
|
||||
}
|
||||
});
|
||||
// And at last, set up the skip button
|
||||
this._skipButton = new VariableUiElement(cancelContents).onClick(cancel);
|
||||
this._skipButton = new VariableUiElement(cancelContents).onClick(cancel) ;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -278,7 +280,7 @@ class TagRendering extends UIElement implements TagDependantUIElement {
|
|||
freeform?: {
|
||||
key: string, template: string,
|
||||
renderTemplate: string
|
||||
placeholder?: string,
|
||||
placeholder?: string | UIElement,
|
||||
extraTags?: TagsFilter,
|
||||
},
|
||||
mappings?: { k: TagsFilter, txt: string | UIElement, priority?: number, substitute?: boolean }[]
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue