Intermediary refactoring

UI/Input/DropDown.ts

@@ -0,0 +1,61 @@
+import {UIEventSource} from "../UIEventSource";
+import {UIElement} from "../UIElement";
+
+export class DropDown extends UIElement {
+
+    selectedElement: UIEventSource<string>
+    private _label: string;
+    private _values: { value: string; shown: string }[];
+
+    constructor(label: string, values: { value: string, shown: string }[],
+                selectedElement: UIEventSource<string> = undefined) {
+        super(undefined);
+        this._label = label;
+        this._values = values;
+        this.selectedElement = selectedElement ?? new UIEventSource<string>(values[0].value);
+        if(selectedElement.data === undefined){
+            this.selectedElement.setData(values[0].value)
+        }
+        const self = this;
+        this.selectedElement.addCallback(() => {
+            self.InnerUpdate();
+        });
+    }
+
+
+    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() {
+        const self = this;
+        const e = document.getElementById("dropdown-" + this.id);
+        if(e === null){
+            return;
+        }
+        // @ts-ignore
+        if (this.selectedElement.data !== e.value) {
+            // @ts-ignore
+            e.value = this.selectedElement.data;
+        }
+        e.onchange = function () {
+            // @ts-ignore
+            const selectedValue = e.options[e.selectedIndex].value;
+            console.log("Putting data", selectedValue)
+            self.selectedElement.setData(selectedValue);
+        }
+        
+    }
+
+}

UI/Input/FixedInputElement.ts

@@ -0,0 +1,29 @@
+import {InputElement} from "./InputElement";
+import {UIEventSource} from "../UIEventSource";
+import {UIElement} from "../UIElement";
+import {FixedUiElement} from "../Base/FixedUiElement";
+
+
+export class FixedInputElement<T> extends InputElement<T> {
+    private rendering: UIElement;
+    private value: UIEventSource<T>;
+
+    constructor(rendering: UIElement | string, value: T) {
+        super(undefined);
+        this.value = new UIEventSource<T>(value);
+        this.rendering = typeof (rendering) === 'string' ? new FixedUiElement(rendering) : rendering;
+    }
+
+    GetValue(): UIEventSource<T> {
+        return this.value;
+    }
+
+    protected InnerRender(): string {
+        return this.rendering.Render();
+    }
+
+    IsValid(t: T): boolean {
+        return t === this.value.data;
+    }
+
+}

UI/Input/InputElement.ts

@@ -0,0 +1,11 @@
+import {UIElement} from "../UIElement";
+import {UIEventSource} from "../UIEventSource";
+import {FixedUiElement} from "../Base/FixedUiElement";
+
+export abstract class InputElement<T> extends UIElement{
+    
+    abstract GetValue() : UIEventSource<T>;
+    
+    abstract IsValid(t: T) : boolean;
+
+}

UI/Input/InputElementWrapper.ts

@@ -0,0 +1,37 @@
+import {InputElement} from "./InputElement";
+import {UIEventSource} from "../UIEventSource";
+import {UIElement} from "../UIElement";
+import {FixedUiElement} from "../Base/FixedUiElement";
+
+
+export class InputElementWrapper<T> extends InputElement<T>{
+    private pre: UIElement ;
+    private input: InputElement<T>;
+    private post: UIElement ;
+    
+    constructor(
+        pre: UIElement | string,
+        input: InputElement<T>,
+        post: UIElement | string
+        
+    ) {
+        super(undefined);
+        this.pre = typeof(pre) === 'string' ?  new FixedUiElement(pre) : pre
+        this.input = input;
+        this.post =typeof(post) === 'string' ?  new FixedUiElement(post) : post
+    }
+    
+    
+    GetValue(): UIEventSource<T> {
+        return this.input.GetValue();
+    }
+
+    protected InnerRender(): string {
+        return this.pre.Render() + this.input.Render() + this.post.Render();
+    }
+
+    IsValid(t: T): boolean {
+        return this.input.IsValid(t);
+    }
+    
+}

UI/Input/RadioButton.ts

