mapcomplete/UI/CenterMessageBox.ts

80 lines
2.3 KiB
TypeScript
Raw Normal View History

2020-06-24 00:35:19 +02:00
import {UIElement} from "./UIElement";
import {UIEventSource} from "./UIEventSource";
import {OsmConnection} from "../Logic/OsmConnection";
2020-07-20 23:43:42 +02:00
import Translations from "./i18n/Translations";
2020-06-24 00:35:19 +02:00
export class CenterMessageBox extends UIElement {
private readonly _location: UIEventSource<{ zoom: number }>;
private readonly _zoomInMore = new UIEventSource<boolean>(true);
private readonly _centermessage: UIEventSource<string>;
private readonly _osmConnection: OsmConnection;
private readonly _queryRunning: UIEventSource<boolean>;
constructor(
startZoom: number,
centermessage: UIEventSource<string>,
osmConnection: OsmConnection,
location: UIEventSource<{ zoom: number }>,
queryRunning: UIEventSource<boolean>
) {
super(centermessage);
this._centermessage = centermessage;
this._location = location;
this._osmConnection = osmConnection;
this._queryRunning = queryRunning;
this.ListenTo(queryRunning);
const self = this;
location.addCallback(function () {
self._zoomInMore.setData(location.data.zoom < startZoom);
});
this.ListenTo(this._zoomInMore);
}
2020-07-21 00:07:04 +02:00
InnerRender(): string {
2020-06-24 00:35:19 +02:00
if (this._centermessage.data != "") {
return this._centermessage.data;
}
2020-07-19 00:13:45 +02:00
if (this._queryRunning.data) {
2020-07-21 23:31:41 +02:00
return Translations.t.centerMessage.loadingData.Render();
2020-07-19 00:13:45 +02:00
} else if (this._zoomInMore.data) {
2020-07-21 23:31:41 +02:00
return Translations.t.centerMessage.zoomIn.Render();
2020-06-24 00:35:19 +02:00
}
2020-07-21 23:31:41 +02:00
return Translations.t.centerMessage.ready.Render();
2020-06-24 00:35:19 +02:00
}
private ShouldShowSomething() : boolean{
if (this._queryRunning.data) {
return true;
}
return this._zoomInMore.data;
}
InnerUpdate(htmlElement: HTMLElement) {
const pstyle = htmlElement.parentElement.style;
if (this._centermessage.data != "") {
pstyle.opacity = "1";
pstyle.pointerEvents = "all";
this._osmConnection.registerActivateOsmAUthenticationClass();
2020-06-24 00:35:19 +02:00
return;
}
pstyle.pointerEvents = "none";
if (this.ShouldShowSomething()) {
pstyle.opacity = "0.5";
} else {
pstyle.opacity = "0";
}
}
}