Intermediate refactoring

UI/Base/Button.ts

@@ -18,7 +18,7 @@ export class Button extends UIElement {
     }
 
 
-    protected InnerRender(): string {
+    InnerRender(): string {
 
         return "<form>" +
             "<button id='button-"+this.id+"' type='button' "+this._clss+">" + this._text.Render() +  "</button>" +

UI/Base/FixedUiElement.ts

@@ -8,7 +8,7 @@ export class FixedUiElement extends UIElement {
         this._html = html ?? "";
     }
 
-    protected InnerRender(): string {
+    InnerRender(): string {
         return this._html;
     }
 

UI/Base/VariableUIElement.ts

@@ -12,16 +12,8 @@ export class VariableUiElement extends UIElement {
 
     }
 
-    protected InnerRender(): string {
+    InnerRender(): string {
         return this._html.data;
     }
     
-    InnerUpdate(htmlElement: HTMLElement) {
-        super.InnerUpdate(htmlElement);
-        if(this._innerUpdate !== undefined){
-            this._innerUpdate(htmlElement);
-        }
-    }
-
-
 }

UI/Input/InputElementWrapper.ts

@@ -26,7 +26,7 @@ export class InputElementWrapper<T> extends InputElement<T>{
         return this.input.GetValue();
     }
 
-    protected InnerRender(): string {
+    InnerRender(): string {
         return this.pre.Render() + this.input.Render() + this.post.Render();
     }
 

UI/Input/RadioButton.ts

@@ -62,7 +62,7 @@ export class RadioButton<T> extends InputElement<T> {
         return 'radio-' + this.id + '-' + i;
     }
 
-    protected InnerRender(): string {
+    InnerRender(): string {
 
         let body = "";
         let i = 0;
@@ -83,14 +83,16 @@ export class RadioButton<T> extends InputElement<T> {
         if (t === undefined) {
             return;
         }
+        console.log("Trying to find an option for", t)
         // 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);
+                const radio = document.getElementById(this.IdFor(i));
                 // @ts-ignore
-                document.getElementById(this.IdFor(i)).checked = true;
+                radio?.checked = true;
                 return;
             }
 

UI/Input/TextField.ts

@@ -18,8 +18,8 @@ export class TextField<T> extends InputElement<T> {
 
     constructor(options: {
         placeholder?: string | UIElement,
-        toString?: (t: T) => string,
-        fromString?: (string: string) => T,
+        toString: (t: T) => string,
+        fromString: (string: string) => T,
         value?: UIEventSource<T>
     }) {
         super(undefined);
@@ -33,15 +33,18 @@ export class TextField<T> extends InputElement<T> {
         this.mappedValue.addCallback((t) => this.value.setData(options.toString(t)));
 
 
-        this._placeholder = 
-            typeof(options.placeholder) === "string" ? new FixedUiElement(options.placeholder) :
-                (options.placeholder ?? new FixedUiElement(""));
+        options.placeholder = options.placeholder ?? "";
+        if (options.placeholder instanceof UIElement) {
+            this._placeholder = options.placeholder
+        } else {
+            this._placeholder = new FixedUiElement(options.placeholder);
+        }
         this._toString = options.toString ?? ((t) => ("" + t));
 
 
         const self = this;
         this.mappedValue.addCallback((t) => {
-            if (t === undefined && t === null) {
+            if (t === undefined || t === null) {
                 return;
             }
             const field = document.getElementById('text-' + this.id);
@@ -57,7 +60,7 @@ export class TextField<T> extends InputElement<T> {
         return this.mappedValue;
     }
 
-    protected InnerRender(): string {
+     InnerRender(): string {
         return "<form onSubmit='return false' class='form-text-field'>" +
             "<input type='text' placeholder='" + this._placeholder.InnerRender() + "' id='text-" + this.id + "'>" +
             "</form>";

UI/MessageBoxHandler.ts

@@ -45,7 +45,6 @@ export class MessageBoxHandler {
     update() {
         const wrapper = document.getElementById("messagesboxmobilewrapper");
         const gen = this._uielement.data;
-        console.log("Generator: ", gen);
         if (gen === undefined) {
             wrapper.classList.add("hidden")
             if (location.hash !== "") {
@@ -55,10 +54,6 @@ export class MessageBoxHandler {
         }
         location.hash = "#element"
         wrapper.classList.remove("hidden");
-      /*  gen()
-            ?.HideOnEmpty(true)
-            ?.AttachTo("messagesbox")
-            ?.Activate();*/
 
         gen()
             ?.HideOnEmpty(true)

UI/SaveButton.ts

@@ -12,7 +12,7 @@ export class SaveButton extends UIElement {
         this._value = value;
     }
 
-    protected InnerRender(): string {
+    InnerRender(): string {
         if (this._value.data === undefined ||
             this._value.data === null
             || this._value.data === ""

UI/SimpleAddUI.ts

@@ -60,7 +60,7 @@ export class SimpleAddUI extends UIElement {
         }
     }
 
-    protected InnerRender(): string {
+    InnerRender(): string {
         const header = "<h2>Geen selectie</h2>" +
             "Je klikte ergens waar er nog geen gezochte data is.<br/>";
         if (!this._userDetails.data.loggedIn) {
@@ -83,10 +83,6 @@ export class SimpleAddUI extends UIElement {
     }
 
     InnerUpdate(htmlElement: HTMLElement) {
-        super.InnerUpdate(htmlElement);
-        for (const button of this._addButtons) {
-            button.Update();
-        }
         this._userDetails.data.osmConnection.registerActivateOsmAUthenticationClass();
     }
 

UI/UIElement.ts

@@ -100,7 +100,7 @@ export abstract class UIElement {
         return this;
     }
 
-    protected abstract InnerRender(): string;
+    public abstract InnerRender(): string;
 
     public Activate(): void {
         for (const i in this) {

UI/UserBadge.ts

@@ -58,7 +58,7 @@ export class UserBadge extends UIElement {
 
     }
 
-    protected InnerRender(): string {
+    InnerRender(): string {
         const user = this._userDetails.data;
         if (!user.loggedIn) {
             return "<div class='activate-osm-authentication'>Klik hier om aan te melden bij OSM</div>";