From 00d95c4be1498266438bd6631bd78a6ed98cf4af Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@gmail.com>
Date: Mon, 20 Jul 2020 21:39:07 +0200
Subject: [PATCH] Finishing refactoring

---
 Customizations/TagRendering.ts |  2 +-
 UI/ImageUploadFlow.ts          |  4 +-
 UI/Input/DropDown.ts           | 94 ++++++++++++++++++++++------------
 UI/Input/InputElement.ts       |  2 -
 UI/Input/RadioButton.ts        |  3 +-
 UI/Input/TextField.ts          | 13 +++--
 UI/UIElement.ts                |  3 +-
 test.ts                        | 22 ++++----
 8 files changed, 86 insertions(+), 57 deletions(-)

diff --git a/Customizations/TagRendering.ts b/Customizations/TagRendering.ts
index 231c820..5f45a26 100644
--- a/Customizations/TagRendering.ts
+++ b/Customizations/TagRendering.ts
@@ -263,7 +263,7 @@ class TagRendering extends UIElement implements TagDependantUIElement {
             this._editButton = new FixedUiElement("<img class='editbutton' src='./assets/pencil.svg' alt='edit'>")
                 .onClick(() => {
                     self._editMode.setData(true);
-                    self._questionElement.ShowValue(self.CurrentValue());
+                    self._questionElement.GetValue().setData(self.CurrentValue());
                 });
         }
 
diff --git a/UI/ImageUploadFlow.ts b/UI/ImageUploadFlow.ts
index e332bc2..5a55f53 100644
--- a/UI/ImageUploadFlow.ts
+++ b/UI/ImageUploadFlow.ts
@@ -41,7 +41,7 @@ export class ImageUploadFlow extends UIElement {
             preferedLicense
         );
         this._licensePicker = licensePicker;
