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

More refactoring

Browse source
This commit is contained in:
pietervdvn 2021-01-02 19:09:49 +01:00
parent 849c61c8a1
commit e4a2fd1daf
15 changed files with 75 additions and 44 deletions
Show stats 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()
}