Lot's of small improvements

UI/SimpleAddUI.ts

@@ -0,0 +1,77 @@
+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";
+
+/**
+ * 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>;
+
+    constructor(zoomlevel: UIEventSource<{ zoom: number }>,
+                lastClickLocation: UIEventSource<{ lat: number, lon: number }>,
+                changes: Changes,
+                selectedElement: UIEventSource<any>,
+                addButtons: { name: string; icon: string; tags: Tag[]; layerToAddTo: FilteredLayer }[],
+    ) {
+        super(zoomlevel);
+        this._zoomlevel = zoomlevel;
+        this._lastClickLocation = lastClickLocation;
+        this._changes = changes;
+        this._selectedElement = selectedElement;
+        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 =
+                new Button(new FixedUiElement("Voeg hier een " + option.name + " toe"),
+                    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>Geen selectie</h2>" +
+            "Je klikte ergens waar er nog geen gezochte data is.<br/>"
+        if (this._zoomlevel.data.zoom < 19) {
+            return header + "Zoom verder in om een element toe te voegen."
+        }
+
+        var html = "";
+        for (const button of this._addButtons) {
+            // <button type='button'> looks SO retarded
+            // the default type of button is 'submit', which performs a POST and page reload
+            html += button.Render();
+        }
+        return header + html;
+    }
+
+    InnerUpdate(htmlElement: HTMLElement) {
+        super.InnerUpdate(htmlElement);
+        for (const button of this._addButtons) {
+            button.Update();
+        }
+    }
+
+}