More translations!

Customizations/TagRendering.ts

@@ -463,7 +463,7 @@ class TagRendering extends UIElement implements TagDependantUIElement {
 
             return "<div class='question'>" +
                 "<span class='question-text'>" + question + "</span>" +
-                (question !== "" ? "<br/>" : "") +
+                (this._question.IsEmpty() ? "" : "<br/>") +
                 "<div>" + this._questionElement.Render() + "</div>" +
                 this._skipButton.Render() +
                 this._saveButton.Render() +
@@ -471,10 +471,11 @@ class TagRendering extends UIElement implements TagDependantUIElement {
         }
 
         if (this.IsKnown()) {
-            const html = this.RenderAnwser().Render();
+            const answer = this.RenderAnwser()
-            if (html == "") {
+            if (answer.IsEmpty()) {
                 return "";
             }
+            const html = answer.Render();
             let editButton = "";
             if (this._userDetails.data.loggedIn && this._question !== undefined) {
                 editButton = this._editButton.Render();

UI/ImageUploadFlow.ts

@@ -31,11 +31,12 @@ export class ImageUploadFlow extends UIElement {
         this._uploadOptions = uploadOptions;
         this.ListenTo(this._isUploading);
 
-        const licensePicker = new DropDown("The picture is published ",
+        const licensePicker = new DropDown(
+            Translations.general.picture.licenseIntro,
             [
-                {value: "CC0", shown: "in the public domain"},
+                {value: "CC0", shown: Translations.general.picture.publicDomain},
-                {value: "CC-BY-SA 4.0", shown: "with a CC-BY-SA license"},
+                {value: "CC-BY-SA 4.0", shown:Translations.general.picture.ccbysa},
-                {value: "CC-BY 4.0", shown: "with a CC-BY license"}
+                {value: "CC-BY 4.0", shown:Translations.general.picture.ccby}
             ],
             preferedLicense
         );
@@ -67,7 +68,7 @@ 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.uploadAPicture.R()+"</span>" +
+            "<span class='imageflow-add-picture'>"+Translations.general.picture.uploadAPicture.R()+"</span>" +
             "<div class='break'></div>" +
             "</div>" +
 

UI/Input/DropDown.ts

@@ -3,27 +3,31 @@ import {UIElement} from "../UIElement";
 import {InputElement} from "./InputElement";
 import instantiate = WebAssembly.instantiate;
 import {FixedUiElement} from "../Base/FixedUiElement";
+import Translations from "../i18n/Translations";
 
 export class DropDown<T> extends InputElement<T> {
 
-    private readonly _label: string;
+    private readonly _label: UIElement;
     private readonly _values: { value: T; shown: UIElement }[];
 
     private readonly _value;
 
-    constructor(label: string,
+    constructor(label: string | UIElement,
                 values: { value: T, shown: string | UIElement }[],
                 value: UIEventSource<T> = undefined) {
         super(undefined);
         this._value = value ?? new UIEventSource<T>(undefined);
-        this._label = label;
+        this._label = Translations.W(label);
         this._values = values.map(v => {
                 return {
                     value: v.value,
-                    shown: v.shown instanceof UIElement ? v.shown : new FixedUiElement(v.shown)
+                    shown: Translations.W(v.shown)
                 }
             }
         );
+        for (const v of this._values) {
+            this.ListenTo(v.shown._source);
+        }
         this.ListenTo(this._value)
 
     }
@@ -60,7 +64,7 @@ export class DropDown<T> extends InputElement<T> {
 
         }
         return "<form>" +
-            "<label for='dropdown-" + this.id + "'>" + this._label + "</label>" +
+            "<label for='dropdown-" + this.id + "'>" + this._label.Render() + "</label>" +
             "<select name='dropdown-" + this.id + "' id='dropdown-" + this.id + "'>" +
             options +
             "</select>" +

UI/Input/TextField.ts

@@ -2,6 +2,7 @@ import {UIElement} from "../UIElement";
 import {UIEventSource} from "../UIEventSource";
 import {InputElement} from "./InputElement";
 import {FixedUiElement} from "../Base/FixedUiElement";
+import Translations from "../i18n/Translations";
 
 
 export class TextField<T> extends InputElement<T> {
@@ -35,12 +36,8 @@ export class TextField<T> extends InputElement<T> {
         this.mappedValue.addCallback((t) => this.value.setData(options.toString(t)));
 
 
-        options.placeholder = options.placeholder ?? "";
+        this._placeholder = Translations.W(options.placeholder ?? "");
-        if (options.placeholder instanceof UIElement) {
+        this.ListenTo(this._placeholder._source);
-            this._placeholder = options.placeholder
-        } else {
-            this._placeholder = new FixedUiElement(options.placeholder);
-        }
         this._toString = options.toString ?? ((t) => ("" + t));
 
 

UI/SearchAndGo.ts

@@ -5,13 +5,18 @@ import {FixedUiElement} from "./Base/FixedUiElement";
 import {Geocoding} from "../Logic/Geocoding";
 import {Basemap} from "../Logic/Basemap";
 import {VariableUiElement} from "./Base/VariableUIElement";
+import Translation from "./i18n/Translation";
+import Locale from "./i18n/Locale";
+import Translations from "./i18n/Translations";
 
 
 export class SearchAndGo extends UIElement {
 
-    private _placeholder = new UIEventSource("Search a location...")
+    private _placeholder = new UIEventSource<Translation>(Translations.general.search.search)
     private _searchField = new TextField<string>({
-            placeholder: new VariableUiElement(this._placeholder),
+            placeholder: new VariableUiElement(
+                this._placeholder.map(uiElement => uiElement.InnerRender(), [Locale.language])
+            ),
             fromString: str => str,
             toString: str => str
         }
@@ -41,12 +46,12 @@ export class SearchAndGo extends UIElement {
     private RunSearch() {
         const searchString = this._searchField.GetValue().data;
         this._searchField.Clear();
-        this._placeholder.setData("Searching...");
+        this._placeholder.setData(Translations.general.search.searching);
         const self = this;
         Geocoding.Search(searchString, this._map, (result) => {
 
                 if (result.length == 0) {
-                    this._placeholder.setData("Niets gevonden");
+                    this._placeholder.setData(Translations.general.search.nothing);
                     return;
                 }
 
@@ -56,16 +61,15 @@ export class SearchAndGo extends UIElement {
                     [bb[1], bb[3]]
                 ]
                 self._map.map.fitBounds(bounds);
-                this._placeholder.setData("Search a location...");
+                this._placeholder.setData(Translations.general.search.search);
             },
             () => {
-                this._placeholder.setData("Something went wrong. Try again.");
+                this._placeholder.setData(Translations.general.search.error);
             });
 
     }
 
     InnerRender(): string {
-        // "<img class='search' src='./assets/search.svg' alt='Search'> " +
         return this._searchField.Render() +
             this._goButton.Render();
 

UI/i18n/Translations.ts

@@ -24,15 +24,53 @@ export default class Translations {
             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"
+            }),
+            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..."
+            })
+
+        },
+
+        picture: {
             uploadAPicture: new Translation({
                 en: "Add a picture",
                 nl: "Voeg een foto toe"
 
+            }),
+            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):
+    public static W(s: string | UIElement): UIElement {
-        UIElement {
         if (s instanceof UIElement) {
             return s;
         }