Translations

Customizations/Layers/Bookcases.ts

@@ -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",
+                        renderTemplate: Trq.capacityRender,
-                        template:  "Er passen $nat$ boeken in dit boekenruilkastje",
+                        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"},

Customizations/TagRendering.ts

@@ -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
-    }
  
 }

UI/UIElement.ts

@@ -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";

UI/i18n/Translations.ts

@@ -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>",
+                    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}'>{phone}</a>"
+                    nl: "Het telefoonnummer van {category} is <a href='tel:{phone}' target='_blank'>{phone}</a>"
                 })
 
             }

test.ts

@@ -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")