-        this._selectedLicence = licensePicker.selectedElement;
+        this._selectedLicence = licensePicker.GetValue();
 
 
         const licenseExplanations = {
@@ -62,7 +62,7 @@ export class ImageUploadFlow extends UIElement {
     }
 
 
-    protected InnerRender(): string {
+    InnerRender(): string {
 
         if (!this._userdetails.data.loggedIn) {
             return "<div class='activate-osm-authentication'>Gelieve je aan te melden om een foto toe te voegen of vragen te beantwoorden</div>";
diff --git a/UI/Input/DropDown.ts b/UI/Input/DropDown.ts
index 78e2896..fb15f02 100644
--- a/UI/Input/DropDown.ts
+++ b/UI/Input/DropDown.ts
@@ -1,35 +1,61 @@
 import {UIEventSource} from "../UIEventSource";
 import {UIElement} from "../UIElement";
+import {InputElement} from "./InputElement";
+import instantiate = WebAssembly.instantiate;
+import {FixedUiElement} from "../Base/FixedUiElement";
 
-export class DropDown extends UIElement {
+export class DropDown<T> extends InputElement<T> {
 
-    selectedElement: UIEventSource<string>
-    private _label: string;
-    private _values: { value: string; shown: string }[];
+    private readonly _label: string;
+    private readonly _values: { value: T; shown: UIElement }[];
 
-    constructor(label: string, values: { value: string, shown: string }[],
-                selectedElement: UIEventSource<string> = undefined) {
+    private readonly _value;
+
+    constructor(label: string,
+                values: { value: T, shown: string | UIElement }[],
+                value: UIEventSource<T> = undefined) {
         super(undefined);
+        this._value = value ?? new UIEventSource<T>(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)
+        this._values = values.map(v => {
+                return {
+                    value: v.value,
+                    shown: v.shown instanceof UIElement ? v.shown : new FixedUiElement(v.shown)
+                }
+            }
+        );
+        this.ListenTo(this._value)
+
+    }
+
+    GetValue(): UIEventSource<T> {
+        return this._value;
+    }
+
+    ShowValue(t: T): boolean {
+        if (!this.IsValid(t)) {
+            return false;
         }
-        const self = this;
-        this.selectedElement.addCallback(() => {
-            self.InnerUpdate();
-        });
+        this._value.setData(t);
+    }
+
+    IsValid(t: T): boolean {
+        for (const value of this._values) {
+            if (value.value === t) {
+                return true;
+            }
+        }
+        return false
     }
 
 
-    protected InnerRender(): string {
+    InnerRender(): string {
 
         let options = "";
-        for (const value of this._values) {
-            options += "<option value='" + value.value + "'>" + value.shown + "</option>"
-        }
+        for (let i = 0; i < this._values.length; i++) {
+            options += "<option value='" + i + "'>" + this._values[i].shown.InnerRender() + "</option>"
 
+        }
         return "<form>" +
             "<label for='dropdown-" + this.id + "'>" + this._label + "</label>" +
             "<select name='dropdown-" + this.id + "' id='dropdown-" + this.id + "'>" +
@@ -38,24 +64,26 @@ export class DropDown extends UIElement {
             "</form>";
     }
 
-    InnerUpdate() {
+    protected InnerUpdate(element) {
+
+        var e = document.getElementById("dropdown-" + this.id);
         const self = this;
-        const e = document.getElementById("dropdown-" + this.id);
-        if(e === null){
-            return;
-        }
-        // @ts-ignore
-        if (this.selectedElement.data !== e.value) {
+        e.onchange = (() => {
             // @ts-ignore
-            e.value = this.selectedElement.data;
+            var index = parseInt(e.selectedIndex);
+            self._value.setData(self._values[index].value);
+
+        });
+
+        var t = this._value.data;
+        for (let i = 0; i < this._values.length ; i++) {
+            const value = this._values[i];
+            if (value.value == t) {
+                // @ts-ignore
+                e.selectedIndex = i;
+            }
         }
-        e.onchange = function () {
-            // @ts-ignore
-            const selectedValue = e.options[e.selectedIndex].value;
-            console.log("Putting data", selectedValue)
-            self.selectedElement.setData(selectedValue);
-        }
-        
+
     }
 
 }
\ No newline at end of file
diff --git a/UI/Input/InputElement.ts b/UI/Input/InputElement.ts
index 20d3c45..8278314 100644
--- a/UI/Input/InputElement.ts
+++ b/UI/Input/InputElement.ts
@@ -8,6 +8,4 @@ export abstract class InputElement<T> extends UIElement{
     
     abstract IsValid(t: T) : boolean;
     
-    abstract ShowValue(t: T) : boolean;
-
 }
\ No newline at end of file
diff --git a/UI/Input/RadioButton.ts b/UI/Input/RadioButton.ts
index 3cec9c6..8d8b5cc 100644
--- a/UI/Input/RadioButton.ts
+++ b/UI/Input/RadioButton.ts
@@ -27,8 +27,7 @@ export class RadioButton<T> extends InputElement<T> {
                         return elements[selectedIndex].GetValue()
                     }
                 }
-            ), elements.map(e => e.GetValue()))
-        ;
+            ), elements.map(e => e.GetValue()));
 
         this.value.addCallback((t) => {
             self.ShowValue(t);
diff --git a/UI/Input/TextField.ts b/UI/Input/TextField.ts
index bc1d857..0d7eee2 100644
--- a/UI/Input/TextField.ts
+++ b/UI/Input/TextField.ts
@@ -23,9 +23,11 @@ export class TextField<T> extends InputElement<T> {
         value?: UIEventSource<T>
     }) {
         super(undefined);
+        const self = this;
         this.value = new UIEventSource<string>("");
-        this.mappedValue = options?.value ?? new UIEventSource<T>(undefined);
 
+        this.mappedValue = options?.value ?? new UIEventSource<T>(undefined);
+        this.mappedValue.addCallback(() => self.InnerUpdate());
 
         // @ts-ignore
         this._fromString = options.fromString ?? ((str) => (str))
@@ -42,7 +44,6 @@ export class TextField<T> extends InputElement<T> {
         this._toString = options.toString ?? ((t) => ("" + t));
 
 
-        const self = this;
         this.mappedValue.addCallback((t) => {
             if (t === undefined || t === null) {
                 return;
@@ -73,7 +74,7 @@ export class TextField<T> extends InputElement<T> {
             "</form>";
     }
 
-    InnerUpdate(htmlElement: HTMLElement) {
+    InnerUpdate() {
         const field = document.getElementById('text-' + this.id);
         if (field === null) {
             return;
@@ -92,8 +93,12 @@ export class TextField<T> extends InputElement<T> {
         });
 
         if (this.IsValid(this.mappedValue.data)) {
+            const expected = this._toString(this.mappedValue.data);
             // @ts-ignore
-            field.value = this._toString(this.mappedValue.data);
+            if (field.value !== expected) {
+                // @ts-ignore
+                field.value = expected;
+            }
         }
 
 
diff --git a/UI/UIElement.ts b/UI/UIElement.ts
index 700cc5c..a0b9d49 100644
--- a/UI/UIElement.ts
+++ b/UI/UIElement.ts
@@ -83,7 +83,8 @@ export abstract class UIElement {
     }
     
     // Called after the HTML has been replaced. Can be used for css tricks
-    InnerUpdate(htmlElement : HTMLElement){}
+   protected InnerUpdate(htmlElement: HTMLElement) {
+   }
 
     Render(): string {
         return "<span class='uielement' id='" + this.id + "'>" + this.InnerRender() + "</span>"
diff --git a/test.ts b/test.ts
index 18b43e1..c031b57 100644
--- a/test.ts
+++ b/test.ts
@@ -10,17 +10,15 @@ import {VariableUiElement} from "./UI/Base/VariableUIElement";
 import {TextField} from "./UI/Input/TextField";
 import {FixedInputElement} from "./UI/Input/FixedInputElement";
 import {RadioButton} from "./UI/Input/RadioButton";
+import {DropDown} from "./UI/Input/DropDown";
+import {FixedUiElement} from "./UI/Base/FixedUiElement";
 
-
-const buttons = new RadioButton<number>(
-    [new FixedInputElement("Five", 5),
-        new FixedInputElement("Ten", 10),
-        new TextField<number>({
-            fromString: (str) => parseInt(str),
-            toString: (i) => ("" + i),
-        })
-    ], false
+const dropdown = new RadioButton<string>(
+    [new FixedInputElement("5","5"),
+    new TextField({
+        toString: ((str) => str),
+        fromString: ((str) => str),
+    })]
 ).AttachTo("maindiv");
-
-
-buttons.GetValue().addCallback(console.log);
\ No newline at end of file
+const value = dropdown.GetValue();
+value.setData("asldkjvmqlksjdf")
\ No newline at end of file