Osmwithspace/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

End of huge refactoring: cleaner input elements

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-07-20 21:03:55 +02:00
parent 14a5c7406a
commit 8026e99824
10 changed files with 59 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

5
Customizations/Layers/Bookcases.ts
View file

@ -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({

3
Customizations/Questions/NameInline.ts
View file

@ -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: "",

15
Customizations/TagRendering.ts
View file

@ -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>"

10
UI/Input/FixedInputElement.ts
View file

@ -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;
}
}

2
UI/Input/InputElement.ts
View file

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

4
UI/Input/InputElementWrapper.ts
View file

@ -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();
}

22
UI/Input/RadioButton.ts
View file

@ -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._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) {

17
UI/Input/TextField.ts
View file

@ -60,7 +60,14 @@ export class TextField<T> extends InputElement<T> {
return this.mappedValue;
}
InnerRender(): string {
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 + "'>" +
"</form>";
@ -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;
}

2
UI/UIEventSource.ts
View file

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

1
test.ts
View file

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