forked from MapComplete/MapComplete
114 lines
No EOL
3.7 KiB
TypeScript
114 lines
No EOL
3.7 KiB
TypeScript
import {InputElement} from "./InputElement";
|
|
import {UIEventSource} from "../../Logic/UIEventSource";
|
|
import {DropDown} from "./DropDown";
|
|
import {TextField} from "./TextField";
|
|
import Combine from "../Base/Combine";
|
|
import {Utils} from "../../Utils";
|
|
import {UIElement} from "../UIElement";
|
|
import {VariableUiElement} from "../Base/VariableUIElement";
|
|
import {FromJSON} from "../../Customizations/JSON/FromJSON";
|
|
|
|
export default class SingleTagInput extends InputElement<string> {
|
|
|
|
private readonly _value: UIEventSource<string>;
|
|
IsSelected: UIEventSource<boolean>;
|
|
|
|
private key: InputElement<string>;
|
|
private value: InputElement<string>;
|
|
private operator: DropDown<string>
|
|
private readonly helpMesage: UIElement;
|
|
|
|
constructor(value: UIEventSource<string> = undefined) {
|
|
super(undefined);
|
|
this._value = value ?? new UIEventSource<string>("");
|
|
|
|
this.helpMesage = new VariableUiElement(this._value.map(tagDef => {
|
|
try {
|
|
FromJSON.Tag(tagDef, "");
|
|
return "";
|
|
} catch (e) {
|
|
return `<br/><span class='alert'>${e}</span>`
|
|
}
|
|
}
|
|
));
|
|
|
|
this.key = TextField.KeyInput();
|
|
|
|
this.value = new TextField<string>({
|
|
placeholder: "value - if blank, matches if key is NOT present",
|
|
fromString: str => str,
|
|
toString: str => str,
|
|
value: new UIEventSource<string>("")
|
|
}
|
|
);
|
|
this.operator = new DropDown<string>("", [
|
|
{value: "=", shown: "="},
|
|
{value: "~", shown: "~"},
|
|
{value: "!~", shown: "!~"}
|
|
]);
|
|
this.operator.GetValue().setData("=");
|
|
|
|
const self = this;
|
|
|
|
function updateValue() {
|
|
if (self.key.GetValue().data === undefined ||
|
|
self.value.GetValue().data === undefined ||
|
|
self.operator.GetValue().data === undefined) {
|
|
return undefined;
|
|
}
|
|
self._value.setData(self.key.GetValue().data + self.operator.GetValue().data + self.value.GetValue().data);
|
|
}
|
|
|
|
this.key.GetValue().addCallback(() => updateValue());
|
|
this.operator.GetValue().addCallback(() => updateValue());
|
|
this.value.GetValue().addCallback(() => updateValue());
|
|
|
|
|
|
function loadValue(value: string) {
|
|
if (value === undefined) {
|
|
return;
|
|
}
|
|
let parts: string[];
|
|
if (value.indexOf("=") >= 0) {
|
|
parts = Utils.SplitFirst(value, "=");
|
|
self.operator.GetValue().setData("=");
|
|
} else if (value.indexOf("!~") > 0) {
|
|
parts = Utils.SplitFirst(value, "!~");
|
|
self.operator.GetValue().setData("!~");
|
|
|
|
} else if (value.indexOf("~") > 0) {
|
|
parts = Utils.SplitFirst(value, "~");
|
|
self.operator.GetValue().setData("~");
|
|
} else {
|
|
console.warn("Invalid value for tag: ", value)
|
|
return;
|
|
}
|
|
self.key.GetValue().setData(parts[0]);
|
|
self.value.GetValue().setData(parts[1]);
|
|
}
|
|
|
|
self._value.addCallback(loadValue);
|
|
loadValue(self._value.data);
|
|
this.IsSelected = this.key.IsSelected.map(
|
|
isSelected => isSelected || this.value.IsSelected.data, [this.value.IsSelected]
|
|
)
|
|
}
|
|
|
|
IsValid(t: string): boolean {
|
|
return false;
|
|
}
|
|
|
|
InnerRender(): string {
|
|
return new Combine([
|
|
this.key, this.operator, this.value,
|
|
this.helpMesage
|
|
]).Render();
|
|
}
|
|
|
|
|
|
GetValue(): UIEventSource<string> {
|
|
return this._value;
|
|
}
|
|
|
|
|
|
} |