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

More fixes

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-06-16 21:23:03 +02:00
parent 2ae380f1a6
commit 9a73ae4c47
21 changed files with 203 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

118
UI/Input/Checkboxes.ts
View file

@ -7,77 +7,83 @@ import BaseUIElement from "../BaseUIElement";
* Supports multi-input
*/
export default class CheckBoxes extends InputElement<number[]> {
IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly _element : HTMLElement
private static _nextId = 0;
private readonly value: UIEventSource<number[]>
constructor(elements: BaseUIElement[], value =new UIEventSource<number[]>([])) {
IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly value: UIEventSource<number[]>
private readonly _elements: BaseUIElement[];
constructor(elements: BaseUIElement[], value = new UIEventSource<number[]>([])) {
super();
this.value = value;
elements = Utils.NoNull(elements);
const el = document.createElement("form")
for (let i = 0; i < elements.length; i++) {
let inputI = elements[i];
const input = document.createElement("input")
const id = CheckBoxes._nextId
CheckBoxes._nextId ++;
input.id = "checkbox"+id
this._elements = Utils.NoNull(elements);
this.SetClass("flex flex-col")
input.type = "checkbox"
const label = document.createElement("label")
label.htmlFor = input.id
label.appendChild(inputI.ConstructElement())
value.addCallbackAndRun(selectedValues =>{
if(selectedValues === undefined){
return;
}
if(selectedValues.indexOf(i) >= 0){
input.checked = true;
}
})
input.onchange = () => {
const index = value.data.indexOf(i);
if(input.checked && index < 0){
value.data.push(i);
value.ping();
}else if(index >= 0){
value.data.splice(index,1);
value.ping();
}
}
el.appendChild(input)
el.appendChild(document.createElement("br"))
}
}
protected InnerConstructElement(): HTMLElement {
return this._element
}
IsValid(ts: number[]): boolean {
return ts !== undefined;
}
GetValue(): UIEventSource<number[]> {
return this.value;
}
protected InnerConstructElement(): HTMLElement {
const el = document.createElement("form")
const value = this.value;
const elements = this._elements;
for (let i = 0; i < elements.length; i++) {
let inputI = elements[i];
const input = document.createElement("input")
const id = CheckBoxes._nextId
CheckBoxes._nextId++;
input.id = "checkbox" + id
input.type = "checkbox"
input.classList.add("p-1","cursor-pointer","ml-3","pl-3")
const label = document.createElement("label")
label.htmlFor = input.id
label.appendChild(inputI.ConstructElement())
label.classList.add("block","w-full","p-2","cursor-pointer","bg-red")
const wrapper = document.createElement("span")
wrapper.classList.add("flex","w-full","border", "border-gray-400")
wrapper.appendChild(input)
wrapper.appendChild(label)
el.appendChild(wrapper)
value.addCallbackAndRun(selectedValues => {
if (selectedValues === undefined) {
return;
}
if (selectedValues.indexOf(i) >= 0) {
input.checked = true;
}
})
input.onchange = () => {
// Index = index in the list of already checked items
const index = value.data.indexOf(i);
if (input.checked && index < 0) {
value.data.push(i);
value.ping();
} else if (index >= 0) {
value.data.splice(index, 1);
value.ping();
}
}
}
return el;
}
}

1
UI/Input/DirectionInput.ts
View file

@ -18,6 +18,7 @@ export default class DirectionInput extends InputElement<string> {
this.value = value ?? new UIEventSource<string>(undefined);
}
protected InnerConstructElement(): HTMLElement {

47
UI/Input/RadioButton.ts
View file

@ -7,12 +7,19 @@ export class RadioButton<T> extends InputElement<T> {
IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly value: UIEventSource<T>;
private _elements: InputElement<T>[];
private readonly _element: HTMLElement;
private _selectFirstAsDefault: boolean;
constructor(elements: InputElement<T>[],
selectFirstAsDefault = true) {
super()
elements = Utils.NoNull(elements);
this._selectFirstAsDefault = selectFirstAsDefault;
this._elements = Utils.NoNull(elements);
this.value = new UIEventSource<T>(undefined)
}
protected InnerConstructElement(): HTMLElement {
const elements = this._elements;
const selectFirstAsDefault = this._selectFirstAsDefault;
const selectedElementIndex: UIEventSource<number> = new UIEventSource<number>(null);
const value =
UIEventSource.flatten(selectedElementIndex.map(
@ -22,6 +29,7 @@ export class RadioButton<T> extends InputElement<T> {
}
}
), elements.map(e => e?.GetValue()));
value.syncWith(this.value)
if(selectFirstAsDefault){
@ -61,7 +69,20 @@ export class RadioButton<T> extends InputElement<T> {
RadioButton._nextId++
const form = document.createElement("form")
this._element = form;
const inputs = []
value.addCallbackAndRun(
selected => {
let somethingChecked = false;
for (let i = 0; i < inputs.length; i++){
let input = inputs[i];
input.checked = !somethingChecked && elements[i].IsValid(selected);
somethingChecked = somethingChecked || input.checked
}
}
)
for (let i1 = 0; i1 < elements.length; i1++) {
let element = elements[i1];
const labelHtml = element.ConstructElement();
@ -73,6 +94,7 @@ export class RadioButton<T> extends InputElement<T> {
input.id = "radio" + groupId + "-" + i1;
input.name = groupId;
input.type = "radio"
input.classList.add("p-1","cursor-pointer","ml-2","pl-2","pr-0","m-0","ml-3")
input.onchange = () => {
if(input.checked){
@ -80,30 +102,26 @@ export class RadioButton<T> extends InputElement<T> {
}
}
value.addCallbackAndRun(
selected => input.checked = element.IsValid(selected)
)
inputs.push(input)
const label = document.createElement("label")
label.appendChild(labelHtml)
label.htmlFor = input.id;
label.classList.add("block","w-full","p-2","cursor-pointer","bg-red")
const block = document.createElement("div")
block.appendChild(input)
block.appendChild(label)
block.classList.add("flex","w-full","border", "rounded-full", "border-gray-400")
form.appendChild(block)
form.addEventListener("change", () => {
// TODO FIXME
}
);
}
this.value = value;
this._elements = elements;
this.SetClass("flex flex-col")
return form;
}
IsValid(t: T): boolean {
@ -120,9 +138,6 @@ export class RadioButton<T> extends InputElement<T> {
}
protected InnerConstructElement(): HTMLElement {
return this._element;
}
/*
public ShowValue(t: T): boolean {

4
UI/Input/TextField.ts
View file

@ -67,10 +67,10 @@ export class TextField extends InputElement<string> {
this.value.addCallbackAndRun(value => {
if (!(value !== undefined && value !== null)) {
field["value"] = "";
return;
}
// @ts-ignore
field.value = value;
field["value"] = value;
if (self.IsValid(value)) {
self.RemoveClass("invalid")
} else {