123 lines
4.1 KiB
TypeScript
123 lines
4.1 KiB
TypeScript
import { Utils } from "./../../Utils";
|
|
import { FixedInputElement } from "./../Input/FixedInputElement";
|
|
import { RadioButton } from "./../Input/RadioButton";
|
|
import { VariableUiElement } from "../Base/VariableUIElement";
|
|
import Toggle from "../Input/Toggle";
|
|
import Combine from "../Base/Combine";
|
|
import Translations from "../i18n/Translations";
|
|
import LayerConfig from "../../Customizations/JSON/LayerConfig";
|
|
import { Translation } from "../i18n/Translation";
|
|
import Svg from "../../Svg";
|
|
import FilterConfig from "../../Customizations/JSON/FilterConfig";
|
|
import CheckBoxes from "../Input/Checkboxes";
|
|
import { InputElement } from "../Input/InputElement";
|
|
import { TagsFilter } from "../../Logic/Tags/TagsFilter";
|
|
import InputElementMap from "../Input/InputElementMap";
|
|
import { And } from "../../Logic/Tags/And";
|
|
import { UIEventSource } from "../../Logic/UIEventSource";
|
|
|
|
/**
|
|
* Shows the filter
|
|
*/
|
|
|
|
export default class FilterView extends VariableUiElement {
|
|
constructor(filteredLayer) {
|
|
super(
|
|
filteredLayer.map((filteredLayers) =>
|
|
filteredLayers.map(FilterView.createOneFilteredLayerElement)
|
|
)
|
|
);
|
|
}
|
|
|
|
static createOneFilteredLayerElement(filteredLayer) {
|
|
const layer: LayerConfig = filteredLayer.layerDef;
|
|
const iconStyle = "width:1.5rem;height:1.5rem;margin-left:1.25rem";
|
|
|
|
const icon = new Combine([Svg.checkbox_filled]).SetStyle(iconStyle);
|
|
const iconUnselected = new Combine([Svg.checkbox_empty]).SetStyle(
|
|
iconStyle
|
|
);
|
|
|
|
if (filteredLayer.layerDef.name === undefined) {
|
|
return;
|
|
}
|
|
|
|
const style =
|
|
"display:flex;align-items:center;color:#007759;padding:0.5rem 0;";
|
|
|
|
const name: Translation = Translations.WT(
|
|
filteredLayer.layerDef.name
|
|
)?.Clone();
|
|
|
|
const styledNameChecked = name
|
|
.Clone()
|
|
.SetStyle("font-size:large;padding-left:1.25rem");
|
|
|
|
const styledNameUnChecked = name
|
|
.Clone()
|
|
.SetStyle("font-size:large;padding-left:1.25rem");
|
|
|
|
const layerChecked = new Combine([icon, styledNameChecked])
|
|
.SetStyle(style)
|
|
.onClick(() => filteredLayer.isDisplayed.setData(false));
|
|
|
|
const layerNotChecked = new Combine([iconUnselected, styledNameUnChecked])
|
|
.SetStyle(style)
|
|
.onClick(() => filteredLayer.isDisplayed.setData(true));
|
|
|
|
let listFilterElements: InputElement<TagsFilter>[] = layer.filters.map(
|
|
FilterView.createFilter
|
|
);
|
|
|
|
const update = () => {
|
|
let listTagsFilters = Utils.NoNull(
|
|
listFilterElements.map((input) => input.GetValue().data)
|
|
);
|
|
filteredLayer.appliedFilters.setData(new And(listTagsFilters));
|
|
};
|
|
|
|
listFilterElements.forEach((inputElement) =>
|
|
inputElement.GetValue().addCallback((_) => update())
|
|
);
|
|
|
|
return new Toggle(
|
|
new Combine([layerChecked, ...listFilterElements]),
|
|
layerNotChecked,
|
|
filteredLayer.isDisplayed
|
|
).SetStyle("margin:0.3em;");
|
|
}
|
|
|
|
static createFilter(filterConfig: FilterConfig): InputElement<TagsFilter> {
|
|
if (filterConfig.options.length === 1) {
|
|
let option = filterConfig.options[0];
|
|
let checkboxes = new CheckBoxes(
|
|
[option.question.Clone()],
|
|
new UIEventSource<number[]>([]),
|
|
"background-color: #F1F1F1;padding:0.25rem 0.5rem;",
|
|
"border:none;padding-left:3rem;color:#007759;display:flex;margin:0;justify-content:center;align-items:center;flex-direction:row;flex-wrap:nowrap;",
|
|
"margin:0;padding:0;",
|
|
"margin:0;padding:0.25rem 0 0 0.25rem;"
|
|
);
|
|
|
|
return new InputElementMap(
|
|
checkboxes,
|
|
(t0, t1) => t0 === t1,
|
|
(numbers) => (numbers.length > 0 ? option.osmTags : undefined),
|
|
(tagsFilter) => (tagsFilter == undefined ? [] : [0])
|
|
);
|
|
}
|
|
|
|
let options = filterConfig.options;
|
|
|
|
return new RadioButton(
|
|
options.map(
|
|
(option) =>
|
|
new FixedInputElement(option.question.Clone(), option.osmTags)
|
|
),
|
|
true,
|
|
"background-color: #F1F1F1;padding:0.25rem 0.5rem;",
|
|
"border:none;padding-left:3rem;color:#007759;display:flex;margin:0;justify-content:center;align-items:center;flex-direction:row;flex-wrap:nowrap;",
|
|
"margin:0;padding:0;"
|
|
);
|
|
}
|
|
}
|