Translations

UI/i18n/Locale.ts

@@ -1,18 +1,24 @@
-import { UIEventSource } from "../UIEventSource";
+import {UIEventSource} from "../UIEventSource";
+import {OsmConnection} from "../../Logic/OsmConnection";
 
 
-const LANGUAGE_KEY = 'language'
-
 export default class Locale {
-    public static language: UIEventSource<string> = new UIEventSource(Locale.getInitialLanguage())
-
-    public static init() {
-        Locale.language.addCallback(data => {
-            localStorage.setItem(LANGUAGE_KEY, data)
-        })
-    }
+    public static language: UIEventSource<string> = Locale.getInitialLanguage()
 
     private static getInitialLanguage() {
-        return localStorage.getItem(LANGUAGE_KEY)
+        // The key to save in local storage
+        const LANGUAGE_KEY = 'language'
+
+        const lng = new UIEventSource("en");
+        const saved = localStorage.getItem(LANGUAGE_KEY);
+        lng.setData(saved);
+        
+
+        lng.addCallback(data => {
+            console.log("Selected language", data);
+            localStorage.setItem(LANGUAGE_KEY, data)
+        });
+        
+        return lng;
     }
 }

UI/i18n/Translation.ts

@@ -1,16 +1,30 @@
 import { UIElement } from "../UIElement"
 import Locale from "./Locale"
+import {FixedUiElement} from "../Base/FixedUiElement";
 
 
-export default class Translation extends UIElement{
-    protected InnerRender(): string {
-        return this.translations[Locale.language.data]
-    }
+export default class Translation extends UIElement {
 
     public readonly translations: object
-    
+
     constructor(translations: object) {
         super(Locale.language)
         this.translations = translations
     }
+
+    public R(): string {
+        return new Translation(this.translations).Render();
+    }
+
+    InnerRender(): string {
+        const txt = this.translations[Locale.language.data];
+        if (txt !== undefined) {
+            return txt;
+        }
+        const en = this.translations["en"];
+        console.warn("No translation for language ", Locale.language.data, "for",en);
+        return en;
+    }
+
+
 }

UI/i18n/Translations.ts

@@ -1,18 +1,42 @@
 import Translation from "./Translation";
+import {UIElement} from "../UIElement";
+import {FixedUiElement} from "../Base/FixedUiElement";
 
 
 export default class Translations {
-    static t = {
-        cylofix: {
-            title: new Translation({en: 'Cyclofix bicycle infrastructure', nl: 'Cyclofix fietsinfrastructuur', fr: 'TODO: FRENCH TRANSLATION'}),
-            description: new Translation({
-                en: "On this map we want to collect data about the whereabouts of bicycle pumps and public racks in Brussels." +
-                    "As a result, cyclists will be able to quickly find the nearest infrastructure for their needs.",
-                nl: "Op deze kaart willen we gegevens verzamelen over de locatie van fietspompen en openbare stelplaatsen in Brussel." +
-                    "Hierdoor kunnen fietsers snel de dichtstbijzijnde infrastructuur vinden die voldoet aan hun behoeften.",
-                fr: "Sur cette carte, nous voulons collecter des données sur la localisation des pompes à vélo et des supports publics à Bruxelles." +
-                    "Les cyclistes pourront ainsi trouver rapidement l'infrastructure la plus proche de leurs besoins."
-            })
-        }
+    static cylofix = {
+        title: new Translation({
+            en: 'Cyclofix bicycle infrastructure',
+            nl: 'Cyclofix fietsinfrastructuur',
+            fr: 'TODO: FRENCH TRANSLATION'
+        }),
+        description: new Translation({
+            en: "On this map we want to collect data about the whereabouts of bicycle pumps and public racks in Brussels." +
+                "As a result, cyclists will be able to quickly find the nearest infrastructure for their needs.",
+            nl: "Op deze kaart willen we gegevens verzamelen over de locatie van fietspompen en openbare stelplaatsen in Brussel." +
+                "Hierdoor kunnen fietsers snel de dichtstbijzijnde infrastructuur vinden die voldoet aan hun behoeften.",
+            fr: "Sur cette carte, nous voulons collecter des données sur la localisation des pompes à vélo et des supports publics à Bruxelles." +
+                "Les cyclistes pourront ainsi trouver rapidement l'infrastructure la plus proche de leurs besoins."
+        })
+    };
+    static general = {
+        loginWithOpenStreetMap: new Translation({
+            en: "Click here to login with OpenStreetMap",
+            nl: "Klik hier op je aan te melden met OpenStreetMap"
+        }),
+        uploadAPicture: new Translation({
+            en: "Add a picture",
+            nl: "Voeg een foto toe"
+
+        })
     }
+
+    public static W(s: string | UIElement):
+        UIElement {
+        if (s instanceof UIElement) {
+            return s;
+        }
+        return new FixedUiElement(s);
+    }
+
 }