" +
diff --git a/UI/i18n/Locale.ts b/UI/i18n/Locale.ts
index 52c45bb..52e0d78 100644
--- a/UI/i18n/Locale.ts
+++ b/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 = new UIEventSource(Locale.getInitialLanguage())
-
- public static init() {
- Locale.language.addCallback(data => {
- localStorage.setItem(LANGUAGE_KEY, data)
- })
- }
+ public static language: UIEventSource = 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;
}
}
diff --git a/UI/i18n/Translation.ts b/UI/i18n/Translation.ts
index 4b53b17..b79746c 100644
--- a/UI/i18n/Translation.ts
+++ b/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;
+ }
+
+
}
diff --git a/UI/i18n/Translations.ts b/UI/i18n/Translations.ts
index edf0561..8536c01 100644
--- a/UI/i18n/Translations.ts
+++ b/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);
+ }
+
}
diff --git a/index.css b/index.css
index d4448b8..b79d1c8 100644
--- a/index.css
+++ b/index.css
@@ -307,23 +307,26 @@ form {
}
}
-
#to-the-map {
+ position: relative;
+}
+
+#to-the-map h2{
+ position: absolute;
height: 4em;
+
padding: 0.5em;
margin: 0;
- position: absolute;
- bottom: 0;
- right: 0;
-
padding-right: 2em;
+ padding-top: 1em;
+ text-align: center;
width: 100%;
- text-align: right;
color: white;
background-color: #7ebc6f;
cursor: pointer;
+
}
diff --git a/index.html b/index.html
index bcdeca3..b48ae01 100644
--- a/index.html
+++ b/index.html
@@ -28,17 +28,13 @@
Loading... If this message persists, check if javascript is enabled and if no extension (uMatrix) is
blocking it.
+
-
diff --git a/index.ts b/index.ts
index c1fd116..acf78fe 100644
--- a/index.ts
+++ b/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("");
// 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(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(undefined);
const selectedElement = new UIEventSource(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')
diff --git a/test.ts b/test.ts
index e4f2d19..b2a2271 100644
--- a/test.ts
+++ b/test.ts
@@ -1 +1,9 @@
-console.log("Hello world")
\ No newline at end of file
+import {DropDown} from "./UI/Input/DropDown";
+import Locale from "./UI/i18n/Locale";
+
+console.log("Hello world")
+
+let languagePicker = new DropDown("", ["en", "nl"].map(lang => {
+ return {value: lang, shown: lang}
+ }
+), Locale.language).AttachTo("maindiv");
\ No newline at end of file