317 lines
12 KiB
TypeScript
317 lines
12 KiB
TypeScript
import {Utils} from "../../Utils";
|
|
import {FixedInputElement} from "../Input/FixedInputElement";
|
|
import {RadioButton} from "../Input/RadioButton";
|
|
import {VariableUiElement} from "../Base/VariableUIElement";
|
|
import Toggle, {ClickableToggle} from "../Input/Toggle";
|
|
import Combine from "../Base/Combine";
|
|
import Translations from "../i18n/Translations";
|
|
import {Translation} from "../i18n/Translation";
|
|
import Svg from "../../Svg";
|
|
import {ImmutableStore, Store, UIEventSource} from "../../Logic/UIEventSource";
|
|
import BaseUIElement from "../BaseUIElement";
|
|
import State from "../../State";
|
|
import FilteredLayer, {FilterState} from "../../Models/FilteredLayer";
|
|
import BackgroundSelector from "./BackgroundSelector";
|
|
import FilterConfig from "../../Models/ThemeConfig/FilterConfig";
|
|
import TilesourceConfig from "../../Models/ThemeConfig/TilesourceConfig";
|
|
import {SubstitutedTranslation} from "../SubstitutedTranslation";
|
|
import ValidatedTextField from "../Input/ValidatedTextField";
|
|
import {QueryParameters} from "../../Logic/Web/QueryParameters";
|
|
import {TagUtils} from "../../Logic/Tags/TagUtils";
|
|
import {InputElement} from "../Input/InputElement";
|
|
import {DropDown} from "../Input/DropDown";
|
|
import {FixedUiElement} from "../Base/FixedUiElement";
|
|
|
|
export default class FilterView extends VariableUiElement {
|
|
constructor(filteredLayer: UIEventSource<FilteredLayer[]>,
|
|
tileLayers: { config: TilesourceConfig, isDisplayed: UIEventSource<boolean> }[]) {
|
|
const backgroundSelector = new Toggle(
|
|
new BackgroundSelector(),
|
|
undefined,
|
|
State.state.featureSwitchBackgroundSelection
|
|
)
|
|
super(
|
|
filteredLayer.map((filteredLayers) => {
|
|
// Create the views which toggle layers (and filters them) ...
|
|
let elements = filteredLayers
|
|
?.map(l => FilterView.createOneFilteredLayerElement(l, State.state)?.SetClass("filter-panel"))
|
|
?.filter(l => l !== undefined)
|
|
elements[0].SetClass("first-filter-panel")
|
|
|
|
// ... create views for non-interactive layers ...
|
|
elements = elements.concat(tileLayers.map(tl => FilterView.createOverlayToggle(tl)))
|
|
// ... and add the dropdown to select a different background
|
|
return elements.concat(backgroundSelector);
|
|
}
|
|
)
|
|
);
|
|
}
|
|
|
|
private static createOverlayToggle(config: { config: TilesourceConfig, isDisplayed: UIEventSource<boolean> }) {
|
|
|
|
const iconStyle = "width:1.5rem;height:1.5rem;margin-left:1.25rem;flex-shrink: 0;";
|
|
|
|
const icon = new Combine([Svg.checkbox_filled]).SetStyle(iconStyle);
|
|
const iconUnselected = new Combine([Svg.checkbox_empty]).SetStyle(
|
|
iconStyle
|
|
);
|
|
const name: Translation = config.config.name;
|
|
|
|
const styledNameChecked = name.Clone().SetStyle("font-size:large").SetClass("ml-2");
|
|
const styledNameUnChecked = name.Clone().SetStyle("font-size:large").SetClass("ml-2");
|
|
|
|
const zoomStatus =
|
|
new Toggle(
|
|
undefined,
|
|
Translations.t.general.layerSelection.zoomInToSeeThisLayer
|
|
.SetClass("alert")
|
|
.SetStyle("display: block ruby;width:min-content;"),
|
|
State.state.locationControl.map(location => location.zoom >= config.config.minzoom)
|
|
)
|
|
|
|
|
|
const style =
|
|
"display:flex;align-items:center;padding:0.5rem 0;";
|
|
const layerChecked = new Combine([icon, styledNameChecked, zoomStatus])
|
|
.SetStyle(style)
|
|
.onClick(() => config.isDisplayed.setData(false));
|
|
|
|
const layerNotChecked = new Combine([iconUnselected, styledNameUnChecked])
|
|
.SetStyle(style)
|
|
.onClick(() => config.isDisplayed.setData(true));
|
|
|
|
|
|
return new Toggle(
|
|
layerChecked,
|
|
layerNotChecked,
|
|
config.isDisplayed
|
|
);
|
|
}
|
|
|
|
private static createOneFilteredLayerElement(filteredLayer: FilteredLayer, state: {featureSwitchIsDebugging: UIEventSource<boolean>}) {
|
|
if (filteredLayer.layerDef.name === undefined) {
|
|
// Name is not defined: we hide this one
|
|
return new Toggle(
|
|
new FixedUiElement(filteredLayer?.layerDef?.id ).SetClass("block") ,
|
|
undefined,
|
|
state?.featureSwitchIsDebugging
|
|
);
|
|
}
|
|
const iconStyle = "width:1.5rem;height:1.5rem;margin-left:1.25rem;flex-shrink: 0;";
|
|
|
|
const icon = new Combine([Svg.checkbox_filled]).SetStyle(iconStyle);
|
|
const layer = filteredLayer.layerDef
|
|
|
|
const iconUnselected = new Combine([Svg.checkbox_empty]).SetStyle(
|
|
iconStyle
|
|
);
|
|
|
|
const name: Translation = filteredLayer.layerDef.name.Clone()
|
|
|
|
const styledNameChecked = name.Clone().SetStyle("font-size:large").SetClass("ml-3");
|
|
|
|
const styledNameUnChecked = name.Clone().SetStyle("font-size:large").SetClass("ml-3");
|
|
|
|
const zoomStatus =
|
|
new Toggle(
|
|
undefined,
|
|
Translations.t.general.layerSelection.zoomInToSeeThisLayer
|
|
.SetClass("alert")
|
|
.SetStyle("display: block ruby;width:min-content;"),
|
|
State.state.locationControl.map(location => location.zoom >= filteredLayer.layerDef.minzoom)
|
|
)
|
|
|
|
|
|
const toggleClasses = "layer-toggle flex flex-wrap items-center pt-2 pb-2 px-0";
|
|
const layerIcon = layer.defaultIcon()?.SetClass("flex-shrink-0 w-8 h-8 ml-2")
|
|
const layerIconUnchecked = layer.defaultIcon()?.SetClass("flex-shrink-0 opacity-50 w-8 h-8 ml-2")
|
|
|
|
const layerChecked = new Combine([icon, layerIcon, styledNameChecked, zoomStatus])
|
|
.SetClass(toggleClasses)
|
|
.onClick(() => filteredLayer.isDisplayed.setData(false));
|
|
|
|
const layerNotChecked = new Combine([iconUnselected, layerIconUnchecked, styledNameUnChecked])
|
|
.SetClass(toggleClasses)
|
|
.onClick(() => filteredLayer.isDisplayed.setData(true));
|
|
|
|
|
|
const filterPanel: BaseUIElement = FilterView.createFilterPanel(filteredLayer)
|
|
|
|
|
|
return new Toggle(
|
|
new Combine([layerChecked, filterPanel]),
|
|
layerNotChecked,
|
|
filteredLayer.isDisplayed
|
|
);
|
|
}
|
|
|
|
private static createFilterPanel(flayer: FilteredLayer): BaseUIElement {
|
|
const layer = flayer.layerDef
|
|
if (layer.filters.length === 0) {
|
|
return undefined;
|
|
}
|
|
|
|
|
|
const toShow: BaseUIElement [] = []
|
|
|
|
for (const filter of layer.filters) {
|
|
|
|
const [ui, actualTags] = FilterView.createFilter(filter)
|
|
|
|
ui.SetClass("mt-1")
|
|
toShow.push(ui)
|
|
actualTags.addCallback(tagsToFilterFor => {
|
|
flayer.appliedFilters.data.set(filter.id, tagsToFilterFor)
|
|
flayer.appliedFilters.ping()
|
|
})
|
|
flayer.appliedFilters.map(dict => dict.get(filter.id))
|
|
.addCallbackAndRun(filters => actualTags.setData(filters))
|
|
|
|
|
|
}
|
|
|
|
return new Combine(toShow)
|
|
.SetClass("flex flex-col p-2 ml-12 pl-1 pt-0 layer-filters")
|
|
|
|
}
|
|
|
|
// Filter which uses one or more textfields
|
|
private static createFilterWithFields(filterConfig: FilterConfig): [BaseUIElement, UIEventSource<FilterState>] {
|
|
|
|
const filter = filterConfig.options[0]
|
|
const mappings = new Map<string, BaseUIElement>()
|
|
let allValid: Store<boolean> = new ImmutableStore(true)
|
|
var allFields: InputElement<string>[] = []
|
|
const properties = new UIEventSource<any>({})
|
|
for (const {name, type} of filter.fields) {
|
|
const value = QueryParameters.GetQueryParameter("filter-" + filterConfig.id + "-" + name, "", "Value for filter " + filterConfig.id)
|
|
const field = ValidatedTextField.ForType(type).ConstructInputElement({
|
|
value
|
|
}).SetClass("inline-block")
|
|
mappings.set(name, field)
|
|
const stable = value.stabilized(250)
|
|
stable.addCallbackAndRunD(v => {
|
|
properties.data[name] = v.toLowerCase();
|
|
properties.ping()
|
|
})
|
|
allFields.push(field)
|
|
allValid = allValid.map(previous => previous && field.IsValid(stable.data) && stable.data !== "", [stable])
|
|
}
|
|
const tr = new SubstitutedTranslation(filter.question, new UIEventSource<any>({id: filterConfig.id}), State.state, mappings)
|
|
const trigger: Store<FilterState> = allValid.map(isValid => {
|
|
if (!isValid) {
|
|
return undefined
|
|
}
|
|
const props = properties.data
|
|
// Replace all the field occurences in the tags...
|
|
const tagsSpec = Utils.WalkJson(filter.originalTagsSpec,
|
|
v => {
|
|
if (typeof v !== "string") {
|
|
return v
|
|
}
|
|
|
|
for (const key in props) {
|
|
v = (<string>v).replace("{" + key + "}", props[key])
|
|
}
|
|
|
|
return v
|
|
}
|
|
)
|
|
const tagsFilter = TagUtils.Tag(tagsSpec)
|
|
return {
|
|
currentFilter: tagsFilter,
|
|
state: JSON.stringify(props)
|
|
}
|
|
}, [properties])
|
|
|
|
const settableFilter = new UIEventSource<FilterState>(undefined)
|
|
trigger.addCallbackAndRun(state => settableFilter.setData(state))
|
|
settableFilter.addCallback(state => {
|
|
if(state === undefined){
|
|
// still initializing
|
|
return
|
|
}
|
|
if(state.currentFilter === undefined){
|
|
allFields.forEach(f => f.GetValue().setData(undefined));
|
|
}
|
|
})
|
|
|
|
return [tr, settableFilter];
|
|
}
|
|
|
|
private static createCheckboxFilter(filterConfig: FilterConfig): [BaseUIElement, UIEventSource<FilterState>] {
|
|
let option = filterConfig.options[0];
|
|
|
|
const icon = Svg.checkbox_filled_svg().SetClass("block mr-2 w-6");
|
|
const iconUnselected = Svg.checkbox_empty_svg().SetClass("block mr-2 w-6");
|
|
|
|
const toggle = new ClickableToggle(
|
|
new Combine([icon, option.question.Clone().SetClass("block")]).SetClass("flex"),
|
|
new Combine([iconUnselected, option.question.Clone().SetClass("block")]).SetClass("flex")
|
|
)
|
|
.ToggleOnClick()
|
|
.SetClass("block m-1")
|
|
|
|
return [toggle, toggle.isEnabled.sync(enabled => enabled ? {
|
|
currentFilter: option.osmTags,
|
|
state: "true"
|
|
} : undefined, [],
|
|
f => f !== undefined)
|
|
]
|
|
}
|
|
|
|
private static createMultiFilter(filterConfig: FilterConfig): [BaseUIElement, UIEventSource<FilterState>] {
|
|
|
|
let options = filterConfig.options;
|
|
|
|
const values: FilterState[] = options.map((f, i) => ({
|
|
currentFilter: f.osmTags, state: i
|
|
}))
|
|
let filterPicker: InputElement<number>
|
|
|
|
if (options.length <= 6) {
|
|
filterPicker = new RadioButton(
|
|
options.map(
|
|
(option, i) =>
|
|
new FixedInputElement(option.question.Clone().SetClass("block"), i)
|
|
),
|
|
{
|
|
dontStyle: true
|
|
}
|
|
);
|
|
} else {
|
|
filterPicker = new DropDown("", options.map((option, i) => ({
|
|
value: i, shown: option.question.Clone()
|
|
})))
|
|
}
|
|
|
|
return [filterPicker,
|
|
filterPicker.GetValue().sync(
|
|
i => values[i],
|
|
[],
|
|
selected => {
|
|
const v = selected?.state
|
|
if (v === undefined || typeof v === "string") {
|
|
return undefined
|
|
}
|
|
return v
|
|
}
|
|
)]
|
|
}
|
|
|
|
private static createFilter(filterConfig: FilterConfig): [BaseUIElement, UIEventSource<FilterState>] {
|
|
|
|
if (filterConfig.options[0].fields.length > 0) {
|
|
return FilterView.createFilterWithFields(filterConfig)
|
|
}
|
|
|
|
|
|
if (filterConfig.options.length === 1) {
|
|
return FilterView.createCheckboxFilter(filterConfig)
|
|
}
|
|
|
|
const filter = FilterView.createMultiFilter(filterConfig)
|
|
filter[0].SetClass("pl-2")
|
|
return filter
|
|
}
|
|
}
|