@@ -0,0 +1,137 @@
+import {UIElement} from "../UIElement";
+import {UIEventSource} from "../UIEventSource";
+import {InputElement} from "./InputElement";
+
+export class RadioButton<T> extends InputElement<T> {
+
+    private readonly _selectedElementIndex: UIEventSource<number>
+        = new UIEventSource<number>(null);
+
+    private value: UIEventSource<T>;
+    private readonly _elements: InputElement<T>[]
+    private _selectFirstAsDefault: boolean;
+
+
+    constructor(elements: InputElement<T>[],
+                selectFirstAsDefault = true) {
+        super(undefined);
+        this._elements = elements;
+        this._selectFirstAsDefault = selectFirstAsDefault;
+        const self = this;
+
+
+        this.value =
+            UIEventSource.flatten(this._selectedElementIndex.map(
+                (selectedIndex) => {
+                    if (selectedIndex !== undefined && selectedIndex !== null) {
+                        return elements[selectedIndex].GetValue()
+                    }
+                }
+            ), elements.map(e => e.GetValue()))
+        ;
+
+        this.value.addCallback((t) => {
+            self.SetCorrectValue(t);
+        })
+
+
+        for (let i = 0; i < elements.length; i++) {
+            // If an element is clicked, the radio button corresponding with it should be selected as well
+            elements[i].onClick(() => {
+                self._selectedElementIndex.setData(i);
+            });
+        }
+
+    }
+
+    IsValid(t: T): boolean {
+        for (const inputElement of this._elements) {
+            if (inputElement.IsValid(t)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    GetValue(): UIEventSource<T> {
+        return this.value;
+    }
+
+
+    private IdFor(i) {
+        return 'radio-' + this.id + '-' + i;
+    }
+
+    protected InnerRender(): string {
+
+        let body = "";
+        let i = 0;
+        for (const el of this._elements) {
+            const htmlElement =
+                '<input type="radio" id="' + this.IdFor(i) + '" name="radiogroup-' + this.id + '">' +
+                '<label for="' + this.IdFor(i) + '">' + el.Render() + '</label>' +
+                '<br>';
+            body += htmlElement;
+
+            i++;
+        }
+
+        return "<form id='" + this.id + "-form'>" + body + "</form>";
+    }
+
+    private SetCorrectValue(t: T) {
+        if (t === undefined) {
+            return;
+        }
+        // We check that what is selected matches the previous rendering
+        for (let i = 0; i < this._elements.length; i++) {
+            const e = this._elements[i];
+            if (e.IsValid(t)) {
+                this._selectedElementIndex.setData(i);
+                e.GetValue().setData(t);
+                // @ts-ignore
+                document.getElementById(this.IdFor(i)).checked = true;
+                return;
+            }
+
+        }
+    }
+
+    InnerUpdate(htmlElement: HTMLElement) {
+        const self = this;
+
+        function checkButtons() {
+            for (let i = 0; i < self._elements.length; i++) {
+                const el = document.getElementById(self.IdFor(i));
+                // @ts-ignore
+                if (el.checked) {
+                    self._selectedElementIndex.setData(i);
+                }
+            }
+        }
+
+
+        const el = document.getElementById(this.id);
+        el.addEventListener("change",
+            function () {
+                checkButtons();
+            }
+        );
+
+        if (this._selectFirstAsDefault) {
+            this.SetCorrectValue(this.value.data);
+            if (this._selectedElementIndex.data === null || this._selectedElementIndex.data === undefined) {
+                const el = document.getElementById(this.IdFor(0));
+                if (el) {
+                    // @ts-ignore
+                    el.checked = true;
+                    checkButtons();
+                }
+            }
+        }
+
+
+    };
+
+
+}

UI/Input/TextField.ts

@@ -0,0 +1,102 @@
+import {UIElement} from "../UIElement";
+import {UIEventSource} from "../UIEventSource";
+import {InputElement} from "./InputElement";
+import {FixedUiElement} from "../Base/FixedUiElement";
+
+
+export class TextField<T> extends InputElement<T> {
+
+    private value: UIEventSource<string>;
+    private mappedValue: UIEventSource<T>;
+    /**
+     * Pings and has the value data
+     */
+    public enterPressed = new UIEventSource<string>(undefined);
+    private _placeholder: UIElement;
+    private _fromString?: (string: string) => T;
+    private _toString: (t: T) => string;
+
+    constructor(options: {
+        placeholder?: string | UIElement,
+        toString?: (t: T) => string,
+        fromString?: (string: string) => T,
+        value?: UIEventSource<T>
+    }) {
+        super(undefined);
+        this.value = new UIEventSource<string>("");
+        this.mappedValue = options?.value ?? new UIEventSource<T>(undefined);
+
+
+        // @ts-ignore
+        this._fromString = options.fromString ?? ((str) => (str))
+        this.value.addCallback((str) => this.mappedValue.setData(options.fromString(str)));
+        this.mappedValue.addCallback((t) => this.value.setData(options.toString(t)));
+
+
+        this._placeholder = 
+            typeof(options.placeholder) === "string" ? new FixedUiElement(options.placeholder) :
+                (options.placeholder ?? new FixedUiElement(""));
+        this._toString = options.toString ?? ((t) => ("" + t));
+
+
+        const self = this;
+        this.mappedValue.addCallback((t) => {
+            if (t === undefined && t === null) {
+                return;
+            }
+            const field = document.getElementById('text-' + this.id);
+            if (field === undefined || field === null) {
+                return;
+            }
+            // @ts-ignore
+            field.value = options.toString(t);
+        })
+    }
+
+    GetValue(): UIEventSource<T> {
+        return this.mappedValue;
+    }
+
+    protected InnerRender(): string {
+        return "<form onSubmit='return false' class='form-text-field'>" +
+            "<input type='text' placeholder='" + this._placeholder.InnerRender() + "' id='text-" + this.id + "'>" +
+            "</form>";
+    }
+
+    InnerUpdate(htmlElement: HTMLElement) {
+        const field = document.getElementById('text-' + this.id);
+        if(field === null){
+            return;
+        }
+        const self = this;
+        field.oninput = () => {
+            // @ts-ignore
+            self.value.setData(field.value);
+        };
+
+        field.addEventListener("keyup", function (event) {
+            if (event.key === "Enter") {
+                // @ts-ignore
+                self.enterPressed.setData(field.value);
+            }
+        });
+
+
+    }
+
+    IsValid(t: T): boolean {
+        if(t === undefined || t === null){
+            return false;
+        }
+        const result = this._toString(t);
+        return result !== undefined && result !== null;
+    }
+
+    Clear() {
+        const field = document.getElementById('text-' + this.id);
+        if (field !== undefined) {
+            // @ts-ignore
+            field.value = "";
+        }
+    }
+}