mapcomplete/UI/Input/Checkboxes.ts

85 lines
2.2 KiB
TypeScript
Raw Normal View History

2020-09-09 22:17:46 +02:00
import {InputElement} from "./InputElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import {Utils} from "../../Utils";
2020-09-10 21:06:56 +02:00
import {UIElement} from "../UIElement";
2020-09-09 22:17:46 +02:00
/**
* Supports multi-input
*/
2020-09-10 21:06:56 +02:00
export class CheckBoxes extends InputElement<number[]> {
2020-09-09 22:17:46 +02:00
IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
2020-09-10 21:06:56 +02:00
private readonly value: UIEventSource<number[]>;
private readonly _elements: UIElement[]
2020-09-09 22:17:46 +02:00
2020-09-10 21:06:56 +02:00
constructor(elements: UIElement[]) {
2020-09-09 22:17:46 +02:00
super(undefined);
this._elements = Utils.NoNull(elements);
2020-09-10 19:33:06 +02:00
this.dumbMode = false;
2020-09-09 22:17:46 +02:00
2020-09-10 21:06:56 +02:00
this.value = new UIEventSource<number[]>([])
2020-09-09 22:17:46 +02:00
this.ListenTo(this.value);
}
2020-09-10 21:06:56 +02:00
IsValid(ts: number[]): boolean {
2020-09-09 22:17:46 +02:00
if (ts === undefined) {
return false;
}
return true;
}
2020-09-10 21:06:56 +02:00
GetValue(): UIEventSource<number[]> {
2020-09-09 22:17:46 +02:00
return this.value;
}
private IdFor(i) {
return 'checkmark-' + this.id + '-' + i;
}
InnerRender(): string {
let body = "";
for (let i = 0; i < this._elements.length; i++) {
let el = this._elements[i];
const htmlElement =
`<input type="checkbox" id="${this.IdFor(i)}"><label for="${this.IdFor(i)}">${el.Render()}</label><br/>`;
body += htmlElement;
}
2020-09-10 19:33:06 +02:00
return `<form id='${this.id}'>${body}</form>`;
2020-09-09 22:17:46 +02:00
}
protected InnerUpdate(htmlElement: HTMLElement) {
super.InnerUpdate(htmlElement);
const self = this;
for (let i = 0; i < this._elements.length; i++) {
const el = document.getElementById(this.IdFor(i));
2020-09-10 21:06:56 +02:00
if(this.value.data.indexOf(i) >= 0){
2020-09-10 19:33:06 +02:00
// @ts-ignore
2020-09-10 21:06:56 +02:00
el.checked = true;
2020-09-09 22:17:46 +02:00
}
2020-09-10 21:06:56 +02:00
el.onchange = () => {
const index = self.value.data.indexOf(i);
2020-09-09 22:17:46 +02:00
// @ts-ignore
2020-09-10 21:06:56 +02:00
if(el.checked && index < 0){
self.value.data.push(i);
self.value.ping();
}else if(index >= 0){
self.value.data.splice(index,1);
self.value.ping();
2020-09-09 22:17:46 +02:00
}
}
}
}
}