midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
InitUiElements.ts
View file

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

3
Logic/LayerUpdater.ts
View file

@ -30,6 +30,9 @@ export class LayerUpdater {
const self = this;
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));
return location.zoom >= minzoom;
}, [state.layoutToUse]

1
Logic/Osm/Overpass.ts
View file

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

38
State.ts
View file

@ -80,12 +80,9 @@ export class State {
*/
public readonly selectedElement = new UIEventSource<{ feature: any }>(undefined);
public readonly zoom = QueryParameters.GetQueryParameter("z", undefined)
.syncWith(LocalStorageSource.Get("zoom"));
public readonly lat = QueryParameters.GetQueryParameter("lat", undefined)
.syncWith(LocalStorageSource.Get("lat"));
public readonly lon = QueryParameters.GetQueryParameter("lon", undefined)
.syncWith(LocalStorageSource.Get("lon"));
public readonly zoom: UIEventSource<number>;
public readonly lat: UIEventSource<number>;
public readonly lon: UIEventSource<number>;
public readonly featureSwitchUserbadge: UIEventSource<boolean>;
@ -123,15 +120,36 @@ export class State {
constructor(layoutToUse: Layout) {
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 }>({
zoom: Utils.asFloat(this.zoom.data),
lat: Utils.asFloat(this.lat.data),
lon: Utils.asFloat(this.lon.data),
}).addCallback((latlonz) => {
this.zoom.setData(latlonz.zoom?.toString());
this.lat.setData(latlonz.lat?.toString()?.substr(0, 6));
this.lon.setData(latlonz.lon?.toString()?.substr(0, 6));
this.zoom.setData(latlonz.zoom);
this.lat.setData(latlonz.lat);
this.lon.setData(latlonz.lon);
});
this.layoutToUse.addCallback(layoutToUse => {

4
UI/FullScreenMessageBoxHandler.ts
View file

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

29
UI/LayerSelection.ts
View file

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

13
UI/SimpleAddUI.ts
View file

@ -47,6 +47,9 @@ export class SimpleAddUI extends UIElement {
const self = this;
for (const layer of State.state.filteredLayers.data) {
this.ListenTo(layer.isDisplayed);
for (const preset of layer.layerDef.presets) {
let icon: string = "./assets/bug.svg";
@ -136,6 +139,16 @@ export class SimpleAddUI extends UIElement {
const userDetails = State.state.osmConnection.userDetails;
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 = "";
const csCount = State.state.osmConnection.userDetails.data.csCount;

7
UI/TagRendering.ts
View file

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

5
UI/i18n/Translations.ts
View file

@ -384,6 +384,11 @@ export default class Translations {
"en": "Open the layer control box",
"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({
en: "Choose a language",

2
assets/layers/cycling_themed_object/cycling_themed_objects.json
View file

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

2
assets/themes/bookcases/Bookcases.json
View file

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

45
index.css
View file

@ -65,7 +65,8 @@ body {
}
form {
display: inline;
display: inline-block;
max-width: 90vw;
}
.invalid {
@ -187,8 +188,10 @@ body {
}
#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 {
max-height: 50vh;
@ -197,21 +200,20 @@ body {
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 */
#topleft-tools {
padding: 0.1em 0.1em 0.1em unset;
}
)) {
.hidden-on-mobile {
display: none !important;
}
/* Landscape and portrait */
#topleft-tools {
padding: 0.1em 0.1em 0.1em unset;
}
#userbadge-and-search {
position: relative;
display: inline-block;
#userbadge-and-search {
position: relative;
display: inline-block;
width: auto;
max-width: 50vw;
margin: 0;
@ -237,9 +239,12 @@ body {
width: auto;
max-width: 100vw;
}
.hidden-on-mobile {
display: none !important;
}
#topleft-tools {
padding: 0.2em !important;
padding-top: 0.3em !important;
@ -363,6 +368,11 @@ body {
#hidden-on-mobile {
display: block;
}
.hidden-on-mobile {
display: none !important;
}
#messagesbox-wrapper {
display: none;
@ -435,6 +445,11 @@ body {
display: unset;
}
.hidden-on-mobile {
display: none !important;
}
#messagesboxmobile {
position: absolute;
display: block;