mapcomplete/UI/BigComponents/SimpleAddUI.ts

233 lines
8.4 KiB
TypeScript
Raw Normal View History

2020-06-29 03:12:44 +02:00
/**
* Asks to add a feature at the last clicked location, at least if zoom is sufficient
*/
import Locale from "../i18n/Locale";
import {UIEventSource} from "../../Logic/UIEventSource";
import {Tag, TagUtils} from "../../Logic/Tags";
import {UIElement} from "../UIElement";
import Svg from "../../Svg";
import {SubtleButton} from "../Base/SubtleButton";
import State from "../../State";
import Combine from "../Base/Combine";
import {FixedUiElement} from "../Base/FixedUiElement";
import Translations from "../i18n/Translations";
import Constants from "../../Models/Constants";
2021-01-04 04:36:21 +01:00
import LayerConfig from "../../Customizations/JSON/LayerConfig";
2021-01-08 16:49:42 +01:00
import ScrollableFullScreen from "../Base/ScrollableFullScreen";
export default class SimpleAddUI extends UIElement {
2021-01-08 16:49:42 +01:00
private readonly _loginButton: UIElement;
private readonly _confirmPreset: UIEventSource<{
2020-07-31 16:17:16 +02:00
description: string | UIElement,
name: string | UIElement,
icon: UIElement,
2020-07-31 16:17:16 +02:00
tags: Tag[],
layerToAddTo: {
2021-01-04 04:36:21 +01:00
layerDef: LayerConfig,
2021-01-08 16:49:42 +01:00
isDisplayed: UIEventSource<boolean>
}
2020-07-31 16:17:16 +02:00
}>
= new UIEventSource(undefined);
2021-01-08 16:49:42 +01:00
private _component: UIElement;
private readonly openLayerControl: UIElement;
private readonly cancelButton: UIElement;
private readonly goToInboxButton: UIElement = new SubtleButton(Svg.envelope_ui(),
Translations.t.general.goToInbox, {url: "https://www.openstreetmap.org/messages/inbox", newTab: false});
2021-01-22 00:40:15 +01:00
constructor(onClose: () => void) {
2021-01-08 16:49:42 +01:00
super(State.state.locationControl.map(loc => loc.zoom));
const self = this;
2020-07-29 21:50:19 +02:00
this.ListenTo(Locale.language);
this.ListenTo(State.state.osmConnection.userDetails);
2020-07-31 16:17:16 +02:00
this.ListenTo(State.state.layerUpdater.runningQuery);
2020-07-31 18:38:14 +02:00
this.ListenTo(this._confirmPreset);
this.ListenTo(State.state.locationControl);
2021-01-08 16:49:42 +01:00
State.state.filteredLayers.data?.map(layer => {
self.ListenTo(layer.isDisplayed)
})
2020-07-31 18:38:14 +02:00
this._loginButton = Translations.t.general.add.pleaseLogin.Clone().onClick(() => State.state.osmConnection.AttemptLogin());
2021-01-08 16:49:42 +01:00
2020-09-14 20:16:03 +02:00
this.SetStyle("font-size:large");
2021-01-08 16:49:42 +01:00
this.cancelButton = new SubtleButton(Svg.close_ui(),
Translations.t.general.cancel
).onClick(() => {
self._confirmPreset.setData(undefined);
})
this.openLayerControl = new SubtleButton(Svg.layers_ui(),
Translations.t.general.add.openLayerControl
).onClick(() => {
State.state.layerControlIsOpened.setData(true);
})
2021-01-22 00:40:15 +01:00
this._component = new ScrollableFullScreen(
Translations.t.general.add.title,
this.CreateContent(),
onClose
);
2021-01-08 16:49:42 +01:00
}
InnerRender(): string {
return this._component.Render();
}
private CreatePresetsPanel(): UIElement {
const userDetails = State.state.osmConnection.userDetails;
if (userDetails === undefined) {
return undefined;
}
if (!userDetails.data.loggedIn) {
return this._loginButton;
}
if (userDetails.data.unreadMessages > 0 && userDetails.data.csCount < Constants.userJourney.addNewPointWithUnreadMessagesUnlock) {
return new Combine([
Translations.t.general.readYourMessages.Clone().SetClass("alert"),
this.goToInboxButton
]);
}
if (userDetails.data.csCount < Constants.userJourney.addNewPointsUnlock) {
return new Combine(["<span class='alert'>",
Translations.t.general.fewChangesBefore,
"</span>"]);
}
if (State.state.locationControl.data.zoom < Constants.userJourney.minZoomLevelToAddNewPoints) {
return Translations.t.general.add.zoomInFurther.SetClass("alert")
}
if (State.state.layerUpdater.runningQuery.data) {
return Translations.t.general.add.stillLoading
}
const presetButtons = this.CreatePresetButtons()
return new Combine(presetButtons).SetClass("add-popup-all-buttons")
}
private CreateContent(): UIElement {
const confirmPanel = this.CreateConfirmPanel();
if (confirmPanel !== undefined) {
return confirmPanel;
}
let intro: UIElement = Translations.t.general.add.intro;
let testMode: UIElement = undefined;
if (State.state.osmConnection?.userDetails?.data?.dryRun) {
testMode = new Combine([
"<span class='alert'>",
"Test mode - changes won't be saved",
"</span>"
]);
}
let presets = this.CreatePresetsPanel();
return new Combine([intro, testMode, presets])
}
private CreateConfirmPanel(): UIElement {
const preset = this._confirmPreset.data;
if (preset === undefined) {
return undefined;
}
const confirmButton = new SubtleButton(preset.icon,
new Combine([
"<b>",
Translations.t.general.add.confirmButton.Subs({category: preset.name}),
"</b>"]));
confirmButton.onClick(this.CreatePoint(preset.tags));
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,
2021-01-08 16:49:42 +01:00
this.cancelButton
]);
}
let tagInfo = "";
const csCount = State.state.osmConnection.userDetails.data.csCount;
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}`
}
return new Combine([
Translations.t.general.add.confirmIntro.Subs({title: this._confirmPreset.data.name}),
State.state.osmConnection.userDetails.data.dryRun ? "<span class='alert'>TESTING - changes won't be saved</span>" : "",
confirmButton,
this.cancelButton,
preset.description,
tagInfo
])
}
2021-01-08 16:49:42 +01:00
private CreatePresetButtons() {
const allButtons = [];
const self = this;
for (const layer of State.state.filteredLayers.data) {
const presets = layer.layerDef.presets;
for (const preset of presets) {
const tags = TagUtils.KVtoProperties(preset.tags ?? []);
let icon: UIElement = new FixedUiElement(layer.layerDef.GenerateLeafletStyle(new UIEventSource<any>(tags), false).icon.html.Render()).SetClass("simple-add-ui-icon");
2020-07-31 16:17:16 +02:00
const csCount = State.state.osmConnection.userDetails.data.csCount;
let tagInfo = "";
2021-01-02 19:09:49 +01:00
if (csCount > Constants.userJourney.tagsVisibleAt) {
tagInfo = preset.tags.map(t => t.asHumanString(false, true)).join("&");
tagInfo = `<br/><span class='subtle'>${tagInfo}</span>`
}
const button: UIElement =
2020-07-31 16:17:16 +02:00
new SubtleButton(
icon,
2020-07-31 16:17:16 +02:00
new Combine([
"<b>",
preset.title,
"</b>",
preset.description !== undefined ? new Combine(["<br/>", preset.description.FirstSentence()]) : "",
tagInfo
])
2020-07-31 16:17:16 +02:00
).onClick(
() => {
self._confirmPreset.setData({
tags: preset.tags,
layerToAddTo: layer,
name: preset.title,
description: preset.description,
icon: icon
2020-07-31 16:17:16 +02:00
});
self.Update();
2020-07-31 16:17:16 +02:00
}
)
2021-01-08 16:49:42 +01:00
allButtons.push(button);
2020-07-31 16:17:16 +02:00
}
2020-06-29 03:12:44 +02:00
}
2021-01-08 16:49:42 +01:00
return allButtons;
2020-06-29 03:12:44 +02:00
}
private CreatePoint(tags: Tag[]) {
2020-06-29 03:12:44 +02:00
return () => {
2021-01-02 21:03:40 +01:00
const loc = State.state.LastClickLocation.data;
2020-07-31 16:17:16 +02:00
let feature = State.state.changes.createElement(tags, loc.lat, loc.lon);
State.state.selectedElement.setData(feature);
2020-06-29 03:12:44 +02:00
}
}
}