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

Cleanup of code

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-07-24 01:12:57 +02:00
parent dd91e11bd0
commit e0f9a93468
12 changed files with 193 additions and 369 deletions
Download patch file Download diff file Expand all files Collapse all files

148
UI/AddButton.ts
View file

@ -1,148 +0,0 @@
import {UIEventSource} from "./UIEventSource";
import {UIElement} from "./UIElement";
import {Basemap} from "../Logic/Basemap";
import {Changes} from "../Logic/Changes";
import L from "leaflet";
import {Tag} from "../Logic/TagsFilter";
import {FilteredLayer} from "../Logic/FilteredLayer";
export class AddButton extends UIElement {
public curentAddSelection: UIEventSource<string> = new UIEventSource<string>("");
private zoomlevel: UIEventSource<{ zoom: number }>;
private readonly SELECTING_POI = "selecting_POI";
private readonly PLACING_POI = "placing_POI";
private changes: Changes;
/*State is one of:
* "": the default stated
* "select_POI": show a 'select which POI to add' query (skipped if only one option exists)
* "placing_point": shown while adding a point
* ""
*/
private state: UIEventSource<string> = new UIEventSource<string>("");
private _options: { name: string; icon: string; tags: Tag[]; layerToAddTo: FilteredLayer }[];
constructor(
basemap: Basemap,
changes: Changes,
options: {
name: string,
icon: string,
tags: Tag[],
layerToAddTo: FilteredLayer
}[]) {
super(undefined);
this.zoomlevel = basemap.Location;
this.ListenTo(this.zoomlevel);
this._options = options;
this.ListenTo(this.curentAddSelection);
this.ListenTo(this.state);
this.state.setData(this.SELECTING_POI);
this.changes = changes;
const self = this;
basemap.map.on("click", function (e) {
const location = e.latlng;
console.log("Clicked at ", location)
self.HandleClick(location.lat, location.lng)
}
);
basemap.map.on("mousemove", function(){
if (self.state.data === self.PLACING_POI) {
let icon = "crosshair";
for (const option of self._options) {
if (option.name === self.curentAddSelection.data && option.icon !== undefined) {
icon = 'url("' + option.icon + '") 32 32 ,crosshair';
console.log("Cursor icon: ", icon)
}
}
document.getElementById('leafletDiv').style.cursor = icon;
} else {
// @ts-ignore
document.getElementById('leafletDiv').style.cursor = '';
}
});
}
private HandleClick(lat: number, lon: number): void {
this.state.setData(this.SELECTING_POI);
console.log("Handling click", lat, lon, this.curentAddSelection.data);
for (const option of this._options) {
if (this.curentAddSelection.data === option.name) {
console.log("PLACING a ", option);
let feature = this.changes.createElement(option.tags, lat, lon);
option.layerToAddTo.AddNewElement(feature);
return;
}
}
}
protected InnerRender(): string {
if (this.zoomlevel.data.zoom < 19) {
return "Zoom in om een punt toe te voegen"
}
if (this.state.data === this.SELECTING_POI) {
var html = "<form>";
for (const option of this._options) {
// <button type='button'> looks SO retarded
// the default type of button is 'submit', which performs a POST and page reload
html += "<button type='button' class='addPOIoption' value='" + option.name + "'>Voeg een " + option.name + " toe</button><br/>";
}
html += "</form>";
return html;
}
if (this.state.data === this.PLACING_POI) {
return "<div id='clickOnMapInstruction'>Klik op de kaart om een nieuw punt toe te voegen<div>" +
"<div id='cancelInstruction'>Klik hier om toevoegen te annuleren</div>"
}
if (this.curentAddSelection.data === "") {
return "<span onclick>Voeg een punt toe...</span>"
}
return "Annuleer";
}
InnerUpdate(htmlElement: HTMLElement) {
const self = this;
htmlElement.onclick = function (event) {
// @ts-ignore
if(event.consumed){
return;
}
if (self.state.data === self.PLACING_POI) {
self.state.setData(self.SELECTING_POI);
}
}
const buttons = htmlElement.getElementsByClassName('addPOIoption');
// @ts-ignore
for (const button of buttons) {
button.onclick = function (event) {
self.curentAddSelection.setData(button.value);
self.state.setData(self.PLACING_POI);
event.consumed = true;
}
}
}
}

43
UI/Base/CollapseButton.ts
View file

@ -1,43 +0,0 @@
import {UIElement} from "../UIElement";
import {UIEventSource} from "../UIEventSource";
export class CollapseButton extends UIElement {
public isCollapsed = new UIEventSource(false);
constructor(idToCollapse: string) {
super(undefined);
this.ListenTo(this.isCollapsed);
this.isCollapsed.addCallback((collapse) => {
const el = document.getElementById(idToCollapse);
if (el === undefined || el === null) {
console.log("Element not found")
return;
}
if (collapse) {
el.style.height = "3.5em";
el.style.width = "15em";
} else {
el.style.height = "auto";
el.style.width = "auto";
}
});
const self = this;
this.onClick(() => {
self.isCollapsed.setData(!self.isCollapsed.data);
})
}
protected InnerRender(): string {
const up = './assets/arrow-up.svg';
const down = './assets/arrow-down.svg';
let arrow = up;
if (this.isCollapsed.data) {
arrow = down;
}
return `<img class='collapse-button' src='${arrow}' alt='collapse'>`;
}
}

8
UI/Base/CheckBox.ts → UI/Input/CheckBox.ts
View file

@ -2,6 +2,7 @@ import {UIElement} from "../UIElement";
import {UIEventSource} from "../UIEventSource";
import { FilteredLayer } from "../../Logic/FilteredLayer";
import Translations from "../../UI/i18n/Translations";
import instantiate = WebAssembly.instantiate;
export class CheckBox extends UIElement{
@ -11,9 +12,10 @@ export class CheckBox extends UIElement{
private readonly _showEnabled: string|UIElement;
private readonly _showDisabled: string|UIElement;
constructor(showEnabled: string|UIElement, showDisabled: string|UIElement, data: UIEventSource<boolean> = undefined) {
constructor(showEnabled: string | UIElement, showDisabled: string | UIElement, data: UIEventSource<boolean> | boolean = false) {
super(undefined);
this._data = data ?? new UIEventSource<boolean>(false);
this._data =
data instanceof UIEventSource ? data : new UIEventSource(data ?? false);
this.ListenTo(this._data);
this._showEnabled = showEnabled;
this._showDisabled = showDisabled;
@ -21,7 +23,7 @@ export class CheckBox extends UIElement{
this.onClick(() => {
self._data.setData(!self._data.data);
})
}
InnerRender(): string {

2
UI/LayerSelection.ts
View file

@ -1,6 +1,6 @@
import { UIElement } from "./UIElement";
import { FilteredLayer } from "../Logic/FilteredLayer";
import { CheckBox } from "./Base/CheckBox";
import { CheckBox } from "./Input/CheckBox";
import Combine from "./Base/Combine";
export class LayerSelection extends UIElement{