Bastian-Greshake-Tzovaras/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;
}
}