mapcomplete/UI/SimpleAddUI.ts

219 lines
8.2 KiB
TypeScript
Raw Normal View History

2020-06-29 03:12:44 +02:00
import {UIElement} from "./UIElement";
import {Tag, TagUtils} from "../Logic/Tags";
2020-06-29 03:12:44 +02:00
import {FilteredLayer} from "../Logic/FilteredLayer";
import Translations from "./i18n/Translations";
import Combine from "./Base/Combine";
import {SubtleButton} from "./Base/SubtleButton";
2020-07-29 21:50:19 +02:00
import Locale from "./i18n/Locale";
import {State} from "../State";
import {UIEventSource} from "../Logic/UIEventSource";
import {Utils} from "../Utils";
2020-06-29 03:12:44 +02:00
/**
* Asks to add a feature at the last clicked location, at least if zoom is sufficient
*/
export class SimpleAddUI extends UIElement {
2020-08-31 13:28:21 +02:00
private readonly _addButtons: UIElement[];
2020-07-31 18:38:14 +02:00
private _loginButton : UIElement;
2020-07-31 16:17:16 +02:00
private _confirmPreset: UIEventSource<{
description: string | UIElement,
name: string | UIElement,
icon: string,
tags: Tag[],
layerToAddTo: FilteredLayer
}>
= new UIEventSource(undefined);
private confirmButton: UIElement = undefined;
private openLayerControl: UIElement;
private cancelButton: UIElement;
2020-07-29 21:48:41 +02:00
private goToInboxButton: UIElement = new SubtleButton("./assets/envelope.svg",
Translations.t.general.goToInbox, {url:"https://www.openstreetmap.org/messages/inbox", newTab: false});
2020-07-31 16:17:16 +02:00
constructor() {
super(State.state.locationControl);
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);
2020-07-31 18:38:14 +02:00
this._loginButton = Translations.t.general.add.pleaseLogin.Clone().onClick(() => State.state.osmConnection.AttemptLogin());
2020-06-29 03:12:44 +02:00
this._addButtons = [];
2020-09-14 20:16:03 +02:00
this.SetStyle("font-size:large");
2020-07-31 18:38:14 +02:00
const self = this;
2020-07-31 16:17:16 +02:00
for (const layer of State.state.filteredLayers.data) {
this.ListenTo(layer.isDisplayed);
2020-07-31 16:17:16 +02:00
for (const preset of layer.layerDef.presets) {
let icon: string = "./assets/bug.svg";
2020-08-22 12:44:11 +02:00
if (preset.icon !== undefined) {
if (typeof (preset.icon) !== "string") {
const tags = Utils.MergeTags(TagUtils.KVtoProperties(preset.tags), {id:"node/-1"});
2020-09-02 11:37:34 +02:00
icon = preset.icon.GetContent(tags).txt;
2020-09-09 18:42:13 +02:00
if(icon.startsWith("$")){
icon = undefined;
}
2020-08-22 12:44:11 +02:00
} else {
icon = preset.icon;
}
} else {
console.warn("No icon defined for preset ", preset, "in layer ", layer.layerDef.id)
}
2020-07-31 16:17:16 +02:00
const csCount = State.state.osmConnection.userDetails.data.csCount;
let tagInfo = "";
if (csCount > State.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]) : "",
tagInfo
])
2020-07-31 16:17:16 +02:00
).onClick(
() => {
self.confirmButton = new SubtleButton(icon,
2020-07-31 16:17:16 +02:00
new Combine([
2020-08-07 00:45:33 +02:00
"<b>",
2020-08-06 23:49:35 +02:00
Translations.t.general.add.confirmButton.Subs({category: preset.title}),
2020-08-07 00:45:33 +02:00
"</b><br/>",
2020-07-31 16:17:16 +02:00
preset.description !== undefined ? preset.description : ""]));
self.confirmButton.onClick(self.CreatePoint(preset.tags, layer));
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
}
)
this._addButtons.push(button);
2020-07-31 16:17:16 +02:00
}
2020-06-29 03:12:44 +02:00
}
this.cancelButton = new SubtleButton(
2020-07-29 21:48:41 +02:00
"./assets/close.svg",
Translations.t.general.cancel
).onClick(() => {
self._confirmPreset.setData(undefined);
})
this.openLayerControl = new SubtleButton(
"./assets/layers.svg",
Translations.t.general.add.openLayerControl
).onClick(() => {
State.state.layerControlIsOpened.setData(true);
})
2020-06-29 03:12:44 +02:00
}
2020-07-31 16:17:16 +02:00
private CreatePoint(tags: Tag[], layerToAddTo: FilteredLayer) {
2020-06-29 03:12:44 +02:00
return () => {
2020-07-31 04:58:58 +02:00
const loc = State.state.bm.LastClickLocation.data;
2020-07-31 16:17:16 +02:00
let feature = State.state.changes.createElement(tags, loc.lat, loc.lon);
layerToAddTo.AddNewElement(feature);
State.state.selectedElement.setData({feature: feature});
2020-06-29 03:12:44 +02:00
}
}
2020-07-20 18:24:00 +02:00
InnerRender(): string {
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;
if (csCount > State.userJourney.tagsVisibleAt) {
tagInfo = this._confirmPreset.data .tags.map(t => t.asHumanString(csCount > State.userJourney.tagsVisibleAndWikiLinked, true)).join("&");
tagInfo = `<br/>More information about the preset: ${tagInfo}`
}
2020-09-14 20:16:03 +02:00
return new Combine([
Translations.t.general.add.confirmIntro.Subs({title: this._confirmPreset.data.name}),
2020-09-14 20:16:03 +02:00
userDetails.data.dryRun ? "<span class='alert'>TESTING - changes won't be saved</span>" : "",
this.confirmButton,
this.cancelButton,
tagInfo
]).Render();
}
let header: UIElement = Translations.t.general.add.header;
2020-09-17 13:13:02 +02:00
if (userDetails === undefined) {
2020-07-30 00:59:08 +02:00
return header.Render();
}
2020-09-17 13:13:02 +02:00
if (!userDetails.data.loggedIn) {
2020-07-31 18:38:14 +02:00
return new Combine([header, this._loginButton]).Render()
2020-07-15 13:15:36 +02:00
}
2020-09-17 13:13:02 +02:00
if (userDetails.data.unreadMessages > 0 && userDetails.data.csCount < State.userJourney.addNewPointWithUnreadMessagesUnlock) {
return new Combine([header, "<span class='alert'>",
Translations.t.general.readYourMessages,
2020-07-29 19:02:36 +02:00
"</span>",
this.goToInboxButton
]).Render();
2020-09-17 13:13:02 +02:00
}
if (userDetails.data.dryRun) {
header = new Combine([header,
"<span class='alert'>",
"Test mode - changes won't be saved",
"</span>"
]);
}
2020-09-17 13:13:02 +02:00
if (userDetails.data.csCount < State.userJourney.addNewPointsUnlock) {
return new Combine([header, "<span class='alert'>",
Translations.t.general.fewChangesBefore,
"</span>"]).Render();
}
if (State.state.locationControl.data.zoom < 19) {
return new Combine([header, Translations.t.general.add.zoomInFurther]).Render()
2020-06-29 03:40:19 +02:00
}
2020-06-29 16:21:36 +02:00
2020-07-31 16:17:16 +02:00
if (State.state.layerUpdater.runningQuery.data) {
return new Combine([header, Translations.t.general.add.stillLoading]).Render()
2020-06-29 03:12:44 +02:00
}
2020-09-02 11:37:34 +02:00
return header.Render() + new Combine(this._addButtons).SetClass("add-popup-all-buttons").Render();
2020-06-29 03:12:44 +02:00
}
}