89 lines
No EOL
3 KiB
TypeScript
89 lines
No EOL
3 KiB
TypeScript
import {InputElement} from "./InputElement";
|
|
import {Store, Stores, UIEventSource} from "../../Logic/UIEventSource";
|
|
import Combine from "../Base/Combine";
|
|
import Slider from "./Slider";
|
|
import {ClickableToggle} from "./Toggle";
|
|
import {FixedUiElement} from "../Base/FixedUiElement";
|
|
import {VariableUiElement} from "../Base/VariableUIElement";
|
|
import BaseUIElement from "../BaseUIElement";
|
|
|
|
export default class FloorLevelInputElement extends VariableUiElement implements InputElement<string> {
|
|
|
|
private readonly _value: UIEventSource<string>;
|
|
|
|
constructor(currentLevels: Store<Record<string, number>>, options?: {
|
|
value?: UIEventSource<string>
|
|
}) {
|
|
|
|
|
|
const value = options?.value ?? new UIEventSource<string>("0")
|
|
super(currentLevels.map(levels => {
|
|
const allLevels = Object.keys(levels)
|
|
allLevels.sort((a, b) => {
|
|
const an = Number(a)
|
|
const bn = Number(b)
|
|
if (isNaN(an) || isNaN(bn)) {
|
|
return a < b ? -1 : 1;
|
|
}
|
|
return an - bn;
|
|
})
|
|
return FloorLevelInputElement.constructPicker(allLevels, value)
|
|
}
|
|
))
|
|
|
|
|
|
this._value = value
|
|
|
|
}
|
|
|
|
private static constructPicker(levels: string[], value: UIEventSource<string>): BaseUIElement {
|
|
let slider = new Slider(0, levels.length - 1, {vertical: true});
|
|
const toggleClass = "flex border-2 border-blue-500 w-10 h-10 place-content-center items-center border-box"
|
|
slider.SetClass("flex elevator w-10").SetStyle(`height: ${2.5 * levels.length}rem; background: #00000000`)
|
|
|
|
const values = levels.map((data, i) => new ClickableToggle(
|
|
new FixedUiElement(data).SetClass("font-bold active bg-subtle " + toggleClass),
|
|
new FixedUiElement(data).SetClass("normal-background " + toggleClass),
|
|
slider.GetValue().sync(
|
|
(sliderVal) => {
|
|
return sliderVal === i
|
|
},
|
|
[],
|
|
(isSelected) => {
|
|
return isSelected ? i : slider.GetValue().data
|
|
}
|
|
))
|
|
.ToggleOnClick()
|
|
.SetClass("flex w-10 h-10"))
|
|
|
|
values.reverse(/* This is a new list, no side-effects */)
|
|
const combine = new Combine([new Combine(values), slider])
|
|
combine.SetClass("flex flex-row overflow-hidden");
|
|
|
|
|
|
slider.GetValue().addCallbackD(i => {
|
|
if (levels === undefined) {
|
|
return
|
|
}
|
|
if(levels[i] == undefined){
|
|
return
|
|
}
|
|
value.setData(levels[i]);
|
|
})
|
|
value.addCallbackAndRunD(level => {
|
|
const i = levels.findIndex(l => l === level)
|
|
slider.GetValue().setData(i)
|
|
})
|
|
return combine
|
|
}
|
|
|
|
GetValue(): UIEventSource<string> {
|
|
return this._value;
|
|
}
|
|
|
|
IsValid(t: string): boolean {
|
|
return false;
|
|
}
|
|
|
|
|
|
} |