contrapunctus/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Add a personal, configurable quest

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-07-31 16:17:16 +02:00
parent 9c42839f01
commit 7ec00a3301
21 changed files with 376 additions and 237 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Logic/CustomLayers.ts
View file

@ -1,13 +1,13 @@
import {Layout} from "../Customizations/Layout";
import Translations from "../UI/i18n/Translations";
export class CustomLayers extends Layout {
export class CustomLayout extends Layout {
public static NAME: string = "personal";
constructor() {
super(
CustomLayers.NAME,
CustomLayout.NAME,
["en"],
Translations.t.favourite.title,
[],

68
Logic/CustomLayersPanel.ts
View file

@ -9,22 +9,40 @@ import {CheckBox} from "../UI/Input/CheckBox";
import {CustomLayersState} from "./CustomLayersState";
import {VerticalCombine} from "../UI/Base/VerticalCombine";
import {FixedUiElement} from "../UI/Base/FixedUiElement";
import {CustomLayout} from "./CustomLayers";
import {SubtleButton} from "../UI/Base/SubtleButton";
export class CustomLayersPanel extends UIElement {
private checkboxes: UIElement[];
private checkboxes: UIElement[] = [];
private updateButton : UIElement;
constructor() {
super(State.state.favourteLayers);
this.ListenTo(State.state.osmConnection.userDetails);
const t = Translations.t.favourite;
this.checkboxes = [];
const controls = new Map<string, UIEventSource<boolean>>();
const favs = State.state.favourteLayers.data;
this.updateButton = new SubtleButton("./assets/reload.svg", t.reload)
.onClick(() => {
State.state.layerUpdater.ForceRefresh();
CustomLayersState.InitFavouriteLayers(State.state);
State.state.layoutToUse.ping();
})
const controls = new Map<string, UIEventSource<boolean>>();
for (const layout of AllKnownLayouts.layoutsList) {
if(layout.name === CustomLayout.NAME){
continue;
}
if (layout.hideFromOverview && State.state.osmConnection.userDetails.data.name !== "Pieter Vander Vennet") {
continue
}
const header =
new Combine([
`<div class="custom-layer-panel-header-img"><img src='${layout.icon}'></div>`,
@ -38,14 +56,23 @@ export class CustomLayersPanel extends UIElement {
for (const layer of layout.layers) {
const image = (layer.icon ? `<img src='${layer.icon}'>` : Img.checkmark);
const noimage = (layer.icon ? `<img src='${layer.icon}'>` : Img.no_checkmark);
const content = new Combine([
"<span>",
"<b>", layer.name ?? "", "</b> ",
layer.description !== undefined ? new Combine(["<br/>", layer.description]) : "",
"</span>"])
const cb = new CheckBox(
new Combine([
image,
"<b>", layer.name ?? "", "</b> ", layer.description ?? ""
image, content
]),
new Combine([
"<span style='opacity: 0'>",
image, "</span>", "<b>", layer.name ?? "", "</b> ", layer.description ?? ""
"<span style='opacity: 0.1'>",
noimage, "</span>",
"<del>",
content,
"</del>"
]),
controls[layer.id] ?? (favs.indexOf(layer.id) >= 0)
);
@ -64,30 +91,25 @@ export class CustomLayersPanel extends UIElement {
}
State.state.favourteLayers.addCallback((layers) => {
for (const layerId of layers) {
controls[layerId]?.setData(true);
}
})
}
State.state.favourteLayers.addCallback((layers) => {
for (const layerId of layers) {
controls[layerId].setData(true);
}
})
}
InnerRender(): string {
const t = Translations.t.favourite;
const userDetails = State.state.osmConnection.userDetails.data;
if(!userDetails.loggedIn){
return "";
return t.loginNeeded.Render();
}
if(userDetails.csCount <= 100){
return "";
}
return new VerticalCombine([
return new Combine([
t.panelIntro,
new FixedUiElement("<a href='./index.html?layout=personal'>GO</a>"),
this.updateButton,
...this.checkboxes
], "custom-layer-panel").Render();
}

40
Logic/CustomLayersState.ts
View file

@ -3,35 +3,29 @@ import {State} from "../State";
export class CustomLayersState {
static RemoveFavouriteLayer(layer: string) {
State.state.GetFilteredLayerFor(layer)?.isDisplayed?.setData(false);
const favs = State.state.favourteLayers.data;
const ind = favs.indexOf(layer);
if (ind < 0) {
return;
}
console.log("REmovign fav layer", layer);
favs.splice(ind, 1);
State.state.favourteLayers.ping();
const osmConnection = State.state.osmConnection;
const count = osmConnection.GetPreference("mapcomplete-custom-layer-count");
if (favs.length === 0) {
count.setData("0")
} else if (count.data === undefined || isNaN(Number(count.data))) {
count.data = "0";
}
const lastId = Number(count.data);
for (let i = 0; i < lastId; i++) {
for (let i = 0; i < favs.length; i++) {
const layerIDescr = osmConnection.GetPreference("mapcomplete-custom-layer-" + i);
if (layerIDescr.data === layer) {
// We found the value to remove - mark with a tombstone
layerIDescr.setData("-");
return;
}
layerIDescr.setData(favs[i]);
}
count.setData("" + favs.length)
}
static AddFavouriteLayer(layer: string) {
State.state.GetFilteredLayerFor(layer)?.isDisplayed?.setData(true);
const favs = State.state.favourteLayers.data;
const ind = favs.indexOf(layer);
if (ind >= 0) {
@ -39,7 +33,6 @@ export class CustomLayersState {
}
console.log("Adding fav layer", layer);
favs.push(layer);
State.state.favourteLayers.ping();
const osmConnection = State.state.osmConnection;
@ -51,7 +44,7 @@ export class CustomLayersState {
for (let i = 0; i < lastId; i++) {
const layerIDescr = osmConnection.GetPreference("mapcomplete-custom-layer-" + i);
if (layerIDescr.data === undefined || layerIDescr.data === "-") {
if (layerIDescr.data === undefined || layerIDescr.data === "") {
// An earlier item was removed -> overwrite it
layerIDescr.setData(layer);
count.ping();
@ -65,12 +58,13 @@ export class CustomLayersState {
count.setData((lastId + 1) + "");
}
static InitFavouriteLayer() {
const osmConnection = State.state.osmConnection;
static InitFavouriteLayers(state: State) {
const osmConnection = state.osmConnection;
const count = osmConnection.GetPreference("mapcomplete-custom-layer-count");
const favs = State.state.favourteLayers.data;
const favs = state.favourteLayers.data;
let changed = false;
count.addCallback((countStr) => {
console.log("UPdating favourites")
if (countStr === undefined) {
return;
}
@ -80,13 +74,13 @@ export class CustomLayersState {
}
for (let i = 0; i < countI; i++) {
const layerId = osmConnection.GetPreference("mapcomplete-custom-layer-" + i).data;
if (layerId !== undefined && layerId !== "-" && favs.indexOf(layerId) < 0) {
State.state.favourteLayers.data.push(layerId);
if (layerId !== undefined && layerId !== "" && favs.indexOf(layerId) < 0) {
state.favourteLayers.data.push(layerId);
changed = true;
}
}
if (changed) {
State.state.favourteLayers.ping();
state.favourteLayers.ping();
}
})
}

100
Logic/LayerUpdater.ts
View file

@ -7,9 +7,8 @@ import {Basemap} from "./Leaflet/Basemap";
import {State} from "../State";
export class LayerUpdater {
private _layers: FilteredLayer[];
private widenFactor: number;
public readonly sufficentlyZoomed: UIEventSource<boolean> = new UIEventSource<boolean>(false);
public readonly runningQuery: UIEventSource<boolean> = new UIEventSource<boolean>(false);
public readonly retries: UIEventSource<number> = new UIEventSource<number>(0);
/**
@ -17,8 +16,6 @@ export class LayerUpdater {
*/
private previousBounds: Bounds;
private _overpass: Overpass;
private _minzoom: number;
/**
* The most important layer should go first, as that one gets first pick for the questions
@ -26,28 +23,39 @@ export class LayerUpdater {
* @param minzoom
* @param layers
*/
constructor(minzoom: number,
widenFactor: number,
layers: FilteredLayer[]) {
this.widenFactor = widenFactor;
this._layers = layers;
this._minzoom = minzoom;
var filters: TagsFilter[] = [];
for (const layer of layers) {
filters.push(layer.filters);
}
this._overpass = new Overpass(new Or(filters));
constructor(state: State) {
const self = this;
State.state.locationControl.addCallback(function () {
self.update();
state.locationControl.addCallback(() => {
self.update(state)
});
self.update();
state.layoutToUse.addCallback(() => {
self.update(state)
});
self.update(state);
}
private GetFilter(state: State) {
var filters: TagsFilter[] = [];
state = state ?? State.state;
for (const layer of state.layoutToUse.data.layers) {
if (state.locationControl.data.zoom < layer.minzoom) {
return undefined;
}
filters.push(layer.overpassFilter);
}
if (filters.length === 0) {
return undefined;
}
return new Or(filters);
}
private handleData(geojson: any) {
const self = this;
self.retries.setData(0);
function renderLayers(layers: FilteredLayer[]) {
if (layers.length === 0) {
self.runningQuery.setData(false);
@ -65,69 +73,79 @@ export class LayerUpdater {
renderLayers(rest);
}, 50)
}
renderLayers(this._layers);
renderLayers(State.state.filteredLayers.data);
}
private handleFail(reason: any) {
private handleFail(state: State, reason: any) {
this.retries.data++;
this.ForceRefresh();
console.log(`QUERY FAILED (retrying in ${5 * this.retries.data} sec)`, reason);
this.previousBounds = undefined;
this.retries.data ++;
this.retries.ping();
const self = this;
window?.setTimeout(
function(){self.update()}, this.retries.data * 5000
function () {
self.update(state)
}, this.retries.data * 5000
)
}
private update(): void {
if (this.IsInBounds()) {
private update(state: State): void {
if (this.IsInBounds(state)) {
return;
}
console.log("Zoom level: ",State.state.bm.map.getZoom(), "Least needed zoom:", this._minzoom)
if (State.state.bm.map.getZoom() < this._minzoom || State.state.bm.Location.data.zoom < this._minzoom) {
const filter = this.GetFilter(state);
this.sufficentlyZoomed.setData(filter !== undefined);
if (filter === undefined) {
console.log("Zoom insufficient to run query")
return;
}
if (this.runningQuery.data) {
console.log("Still running a query, skip");
return;
}
const bounds = State.state.bm.map.getBounds();
const diff = this.widenFactor;
const bounds = state.bm.map.getBounds();
const diff = state.layoutToUse.data.widenFactor;
const n = bounds.getNorth() + diff;
const e = bounds.getEast() + diff;
const e = bounds.getEast() + diff;
const s = bounds.getSouth() - diff;
const w = bounds.getWest() - diff;
const w = bounds.getWest() - diff;
this.previousBounds = {north: n, east: e, south: s, west: w};
this.runningQuery.setData(true);
const self = this;
this._overpass.queryGeoJson(this.previousBounds,
const overpass = new Overpass(filter);
overpass.queryGeoJson(this.previousBounds,
function (data) {
self.handleData(data)
},
function (reason) {
self.handleFail(reason)
self.handleFail(state, reason)
}
);
}
private IsInBounds(): boolean {
private IsInBounds(state: State): boolean {
if (this.previousBounds === undefined) {
return false;
}
const b = State.state.bm.map.getBounds();
const b = state.bm.map.getBounds();
if (b.getSouth() < this.previousBounds.south) {
return false;
}
@ -145,5 +163,9 @@ export class LayerUpdater {
return true;
}
public ForceRefresh(){
this.previousBounds = undefined;
}
}

11
Logic/LocalStorageSource.ts
View file

@ -1,13 +1,17 @@
import {UIEventSource} from "../UI/UIEventSource";
import {UIElement} from "../UI/UIElement";
export class LocalStorageSource {
static Get(key: string, defaultValue: string = undefined): UIEventSource<string> {
//*
if (UIElement.runningFromConsole) {
// ignore when running from the console
return new UIEventSource<string>(defaultValue);
/*/
}
const saved = localStorage.getItem(key);
const source = new UIEventSource<string>(saved ?? defaultValue);
@ -16,6 +20,5 @@ export class LocalStorageSource {
console.log("Wriging ", key, data)
});
return source;
//*/
}
}

9
Logic/Osm/Changes.ts
View file

@ -303,12 +303,13 @@ export class Changes {
const millisTillChangesAreSaved = state.secondsTillChangesAreSaved;
const saveAfterXMillis = state.secondsTillChangesAreSaved.data * 1000;
const self= this;
this.pendingChangesES.addCallback(function () {
var c = this.pendingChangesES.data;
var c = self.pendingChangesES.data;
if (c > 10) {
millisTillChangesAreSaved.setData(0);
this.uploadAll(undefined);
self.uploadAll(undefined);
return;
}
@ -319,8 +320,8 @@ export class Changes {
});
millisTillChangesAreSaved.addCallback((time) => {
if (time <= 0 && this.pendingChangesES.data > 0) {
this.uploadAll(undefined);
if (time <= 0 && self.pendingChangesES.data > 0) {
self.uploadAll(undefined);
}
}
)

19
Logic/Osm/OsmConnection.ts
View file

@ -216,7 +216,6 @@ export class OsmConnection {
self.preferences.data[k] = v;
}
self.preferences.ping();
CustomLayersState.InitFavouriteLayer();
});
}
@ -234,6 +233,24 @@ export class OsmConnection {
this.preferences.data[k] = v;
this.preferences.ping();
if(v === ""){
this.auth.xhr({
method: 'DELETE',
path: '/api/0.6/user/preferences/' + k,
options: {header: {'Content-Type': 'text/plain'}},
}, function (error, result) {
if (error) {
console.log("Could not remove preference", error);
return;
}
console.log("Preference removed!", result == "" ? "OK" : result);
});
}
this.auth.xhr({
method: 'PUT',
path: '/api/0.6/user/preferences/' + k,