contrapunctus/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

start creating extra filter

Browse source
This commit is contained in:
Ward 2021-07-26 12:26:41 +02:00
parent 97c85d6909
commit e9160504a6
7 changed files with 872 additions and 800 deletions
Download patch file Download diff file Expand all files Collapse all files

154
UI/BigComponents/FilterView.ts
View file

@ -1,3 +1,6 @@
import { Utils } from "./../../Utils";
import { FixedInputElement } from "./../Input/FixedInputElement";
import { RadioButton } from "./../Input/RadioButton";
import { FixedUiElement } from "./../Base/FixedUiElement";
import { LayerConfigJson } from "./../../Customizations/JSON/LayerConfigJson";
import { UIEventSource } from "../../Logic/UIEventSource";
@ -11,79 +14,104 @@ import BaseUIElement from "../BaseUIElement";
import { Translation } from "../i18n/Translation";
import ScrollableFullScreen from "../Base/ScrollableFullScreen";
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";
/**
* Shows the filter
*/
export default class FilterView extends ScrollableFullScreen {
constructor(isShown: UIEventSource<boolean>) {
super(FilterView.GenTitle, FilterView.Generatecontent, "filter", isShown);
}
private static GenTitle(): BaseUIElement {
return new FixedUiElement(`Filter`).SetClass(
"text-2xl break-words font-bold p-2"
export default class FilterView extends VariableUiElement {
constructor(filteredLayer) {
super(
filteredLayer.map((filteredLayers) =>
filteredLayers.map(FilterView.createOneFilteredLayerElement)
)
);
}
private static Generatecontent(): BaseUIElement {
let filterPanel: BaseUIElement = new FixedUiElement("");
static createOneFilteredLayerElement(filteredLayer) {
const layer: LayerConfig = filteredLayer.layerDef;
const iconStyle = "width:1.5rem;height:1.5rem;margin-left:1.25rem";
if (State.state.filteredLayers.data.length > 1) {
let activeLayers = State.state.filteredLayers;
const icon = new Combine([Svg.checkbox_filled]).SetStyle(iconStyle);
const iconUnselected = new Combine([Svg.checkbox_empty]).SetStyle(
iconStyle
);
if (activeLayers === undefined) {
throw "ActiveLayers should be defined...";
}
const checkboxes: BaseUIElement[] = [];
for (const layer of activeLayers.data) {
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 (layer.layerDef.name === undefined) {
continue;
}
const style = "display:flex;align-items:center;color:#007759";
const name: Translation = Translations.WT(layer.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
);
const layerNotChecked = new Combine([
iconUnselected,
styledNameUnChecked,
]).SetStyle(style);
checkboxes.push(
new Toggle(layerChecked, layerNotChecked, layer.isDisplayed)
.ToggleOnClick()
.SetStyle("margin:0.3em;")
);
}
let combinedCheckboxes = new Combine(checkboxes);
combinedCheckboxes.SetStyle("display:flex;flex-direction:column;");
filterPanel = new Combine([combinedCheckboxes]);
return filterPanel;
if (filteredLayer.layerDef.name === undefined) {
return;
}
const style = "display:flex;align-items:center;color:#007759";
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);
const layerNotChecked = new Combine([
iconUnselected,
styledNameUnChecked,
]).SetStyle(style);
let listFilterElements: InputElement<TagsFilter>[] = layer.filters.map(
FilterView.createFilter
);
function update() {
let listTagsFilters = Utils.NoNull(
listFilterElements.map((input) => input.GetValue().data)
);
filteredLayer.appliedTags.setData(new And(listTagsFilters));
}
listFilterElements.forEach((inputElement) =>
inputElement.GetValue().addCallback((_) => update())
);
return new Toggle(
new Combine([layerChecked, ...listFilterElements]),
layerNotChecked,
filteredLayer.isDisplayed
)
.ToggleOnClick()
.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()]);
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)
)
);
}
}