Add current location in localstorage, fixes #13
This commit is contained in:
parent
2a61ae6e1f
commit
89b78ee709
5 changed files with 28 additions and 25 deletions
15
Logic/LocalStorageSource.ts
Normal file
15
Logic/LocalStorageSource.ts
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
import {UIEventSource} from "../UI/UIEventSource";
|
||||||
|
|
||||||
|
export class LocalStorageSource {
|
||||||
|
|
||||||
|
static Get(key: string, defaultValue: string = undefined): UIEventSource<string> {
|
||||||
|
const saved = localStorage.getItem(key);
|
||||||
|
const source = new UIEventSource<string>(saved ?? defaultValue);
|
||||||
|
|
||||||
|
source.addCallback((data) => {
|
||||||
|
localStorage.setItem(key, data);
|
||||||
|
console.log("Wriging ", key, data)
|
||||||
|
});
|
||||||
|
return source;
|
||||||
|
}
|
||||||
|
}
|
|
@ -67,7 +67,7 @@ export class UIEventSource<T>{
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
public syncWith(otherSource: UIEventSource<T>){
|
public syncWith(otherSource: UIEventSource<T>) : UIEventSource<T>{
|
||||||
this.addCallback((latest) => otherSource.setData(latest));
|
this.addCallback((latest) => otherSource.setData(latest));
|
||||||
const self = this;
|
const self = this;
|
||||||
otherSource.addCallback((latest) => self.setData(latest));
|
otherSource.addCallback((latest) => self.setData(latest));
|
||||||
|
@ -76,6 +76,7 @@ export class UIEventSource<T>{
|
||||||
}else{
|
}else{
|
||||||
otherSource.setData(this.data);
|
otherSource.setData(this.data);
|
||||||
}
|
}
|
||||||
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
|
@ -1,24 +1,7 @@
|
||||||
import {UIEventSource} from "../UIEventSource";
|
import {UIEventSource} from "../UIEventSource";
|
||||||
import {OsmConnection} from "../../Logic/OsmConnection";
|
import {LocalStorageSource} from "../../Logic/LocalStorageSource";
|
||||||
|
|
||||||
|
|
||||||
export default class Locale {
|
export default class Locale {
|
||||||
public static language: UIEventSource<string> = Locale.getInitialLanguage();
|
public static language: UIEventSource<string> = LocalStorageSource.Get('language', "en");
|
||||||
|
|
||||||
private static getInitialLanguage() {
|
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,18 +10,18 @@
|
||||||
crossorigin=""/>
|
crossorigin=""/>
|
||||||
<link rel="stylesheet" href="./index.css"/>
|
<link rel="stylesheet" href="./index.css"/>
|
||||||
|
|
||||||
<!--
|
|
||||||
<meta property="og:image" content="https://buurtnatuur.be/assets/BuurtnatuurFront.jpg">
|
<meta property="og:image" content="https://buurtnatuur.be/assets/BuurtnatuurFront.jpg">
|
||||||
<meta property="og:type" content="website">
|
<meta property="og:type" content="website">
|
||||||
<meta property="og:title" content="Buurtnatuur.be - samen natuur in kaart brengen">
|
<meta property="og:title" content="Buurtnatuur.be - samen natuur in kaart brengen">
|
||||||
<meta property="og:description"
|
<meta property="og:description"
|
||||||
content="Met deze tool kan je natuur in je buurt in kaart brengen en meer informatie geven over je favoriete plekje">
|
content="Met deze tool kan je natuur in je buurt in kaart brengen en meer informatie geven over je favoriete plekje">
|
||||||
-->
|
<!--
|
||||||
<meta property="og:image" content="/assets/bike/cyclofix.jpeg"/>
|
<meta property="og:image" content="/assets/bike/cyclofix.jpeg"/>
|
||||||
<meta property="og:type" content="website"/>
|
<meta property="og:type" content="website"/>
|
||||||
<meta property="og:title" content="Cyclofix - a map for and by cyclists"/>
|
<meta property="og:title" content="Cyclofix - a map for and by cyclists"/>
|
||||||
<meta property="og:description"
|
<meta property="og:description"
|
||||||
content="With this tool, cyclists can contribute to a map of cycling infrastructure"/>
|
content="With this tool, cyclists can contribute to a map of cycling infrastructure"/>
|
||||||
|
-->
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="messagesboxmobilewrapper">
|
<div id="messagesboxmobilewrapper">
|
||||||
|
|
10
index.ts
10
index.ts
|
@ -30,6 +30,7 @@ import Combine from "./UI/Base/Combine";
|
||||||
import {Img} from "./UI/Img";
|
import {Img} from "./UI/Img";
|
||||||
import {QueryParameters} from "./Logic/QueryParameters";
|
import {QueryParameters} from "./Logic/QueryParameters";
|
||||||
import {Utils} from "./Utils";
|
import {Utils} from "./Utils";
|
||||||
|
import {LocalStorageSource} from "./Logic/LocalStorageSource";
|
||||||
|
|
||||||
|
|
||||||
// --------------------- Special actions based on the parameters -----------------
|
// --------------------- Special actions based on the parameters -----------------
|
||||||
|
@ -92,9 +93,12 @@ const fullScreenMessage = new UIEventSource<UIElement>(undefined);
|
||||||
// The latest element that was selected - used to generate the right UI at the right place
|
// The latest element that was selected - used to generate the right UI at the right place
|
||||||
const selectedElement = new UIEventSource<{ feature: any }>(undefined);
|
const selectedElement = new UIEventSource<{ feature: any }>(undefined);
|
||||||
|
|
||||||
const zoom = QueryParameters.GetQueryParameter("z");
|
const zoom = QueryParameters.GetQueryParameter("z")
|
||||||
const lat = QueryParameters.GetQueryParameter("lat");
|
.syncWith(LocalStorageSource.Get("zoom"));
|
||||||
const lon = QueryParameters.GetQueryParameter("lon");
|
const lat = QueryParameters.GetQueryParameter("lat")
|
||||||
|
.syncWith(LocalStorageSource.Get("lat"));
|
||||||
|
const lon = QueryParameters.GetQueryParameter("lon")
|
||||||
|
.syncWith(LocalStorageSource.Get("lon"));
|
||||||
|
|
||||||
|
|
||||||
const locationControl = new UIEventSource<{ lat: number, lon: number, zoom: number }>({
|
const locationControl = new UIEventSource<{ lat: number, lon: number, zoom: number }>({
|
||||||
|
|
Loading…
Reference in a new issue