End of huge refactoring: cleaner input elements

Customizations/Layers/Bookcases.ts

@@ -119,7 +119,10 @@ export class Bookcases extends LayerDefinition {
                     key: "ref",
                     template: "Het referentienummer is $$$",
                     renderTemplate: "Gekend als {brand} <b>{ref}</b>"
-                }
+                },
+                mappings: [
+                    {k: new And([new  Tag("brand",""), new Tag("nobrand","yes"), new Tag("ref", "")]), txt: "Maakt geen deel uit van een groter netwerk"}
+                ]
             }).OnlyShowIf(new Tag("brand","*")),
 
             new TagRenderingOptions({

Customizations/Questions/NameInline.ts

@@ -1,5 +1,6 @@
 import {TagRenderingOptions} from "../TagRendering";
 import {And, Tag} from "../../Logic/TagsFilter";
+import {UIElement} from "../../UI/UIElement";
 
 
 export class NameInline extends TagRenderingOptions{
@@ -8,7 +9,7 @@ export class NameInline extends TagRenderingOptions{
          return string.charAt(0).toUpperCase() + string.slice(1);
     }
     
-    constructor(category: string) {
+    constructor(category: string ) {
         super({
             question: "",
 

Customizations/TagRendering.ts

@@ -262,8 +262,8 @@ class TagRendering extends UIElement implements TagDependantUIElement {
         if (this._question !== undefined) {
             this._editButton = new FixedUiElement("<img class='editbutton' src='./assets/pencil.svg' alt='edit'>")
                 .onClick(() => {
-                    self._questionElement.GetValue().setData(self.CurrentValue());
                     self._editMode.setData(true);
+                    self._questionElement.ShowValue(self.CurrentValue());
                 });
         }
 
@@ -297,7 +297,6 @@ class TagRendering extends UIElement implements TagDependantUIElement {
             
             const previousTexts= [];
             for (const mapping of options.mappings) {
-                console.log(mapping);
                 if(mapping.k === null){
                     continue;
                 }
@@ -306,7 +305,6 @@ class TagRendering extends UIElement implements TagDependantUIElement {
                 }
                 previousTexts.push(mapping.txt);
                 
-                console.log("PUshed")
                 elements.push(this.InputElementForMapping(mapping));
             }
         }
@@ -349,8 +347,8 @@ class TagRendering extends UIElement implements TagDependantUIElement {
                     return tag;
                 }
                 return new And([
-                        freeform.extraTags,
+                        tag,
-                        tag
+                        freeform.extraTags
                     ]
                 );
             };
@@ -362,7 +360,6 @@ class TagRendering extends UIElement implements TagDependantUIElement {
                 } else if (tag instanceof Tag) {
                     return tag.value
                 }
-                console.log("Could not decode tag to string", tag)
                 return undefined;
             }
 
@@ -392,10 +389,11 @@ class TagRendering extends UIElement implements TagDependantUIElement {
     }
 
     private CurrentValue(): TagsFilter {
+        console.log("Creating a current value...")
         const tags = TagUtils.proprtiesToKV(this._source.data);
 
         for (const oneOnOneElement of this._mapping.concat(this._renderMapping)) {
-            if (oneOnOneElement.k === null || oneOnOneElement.k.matches(tags)) {
+            if (oneOnOneElement.k !== null && oneOnOneElement.k.matches(tags)) {
                 return oneOnOneElement.k;
             }
         }
@@ -403,6 +401,7 @@ class TagRendering extends UIElement implements TagDependantUIElement {
             return undefined;
         }
 
+        console.log("Got a freeform tag:", new Tag(this._freeform.key, this._source.data[this._freeform.key]))
         return new Tag(this._freeform.key, this._source.data[this._freeform.key]);
     }
 
@@ -469,7 +468,7 @@ class TagRendering extends UIElement implements TagDependantUIElement {
             return "<div class='question'>" +
                 "<span class='question-text'>" + this._question + "</span>" +
                 (this._question !== "" ? "<br/>" : "") +
-                this._questionElement.Render() +
+               "<div>"+ this._questionElement.Render() +"</div>"+
                 this._skipButton.Render() +
                 this._saveButton.Render() +
                 "</div>"

UI/Input/FixedInputElement.ts

@@ -18,12 +18,18 @@ export class FixedInputElement<T> extends InputElement<T> {
         return this.value;
     }
     
-    protected InnerRender(): string {
+    ShowValue(t: T): boolean {
+        return false;
+    }
+
+    InnerRender(): string {
         return this.rendering.Render();
     }
 
     IsValid(t: T): boolean {
-        return t === this.value.data;
+        return t == this.value.data;
     }
     
+    
+
 }

UI/Input/InputElement.ts

@@ -8,4 +8,6 @@ export abstract class InputElement<T> extends UIElement{
     
     abstract IsValid(t: T) : boolean;
     
+    abstract ShowValue(t: T) : boolean;
+
 }

UI/Input/InputElementWrapper.ts

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

UI/Input/RadioButton.ts

@@ -31,7 +31,7 @@ export class RadioButton<T> extends InputElement<T> {
         ;
 
         this.value.addCallback((t) => {
-            self.SetCorrectValue(t);
+            self.ShowValue(t);
         })
 
 
@@ -79,11 +79,13 @@ export class RadioButton<T> extends InputElement<T> {
         return "<form id='" + this.id + "-form'>" + body + "</form>";
     }
 
-    private SetCorrectValue(t: T) {
+    public ShowValue(t: T): boolean {
         if (t === undefined) {
-            return;
+            return false;
+        }
+        if (!this.IsValid(t)) {
+            return false;
         }
-        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];
@@ -119,9 +121,15 @@ export class RadioButton<T> extends InputElement<T> {
                 checkButtons();
             }
         );
-
+        if (this._selectedElementIndex.data !== null) {
-        if (this._selectFirstAsDefault) {
+            const el = document.getElementById(this.IdFor(this._selectedElementIndex.data));
-            this.SetCorrectValue(this.value.data);
+            if (el) {
+                // @ts-ignore
+                el.checked = true;
+                checkButtons();
+            }
+        } else if (this._selectFirstAsDefault) {
+            this.ShowValue(this.value.data);
             if (this._selectedElementIndex.data === null || this._selectedElementIndex.data === undefined) {
                 const el = document.getElementById(this.IdFor(0));
                 if (el) {

UI/Input/TextField.ts

@@ -60,6 +60,13 @@ export class TextField<T> extends InputElement<T> {
         return this.mappedValue;
     }
 
+    ShowValue(t: T): boolean {
+        if (!this.IsValid(t)) {
+            return false;
+        }
+        this.mappedValue.setData(t);
+    }
+
     InnerRender(): string {
         return "<form onSubmit='return false' class='form-text-field'>" +
             "<input type='text' placeholder='" + this._placeholder.InnerRender() + "' id='text-" + this.id + "'>" +
@@ -68,7 +75,7 @@ export class TextField<T> extends InputElement<T> {
 
     InnerUpdate(htmlElement: HTMLElement) {
         const field = document.getElementById('text-' + this.id);
-        if(field === null){
+        if (field === null) {
             return;
         }
         const self = this;
@@ -84,10 +91,16 @@ export class TextField<T> extends InputElement<T> {
             }
         });
 
+        if (this.IsValid(this.mappedValue.data)) {
+            // @ts-ignore
+            field.value = this._toString(this.mappedValue.data);
+        }
+
 
     }
 
     IsValid(t: T): boolean {
+        console.log("TXT IS valid?",t,this._toString(t))
         if(t === undefined || t === null){
             return false;
         }

UI/UIEventSource.ts

@@ -1,6 +1,6 @@
 export class UIEventSource<T>{
     
-    public data : T;
+    public data: T;
     private _callbacks = [];
 
     constructor(data: T) {

test.ts

@@ -22,4 +22,5 @@ const buttons = new RadioButton<number>(
     ], false
 ).AttachTo("maindiv");
 
+
 buttons.GetValue().addCallback(console.log);