forked from MapComplete/MapComplete
start creating extra filter
This commit is contained in:
Ward
parent
97c85d6909
commit
e9160504a6
7 changed files with 872 additions and 800 deletions
|
|
@ -1,46 +1,43 @@
|
|||
import {UIEventSource} from "../../Logic/UIEventSource";
|
||||
import { UIEventSource } from "../../Logic/UIEventSource";
|
||||
import BaseUIElement from "../BaseUIElement";
|
||||
|
||||
export class VariableUiElement extends BaseUIElement {
|
||||
private _element: HTMLElement;
|
||||
|
||||
private _element : HTMLElement;
|
||||
|
||||
constructor(contents: UIEventSource<string | BaseUIElement | BaseUIElement[]>) {
|
||||
super();
|
||||
|
||||
this._element = document.createElement("span")
|
||||
const el = this._element
|
||||
contents.addCallbackAndRun(contents => {
|
||||
while (el.firstChild) {
|
||||
el.removeChild(
|
||||
el.lastChild
|
||||
)
|
||||
}
|
||||
constructor(
|
||||
contents: UIEventSource<string | BaseUIElement | BaseUIElement[]>
|
||||
) {
|
||||
super();
|
||||
|
||||
if (contents === undefined) {
|
||||
return el;
|
||||
}
|
||||
if (typeof contents === "string") {
|
||||
el.innerHTML = contents
|
||||
} else if (contents instanceof Array) {
|
||||
for (const content of contents) {
|
||||
const c = content.ConstructElement();
|
||||
if (c !== undefined && c !== null) {
|
||||
el.appendChild(c)
|
||||
}
|
||||
this._element = document.createElement("span");
|
||||
const el = this._element;
|
||||
contents.addCallbackAndRun((contents) => {
|
||||
while (el.firstChild) {
|
||||
el.removeChild(el.lastChild);
|
||||
}
|
||||
|
||||
}
|
||||
} else {
|
||||
const c = contents.ConstructElement();
|
||||
if (c !== undefined && c !== null) {
|
||||
el.appendChild(c)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
if (contents === undefined) {
|
||||
return el;
|
||||
}
|
||||
if (typeof contents === "string") {
|
||||
el.innerHTML = contents;
|
||||
} else if (contents instanceof Array) {
|
||||
for (const content of contents) {
|
||||
const c = content.ConstructElement();
|
||||
if (c !== undefined && c !== null) {
|
||||
el.appendChild(c);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const c = contents.ConstructElement();
|
||||
if (c !== undefined && c !== null) {
|
||||
el.appendChild(c);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
protected InnerConstructElement(): HTMLElement {
|
||||
return this._element;
|
||||
}
|
||||
|
||||
}
|
||||
protected InnerConstructElement(): HTMLElement {
|
||||
return this._element;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,45 +4,56 @@ import LayerSelection from "./LayerSelection";
|
|||
import Combine from "../Base/Combine";
|
||||
import ScrollableFullScreen from "../Base/ScrollableFullScreen";
|
||||
import Translations from "../i18n/Translations";
|
||||
import {UIEventSource} from "../../Logic/UIEventSource";
|
||||
import { UIEventSource } from "../../Logic/UIEventSource";
|
||||
import BaseUIElement from "../BaseUIElement";
|
||||
import Toggle from "../Input/Toggle";
|
||||
import {ExportDataButton} from "./ExportDataButton";
|
||||
import { ExportDataButton } from "./ExportDataButton";
|
||||
import FilterView from "./FilterView";
|
||||
|
||||
export default class LayerControlPanel extends ScrollableFullScreen {
|
||||
constructor(isShown: UIEventSource<boolean>) {
|
||||
super(
|
||||
LayerControlPanel.GenTitle,
|
||||
LayerControlPanel.GeneratePanel,
|
||||
"layers",
|
||||
isShown
|
||||
);
|
||||
}
|
||||
|
||||
constructor(isShown: UIEventSource<boolean>) {
|
||||
super(LayerControlPanel.GenTitle, LayerControlPanel.GeneratePanel, "layers", isShown);
|
||||
private static GenTitle(): BaseUIElement {
|
||||
return Translations.t.general.layerSelection.title
|
||||
.Clone()
|
||||
.SetClass("text-2xl break-words font-bold p-2");
|
||||
}
|
||||
|
||||
private static GeneratePanel(): BaseUIElement {
|
||||
const elements: BaseUIElement[] = [];
|
||||
|
||||
if (State.state.layoutToUse.data.enableBackgroundLayerSelection) {
|
||||
const backgroundSelector = new BackgroundSelector();
|
||||
backgroundSelector.SetStyle("margin:1em");
|
||||
backgroundSelector.onClick(() => {});
|
||||
elements.push(backgroundSelector);
|
||||
}
|
||||
|
||||
private static GenTitle(): BaseUIElement {
|
||||
return Translations.t.general.layerSelection.title.Clone().SetClass("text-2xl break-words font-bold p-2")
|
||||
}
|
||||
elements.push(
|
||||
new Toggle(
|
||||
new FilterView(State.state.filteredLayers),
|
||||
undefined,
|
||||
State.state.filteredLayers.map(
|
||||
(layers) => layers.length > 1 || layers[0].layerDef.filters.length > 0
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
private static GeneratePanel(): BaseUIElement {
|
||||
const elements: BaseUIElement[] = []
|
||||
elements.push(
|
||||
new Toggle(
|
||||
new ExportDataButton(),
|
||||
undefined,
|
||||
State.state.featureSwitchEnableExport
|
||||
)
|
||||
);
|
||||
|
||||
if (State.state.layoutToUse.data.enableBackgroundLayerSelection) {
|
||||
const backgroundSelector = new BackgroundSelector();
|
||||
backgroundSelector.SetStyle("margin:1em");
|
||||
backgroundSelector.onClick(() => {
|
||||
});
|
||||
elements.push(backgroundSelector)
|
||||
}
|
||||
|
||||
elements.push(new Toggle(
|
||||
new LayerSelection(State.state.filteredLayers),
|
||||
undefined,
|
||||
State.state.filteredLayers.map(layers => layers.length > 1)
|
||||
))
|
||||
|
||||
elements.push(new Toggle(
|
||||
new ExportDataButton(),
|
||||
undefined,
|
||||
State.state.featureSwitchEnableExport
|
||||
))
|
||||
|
||||
return new Combine(elements).SetClass("flex flex-col")
|
||||
}
|
||||
|
||||
}
|
||||
return new Combine(elements).SetClass("flex flex-col");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue