Translations

index.ts

@@ -25,7 +25,10 @@ import {All} from "./Customizations/Layouts/All";
 import Translations from "./UI/i18n/Translations";
 import Translation from "./UI/i18n/Translation";
 import Locale from "./UI/i18n/Locale";
-import { Layout } from "./Customizations/Layout";
+import {Layout} from "./Customizations/Layout";
+import {DropDown} from "./UI/Input/DropDown";
+import {FixedInputElement} from "./UI/Input/FixedInputElement";
+import {FixedUiElement} from "./UI/Base/FixedUiElement";
 
 
 // --------------------- Read the URL parameters -----------------
@@ -90,22 +93,29 @@ if (paramDict.test) {
 const layoutToUse: Layout = AllKnownLayouts.allSets[defaultLayout];
 console.log("Using layout: ", layoutToUse.name);
 
-document.title = layoutToUse.title.Render();
+document.title = layoutToUse.title.InnerRender();
 Locale.language.addCallback(e => {
-    document.title = layoutToUse.title.Render();
+    document.title = layoutToUse.title.InnerRender();
 })
 
 
 // ----------------- Setup a few event sources -------------
 
 
+// const LanguageSelect = document.getElementById('language-select') as HTMLOptionElement
+// eLanguageSelect.addEventListener('selectionchange')
+
+
 // The message that should be shown at the center of the screen
 const centerMessage = new UIEventSource<string>("");
 
 // The countdown: if set to e.g. ten, it'll start counting down. When reaching zero, changes will be saved. NB: this is implemented later, not in the eventSource
 const secondsTillChangesAreSaved = new UIEventSource<number>(0);
 
-const leftMessage = new UIEventSource<() => UIElement>(undefined);
+// const leftMessage = new UIEventSource<() => UIElement>(undefined);
+
+// This message is shown full screen on mobile devices
+const fullScreenMessage = new UIEventSource<UIElement>(undefined);
 
 const selectedElement = new UIEventSource<any>(undefined);
 
@@ -119,9 +129,18 @@ const locationControl = new UIEventSource<{ lat: number, lon: number, zoom: numb
 
 // ----------------- Prepare the important objects -----------------
 
+const osmConnection = new OsmConnection(dryRun);
+
+
+Locale.language.syncWith(osmConnection.GetPreference("language"));
+
+window.setLanguage = function (language: string) {
+    Locale.language.setData(language)
+}
+
+
 const saveTimeout = 30000; // After this many milliseconds without changes, saves are sent of to OSM
 const allElements = new ElementStorage();
-const osmConnection = new OsmConnection(dryRun);
 const changes = new Changes(
     "Beantwoorden van vragen met #MapComplete voor vragenset #" + layoutToUse.name,
     osmConnection, allElements);
@@ -191,8 +210,13 @@ const layerUpdater = new LayerUpdater(bm, minZoom, flayers);
 
 // ------------------ Setup various UI elements ------------
 
+let languagePicker = new DropDown(" ", layoutToUse.supportedLanguages.map(lang => {
+        return {value: lang, shown: lang}
+    }
+), Locale.language).AttachTo("language-select");
 
-new StrayClickHandler(bm, selectedElement, leftMessage, () => {
+
+new StrayClickHandler(bm, selectedElement, fullScreenMessage, () => {
         return new SimpleAddUI(bm.Location,
             bm.LastClickLocation,
             changes,
@@ -204,7 +228,7 @@ new StrayClickHandler(bm, selectedElement, leftMessage, () => {
 );
 
 /**
- * Show the questions and information for the selected element on the leftMessage
+ * Show the questions and information for the selected element on the fullScreen
  */
 selectedElement.addCallback((data) => {
     // Which is the applicable set?
@@ -213,14 +237,16 @@ selectedElement.addCallback((data) => {
         const applicable = layer.overpassFilter.matches(TagUtils.proprtiesToKV(data));
         if (applicable) {
             // This layer is the layer that gives the questions
-            leftMessage.setData(() =>
-                new FeatureInfoBox(
-                    allElements.getElement(data.id),
-                    layer.title,
-                    layer.elementsToShow,
-                    changes,
-                    osmConnection.userDetails
-                ));
+
+            const featureBox = new FeatureInfoBox(
+                allElements.getElement(data.id),
+                layer.title,
+                layer.elementsToShow,
+                changes,
+                osmConnection.userDetails
+            );
+
+            fullScreenMessage.setData(featureBox);
             break;
         }
     }
@@ -231,7 +257,10 @@ selectedElement.addCallback((data) => {
 const pendingChanges = new PendingChanges(
     changes, secondsTillChangesAreSaved,);
 
-new UserBadge(osmConnection.userDetails, pendingChanges, bm)
+new UserBadge(osmConnection.userDetails,
+    pendingChanges,
+    new FixedUiElement(""),
+    bm)
     .AttachTo('userbadge');
 
 new SearchAndGo(bm).AttachTo("searchbox");
@@ -239,7 +268,7 @@ new SearchAndGo(bm).AttachTo("searchbox");
 new CollapseButton("messagesbox")
     .AttachTo("collapseButton");
 
-var welcomeMessage = () => {
+var generateWelcomeMessage = () => {
     return new VariableUiElement(
         osmConnection.userDetails.map((userdetails) => {
             var login = layoutToUse.gettingStartedPlzLogin;
@@ -254,11 +283,11 @@ var welcomeMessage = () => {
             osmConnection.registerActivateOsmAUthenticationClass()
         });
 }
-leftMessage.setData(welcomeMessage);
-welcomeMessage().AttachTo("messagesbox");
+generateWelcomeMessage().AttachTo("messagesbox");
+fullScreenMessage.setData(generateWelcomeMessage());
 
 
-var messageBox = new MessageBoxHandler(leftMessage, () => {
+var messageBox = new MessageBoxHandler(fullScreenMessage, () => {
     selectedElement.setData(undefined)
 });
 
@@ -286,13 +315,3 @@ locationControl.ping();
 messageBox.update();
 
 
-// --- Locale ---
-
-Locale.init()
-
-window.setLanguage = function(language:string) {
-    Locale.language.setData(language)
-}
-
-// const eLanguageSelect = document.getElementById('language-select') as HTMLOptionElement
-// eLanguageSelect.addEventListener('selectionchange')