mapcomplete/UI/Input/DropDown.ts
2020-07-20 15:54:50 +02:00

61 lines
No EOL
1.9 KiB
TypeScript

import {UIEventSource} from "../UIEventSource";
import {UIElement} from "../UIElement";
export class DropDown extends UIElement {
selectedElement: UIEventSource<string>
private _label: string;
private _values: { value: string; shown: string }[];
constructor(label: string, values: { value: string, shown: string }[],
selectedElement: UIEventSource<string> = undefined) {
super(undefined);
this._label = label;
this._values = values;
this.selectedElement = selectedElement ?? new UIEventSource<string>(values[0].value);
if(selectedElement.data === undefined){
this.selectedElement.setData(values[0].value)
}
const self = this;
this.selectedElement.addCallback(() => {
self.InnerUpdate();
});
}
protected InnerRender(): string {
let options = "";
for (const value of this._values) {
options += "<option value='" + value.value + "'>" + value.shown + "</option>"
}
return "<form>" +
"<label for='dropdown-" + this.id + "'>" + this._label + "</label>" +
"<select name='dropdown-" + this.id + "' id='dropdown-" + this.id + "'>" +
options +
"</select>" +
"</form>";
}
InnerUpdate() {
const self = this;
const e = document.getElementById("dropdown-" + this.id);
if(e === null){
return;
}
// @ts-ignore
if (this.selectedElement.data !== e.value) {
// @ts-ignore
e.value = this.selectedElement.data;
}
e.onchange = function () {
// @ts-ignore
const selectedValue = e.options[e.selectedIndex].value;
console.log("Putting data", selectedValue)
self.selectedElement.setData(selectedValue);
}
}
}