Lot's of small improvements

UI/Base/Button.ts

@@ -0,0 +1,38 @@
+import {UIElement} from "../UIElement";
+
+export class Button extends UIElement {
+    private _text: UIElement;
+    private _onclick: () => void;
+    private _clss: string;
+
+    constructor(text: UIElement, onclick: (() => void), clss: string = "") {
+        super(undefined);
+        this._text = text;
+        this._onclick = onclick;
+        if (clss !== "") {
+
+            this._clss = "class='" + clss + "'";
+        }else{
+            this._clss = "";
+        }
+    }
+
+
+    protected InnerRender(): string {
+
+        return "<form>" +
+            "<button id='button-"+this.id+"' type='button' "+this._clss+">" + this._text.Render() +  "</button>" +
+            "</form>";
+    }
+
+    InnerUpdate(htmlElement: HTMLElement) {
+        super.InnerUpdate(htmlElement);
+        const self = this;
+        console.log("Update for ", htmlElement)
+        document.getElementById("button-"+this.id).onclick = function(){
+            console.log("Clicked");
+            self._onclick();
+        }
+    }
+
+}

UI/Base/DropDownUI.ts

@@ -0,0 +1,47 @@
+import {UIEventSource} from "../UIEventSource";
+import {UIElement} from "../UIElement";
+
+export class DropDownUI extends UIElement {
+
+    selectedElement: UIEventSource<string>
+    private _label: string;
+    private _values: { value: string; shown: string }[];
+
+    constructor(label: string, values: { value: string, shown: string }[]) {
+        super(undefined);
+        this._label = label;
+        this._values = values;
+        this.selectedElement = new UIEventSource<string>(values[0].value);
+
+    }
+
+
+    protected InnerRender(): string {
+
+        let options = "";
+        for (const value of this._values) {
+            options += "<option value='" + value.value + "'>" + value.shown + "</option>"
+        }
+
+        return "<form>" +
+            "<label for='dropdown-" + this.id + "'>" + this._label + "</label>" +
+            "<select name='dropdown-" + this.id + "' id='dropdown-" + this.id + "'>" +
+            options +
+            "</select>" +
+            "</form>";
+    }
+
+    InnerUpdate(htmlElement: HTMLElement) {
+        super.InnerUpdate(htmlElement);
+
+        const self = this;
+        const e = document.getElementById("dropdown-" + this.id);
+        e.onchange = function () {
+            // @ts-ignore
+            const selectedValue = e.options[e.selectedIndex].value;
+
+            self.selectedElement.setData(selectedValue);
+        }
+    }
+
+}

UI/Base/FixedUiElement.ts

@@ -0,0 +1,16 @@
+import {UIElement} from "../UIElement";
+
+export class FixedUiElement extends UIElement {
+    private _html: string;
+
+    constructor(html: string) {
+        super(undefined);
+        this._html = html;
+    }
+
+    protected InnerRender(): string {
+        return this._html;
+    }
+
+
+}

UI/Base/UIRadioButton.ts

