Merge branches, fix bugs with initial zoom and location, fix bug which starts loading right away, fix bug when overpass times out

This commit is contained in:
Pieter Vander Vennet 2020-09-18 00:31:54 +02:00
commit 638691d6c3
12 changed files with 105 additions and 50 deletions

View file

@ -355,11 +355,12 @@ export class InitUiElements {
let baseLayerOptions = BaseLayers.baseLayers.map((layer) => { let baseLayerOptions = BaseLayers.baseLayers.map((layer) => {
return {value: layer, shown: layer.name} return {value: layer, shown: layer.name}
}); });
let layerControlPanel = new Combine([new DropDown(Translations.t.general.backgroundMap, baseLayerOptions, State.state.bm.CurrentLayer)]); let layerControlPanel = new Combine(
[new DropDown(Translations.t.general.backgroundMap, baseLayerOptions, State.state.bm.CurrentLayer)]);
layerControlPanel.SetStyle("margin:1em"); layerControlPanel.SetStyle("margin:1em");
if (State.state.filteredLayers.data.length > 1) { if (State.state.filteredLayers.data.length > 1) {
const layerSelection = new LayerSelection(); const layerSelection = new LayerSelection();
layerControlPanel = new Combine([layerSelection, layerControlPanel]); layerControlPanel = new Combine([layerSelection, "<br/>",layerControlPanel]);
} }
return layerControlPanel; return layerControlPanel;
} }
@ -375,6 +376,7 @@ export class InitUiElements {
new Combine([ new Combine([
closeButton, closeButton,
layerControlPanel]).SetStyle("display:flex;flex-direction:row;") layerControlPanel]).SetStyle("display:flex;flex-direction:row;")
.SetClass("hidden-on-mobile")
, ,
new Combine([Img.closedFilterButton]) new Combine([Img.closedFilterButton])
.SetStyle("display:block;border-radius:50%;background:white;padding:1em;"), .SetStyle("display:block;border-radius:50%;background:white;padding:1em;"),

View file

@ -30,6 +30,9 @@ export class LayerUpdater {
const self = this; const self = this;
this.sufficentlyZoomed = State.state.locationControl.map(location => { this.sufficentlyZoomed = State.state.locationControl.map(location => {
if(location?.zoom === undefined){
return false;
}
let minzoom = Math.min(...state.layoutToUse.data.layers.map(layer => (layer as LayerDefinition).minzoom ?? 18)); let minzoom = Math.min(...state.layoutToUse.data.layers.map(layer => (layer as LayerDefinition).minzoom ?? 18));
return location.zoom >= minzoom; return location.zoom >= minzoom;
}, [state.layoutToUse] }, [state.layoutToUse]

View file

@ -44,6 +44,7 @@ export class Overpass {
if(json.elements === [] && json.remarks.indexOf("runtime error") > 0){ if(json.elements === [] && json.remarks.indexOf("runtime error") > 0){
console.log("Timeout or other runtime error"); console.log("Timeout or other runtime error");
onFail("Runtime error (timeout)")
return; return;
} }
// @ts-ignore // @ts-ignore

View file

@ -80,12 +80,9 @@ export class State {
*/ */
public readonly selectedElement = new UIEventSource<{ feature: any }>(undefined); public readonly selectedElement = new UIEventSource<{ feature: any }>(undefined);
public readonly zoom = QueryParameters.GetQueryParameter("z", undefined) public readonly zoom: UIEventSource<number>;
.syncWith(LocalStorageSource.Get("zoom")); public readonly lat: UIEventSource<number>;
public readonly lat = QueryParameters.GetQueryParameter("lat", undefined) public readonly lon: UIEventSource<number>;
.syncWith(LocalStorageSource.Get("lat"));
public readonly lon = QueryParameters.GetQueryParameter("lon", undefined)
.syncWith(LocalStorageSource.Get("lon"));
public readonly featureSwitchUserbadge: UIEventSource<boolean>; public readonly featureSwitchUserbadge: UIEventSource<boolean>;
@ -123,15 +120,36 @@ export class State {
constructor(layoutToUse: Layout) { constructor(layoutToUse: Layout) {
const self = this; const self = this;
this.layoutToUse.setData(layoutToUse) this.layoutToUse.setData(layoutToUse);
function asFloat(source: UIEventSource<string>): UIEventSource<number> {
return source.map(str => {
let parsed = parseFloat(str);
return isNaN(parsed) ? undefined : parsed;
}, [], fl => {
if (fl === undefined || isNaN(fl)) {
return undefined;
}
return ("" + fl).substr(0, 6);
})
}
this.zoom = asFloat(QueryParameters.GetQueryParameter("z", "" + layoutToUse.startzoom)
.syncWith(LocalStorageSource.Get("zoom")));
this.lat = asFloat(QueryParameters.GetQueryParameter("lat", "" + layoutToUse.startLat)
.syncWith(LocalStorageSource.Get("lat")));
this.lon = asFloat(QueryParameters.GetQueryParameter("lon", "" + layoutToUse.startLon)
.syncWith(LocalStorageSource.Get("lon")));
this.locationControl = new UIEventSource<{ lat: number, lon: number, zoom: number }>({ this.locationControl = new UIEventSource<{ lat: number, lon: number, zoom: number }>({
zoom: Utils.asFloat(this.zoom.data), zoom: Utils.asFloat(this.zoom.data),
lat: Utils.asFloat(this.lat.data), lat: Utils.asFloat(this.lat.data),
lon: Utils.asFloat(this.lon.data), lon: Utils.asFloat(this.lon.data),
}).addCallback((latlonz) => { }).addCallback((latlonz) => {
this.zoom.setData(latlonz.zoom?.toString()); this.zoom.setData(latlonz.zoom);
this.lat.setData(latlonz.lat?.toString()?.substr(0, 6)); this.lat.setData(latlonz.lat);
this.lon.setData(latlonz.lon?.toString()?.substr(0, 6)); this.lon.setData(latlonz.lon);
}); });
this.layoutToUse.addCallback(layoutToUse => { this.layoutToUse.addCallback(layoutToUse => {

View file

@ -23,11 +23,13 @@ export class FullScreenMessageBox extends UIElement {
this._uielement = new Combine([State.state.fullScreenMessage.data]).SetStyle( this._uielement = new Combine([State.state.fullScreenMessage.data]).SetStyle(
"display:block;"+ "display:block;"+
"padding: 1em;"+ "padding: 1em;"+
"padding-bottom:5em;"+ "padding-bottom:6em;"+
`margin-bottom:${FullScreenMessageBox._toTheMap_height};`+ `margin-bottom:${FullScreenMessageBox._toTheMap_height};`+
"box-sizing:border-box;"+ "box-sizing:border-box;"+
`height:calc(100vh - ${FullScreenMessageBox._toTheMap_height});`+ `height:calc(100vh - ${FullScreenMessageBox._toTheMap_height});`+
"overflow-y: auto;" + "overflow-y: auto;" +
"max-width:100vw;" +
"overflow-x:hidden;" +
"background:white;" "background:white;"
); );

View file

@ -16,37 +16,34 @@ export class LayerSelection extends UIElement {
this._checkboxes = []; this._checkboxes = [];
for (const layer of State.state.filteredLayers.data) { for (const layer of State.state.filteredLayers.data) {
const checkbox = Img.checkmark; let iconUrl = "./asets/checkbox.svg";
let icon : UIElement; let iconUrlBlank = "";
if (layer.layerDef.icon && layer.layerDef.icon !== "") { if (layer.layerDef.icon && layer.layerDef.icon !== "") {
icon = new FixedUiElement(`<img style="height:2em;max-width: 2em;" src="${layer.layerDef.icon}">`); iconUrl = layer.layerDef.icon as string;
}else{ iconUrlBlank = layer.layerDef.icon as string;
icon = new FixedUiElement(Img.checkmark);
} }
const icon = new FixedUiElement(`<img style="height:2em;max-width: 2em;" src="${iconUrl}">`);
let iconUnselected : UIElement; let iconUnselected: UIElement;
if (layer.layerDef.icon && layer.layerDef.icon !== "") { iconUnselected = new FixedUiElement(`<img style="height:2em;max-width: 2em; opacity:0.2;" src="${iconUrl}">`);
iconUnselected = new FixedUiElement(`<img style="height:2em;max-width: 2em;" src="${layer.layerDef.icon}">`);
}else{
iconUnselected = new FixedUiElement("");
}
iconUnselected.SetStyle("opacity:0.2");
const name = Translations.WT(layer.layerDef.name).Clone() const name = Translations.WT(layer.layerDef.name).Clone()
.SetStyle("font-size:large;margin-left: 0.5em;"); .SetStyle("font-size:large;margin-left: 0.5em;");
const zoomStatus = new VariableUiElement(State.state.locationControl.map(location => { const zoomStatus = new VariableUiElement(State.state.locationControl.map(location => {
if(location.zoom < layer.layerDef.minzoom){ if (location.zoom < layer.layerDef.minzoom) {
return Translations.t.general.zoomInToSeeThisLayer return Translations.t.general.zoomInToSeeThisLayer
.SetClass("alert") .SetClass("alert")
.SetStyle("display: block ruby;width:min-content;")
.Render(); .Render();
} }
return "" return ""
})) }))
const style = "display:flex;align-items:center;"
this._checkboxes.push(new CheckBox( this._checkboxes.push(new CheckBox(
new Combine([icon, name, zoomStatus]), new Combine([icon, name, zoomStatus]).SetStyle(style),
new Combine([iconUnselected, "<del>",name,"</del>", zoomStatus]), new Combine([iconUnselected, "<del>", name, "</del>", zoomStatus]).SetStyle(style),
layer.isDisplayed) layer.isDisplayed)
.SetStyle("margin:0.3em;") .SetStyle("margin:0.3em;")
); );

View file

@ -47,6 +47,9 @@ export class SimpleAddUI extends UIElement {
const self = this; const self = this;
for (const layer of State.state.filteredLayers.data) { for (const layer of State.state.filteredLayers.data) {
this.ListenTo(layer.isDisplayed);
for (const preset of layer.layerDef.presets) { for (const preset of layer.layerDef.presets) {
let icon: string = "./assets/bug.svg"; let icon: string = "./assets/bug.svg";
@ -137,6 +140,16 @@ export class SimpleAddUI extends UIElement {
if (this._confirmPreset.data !== undefined) { if (this._confirmPreset.data !== undefined) {
if(!this._confirmPreset.data.layerToAddTo.isDisplayed.data){
return new Combine([
Translations.t.general.add.layerNotEnabled.Subs({layer: this._confirmPreset.data.layerToAddTo.layerDef.name})
.SetClass("alert"),
this.openLayerControl,
this.cancelButton
]).Render();
}
let tagInfo = ""; let tagInfo = "";
const csCount = State.state.osmConnection.userDetails.data.csCount; const csCount = State.state.osmConnection.userDetails.data.csCount;
if (csCount > State.userJourney.tagsVisibleAt) { if (csCount > State.userJourney.tagsVisibleAt) {

View file

@ -159,7 +159,8 @@ export class TagRendering extends UIElement implements TagDependantUIElement {
this._saveButton = new SaveButton(this._questionElement.GetValue()) this._saveButton = new SaveButton(this._questionElement.GetValue())
.onClick(save); .onClick(save);
this._friendlyLogin = Translations.t.general.loginToStart this._friendlyLogin = Translations.t.general.loginToStart.Clone()
.SetClass("login-button-friendly")
.onClick(() => State.state.osmConnection.AttemptLogin()) .onClick(() => State.state.osmConnection.AttemptLogin())
this._editButton = new FixedUiElement(""); this._editButton = new FixedUiElement("");
@ -463,12 +464,10 @@ export class TagRendering extends UIElement implements TagDependantUIElement {
this.ApplyTemplate(this._question).SetClass('question-text'); this.ApplyTemplate(this._question).SetClass('question-text');
return "<div class='question'>" + return "<div class='question'>" +
new Combine([ new Combine([
question.Render(), question,
"<br/>", "<br/>",
this._questionElement, this._questionElement,
"<span class='login-button-friendly'>",
this._friendlyLogin, this._friendlyLogin,
"</span>",
]).Render() + "</div>"; ]).Render() + "</div>";
} }

View file

@ -384,6 +384,11 @@ export default class Translations {
"en": "Open the layer control box", "en": "Open the layer control box",
"nl": "Open de laag-instellingen" "nl": "Open de laag-instellingen"
}) })
,
layerNotEnabled: new T({
"en": "The layer {layer} is not enabled. Enable this layer to add a point",
"nl": "De laag {layer} is gedeactiveerd. Activeer deze om een punt toe te voegn"
})
}, },
pickLanguage: new T({ pickLanguage: new T({
en: "Choose a language", en: "Choose a language",

View file

@ -5,7 +5,7 @@
"nl": "Fietsgerelateerd object", "nl": "Fietsgerelateerd object",
"fr": "Objet cycliste" "fr": "Objet cycliste"
}, },
"minzoom": 14, "minzoom": 13,
"overpassTags": "theme~cycling|bicycle", "overpassTags": "theme~cycling|bicycle",
"title": { "title": {
"render": { "render": {

View file

@ -18,7 +18,7 @@
"socialImage": null, "socialImage": null,
"startLat": 0, "startLat": 0,
"startLon": 0, "startLon": 0,
"startZoom": 10, "startZoom": 1,
"widenFactor": 0.05, "widenFactor": 0.05,
"roamingRenderings": [], "roamingRenderings": [],
"layers": [ "layers": [

View file

@ -65,7 +65,8 @@ body {
} }
form { form {
display: inline; display: inline-block;
max-width: 90vw;
} }
.invalid { .invalid {
@ -187,9 +188,11 @@ body {
} }
#hidden-on-mobile { #hidden-on-mobile {
display: none; /*Only shown on small screens*/ display: none; /*Only shown on small screens - this is probably named wrongly*/
} }
.add-popup-all-buttons { .add-popup-all-buttons {
max-height: 50vh; max-height: 50vh;
display: inline-block; display: inline-block;
@ -197,17 +200,16 @@ body {
width: 100%; width: 100%;
} }
@media only screen and (max-height: 600px) and (not (max-width: @media only screen and (max-height: 600px) and (not (max-width:700px)) {
700px
)) {
/* Landscape and portrait */ /* Landscape and portrait */
#topleft-tools { #topleft-tools {
padding: 0.1em 0.1em 0.1em unset; padding: 0.1em 0.1em 0.1em unset;
} }
.hidden-on-mobile {
display: none !important;
}
#userbadge-and-search { #userbadge-and-search {
position: relative; position: relative;
@ -239,6 +241,9 @@ body {
} }
.hidden-on-mobile {
display: none !important;
}
#topleft-tools { #topleft-tools {
padding: 0.2em !important; padding: 0.2em !important;
@ -364,6 +369,11 @@ body {
display: block; display: block;
} }
.hidden-on-mobile {
display: none !important;
}
#messagesbox-wrapper { #messagesbox-wrapper {
display: none; display: none;
} }
@ -435,6 +445,11 @@ body {
display: unset; display: unset;
} }
.hidden-on-mobile {
display: none !important;
}
#messagesboxmobile { #messagesboxmobile {
position: absolute; position: absolute;
display: block; display: block;