From 8026e99824c0d04f37e59407ecbac2ecf50e5bcb Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Mon, 20 Jul 2020 21:03:55 +0200 Subject: [PATCH] End of huge refactoring: cleaner input elements --- Customizations/Layers/Bookcases.ts | 5 ++++- Customizations/Questions/NameInline.ts | 3 ++- Customizations/TagRendering.ts | 15 +++++++-------- UI/Input/FixedInputElement.ts | 10 ++++++++-- UI/Input/InputElement.ts | 2 ++ UI/Input/InputElementWrapper.ts | 4 ++++ UI/Input/RadioButton.ts | 22 +++++++++++++++------- UI/Input/TextField.ts | 17 +++++++++++++++-- UI/UIEventSource.ts | 2 +- test.ts | 1 + 10 files changed, 59 insertions(+), 22 deletions(-) diff --git a/Customizations/Layers/Bookcases.ts b/Customizations/Layers/Bookcases.ts index 16f78d9..7a2311c 100644 --- a/Customizations/Layers/Bookcases.ts +++ b/Customizations/Layers/Bookcases.ts @@ -119,7 +119,10 @@ export class Bookcases extends LayerDefinition { key: "ref", template: "Het referentienummer is $$$", renderTemplate: "Gekend als {brand} {ref}" - } + }, + 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({ diff --git a/Customizations/Questions/NameInline.ts b/Customizations/Questions/NameInline.ts index 83458a5..5c9d4e6 100644 --- a/Customizations/Questions/NameInline.ts +++ b/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: "", diff --git a/Customizations/TagRendering.ts b/Customizations/TagRendering.ts index 2be71e0..231c820 100644 --- a/Customizations/TagRendering.ts +++ b/Customizations/TagRendering.ts @@ -262,8 +262,8 @@ class TagRendering extends UIElement implements TagDependantUIElement { if (this._question !== undefined) { this._editButton = new FixedUiElement("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 "
" + "" + this._question + "" + (this._question !== "" ? "
" : "") + - this._questionElement.Render() + + "
"+ this._questionElement.Render() +"
"+ this._skipButton.Render() + this._saveButton.Render() + "
" diff --git a/UI/Input/FixedInputElement.ts b/UI/Input/FixedInputElement.ts index d3ea566..0cada25 100644 --- a/UI/Input/FixedInputElement.ts +++ b/UI/Input/FixedInputElement.ts @@ -17,13 +17,19 @@ export class FixedInputElement extends InputElement { GetValue(): UIEventSource { return this.value; } + + ShowValue(t: T): boolean { + return false; + } - protected InnerRender(): string { + InnerRender(): string { return this.rendering.Render(); } IsValid(t: T): boolean { - return t === this.value.data; + return t == this.value.data; } + + } \ No newline at end of file diff --git a/UI/Input/InputElement.ts b/UI/Input/InputElement.ts index 62e0969..20d3c45 100644 --- a/UI/Input/InputElement.ts +++ b/UI/Input/InputElement.ts @@ -7,5 +7,7 @@ export abstract class InputElement extends UIElement{ abstract GetValue() : UIEventSource; abstract IsValid(t: T) : boolean; + + abstract ShowValue(t: T) : boolean; } \ No newline at end of file diff --git a/UI/Input/InputElementWrapper.ts b/UI/Input/InputElementWrapper.ts index 979a712..905a948 100644 --- a/UI/Input/InputElementWrapper.ts +++ b/UI/Input/InputElementWrapper.ts @@ -25,6 +25,10 @@ export class InputElementWrapper extends InputElement{ GetValue(): UIEventSource { return this.input.GetValue(); } + + ShowValue(t: T) { + return this.input.ShowValue(t); + } InnerRender(): string { return this.pre.Render() + this.input.Render() + this.post.Render(); diff --git a/UI/Input/RadioButton.ts b/UI/Input/RadioButton.ts index 647fda1..3cec9c6 100644 --- a/UI/Input/RadioButton.ts +++ b/UI/Input/RadioButton.ts @@ -31,7 +31,7 @@ export class RadioButton extends InputElement { ; this.value.addCallback((t) => { - self.SetCorrectValue(t); + self.ShowValue(t); }) @@ -79,11 +79,13 @@ export class RadioButton extends InputElement { return "
" + body + "
"; } - 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 extends InputElement { checkButtons(); } ); - - if (this._selectFirstAsDefault) { - this.SetCorrectValue(this.value.data); + if (this._selectedElementIndex.data !== null) { + const el = document.getElementById(this.IdFor(this._selectedElementIndex.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) { diff --git a/UI/Input/TextField.ts b/UI/Input/TextField.ts index 090dc45..bc1d857 100644 --- a/UI/Input/TextField.ts +++ b/UI/Input/TextField.ts @@ -60,7 +60,14 @@ export class TextField extends InputElement { return this.mappedValue; } - InnerRender(): string { + ShowValue(t: T): boolean { + if (!this.IsValid(t)) { + return false; + } + this.mappedValue.setData(t); + } + + InnerRender(): string { return "
" + "" + "
"; @@ -68,7 +75,7 @@ export class TextField extends InputElement { 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 extends InputElement { } }); + 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; } diff --git a/UI/UIEventSource.ts b/UI/UIEventSource.ts index 1e4aeb5..54902a0 100644 --- a/UI/UIEventSource.ts +++ b/UI/UIEventSource.ts @@ -1,6 +1,6 @@ export class UIEventSource{ - public data : T; + public data: T; private _callbacks = []; constructor(data: T) { diff --git a/test.ts b/test.ts index d71a3ff..18b43e1 100644 --- a/test.ts +++ b/test.ts @@ -22,4 +22,5 @@ const buttons = new RadioButton( ], false ).AttachTo("maindiv"); + buttons.GetValue().addCallback(console.log); \ No newline at end of file