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

More refactoring

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-01-02 19:09:49 +01:00
parent 849c61c8a1
commit e4a2fd1daf
15 changed files with 75 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

17
InitUiElements.ts
View file

@ -39,6 +39,7 @@ import * as L from "leaflet";
import {Img} from "./UI/Img";
import {UserDetails} from "./Logic/Osm/OsmConnection";
import Attribution from "./UI/Misc/Attribution";
import Constants from "./Models/Constants";
export class InitUiElements {
@ -315,10 +316,10 @@ export class InitUiElements {
tabs.push({
header: Svg.help ,
content: new VariableUiElement(State.state.osmConnection.userDetails.map(userdetails => {
if (userdetails.csCount < State.userJourney.mapCompleteHelpUnlock) {
if (userdetails.csCount < Constants.userJourney.mapCompleteHelpUnlock) {
return ""
}
return new Combine([Translations.t.general.aboutMapcomplete, "<br/>Version "+State.vNumber]).Render();
return new Combine([Translations.t.general.aboutMapcomplete, "<br/>Version "+Constants.vNumber]).Render();
}, [Locale.language]))
}
);
@ -435,26 +436,30 @@ export class InitUiElements {
});
}
static InitBaseMap() {
const bm = new Basemap("leafletDiv", State.state.locationControl, new Attribution(State.state.locationControl, State.state.osmConnection.userDetails, State.state.layoutToUse, State.state.bm));
const bm = new Basemap("leafletDiv",
State.state.locationControl,
State.state.backgroundLayer,
new Attribution(State.state.locationControl, State.state.osmConnection.userDetails, State.state.layoutToUse, State.state.bm)
);
State.state.bm = bm;
bm.map.on("popupclose", () => {
State.state.selectedElement.setData(undefined)
})
State.state.layerUpdater = new UpdateFromOverpass(State.state);
State.state.availableBackgroundLayers = new AvailableBaseLayers(State.state.locationControl, State.state.bm).availableEditorLayers;
State.state.availableBackgroundLayers = new AvailableBaseLayers(State.state.locationControl, State.state.backgroundLayer).availableEditorLayers;
const queryParam = QueryParameters.GetQueryParameter("background", State.state.layoutToUse.data.defaultBackgroundId, "The id of the background layer to start with");
queryParam.addCallbackAndRun((selectedId: string) => {
const available = State.state.availableBackgroundLayers.data;
for (const layer of available) {
if (layer.id === selectedId) {
State.state.bm.CurrentLayer.setData(layer);
State.state.backgroundLayer.setData(layer);
}
}
})
State.state.bm.CurrentLayer.addCallbackAndRun(currentLayer => {
State.state.backgroundLayer.addCallbackAndRun(currentLayer => {
queryParam.setData(currentLayer.id);
});

5
Logic/Actors/AvailableBaseLayers.ts
View file

@ -33,7 +33,7 @@ export default class AvailableBaseLayers {
public availableEditorLayers: UIEventSource<BaseLayer[]>;
constructor(location: UIEventSource<{ lat: number, lon: number, zoom: number }>,
bm: Basemap) {
currentBackgroundLayer: UIEventSource<BaseLayer>) {
const self = this;
this.availableEditorLayers =
location.map(
@ -59,8 +59,7 @@ export default class AvailableBaseLayers {
// Change the baselayer back to OSM if we go out of the current range of the layer
this.availableEditorLayers.addCallbackAndRun(availableLayers => {
const layerControl = bm.CurrentLayer;
const currentLayer = layerControl.data.id;
const currentLayer = currentBackgroundLayer.data.id;
for (const availableLayer of availableLayers) {
if (availableLayer.id === currentLayer) {

22
Logic/Leaflet/Basemap.ts
View file

@ -12,16 +12,16 @@ export class Basemap {
public readonly map: Map;
public readonly LastClickLocation: UIEventSource<{ lat: number, lon: number }> = new UIEventSource<{ lat: number, lon: number }>(undefined)
public readonly CurrentLayer: UIEventSource<BaseLayer> = new UIEventSource(AvailableBaseLayers.osmCarto);
constructor(leafletElementId: string,
location: UIEventSource<Loc>,
currentLayer: UIEventSource<BaseLayer>,
extraAttribution: UIElement) {
this.map = L.map(leafletElementId, {
center: [location.data.lat ?? 0, location.data.lon ?? 0],
zoom: location.data.zoom ?? 2,
layers: [ AvailableBaseLayers.osmCarto.layer],
layers: [AvailableBaseLayers.osmCarto.layer],
});
L.control.scale(
@ -30,11 +30,12 @@ export class Basemap {
}
).addTo(this.map)
// Users are not allowed to zoom to the 'copies' on the left and the right, stuff goes wrong then
// We give a bit of leeway for people on the edges
// Also see: https://www.reddit.com/r/openstreetmap/comments/ih4zzc/mapcomplete_a_new_easytouse_editor/g31ubyv/
this.map.setMaxBounds(
[[-100,-200],[100,200]]
[[-100, -200], [100, 200]]
);
this.map.attributionControl.setPrefix(
extraAttribution.Render() + " | <a href='https://osm.org'>OpenStreetMap</a>");
@ -42,6 +43,19 @@ export class Basemap {
this.map.zoomControl.setPosition("bottomright");
const self = this;
let previousLayer = currentLayer.data;
currentLayer.addCallbackAndRun(layer => {
if (layer === previousLayer) {
return;
}
if (previousLayer !== undefined) {
self.map.removeLayer(previousLayer.layer);
}
previousLayer = layer;
self.map.addLayer(layer.layer);
})
this.map.on("moveend", function () {
location.data.zoom = self.map.getZoom();
location.data.lat = self.map.getCenter().lat;
@ -57,6 +71,8 @@ export class Basemap {
self.LastClickLocation.setData({lat: e.latlng.lat, lon: e.latlng.lng});
e.preventDefault();
});
}

3
Logic/Osm/Changes.ts
View file

@ -7,6 +7,7 @@ import {And, Tag, TagsFilter} from "../Tags";
import State from "../../State";
import {Utils} from "../../Utils";
import {UIEventSource} from "../UIEventSource";
import Constants from "../../Models/Constants";
export class Changes {
@ -181,7 +182,7 @@ export class Changes {
}
let changes = `<osmChange version='0.6' generator='Mapcomplete ${State.vNumber}'>`;
let changes = `<osmChange version='0.6' generator='Mapcomplete ${Constants.vNumber}'>`;
if (creations.length > 0) {
changes +=

8
Logic/Osm/ChangesetHandler.ts
View file

@ -5,6 +5,8 @@ import {ElementStorage} from "../ElementStorage";
import State from "../../State";
import Locale from "../../UI/i18n/Locale";
import LayoutConfig from "../../Customizations/JSON/LayoutConfig";
import Constants from "../../Models/Constants";
import {Basemap} from "../Leaflet/Basemap";
export class ChangesetHandler {
@ -101,12 +103,14 @@ export class ChangesetHandler {
path: '/api/0.6/changeset/create',
options: {header: {'Content-Type': 'text/xml'}},
content: [`<osm><changeset>`,
`<tag k="created_by" v="MapComplete ${State.vNumber}" />`,
`<tag k="created_by" v="MapComplete ${Constants.vNumber}" />`,
`<tag k="comment" v="Adding data with #MapComplete for theme #${layout.id}${commentExtra}"/>`,
`<tag k="theme" v="${layout.id}"/>`,
`<tag k="language" v="${Locale.language.data}"/>`,
`<tag k="host" v="${escapeHtml(window.location.host)}"/>`,
`<tag k="imagery" v="${State.state.backgroundLayer.data.id}/>`,
surveySource,
layout.maintainer !== undefined ? `<tag k="theme-creator" v="${escapeHtml(layout.maintainer)}"/>` : "",
(layout.maintainer ?? "") !== "" ? `<tag k="theme-creator" v="${escapeHtml(layout.maintainer)}"/>` : "",
`</changeset></osm>`].join("")
}, function (err, response) {
if (response === undefined) {

9
State.ts
View file

@ -17,6 +17,7 @@ import InstalledThemes from "./Logic/InstalledThemes";
import {BaseLayer} from "./Models/BaseLayer";
import Loc from "./Models/Loc";
import Constants from "./Models/Constants";
import AvailableBaseLayers from "./Logic/Actors/AvailableBaseLayers";
/**
* Contains the global state: a bunch of UI-event sources
@ -27,13 +28,8 @@ export default class State {
// The singleton of the global state
public static state: State;
public static vNumber = Constants.vNumber;
public static userJourney = Constants.userJourney;
public static runningFromConsole: boolean = false;
public readonly layoutToUse = new UIEventSource<LayoutConfig>(undefined);
/**
@ -95,6 +91,7 @@ export default class State {
* The map location: currently centered lat, lon and zoom
*/
public readonly locationControl = new UIEventSource<Loc>(undefined);
public readonly backgroundLayer = new UIEventSource<BaseLayer>(AvailableBaseLayers.osmCarto);
/**
* The location as delivered by the GPS
@ -109,7 +106,7 @@ export default class State {
public layerControlIsOpened: UIEventSource<boolean> = QueryParameters.GetQueryParameter("layer-control-toggle", "false", "Wether or not the layer control is shown")
.map<boolean>((str) => str !== "false", [], b => "" + b)
public welcomeMessageOpenedTab = QueryParameters.GetQueryParameter("tab", "0", `The tab that is shown in the welcome-message. 0 = the explanation of the theme,1 = OSM-credits, 2 = sharescreen, 3 = more themes, 4 = about mapcomplete (user must be logged in and have >${State.userJourney.mapCompleteHelpUnlock} changesets)`).map<number>(
public welcomeMessageOpenedTab = QueryParameters.GetQueryParameter("tab", "0", `The tab that is shown in the welcome-message. 0 = the explanation of the theme,1 = OSM-credits, 2 = sharescreen, 3 = more themes, 4 = about mapcomplete (user must be logged in and have >${Constants.userJourney.mapCompleteHelpUnlock} changesets)`).map<number>(
str => isNaN(Number(str)) ? 0 : Number(str), [], n => "" + n
);

4
UI/BackgroundSelector.ts
View file

@ -3,7 +3,7 @@ import {DropDown} from "./Input/DropDown";
import Translations from "./i18n/Translations";
import State from "../State";
import {UIEventSource} from "../Logic/UIEventSource";
import {BaseLayer} from "../Logic/BaseLayer";
import {BaseLayer} from "../Models/BaseLayer";
export default class BackgroundSelector extends UIElement {
@ -28,7 +28,7 @@ export default class BackgroundSelector extends UIElement {
baseLayers.push({value: layer, shown: layer.name ?? "id:" + layer.id});
}
this._dropdown = new DropDown(Translations.t.general.backgroundMap, baseLayers, State.state.bm.CurrentLayer);
this._dropdown = new DropDown(Translations.t.general.backgroundMap, baseLayers, State.state.backgroundLayer);
}
InnerRender(): string {

8
UI/CustomGenerator/CustomGeneratorPanel.ts
View file

@ -17,6 +17,7 @@ import SavePanel from "./SavePanel";
import {LocalStorageSource} from "../../Logic/Web/LocalStorageSource";
import HelpText from "./HelpText";
import Svg from "../../Svg";
import Constants from "../../Models/Constants";
export default class CustomGeneratorPanel extends UIElement {
@ -103,11 +104,12 @@ export default class CustomGeneratorPanel extends UIElement {
this.loginButton
]).Render();
}
if (ud.csCount <= State.userJourney.themeGeneratorReadOnlyUnlock) {
const journey = Constants.userJourney;
if (ud.csCount <= journey.themeGeneratorReadOnlyUnlock) {
return new Combine([
"<h3>Too little experience</h3>",
`<p>Creating your own (readonly) themes can only be done if you have more then <b>${State.userJourney.themeGeneratorReadOnlyUnlock}</b> changesets made</p>`,
`<p>Making a theme including survey options can be done at <b>${State.userJourney.themeGeneratorFullUnlock}</b> changesets</p>`
`<p>Creating your own (readonly) themes can only be done if you have more then <b>${journey.themeGeneratorReadOnlyUnlock}</b> changesets made</p>`,
`<p>Making a theme including survey options can be done at <b>${journey.themeGeneratorFullUnlock}</b> changesets</p>`
]).Render();
}
return this.mainPanel.Render()

5
UI/CustomGenerator/LayerPanel.ts
View file

@ -21,6 +21,7 @@ import State from "../../State";
import {FixedUiElement} from "../Base/FixedUiElement";
import ValidatedTextField from "../Input/ValidatedTextField";
import Svg from "../../Svg";
import Constants from "../../Models/Constants";
/**
* Shows the configuration for a single layer
@ -142,7 +143,7 @@ export default class LayerPanel extends UIElement {
}
)
if (userDetails.csCount >= State.userJourney.themeGeneratorFullUnlock) {
if (userDetails.csCount >= Constants.userJourney.themeGeneratorFullUnlock) {
const presetPanel = new MultiInput("Add a preset",
() => ({tags: [], title: {}}),
@ -151,7 +152,7 @@ export default class LayerPanel extends UIElement {
new SingleSetting(config, presetPanel, ["layers", index, "presets"], "Presets", "")
this.presetsPanel = presetPanel;
} else {
this.presetsPanel = new FixedUiElement(`Creating a custom theme which also edits OSM is only unlocked after ${State.userJourney.themeGeneratorFullUnlock} changesets`).SetClass("alert");
this.presetsPanel = new FixedUiElement(`Creating a custom theme which also edits OSM is only unlocked after ${Constants.userJourney.themeGeneratorFullUnlock} changesets`).SetClass("alert");
}
function loadTagRenderings() {

5
UI/CustomGenerator/TagRenderingPanel.ts
View file

@ -18,6 +18,7 @@ import {VariableUiElement} from "../Base/VariableUIElement";
import ValidatedTextField from "../Input/ValidatedTextField";
import SpecialVisualizations from "../SpecialVisualizations";
import TagRenderingConfig from "../../Customizations/JSON/TagRenderingConfig";
import Constants from "../../Models/Constants";
export default class TagRenderingPanel extends InputElement<TagRenderingConfigJson> {
@ -46,7 +47,7 @@ export default class TagRenderingPanel extends InputElement<TagRenderingConfigJs
this.SetClass("min-height");
this.options = options ?? {};
const questionsNotUnlocked = userDetails.csCount < State.userJourney.themeGeneratorFullUnlock;
const questionsNotUnlocked = userDetails.csCount < Constants.userJourney.themeGeneratorFullUnlock;
this.options.disableQuestions =
(this.options.disableQuestions ?? false) ||
questionsNotUnlocked;
@ -89,7 +90,7 @@ export default class TagRenderingPanel extends InputElement<TagRenderingConfigJs
"<br/><br/>" +
"Furhtermore, some special functions are supported:"+SpecialVisualizations.HelpMessage.Render()),
questionsNotUnlocked ? `You need at least ${State.userJourney.themeGeneratorFullUnlock} changesets to unlock the 'question'-field and to use your theme to edit OSM data` : "",
questionsNotUnlocked ? `You need at least ${Constants.userJourney.themeGeneratorFullUnlock} changesets to unlock the 'question'-field and to use your theme to edit OSM data` : "",
...(options?.disableQuestions ? [] : questionSettings),
"<h3>Mappings</h3>",

5
UI/MoreScreen.ts
View file

@ -9,6 +9,7 @@ import {VariableUiElement} from "./Base/VariableUIElement";
import Svg from "../Svg";
import LayoutConfig from "../Customizations/JSON/LayoutConfig";
import * as personal from "../assets/themes/personalLayout/personalLayout.json"
import Constants from "../Models/Constants";
export class MoreScreen extends UIElement {
@ -74,7 +75,7 @@ export class MoreScreen extends UIElement {
els.push(new VariableUiElement(
State.state.osmConnection.userDetails.map(userDetails => {
if (userDetails.csCount < State.userJourney.themeGeneratorReadOnlyUnlock) {
if (userDetails.csCount < Constants.userJourney.themeGeneratorReadOnlyUnlock) {
return tr.requestATheme.Render();
}
return new SubtleButton(Svg.pencil_ui(), tr.createYourOwnTheme, {
@ -88,7 +89,7 @@ export class MoreScreen extends UIElement {
for (const k in AllKnownLayouts.allSets) {
const layout : LayoutConfig = AllKnownLayouts.allSets[k];
if (k === personal.id) {
if (State.state.osmConnection.userDetails.data.csCount < State.userJourney.personalLayoutUnlock) {
if (State.state.osmConnection.userDetails.data.csCount < Constants.userJourney.personalLayoutUnlock) {
continue;
}
}

3
UI/OpeningHours/OhVisualization.ts
View file

@ -5,6 +5,7 @@ import State from "../../State";
import {FixedUiElement} from "../Base/FixedUiElement";
import {OH} from "./OpeningHours";
import Translations from "../i18n/Translations";
import Constants from "../../Models/Constants";
export default class OpeningHoursVisualization extends UIElement {
private readonly _key: string;
@ -166,7 +167,7 @@ export default class OpeningHoursVisualization extends UIElement {
} catch (e) {
console.log(e);
const msg = new Combine([Translations.t.general.opening_hours.error_loading,
State.state?.osmConnection?.userDetails?.data?.csCount >= State.userJourney.tagsVisibleAndWikiLinked ?
State.state?.osmConnection?.userDetails?.data?.csCount >= Constants.userJourney.tagsVisibleAndWikiLinked ?
`<span class='subtle'>${e}</span>`
: ""
]);

5
UI/Popup/TagRenderingQuestion.ts
View file

@ -18,6 +18,7 @@ import {VariableUiElement} from "../Base/VariableUIElement";
import Translations from "../i18n/Translations";
import {FixedUiElement} from "../Base/FixedUiElement";
import {Translation} from "../i18n/Translation";
import Constants from "../../Models/Constants";
/**
* Shows the question element.
@ -72,14 +73,14 @@ export default class TagRenderingQuestion extends UIElement {
self._inputElement.GetValue().map(
(tags: TagsFilter) => {
const csCount = State.state?.osmConnection?.userDetails?.data?.csCount ?? 1000;
if (csCount < State.userJourney.tagsVisibleAt) {
if (csCount < Constants.userJourney.tagsVisibleAt) {
return "";
}
if (tags === undefined) {
return Translations.t.general.noTagsSelected.SetClass("subtle").Render();
}
if (csCount < State.userJourney.tagsVisibleAndWikiLinked) {
if (csCount < Constants.userJourney.tagsVisibleAndWikiLinked) {
const tagsStr = tags.asHumanString(false, true);
return new FixedUiElement(tagsStr).SetClass("subtle").Render();
}

5
UI/ShareScreen.ts
View file

@ -14,6 +14,7 @@ import {SubtleButton} from "./Base/SubtleButton";
import Svg from "../Svg";
import {Translation} from "./i18n/Translation";
import LayoutConfig from "../Customizations/JSON/LayoutConfig";
import Constants from "../Models/Constants";
export class ShareScreen extends UIElement {
private readonly _options: UIElement;
@ -71,7 +72,7 @@ export class ShareScreen extends UIElement {
if (State.state !== undefined) {
const currentLayer: UIEventSource<{ id: string, name: string, layer: any }> = (State.state.bm as Basemap).CurrentLayer;
const currentLayer: UIEventSource<{ id: string, name: string, layer: any }> = State.state.backgroundLayer;
const currentBackground = new VariableUiElement(currentLayer.map(layer => {
return tr.fsIncludeCurrentBackgroundMap.Subs({name: layer?.name ?? ""}).Render();
}));
@ -190,7 +191,7 @@ export class ShareScreen extends UIElement {
new VariableUiElement(
State.state.osmConnection.userDetails.map(
userDetails => {
if (userDetails.csCount <= State.userJourney.themeGeneratorReadOnlyUnlock) {
if (userDetails.csCount <= Constants.userJourney.themeGeneratorReadOnlyUnlock) {
return "";
}

13
UI/SimpleAddUI.ts
View file

@ -10,6 +10,7 @@ import State from "../State";
import {UIEventSource} from "../Logic/UIEventSource";
import Svg from "../Svg";
import {FixedUiElement} from "./Base/FixedUiElement";
import Constants from "../Models/Constants";
/**
* Asks to add a feature at the last clicked location, at least if zoom is sufficient
@ -59,7 +60,7 @@ export class SimpleAddUI extends UIElement {
const csCount = State.state.osmConnection.userDetails.data.csCount;
let tagInfo = "";
if (csCount > State.userJourney.tagsVisibleAt) {
if (csCount > Constants.userJourney.tagsVisibleAt) {
tagInfo = preset.tags.map(t => t.asHumanString(false, true)).join("&");
tagInfo = `<br/><span class='subtle'>${tagInfo}</span>`
}
@ -139,8 +140,8 @@ export class SimpleAddUI extends UIElement {
let tagInfo = "";
const csCount = State.state.osmConnection.userDetails.data.csCount;
if (csCount > State.userJourney.tagsVisibleAt) {
tagInfo = this._confirmPreset.data .tags.map(t => t.asHumanString(csCount > State.userJourney.tagsVisibleAndWikiLinked, true)).join("&");
if (csCount > Constants.userJourney.tagsVisibleAt) {
tagInfo = this._confirmPreset.data .tags.map(t => t.asHumanString(csCount > Constants.userJourney.tagsVisibleAndWikiLinked, true)).join("&");
tagInfo = `<br/>More information about the preset: ${tagInfo}`
}
@ -169,7 +170,7 @@ export class SimpleAddUI extends UIElement {
return new Combine([header, this._loginButton]).Render()
}
if (userDetails.data.unreadMessages > 0 && userDetails.data.csCount < State.userJourney.addNewPointWithUnreadMessagesUnlock) {
if (userDetails.data.unreadMessages > 0 && userDetails.data.csCount < Constants.userJourney.addNewPointWithUnreadMessagesUnlock) {
return new Combine([header,
Translations.t.general.readYourMessages.Clone().SetClass("alert"),
this.goToInboxButton
@ -185,13 +186,13 @@ export class SimpleAddUI extends UIElement {
]);
}
if (userDetails.data.csCount < State.userJourney.addNewPointsUnlock) {
if (userDetails.data.csCount < Constants.userJourney.addNewPointsUnlock) {
return new Combine([header, "<span class='alert'>",
Translations.t.general.fewChangesBefore,
"</span>"]).Render();
}
if (State.state.locationControl.data.zoom < State.userJourney.minZoomLevelToAddNewPoints) {
if (State.state.locationControl.data.zoom < Constants.userJourney.minZoomLevelToAddNewPoints) {
return new Combine([header, Translations.t.general.add.zoomInFurther.SetClass("alert")]).Render()
}