Playing around with translatiosn

Customizations/Layout.ts

@@ -1,6 +1,8 @@
 import {LayerDefinition} from "./LayerDefinition";
 import { UIElement } from "../UI/UIElement";
 import {FixedUiElement} from "../UI/Base/FixedUiElement";
+import Translation from "../UI/i18n/Translation";
+import Translations from "../UI/i18n/Translations";
 
 /**
  * A layout is a collection of settings of the global view (thus: welcome text, title, selection of layers).
@@ -10,14 +12,14 @@ export class Layout {
     public title: UIElement;
     public layers: LayerDefinition[];
     public welcomeMessage: UIElement;
-    public gettingStartedPlzLogin: string;
-    public welcomeBackMessage: string;
+    public gettingStartedPlzLogin: UIElement;
+    public welcomeBackMessage: UIElement;
+    public welcomeTail: UIElement;
 
     public startzoom: number;
     public supportedLanguages: string[];
     public startLon: number;
     public startLat: number;
-    public welcomeTail: string;
 
     public locationContains: string[];
 
@@ -43,9 +45,9 @@ export class Layout {
         startLat: number,
         startLon: number,
         welcomeMessage: UIElement | string,
-        gettingStartedPlzLogin: string = "Please login to get started",
-        welcomeBackMessage: string = "You are logged in. Welcome back!",
-        welcomeTail: string = ""
+        gettingStartedPlzLogin: UIElement | string = "Please login to get started",
+        welcomeBackMessage: UIElement | string = "You are logged in. Welcome back!",
+        welcomeTail: UIElement | string = ""
     ) {
         this.supportedLanguages = supportedLanguages;
         this.title = typeof (title) === 'string' ? new FixedUiElement(title) : title;
@@ -54,10 +56,10 @@ export class Layout {
         this.startzoom = startzoom;
         this.name = name;
         this.layers = layers;
-        this.welcomeMessage = typeof(welcomeMessage) === 'string' ? new FixedUiElement(welcomeMessage) : welcomeMessage;
-        this.gettingStartedPlzLogin = gettingStartedPlzLogin;
-        this.welcomeBackMessage = welcomeBackMessage;
-        this.welcomeTail = welcomeTail;
+        this.welcomeMessage =Translations.W(welcomeMessage)
+        this.gettingStartedPlzLogin = Translations.W(gettingStartedPlzLogin);
+        this.welcomeBackMessage = Translations.W(welcomeBackMessage);
+        this.welcomeTail = Translations.W(welcomeTail);
     }
 
 }

Customizations/Layouts/Cyclofix.ts

@@ -6,6 +6,7 @@ import {GhostBike} from "../Layers/GhostBike";
 import Translations from "../../UI/i18n/Translations";
 import {DrinkingWater} from "../Layers/DrinkingWater";
 import {BikeShop} from "../Layers/BikeShop"
+import Combine from "../../UI/Base/Combine";
 
 
 export default class Cyclofix extends Layout {
@@ -18,10 +19,13 @@ export default class Cyclofix extends Layout {
             16,
             50.8465573,
             4.3516970,
-            "<h3>" + Translations.t.cyclofix.title.Render() + "</h3>\n" +
-            "\n" +
-            `<p>${Translations.t.cyclofix.description.Render()}</p>`
-            ,
+            new Combine([
+                "<h3>",
+                Translations.t.cyclofix.title,
+                "</h3><br/><p>",
+                Translations.t.cyclofix.description,
+                "</p>"
+            ]),
             "", "");
     }
 }

Customizations/Questions/bike/StationOperator.ts

@@ -18,8 +18,8 @@ export default class BikeStationOperator extends TagRenderingOptions {
             ],
             freeform: {
                 key: "operator",
-                template: to.template,
-                renderTemplate: to.render,
+                template: to.template.txt,
+                renderTemplate: to.render.txt,
                 placeholder: "organisatie"
             }
         });

UI/Base/Combine.ts

@@ -0,0 +1,19 @@
+import {UIElement} from "../UIElement";
+import Translations from "../i18n/Translations";
+
+export default class Combine extends UIElement {
+    private uiElements: UIElement[];
+
+    constructor(uiElements: (string | UIElement)[]) {
+        super(undefined);
+        this.uiElements = uiElements.map(Translations.W);
+    }
+
+    InnerRender(): string {
+        let elements = "";
+        for (const element of this.uiElements) {
+            elements += element.Render();
+        }
+        return elements;
+    }
+}

UI/UIElement.ts

@@ -13,18 +13,23 @@ export abstract class UIElement {
         this.id = "ui-element-" + UIElement.nextId;
         this._source = source;
         UIElement.nextId++;
+        if (UIElement.nextId % 100 == 0) {
+
+            console.log(UIElement.nextId)
+        }
         this.ListenTo(source);
     }
 
 
     public ListenTo(source: UIEventSource<any>) {
         if (source === undefined) {
-            return;
+            return this;
         }
         const self = this;
         source.addCallback(() => {
             self.Update();
         })
+        return this;
     }
 
     private _onClick: () => void;

index.css

@@ -243,7 +243,7 @@ form {
     cursor: pointer;
     position: absolute;
     margin-left: 2em;
-    margin-top: 0.5em;
+    margin-top: 3em;
 }
 
 #messagesbox-wrapper {

index.ts

@@ -164,7 +164,6 @@ const bm = new Basemap("leafletDiv", locationControl, new VariableUiElement(
 
 
 // ------------- Setup the layers -------------------------------
-const controls = {};
 const addButtons: {
     name: string,
     icon: string,
@@ -194,8 +193,6 @@ for (const layer of layoutToUse.layers) {
 
     const flayer = layer.asLayer(bm, allElements, changes, osmConnection.userDetails, selectedElement, generateInfo);
 
-    controls[layer.name] = flayer.isDisplayed;
-
     const addButton = {
         name: layer.name,
         icon: layer.icon,
@@ -272,17 +269,17 @@ new CollapseButton("messagesbox")
 var generateWelcomeMessage = () => {
     return new VariableUiElement(
         osmConnection.userDetails.map((userdetails) => {
-            var login = layoutToUse.gettingStartedPlzLogin;
+            var login = layoutToUse.gettingStartedPlzLogin.Render();
             if (userdetails.loggedIn) {
-                login = layoutToUse.welcomeBackMessage;
+                login = layoutToUse.welcomeBackMessage.Render();
             }
             return "<div id='welcomeMessage'>" +
-                layoutToUse.welcomeMessage.Render() + login + layoutToUse.welcomeTail +
+                layoutToUse.welcomeMessage.Render() + login + layoutToUse.welcomeTail.Render() +
                 "</div>";
         }),
         function () {
             osmConnection.registerActivateOsmAUthenticationClass()
-        });
+        }).ListenTo(Locale.language);
 }
 generateWelcomeMessage().AttachTo("messagesbox");
 fullScreenMessage.setData(generateWelcomeMessage());
@@ -314,12 +311,3 @@ new GeoLocationHandler(bm).AttachTo("geolocate-button");
 
 locationControl.ping();
 messageBox.update();
-
-/*
-const eLanguageSelect = document.getElementById('language-select') as HTMLOptionElement
-eLanguageSelect.addEventListener('input', e => {
-    // @ts-ignore
-    const selectedLanguage = e.target.value as string
-    Locale.language.setData(selectedLanguage.toLowerCase())
-})
-*/