mapcomplete/UI/BigComponents/FilterView.ts

124 lines
4.1 KiB
TypeScript
Raw Normal View History

2021-07-26 12:26:41 +02:00
import { Utils } from "./../../Utils";
import { FixedInputElement } from "./../Input/FixedInputElement";
import { RadioButton } from "./../Input/RadioButton";
2021-07-20 15:14:51 +02:00
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";
2021-07-20 16:29:48 +02:00
import Svg from "../../Svg";
2021-07-26 12:26:41 +02:00
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";
2021-07-26 17:45:54 +02:00
import { UIEventSource } from "../../Logic/UIEventSource";
2021-07-20 15:14:51 +02:00
/**
* Shows the filter
*/
2021-07-26 12:26:41 +02:00
export default class FilterView extends VariableUiElement {
constructor(filteredLayer) {
super(
filteredLayer.map((filteredLayers) =>
filteredLayers.map(FilterView.createOneFilteredLayerElement)
)
2021-07-20 15:14:51 +02:00
);
}
2021-07-26 12:26:41 +02:00
static createOneFilteredLayerElement(filteredLayer) {
const layer: LayerConfig = filteredLayer.layerDef;
const iconStyle = "width:1.5rem;height:1.5rem;margin-left:1.25rem";
2021-07-20 16:29:48 +02:00
2021-07-26 12:26:41 +02:00
const icon = new Combine([Svg.checkbox_filled]).SetStyle(iconStyle);
const iconUnselected = new Combine([Svg.checkbox_empty]).SetStyle(
iconStyle
);
2021-07-20 16:29:48 +02:00
2021-07-26 12:26:41 +02:00
if (filteredLayer.layerDef.name === undefined) {
return;
}
2021-07-20 16:29:48 +02:00
2021-07-26 17:45:54 +02:00
const style =
"display:flex;align-items:center;color:#007759;padding:0.5rem 0;";
2021-07-22 11:29:09 +02:00
2021-07-26 12:26:41 +02:00
const name: Translation = Translations.WT(
filteredLayer.layerDef.name
)?.Clone();
2021-07-20 16:29:48 +02:00
2021-07-26 12:26:41 +02:00
const styledNameChecked = name
.Clone()
.SetStyle("font-size:large;padding-left:1.25rem");
2021-07-20 16:29:48 +02:00
2021-07-26 12:26:41 +02:00
const styledNameUnChecked = name
.Clone()
.SetStyle("font-size:large;padding-left:1.25rem");
2021-07-20 16:29:48 +02:00
2021-07-26 17:45:54 +02:00
const layerChecked = new Combine([icon, styledNameChecked])
.SetStyle(style)
.onClick(() => filteredLayer.isDisplayed.setData(false));
2021-07-20 15:14:51 +02:00
2021-07-26 17:45:54 +02:00
const layerNotChecked = new Combine([iconUnselected, styledNameUnChecked])
.SetStyle(style)
.onClick(() => filteredLayer.isDisplayed.setData(true));
2021-07-22 11:29:09 +02:00
2021-07-26 12:26:41 +02:00
let listFilterElements: InputElement<TagsFilter>[] = layer.filters.map(
FilterView.createFilter
);
2021-07-22 11:29:09 +02:00
2021-07-26 17:45:54 +02:00
const update = () => {
2021-07-26 12:26:41 +02:00
let listTagsFilters = Utils.NoNull(
listFilterElements.map((input) => input.GetValue().data)
);
2021-07-26 17:45:54 +02:00
filteredLayer.appliedFilters.setData(new And(listTagsFilters));
};
2021-07-20 16:29:48 +02:00
2021-07-26 12:26:41 +02:00
listFilterElements.forEach((inputElement) =>
inputElement.GetValue().addCallback((_) => update())
);
2021-07-20 16:29:48 +02:00
2021-07-26 12:26:41 +02:00
return new Toggle(
new Combine([layerChecked, ...listFilterElements]),
layerNotChecked,
filteredLayer.isDisplayed
2021-07-26 17:45:54 +02:00
).SetStyle("margin:0.3em;");
2021-07-26 12:26:41 +02:00
}
2021-07-20 16:29:48 +02:00
2021-07-26 12:26:41 +02:00
static createFilter(filterConfig: FilterConfig): InputElement<TagsFilter> {
if (filterConfig.options.length === 1) {
let option = filterConfig.options[0];
2021-07-26 17:45:54 +02:00
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;"
);
2021-07-26 12:26:41 +02:00
return new InputElementMap(
checkboxes,
(t0, t1) => t0 === t1,
(numbers) => (numbers.length > 0 ? option.osmTags : undefined),
(tagsFilter) => (tagsFilter == undefined ? [] : [0])
);
}
2021-07-20 16:29:48 +02:00
2021-07-26 12:26:41 +02:00
let options = filterConfig.options;
2021-07-20 16:29:48 +02:00
2021-07-26 12:26:41 +02:00
return new RadioButton(
options.map(
(option) =>
new FixedInputElement(option.question.Clone(), option.osmTags)
2021-07-26 17:45:54 +02:00
),
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;"
2021-07-26 12:26:41 +02:00
);
2021-07-20 15:14:51 +02:00
}
}