Translations

This commit is contained in:
Pieter Vander Vennet 2020-07-27 01:19:38 +02:00
parent 68929e4067
commit 1343955f44
6 changed files with 76 additions and 40 deletions

View file

@ -4,6 +4,7 @@ import {TagRenderingOptions} from "../TagRendering";
import {NameInline} from "../Questions/NameInline";
import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
import Translations from "../../UI/i18n/Translations";
import T from "../../UI/i18n/Translation";
export class Bookcases extends LayerDefinition {
@ -16,36 +17,38 @@ export class Bookcases extends LayerDefinition {
this.overpassFilter = new Tag("amenity", "public_bookcase");
this.minzoom = 11;
const Tr = Translations.t;
const Trq = Tr.bookcases.questions;
this.title = new NameInline(Translations.t.bookcases.bookcase);
this.elementsToShow = [
new ImageCarouselWithUploadConstructor(),
new TagRenderingOptions({
question: "Heeft dit boekenruilkastje een naam?",
question: Trq.hasName,
freeform: {
key: "name",
template: "De naam is $$$",
template: "$$$",
renderTemplate: "", // We don't actually render it, only ask
placeholder: "",
extraTags: new Tag("noname","")
extraTags: new Tag("noname", "")
},
mappings: [
{k: new Tag("noname", "yes"), txt: "Neen, er is geen naam aangeduid op het boekenruilkastje"},
{k: new Tag("noname", "yes"), txt: Trq.noname},
]
}),
new TagRenderingOptions(
{
question: "Hoeveel boeken passen in dit boekenruilkastje?",
question: Trq.capacity,
freeform: {
renderTemplate: "Er passen {capacity} boeken in dit boekenruilkastje",
template: "Er passen $nat$ boeken in dit boekenruilkastje",
renderTemplate: Trq.capacityRender,
template: Trq.capacityInput,
key: "capacity",
placeholder: "aantal"
},
}
),
new TagRenderingOptions({
question: "Wat voor soort boeken heeft dit boekenruilkastje?",
question: Trq.bookkinds,
mappings: [
{k: new Tag("books", "children"), txt: "Voornamelijk kinderboeken"},
{k: new Tag("books", "adults"), txt: "Voornamelijk boeken voor volwassenen"},

View file

@ -28,10 +28,11 @@ export class TagRenderingOptions implements TagDependantUIElementConstructor {
"int": (str) => str.indexOf(".") < 0 && !isNaN(Number(str)),
"nat": (str) => str.indexOf(".") < 0 && !isNaN(Number(str)) && Number(str) > 0,
"float": (str) => !isNaN(Number(str)),
"pfloat": (str) => !isNaN(Number(str)) && Number(str) > 0,
"email": (str) => EmailValidator.validate(str),
"phone": (str, country) => {
return parsePhoneNumberFromString(str, country.toUpperCase())?.isValid() ?? false;
}
},
}
public static formatting = {
@ -212,9 +213,7 @@ class TagRendering extends UIElement implements TagDependantUIElement {
this._userDetails = changes.login.userDetails;
this.ListenTo(this._userDetails);
if (options.question !== undefined) {
this._question = Translations.W(options.question);
}
this._priority = options.priority ?? 0;
this._tagsPreprocessor = function (properties) {
if (options.tagsPreprocessor === undefined) {
@ -228,6 +227,10 @@ class TagRendering extends UIElement implements TagDependantUIElement {
return newTags;
};
if (options.question !== undefined) {
this._question = this.ApplyTemplate(options.question);
}
this._mapping = [];
this._freeform = options.freeform;
@ -497,7 +500,8 @@ class TagRendering extends UIElement implements TagDependantUIElement {
if (this.IsQuestioning() || this._editMode.data) {
// Not yet known or questioning, we have to ask a question
const question = this._question.Render();
const question =
this.ApplyTemplate(this._question).Render();
return "<div class='question'>" +
"<span class='question-text'>" + question + "</span>" +
@ -535,20 +539,25 @@ class TagRendering extends UIElement implements TagDependantUIElement {
}
private ApplyTemplate(template: string | UIElement): UIElement {
if(template === undefined || template === null){
if (template === undefined || template === null) {
throw "Trying to apply a template, but the template is null/undefined"
}
const tags = this._tagsPreprocessor(this._source.data);
const contents = Translations.W(template).map(contents =>
{
let templateStr = "";
if (template instanceof UIElement) {
template = template.Render();
templateStr = template.Render();
} else {
templateStr = template;
}
return new FixedUiElement(TagUtils.ApplyTemplate(template, tags));
const tags = this._tagsPreprocessor(this._source.data);
return TagUtils.ApplyTemplate(templateStr, tags);
}, [this._source]
);
return new VariableUiElement(contents);
}
InnerUpdate(htmlElement: HTMLElement) {
super.InnerUpdate(htmlElement);
this._questionElement.Update(); // Another manual update for them
}
}

View file

@ -1,7 +1,7 @@
import {UIEventSource} from "./UIEventSource";
import {TagDependantUIElement} from "../Customizations/UIElementConstructor";
export abstract class UIElement {
export abstract class UIElement extends UIEventSource<string>{
private static nextId: number = 0;
@ -14,6 +14,7 @@ export abstract class UIElement {
public static runningFromConsole = false;
protected constructor(source: UIEventSource<any>) {
super("");
this.id = "ui-element-" + UIElement.nextId;
this._source = source;
UIElement.nextId++;
@ -50,7 +51,8 @@ export abstract class UIElement {
// The element is not painted
return;
}
element.innerHTML = this.InnerRender();
this.setData(this.InnerRender());
element.innerHTML = this.data;
if (this._hideIfEmpty) {
if (element.innerHTML === "") {
element.parentElement.style.display = "none";

View file

@ -327,8 +327,39 @@ export default class Translations {
}
),
bookcase: new T({
nl: "Boekenruilkastje"
nl: "Boekenruilkastje",
en: "Public bookcase"
}),
questions: {
hasName: new T(
{
nl: "Heeft dit boekenruilkastje een naam?",
en: "Does this bookcase have a name?"
}),
noname: new T({
nl: "Neen, er is geen naam aangeduid op het boekenruilkastje",
en: "No, there is no clearly visible name on the public bookcase"
},
),
capacity: new T({
nl: "Hoeveel boeken passen in dit boekenruilkastje?",
en: "How much books fit into this public bookcase?"
}),
capacityRender: new T({
nl: "Er passen {capacity} boeken in dit boekenruilkastje",
en: "{capacity} books fit in this bookcase"
}),
capacityInput: new T({
nl: "Er passen $nat$ boeken in dit boekenruilkastje",
en: "$nat$ books fit into this public bookcase"
}),
bookkinds: new T({
nl: "Wat voor soort boeken heeft dit boekenruilkastje?",
en: "What kind of books can be found in this public bookcase"
})
}
},
image: {
@ -469,8 +500,8 @@ export default class Translations {
}),
phoneNumberIs: new T({
en: "The phone number of this {category} is <a href='tel:{phone}'>{phone}</a>",
nl: "Het telefoonnummer van {category} is <a href='tel:{phone}'>{phone}</a>"
en: "The phone number of this {category} is <a href='tel:{phone}' target='_blank'>{phone}</a>",
nl: "Het telefoonnummer van {category} is <a href='tel:{phone}' target='_blank'>{phone}</a>"
})
}

View file

@ -1,9 +0,0 @@
import {DropDown} from "./UI/Input/DropDown";
import {UIEventSource} from "./UI/UIEventSource";
const source = new UIEventSource(10)
const dd = new DropDown("Test", [
{value: 5, shown: "five"},
{value: 10, shown: "ten"}
], source).AttachTo("maindiv")