Bastian-Greshake-Tzovaras/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Further work on infobox, styling everything, removing clutter

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-06-27 03:06:51 +02:00
parent 2acd53d150
commit 0b4016b65d
48 changed files with 1283 additions and 454 deletions
Download patch file Download diff file Expand all files Collapse all files

86
UI/PendingChanges.ts
View file

@ -1,65 +1,37 @@
import {UIElement} from "./UIElement";
import {UIEventSource} from "./UIEventSource";
import {Changes} from "../Logic/Changes";
export class PendingChanges extends UIElement{
export class PendingChanges extends UIElement {
private _pendingChangesCount: UIEventSource<number>;
private _countdown: UIEventSource<number>;
private _isSaving: UIEventSource<boolean>;
private readonly changes;
constructor(changes: Changes, countdown: UIEventSource<number>) {
super(undefined); // We do everything manually here!
this.changes = changes;
countdown.addCallback(function () {
const percentage = Math.max(0, 100 * countdown.data / 20000);
let bar = document.getElementById("pending-bar");
if (bar === undefined) {
return;
}
const style = bar.style;
style.width = percentage + "%";
style["margin-left"] = (50 - (percentage / 2)) + "%";
});
changes.pendingChangesES.addCallback(function () {
const c = changes._pendingChanges.length;
const text = document.getElementById("pending-text");
if (c == 0) {
text.style.opacity = "0";
text.innerText = "Saving...";
} else {
text.innerText = c + " pending";
text.style.opacity = "1";
}
const bar = document.getElementById("pending-bar");
if (bar === null) {
return;
}
if (c == 0) {
bar.style.opacity = "0";
} else {
bar.style.opacity = "0.5";
}
});
constructor(pendingChangesCount: UIEventSource<number>,
countdown: UIEventSource<number>,
isSaving: UIEventSource<boolean>) {
super(pendingChangesCount);
this.ListenTo(isSaving);
this.ListenTo(countdown);
this._pendingChangesCount = pendingChangesCount;
this._countdown = countdown;
this._isSaving = isSaving;
}
protected InnerRender(): string {
return "<div id='pending-bar' style='width:100%; margin-left:0%'></div>" +
"<div id='pending-text'></div>";
}
if (this._isSaving.data) {
return "<span class='alert'>Saving</span>";
}
if (this._pendingChangesCount.data == 0) {
return "";
}
var restingSeconds = this._countdown.data / 1000;
var dots = "";
while (restingSeconds > 0) {
dots += ".";
restingSeconds = restingSeconds - 1;
}
return "Saving "+this._pendingChangesCount.data;
}
InnerUpdate(htmlElement: HTMLElement) {
}
}