@@ -0,0 +1,106 @@
+import {UIElement} from "../UIElement";
+import {UIEventSource} from "../UIEventSource";
+import {FixedUiElement} from "./FixedUiElement";
+import $ from "jquery"
+
+export class UIRadioButton extends UIElement {
+
+    public readonly SelectedElementIndex: UIEventSource<{ index: number, value: string }>
+        = new UIEventSource<{ index: number, value: string }>(null);
+
+    private readonly _elements: UIEventSource<{ element: UIElement, value: string }[]>
+
+    constructor(elements: UIEventSource<{ element: UIElement, value: string }[]>) {
+        super(elements);
+        this._elements = elements;
+    }
+
+    static FromStrings(choices: string[]): UIRadioButton {
+        const wrapped = [];
+        for (const choice of choices) {
+            wrapped.push({
+                element: new FixedUiElement(choice),
+                value: choice
+            });
+        }
+        return new UIRadioButton(new UIEventSource<{ element: UIElement, value: string }[]>(wrapped))
+    }
+
+    private IdFor(i) {
+        return 'radio-' + this.id + '-' + i;
+    }
+
+    protected InnerRender(): string {
+
+        let body = "";
+        let i = 0;
+        for (const el of this._elements.data) {
+            const uielement = el.element;
+            const value = el.value;
+
+            const htmlElement =
+                '<input type="radio" id="' + this.IdFor(i) + '" name="radiogroup-' + this.id + '" value="' + value + '">' +
+                '<label for="' + this.IdFor(i) + '">' + uielement.Render() + '</label>' +
+                '<br>';
+            body += htmlElement;
+
+            i++;
+        }
+
+        return "<form id='" + this.id + "-form'>" + body + "</form>";
+    }
+
+    InnerUpdate(htmlElement: HTMLElement) {
+        super.InnerUpdate(htmlElement);
+        const self = this;
+
+        function checkButtons() {
+            for (let i = 0; i < self._elements.data.length; i++) {
+                const el = document.getElementById(self.IdFor(i));
+                // @ts-ignore
+                if (el.checked) {
+                    var v = {index: i, value: self._elements.data[i].value}
+                    self.SelectedElementIndex.setData(v);
+                }
+            }
+        }
+
+
+        const el = document.getElementById(this.id);
+        el.addEventListener("change",
+            function () {
+                checkButtons();
+            }
+        );
+
+        if (this.SelectedElementIndex.data == null) {
+            const el = document.getElementById(this.IdFor(0));
+            el.checked = true;
+            checkButtons();
+        } else {
+
+            // We check that what is selected matches the previous rendering
+            var checked = -1;
+            var expected = -1
+            for (let i = 0; i < self._elements.data.length; i++) {
+                const el = document.getElementById(self.IdFor(i));
+                // @ts-ignore
+                if (el.checked) {
+                    checked = i;
+                }
+                if (el.value === this.SelectedElementIndex.data.value) {
+                    expected = i;
+                }
+            }
+            if (expected != checked) {
+                const el = document.getElementById(this.IdFor(expected));
+                // @ts-ignore
+                el.checked = true;
+            }
+        }
+
+
+    }
+
+
+}

UI/Base/VariableUIElement.ts

@@ -0,0 +1,27 @@
+import {UIElement} from "../UIElement";
+import {UIEventSource} from "../UIEventSource";
+
+export class VariableUiElement extends UIElement {
+    private _html: UIEventSource<string>;
+    private _innerUpdate: (htmlElement: HTMLElement) => void;
+
+    constructor(html: UIEventSource<string>, innerUpdate : ((htmlElement : HTMLElement) => void) = undefined) {
+        super(html);
+        this._html = html;
+        this._innerUpdate = innerUpdate;
+
+    }
+
+    protected InnerRender(): string {
+        return this._html.data;
+    }
+    
+    InnerUpdate(htmlElement: HTMLElement) {
+        super.InnerUpdate(htmlElement);
+        if(this._innerUpdate !== undefined){
+            this._innerUpdate(htmlElement);
+        }
+    }
+
+
+}

UI/Base/VerticalCombine.ts

@@ -0,0 +1,40 @@
+import {UIElement} from "../UIElement";
+
+export class VerticalCombine extends UIElement {
+    private _elements: UIElement[];
+    private _className: string;
+
+    constructor(elements: UIElement[], className: string = undefined) {
+        super(undefined);
+        this._elements = elements;
+        this._className = className;
+    }
+
+    protected InnerRender(): string {
+        let html = "";
+        for (const element of this._elements) {
+            if (!element.IsEmpty()) {
+                html += "<div>" + element.Render() + "</div>";
+            }
+        }
+        if(html === ""){
+            return "";
+        }
+        if (this._className === undefined) {
+            return html;
+        }
+        return "<div class='"+this._className+"'>" + html + "</div>";
+    }
+    InnerUpdate(htmlElement: HTMLElement) {
+        for (const element of this._elements){
+            element.Update();
+        }
+    }
+    
+    Activate() {
+        for (const element of this._elements){
+            element.Activate();
+        }
+    }
+
+}