mapcomplete/UI/SimpleAddUI.ts

93 lines
3.6 KiB
TypeScript
Raw Normal View History

2020-06-29 03:12:44 +02:00
import {UIElement} from "./UIElement";
import {UIEventSource} from "./UIEventSource";
import {Tag} from "../Logic/TagsFilter";
import {FilteredLayer} from "../Logic/FilteredLayer";
import {Changes} from "../Logic/Changes";
import {FixedUiElement} from "./Base/FixedUiElement";
import {Button} from "./Base/Button";
2020-06-29 16:21:36 +02:00
import {UserDetails} from "../Logic/OsmConnection";
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 {
private _zoomlevel: UIEventSource<{ zoom: number }>;
private _addButtons: UIElement[];
private _lastClickLocation: UIEventSource<{ lat: number; lon: number }>;
private _changes: Changes;
private _selectedElement: UIEventSource<any>;
2020-06-29 03:40:19 +02:00
private _dataIsLoading: UIEventSource<boolean>;
2020-06-29 16:21:36 +02:00
private _userDetails: UIEventSource<UserDetails>;
2020-06-29 03:12:44 +02:00
constructor(zoomlevel: UIEventSource<{ zoom: number }>,
lastClickLocation: UIEventSource<{ lat: number, lon: number }>,
changes: Changes,
selectedElement: UIEventSource<any>,
2020-06-29 03:40:19 +02:00
dataIsLoading: UIEventSource<boolean>,
2020-06-29 16:21:36 +02:00
userDetails: UIEventSource<UserDetails>,
2020-06-29 03:12:44 +02:00
addButtons: { name: string; icon: string; tags: Tag[]; layerToAddTo: FilteredLayer }[],
) {
super(zoomlevel);
this._zoomlevel = zoomlevel;
this._lastClickLocation = lastClickLocation;
this._changes = changes;
this._selectedElement = selectedElement;
2020-06-29 03:40:19 +02:00
this._dataIsLoading = dataIsLoading;
2020-06-29 16:21:36 +02:00
this._userDetails = userDetails;
this.ListenTo(userDetails);
2020-06-29 16:24:42 +02:00
this.ListenTo(dataIsLoading);
2020-06-29 03:12:44 +02:00
this._addButtons = [];
for (const option of addButtons) {
// <button type='button'> looks SO retarded
// the default type of button is 'submit', which performs a POST and page reload
const button =
2020-07-20 16:57:43 +02:00
new Button(new FixedUiElement("Add a " + option.name + " here"),
2020-06-29 03:12:44 +02:00
this.CreatePoint(option));
this._addButtons.push(button);
}
}
private CreatePoint(option: { name: string; icon: string; tags: Tag[]; layerToAddTo: FilteredLayer }) {
const self = this;
return () => {
console.log("Creating a new ", option.name, " at last click location");
const loc = self._lastClickLocation.data;
let feature = self._changes.createElement(option.tags, loc.lat, loc.lon);
option.layerToAddTo.AddNewElement(feature);
self._selectedElement.setData(feature.properties);
}
}
protected InnerRender(): string {
const header = "<h2>No data here</h2>" +
"You clicked somewhere where no data is known yet.<br/>";
2020-07-15 13:15:36 +02:00
if (!this._userDetails.data.loggedIn) {
return header + "<a class='activate-osm-authentication'>Please log in to add a new point</a>"
2020-07-15 13:15:36 +02:00
}
2020-06-29 03:12:44 +02:00
if (this._zoomlevel.data.zoom < 19) {
return header + "Zoom in further to add a point.";
2020-06-29 03:40:19 +02:00
}
2020-06-29 16:21:36 +02:00
if (this._dataIsLoading.data) {
return header + "The data is still loading. Please wait a bit before you add a new point";
2020-06-29 03:12:44 +02:00
}
var html = "";
for (const button of this._addButtons) {
html += button.Render();
}
return header + html;
}
InnerUpdate(htmlElement: HTMLElement) {
super.InnerUpdate(htmlElement);
for (const button of this._addButtons) {
button.Update();
}
2020-06-29 16:21:36 +02:00
this._userDetails.data.osmConnection.registerActivateOsmAUthenticationClass();
2020-06-29 03:12:44 +02:00
}
}