Various bug fixes, add layer selection and background selection as parameter to the URL (fix #86, fix #84)

This commit is contained in:
Pieter Vander Vennet 2020-08-08 02:16:42 +02:00
parent e35c85fc55
commit 97a69ff903
14 changed files with 111 additions and 25 deletions

View file

@ -178,7 +178,6 @@ export class Widths extends LayerDefinition {
this.elementsToShow = [ this.elementsToShow = [
new TagRenderingOptions({ new TagRenderingOptions({
question: "Mogen auto's hier parkeren?",
mappings: [ mappings: [
{ {
k: this._bothSideParking, k: this._bothSideParking,

View file

@ -40,6 +40,7 @@ export class Layout {
* This number influences this * This number influences this
*/ */
public widenFactor: number = 0.07; public widenFactor: number = 0.07;
public defaultBackground: string = "osm";
/** /**
* *

View file

@ -91,6 +91,8 @@ export class StreetWidth extends Layout{
this.enableUserBadge = false; this.enableUserBadge = false;
this.enableAdd = false; this.enableAdd = false;
this.hideFromOverview = true; this.hideFromOverview = true;
this.enableMoreQuests = false;
this.enableShareScreen = false;
} }
} }

View file

@ -5,13 +5,13 @@ import {TagRenderingOptions} from "../../TagRenderingOptions";
export default class BikeStationStand extends TagRenderingOptions { export default class BikeStationStand extends TagRenderingOptions {
constructor() { constructor() {
const to = Translations const to = Translations.t.cyclofix.station.stand;
super({ super({
priority: 10, priority: 10,
question: "Does this bike station have a hook to suspend your bike with or a stand to elevate it?", question: to.question,
mappings: [ mappings: [
{k: new Tag("service:bicycle:stand", "yes"), txt: "There is a hook or stand"}, {k: new Tag("service:bicycle:stand", "yes"), txt: to.yes},
{k: new Tag("service:bicycle:stand", "no"), txt: "There is no hook or stand"}, {k: new Tag("service:bicycle:stand", "no"), txt: to.no},
] ]
}); });
} }

View file

@ -26,6 +26,7 @@ import {CustomLayout} from "./Logic/CustomLayers";
import {Preset} from "./Customizations/LayerDefinition"; import {Preset} from "./Customizations/LayerDefinition";
import {VariableUiElement} from "./UI/Base/VariableUIElement"; import {VariableUiElement} from "./UI/Base/VariableUIElement";
import {LayerUpdater} from "./Logic/LayerUpdater"; import {LayerUpdater} from "./Logic/LayerUpdater";
import {QueryParameters} from "./Logic/QueryParameters";
export class InitUiElements { export class InitUiElements {
@ -136,7 +137,7 @@ export class InitUiElements {
} }
static InitBaseMap(){ static InitBaseMap(){
State.state.bm = new Basemap("leafletDiv", State.state.locationControl, new VariableUiElement( const bm = new Basemap("leafletDiv", State.state.locationControl, new VariableUiElement(
State.state.locationControl.map((location) => { State.state.locationControl.map((location) => {
const mapComplete = `<a href='https://github.com/pietervdvn/MapComplete' target='_blank'>Mapcomple ${State.vNumber}</a> <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'><img src='./assets/bug.svg' alt='Report bug' class='small-userbadge-icon'></a>`; const mapComplete = `<a href='https://github.com/pietervdvn/MapComplete' target='_blank'>Mapcomple ${State.vNumber}</a> <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'><img src='./assets/bug.svg' alt='Report bug' class='small-userbadge-icon'></a>`;
let editHere = ""; let editHere = "";
@ -150,7 +151,23 @@ export class InitUiElements {
}) })
)); ));
State.state.bm = bm;
State.state.layerUpdater = new LayerUpdater(State.state); State.state.layerUpdater = new LayerUpdater(State.state);
const queryParam = QueryParameters.GetQueryParameter("background", State.state.layoutToUse.data.defaultBackground);
const queryParamMapped: UIEventSource<{ id: string, name: string, layer: any }> =
queryParam.map<{ id: string, name: string, layer: any }>((id) => {
for (const layer of BaseLayers.baseLayers) {
if (layer.id === id) {
return layer;
}
}
return undefined;
}, [], (layerInfo) => {
return layerInfo.id
});
queryParamMapped.syncWith(bm.CurrentLayer);
} }
@ -194,7 +211,12 @@ export class InitUiElements {
const flayer: FilteredLayer = FilteredLayer.fromDefinition(layer, generateInfo); const flayer: FilteredLayer = FilteredLayer.fromDefinition(layer, generateInfo);
flayers.push(flayer); flayers.push(flayer);
flayer.isDisplayed.setData(true)
QueryParameters.GetQueryParameter("layer-" + layer.id, "true")
.map<boolean>((str) => str !== "false", [], (b) => b.toString())
.syncWith(
flayer.isDisplayed
)
} }
State.state.filteredLayers.setData(flayers); State.state.filteredLayers.setData(flayers);

View file

@ -3,6 +3,7 @@ import {UIEventSource} from "../../UI/UIEventSource";
import {UIElement} from "../../UI/UIElement"; import {UIElement} from "../../UI/UIElement";
import {State} from "../../State"; import {State} from "../../State";
import {Utils} from "../../Utils"; import {Utils} from "../../Utils";
import {Basemap} from "./Basemap";
export class GeoLocationHandler extends UIElement { export class GeoLocationHandler extends UIElement {
@ -38,7 +39,8 @@ export class GeoLocationHandler extends UIElement {
} }
const map = State.state.bm.map; const bm : Basemap = State.state.bm;
const map = bm.map;
map.on('accuratepositionprogress', onAccuratePositionProgress); map.on('accuratepositionprogress', onAccuratePositionProgress);
map.on('accuratepositionfound', onAccuratePositionFound); map.on('accuratepositionfound', onAccuratePositionFound);
map.on('accuratepositionerror', onAccuratePositionError); map.on('accuratepositionerror', onAccuratePositionError);
@ -53,7 +55,7 @@ export class GeoLocationHandler extends UIElement {
State.state.currentGPSLocation.addCallback((location) => { State.state.currentGPSLocation.addCallback((location) => {
const newMarker = L.marker(location.latlng, {icon: icon}); const newMarker = L.marker(location.latlng, {icon: icon});
newMarker.addTo(map.map); newMarker.addTo(map);
if (self._marker !== undefined) { if (self._marker !== undefined) {
map.removeLayer(self._marker); map.removeLayer(self._marker);

View file

@ -24,7 +24,7 @@ export class State {
// The singleton of the global state // The singleton of the global state
public static state: State; public static state: State;
public static vNumber = "0.0.2"; public static vNumber = "0.0.3";
public static runningFromConsole: boolean = false; public static runningFromConsole: boolean = false;

View file

@ -10,6 +10,9 @@ import {VerticalCombine} from "./Base/VerticalCombine";
import {QueryParameters} from "../Logic/QueryParameters"; import {QueryParameters} from "../Logic/QueryParameters";
import {Img} from "./Img"; import {Img} from "./Img";
import {State} from "../State"; import {State} from "../State";
import {Basemap} from "../Logic/Leaflet/Basemap";
import {FilteredLayer} from "../Logic/FilteredLayer";
import {Utils} from "../Utils";
export class ShareScreen extends UIElement { export class ShareScreen extends UIElement {
@ -36,7 +39,7 @@ export class ShareScreen extends UIElement {
const currentLocation = State.state.locationControl; const currentLocation = State.state.locationControl;
const layout = State.state.layoutToUse.data; const layout = State.state.layoutToUse.data;
optionParts.push(includeLocation.isEnabled.map((includeL) => { optionParts.push(includeLocation.isEnabled.map((includeL) => {
if (includeL) { if (includeL) {
return `z=${currentLocation.data.zoom}&lat=${currentLocation.data.lat}&lon=${currentLocation.data.lon}` return `z=${currentLocation.data.zoom}&lat=${currentLocation.data.lat}&lon=${currentLocation.data.lon}`
@ -46,6 +49,50 @@ export class ShareScreen extends UIElement {
}, [currentLocation])); }, [currentLocation]));
const currentLayer: UIEventSource<{ id: string, name: string, layer: any }> = (State.state.bm as Basemap).CurrentLayer;
const currentBackground = new VariableUiElement(
currentLayer.map(
(layer) => `Include the current background choice <b>${layer.name}</b>`
)
);
const includeCurrentBackground = new CheckBox(
new Combine([Img.checkmark, currentBackground]),
new Combine([Img.no_checkmark, currentBackground]),
true
)
optionCheckboxes.push(includeCurrentBackground);
optionParts.push(includeCurrentBackground.isEnabled.map((includeBG) => {
if (includeBG) {
return "background=" + currentLayer.data.id
} else {
return null
}
}, [currentLayer]));
const includeLayerChoices = new CheckBox(
new Combine([Img.checkmark, "Include the current layer choices"]),
new Combine([Img.no_checkmark, "Include the current layer choices"]),
true
)
optionCheckboxes.push(includeLayerChoices);
function fLayerToParam(flayer: FilteredLayer){
if(flayer.isDisplayed.data){
return null; // Being displayed is the default
}
return "layer-"+flayer.layerDef.id+"="+flayer.isDisplayed.data
}
optionParts.push(includeLayerChoices.isEnabled.map((includeLayerSelection) => {
if (includeLayerSelection) {
return Utils.NoNull(State.state.filteredLayers.data.map(fLayerToParam)).join("&")
} else {
return null
}
}, State.state.filteredLayers.data.map((flayer) => flayer.isDisplayed)));
const switches = [{urlName: "fs-userbadge", human: "Enable the login-button"}, const switches = [{urlName: "fs-userbadge", human: "Enable the login-button"},
{urlName: "fs-search", human: "Enable search bar"}, {urlName: "fs-search", human: "Enable search bar"},
{urlName: "fs-welcome-message", human: "Enable the welcome message"}, {urlName: "fs-welcome-message", human: "Enable the welcome message"},
@ -79,13 +126,7 @@ export class ShareScreen extends UIElement {
let literalText = "https://pietervdvn.github.io/MapComplete/" + layout.name + ".html" let literalText = "https://pietervdvn.github.io/MapComplete/" + layout.name + ".html"
const parts = []; const parts = Utils.NoNull(optionParts.map((eventSource) => eventSource.data));
for (const part of optionParts) {
if (part.data === null) {
continue;
}
parts.push(part.data);
}
if (parts.length === 0) { if (parts.length === 0) {
return literalText; return literalText;

View file

@ -45,9 +45,14 @@ export class UIEventSource<T>{
} }
public map<J>(f: ((T) => J), public map<J>(f: ((T) => J),
extraSources: UIEventSource<any>[] = []): UIEventSource<J> { extraSources: UIEventSource<any>[] = [],
g: ((J) => T) = undefined ): UIEventSource<J> {
const self = this; const self = this;
const newSource = new UIEventSource<J>(
f(this.data)
);
const update = function () { const update = function () {
newSource.setData(f(self.data)); newSource.setData(f(self.data));
newSource.ping(); newSource.ping();
@ -57,9 +62,12 @@ export class UIEventSource<T>{
for (const extraSource of extraSources) { for (const extraSource of extraSources) {
extraSource.addCallback(update); extraSource.addCallback(update);
} }
const newSource = new UIEventSource<J>(
f(this.data) if(g !== undefined) {
); newSource.addCallback((latest) => {
self.setData((g(latest)));
})
}
return newSource; return newSource;

View file

@ -25,7 +25,7 @@ export class Utils {
} }
static DoEvery(millis: number, f: (() => void)) { static DoEvery(millis: number, f: (() => void)) {
if(State.runningFromConsole){ if (State.runningFromConsole) {
return; return;
} }
window.setTimeout( window.setTimeout(
@ -36,6 +36,17 @@ export class Utils {
, millis) , millis)
} }
public static NoNull<T>(array: T[]): T[] {
const ls: T[] = [];
for (const t of array) {
if (t === undefined || t === null) {
continue;
}
ls.push(t);
}
return ls;
}
public static CreateLanguagePicker(label: string | UIElement = "") { public static CreateLanguagePicker(label: string | UIElement = "") {
return new DropDown(label, State.state.layoutToUse.data.supportedLanguages.map(lang => { return new DropDown(label, State.state.layoutToUse.data.supportedLanguages.map(lang => {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.7 KiB

View file

@ -40,7 +40,7 @@ if (location.hostname === "localhost" || location.hostname === "127.0.0.1") {
// ----------------- SELECT THE RIGHT QUESTSET ----------------- // ----------------- SELECT THE RIGHT QUESTSET -----------------
let defaultLayout = "buurtnatuur" let defaultLayout = "bookcases"
const path = window.location.pathname.split("/").slice(-1)[0]; const path = window.location.pathname.split("/").slice(-1)[0];
if (path !== "index.html") { if (path !== "index.html") {