Add search, a few flow updates

UI/Base/TextField.ts

@@ -0,0 +1,46 @@
+import {UIElement} from "../UIElement";
+import {UIEventSource} from "../UIEventSource";
+
+
+export class TextField extends UIElement {
+
+    public value = new UIEventSource("");
+    /**
+     * Pings and has the value data
+     */
+    public enterPressed = new UIEventSource<string>(undefined);
+    private _placeholder: UIEventSource<string>;
+
+    constructor(placeholder : UIEventSource<string>) {
+        super(placeholder);
+        this._placeholder = placeholder;
+    }
+
+    protected InnerRender(): string {
+        return "<form onSubmit='return false' class='form-text-field'>" +
+            "<input type='text' placeholder='"+this._placeholder.data+"' id='text-" + this.id + "'>" +
+            "</form>";
+    }
+
+    InnerUpdate(htmlElement: HTMLElement) {
+        super.InnerUpdate(htmlElement);
+        const field = document.getElementById('text-' + this.id);
+        const self = this;
+        field.oninput = () => {
+            self.value.setData(field.value);
+        };
+
+        field.addEventListener("keyup", function (event) {
+            if (event.key === "Enter") {
+                self.enterPressed.setData(field.value);
+            }
+        });
+    }
+
+    Clear() {
+        const field = document.getElementById('text-' + this.id);
+        if (field !== undefined) {
+            field.value = "";
+        }
+    }
+}

UI/SearchAndGo.ts

@@ -0,0 +1,73 @@
+import {UIElement} from "./UIElement";
+import {TextField} from "./Base/TextField";
+import {VariableUiElement} from "./Base/VariableUIElement";
+import {UIEventSource} from "./UIEventSource";
+import {FixedUiElement} from "./Base/FixedUiElement";
+import {Geocoding} from "../Logic/Geocoding";
+import {Basemap} from "../Logic/Basemap";
+import {VerticalCombine} from "./Base/VerticalCombine";
+
+
+export class SearchAndGo extends UIElement {
+
+    private _placeholder = new UIEventSource("Ga naar een locatie...")
+    private _searchField = new TextField(this._placeholder);
+
+    private _foundEntries = new UIEventSource([]);
+    private _map: Basemap;
+    private _goButton = new FixedUiElement("<img class='search-go' src='./assets/search.svg' alt='GO'>");
+
+    constructor(map: Basemap) {
+        super(undefined);
+        this._map = map;
+        this.ListenTo(this._foundEntries);
+
+        const self = this;
+        this._searchField.enterPressed.addCallback(() => {
+            self.RunSearch();
+        });
+
+        this._goButton.onClick(function () {
+            self.RunSearch();
+        });
+
+    }
+
+    // Triggered by 'enter' or onclick
+    private RunSearch() {
+        const searchString = this._searchField.value.data;
+        this._searchField.Clear();
+        this._placeholder.setData("Bezig met zoeken...");
+        const self = this;
+        Geocoding.Search(searchString, undefined, (result) => {
+
+            const bb = result[0].boundingbox;
+            const bounds = [
+                [bb[0], bb[2]],
+                [bb[1], bb[3]]
+            ]
+            self._map.map.fitBounds(bounds);
+            this._placeholder.setData("Ga naar locatie...");
+        });
+
+    }
+
+    protected InnerRender(): string {
+        // "<img class='search' src='./assets/search.svg' alt='Search'> " +
+        return this._goButton.Render() +
+            this._searchField.Render();
+
+    }
+
+    Update() {
+        super.Update();
+        this._searchField.Update();
+        this._goButton.Update();
+    }
+
+    Activate() {
+        super.Activate();
+        this._searchField.Activate();
+        this._goButton.Activate();
+    }
+}

UI/UIElement.ts

@@ -1,4 +1,5 @@
 import {UIEventSource} from "./UIEventSource";
+import {Playground} from "../Layers/Playground";
 
 export abstract class UIElement {
 
@@ -18,7 +19,7 @@ export abstract class UIElement {
 
 
     protected ListenTo(source: UIEventSource<any>) {
-        if(source === undefined){
+        if (source === undefined) {
             return;
         }
         const self = this;
@@ -27,22 +28,39 @@ export abstract class UIElement {
         })
     }
 
+    private _onClick: () => void;
+
+    public onClick(f: (() => void)) {
+        this._onClick = f;
+        this.Update();
+    }
+
     Update(): void {
-        let element  = document.getElementById(this.id);
+        let element = document.getElementById(this.id);
         if (element === null || element === undefined) {
             // The element is not painted
             return;
         }
-        
+
         element.innerHTML = this.InnerRender();
-        if(this._hideIfEmpty){
-            if(element.innerHTML === ""){
+        if (this._hideIfEmpty) {
+            if (element.innerHTML === "") {
                 element.parentElement.style.display = "none";
-            }else{
+            } else {
                 element.parentElement.style.display = undefined;
             }
         }
-        
+
+        if (this._onClick !== undefined) {
+            console.log("Registering")
+            const self = this;
+            element.onclick = () => {
+                console.log("Clicked!")
+                self._onClick();
+            }
+            element.style.cursor = "pointer";
+        }
+
         this.InnerUpdate(element);
     }