From 9de4ff9abf9d5c02592514d5c29ef0c95e08e87c Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Tue, 7 Sep 2021 01:49:18 +0200 Subject: [PATCH] Bugfix: if a filter is enabled, a new point of that layer cannot be added anymore; instead the filter should be disabled (to prevent duplicates) --- Models/FilteredLayer.ts | 3 ++- UI/BigComponents/FilterView.ts | 28 ++++++++++++----------- UI/BigComponents/SimpleAddUI.ts | 39 ++++++++++++++++++++++++++------- index.css | 4 ++++ 4 files changed, 52 insertions(+), 22 deletions(-) diff --git a/Models/FilteredLayer.ts b/Models/FilteredLayer.ts index 1cf167f45..bdcac3e70 100644 --- a/Models/FilteredLayer.ts +++ b/Models/FilteredLayer.ts @@ -1,9 +1,10 @@ import {UIEventSource} from "../Logic/UIEventSource"; import {TagsFilter} from "../Logic/Tags/TagsFilter"; import LayerConfig from "./ThemeConfig/LayerConfig"; +import {And} from "../Logic/Tags/And"; export default interface FilteredLayer { readonly isDisplayed: UIEventSource; - readonly appliedFilters: UIEventSource; + readonly appliedFilters: UIEventSource; readonly layerDef: LayerConfig; } \ No newline at end of file diff --git a/UI/BigComponents/FilterView.ts b/UI/BigComponents/FilterView.ts index d4ea4d61a..6e3fae5f7 100644 --- a/UI/BigComponents/FilterView.ts +++ b/UI/BigComponents/FilterView.ts @@ -14,7 +14,6 @@ import BaseUIElement from "../BaseUIElement"; import State from "../../State"; import FilteredLayer from "../../Models/FilteredLayer"; import BackgroundSelector from "./BackgroundSelector"; -import LayerConfig from "../../Models/ThemeConfig/LayerConfig"; import FilterConfig from "../../Models/ThemeConfig/FilterConfig"; @@ -24,7 +23,7 @@ import FilterConfig from "../../Models/ThemeConfig/FilterConfig"; export default class FilterView extends VariableUiElement { constructor(filteredLayer: UIEventSource) { - const backgroundSelector = new Toggle( + const backgroundSelector = new Toggle( new BackgroundSelector(), undefined, State.state.featureSwitchBackgroundSlection @@ -36,8 +35,8 @@ export default class FilterView extends VariableUiElement { ); } - private static createOneFilteredLayerElement(filteredLayer) { - if(filteredLayer.layerDef.name === undefined){ + private static createOneFilteredLayerElement(filteredLayer: FilteredLayer) { + if (filteredLayer.layerDef.name === undefined) { // Name is not defined: we hide this one return undefined; } @@ -71,9 +70,9 @@ export default class FilterView extends VariableUiElement { Translations.t.general.layerSelection.zoomInToSeeThisLayer.Clone() .SetClass("alert") .SetStyle("display: block ruby;width:min-content;"), - State.state.locationControl.map(location =>location.zoom >= filteredLayer.layerDef.minzoom ) + State.state.locationControl.map(location => location.zoom >= filteredLayer.layerDef.minzoom) ) - + const style = "display:flex;align-items:center;padding:0.5rem 0;"; @@ -89,7 +88,6 @@ export default class FilterView extends VariableUiElement { const filterPanel: BaseUIElement = FilterView.createFilterPanel(filteredLayer) - return new Toggle( new Combine([layerChecked, filterPanel]), layerNotChecked, @@ -97,10 +95,7 @@ export default class FilterView extends VariableUiElement { ); } - static createFilterPanel(flayer: { - layerDef: LayerConfig, - appliedFilters: UIEventSource - }): BaseUIElement { + private static createFilterPanel(flayer: FilteredLayer): BaseUIElement { const layer = flayer.layerDef if (layer.filters.length === 0) { return undefined; @@ -121,12 +116,19 @@ export default class FilterView extends VariableUiElement { inputElement[1].addCallback((_) => update()) ); + flayer.appliedFilters.addCallbackAndRun(appliedFilters => { + if (appliedFilters === undefined || appliedFilters.and.length === 0) { + listFilterElements.forEach(filter => filter[1].setData(undefined)) + return + } + }) + return new Combine(listFilterElements.map(input => input[0].SetClass("mt-3"))) .SetClass("flex flex-col ml-8 bg-gray-300 rounded-xl p-2") } - static createFilter(filterConfig: FilterConfig): [BaseUIElement, UIEventSource] { + private static createFilter(filterConfig: FilterConfig): [BaseUIElement, UIEventSource] { if (filterConfig.options.length === 1) { let option = filterConfig.options[0]; @@ -140,7 +142,7 @@ export default class FilterView extends VariableUiElement { .ToggleOnClick() .SetClass("block m-1") - return [toggle, toggle.isEnabled.map(enabled => enabled ? option.osmTags : undefined)] + return [toggle, toggle.isEnabled.map(enabled => enabled ? option.osmTags : undefined, [], tags => tags !== undefined)] } let options = filterConfig.options; diff --git a/UI/BigComponents/SimpleAddUI.ts b/UI/BigComponents/SimpleAddUI.ts index e377c1f2a..7fe4de815 100644 --- a/UI/BigComponents/SimpleAddUI.ts +++ b/UI/BigComponents/SimpleAddUI.ts @@ -18,7 +18,8 @@ import AvailableBaseLayers from "../../Logic/Actors/AvailableBaseLayers"; import CreateNewNodeAction from "../../Logic/Osm/Actions/CreateNewNodeAction"; import {OsmObject, OsmWay} from "../../Logic/Osm/OsmObject"; import PresetConfig from "../../Models/ThemeConfig/PresetConfig"; -import LayerConfig from "../../Models/ThemeConfig/LayerConfig"; +import FilteredLayer from "../../Models/FilteredLayer"; +import {And} from "../../Logic/Tags/And"; /* * The SimpleAddUI is a single panel, which can have multiple states: @@ -32,10 +33,7 @@ import LayerConfig from "../../Models/ThemeConfig/LayerConfig"; interface PresetInfo extends PresetConfig { name: string | BaseUIElement, icon: () => BaseUIElement, - layerToAddTo: { - layerDef: LayerConfig, - isDisplayed: UIEventSource - } + layerToAddTo: FilteredLayer } export default class SimpleAddUI extends Toggle { @@ -189,14 +187,39 @@ export default class SimpleAddUI extends Toggle { Translations.t.general.add.openLayerControl ]) ) - .onClick(() => State.state.filterIsOpened.setData(true)) - + + const openLayerOrConfirm = new Toggle( confirmButton, openLayerControl, preset.layerToAddTo.isDisplayed ) + + const disableFilter = new SubtleButton( + new Combine([ + Svg.filter_ui().SetClass("absolute w-full"), + Svg.cross_bottom_right_svg().SetClass("absolute red-svg") + ]).SetClass("relative"), + new Combine( + [ + Translations.t.general.add.disableFiltersExplanation.Clone(), + Translations.t.general.add.disableFilters.Clone().SetClass("text-xl") + ] + ).SetClass("flex flex-col") + ).onClick(() => { + preset.layerToAddTo.appliedFilters.setData(new And([])) + cancel() + }) + + const disableFiltersOrConfirm = new Toggle( + openLayerOrConfirm, + disableFilter, + preset.layerToAddTo.appliedFilters.map(filters => filters === undefined || filters.and.length === 0) + ) + + + const tagInfo = SimpleAddUI.CreateTagInfoFor(preset); const cancelButton = new SubtleButton(Svg.close_ui(), @@ -207,7 +230,7 @@ export default class SimpleAddUI extends Toggle { // Translations.t.general.add.confirmIntro.Subs({title: preset.name}), State.state.osmConnection.userDetails.data.dryRun ? Translations.t.general.testing.Clone().SetClass("alert") : undefined, - openLayerOrConfirm, + disableFiltersOrConfirm, cancelButton, preset.description, tagInfo diff --git a/index.css b/index.css index d7f2c268b..bf49576ee 100644 --- a/index.css +++ b/index.css @@ -98,6 +98,10 @@ svg, img { fill: var(--subtle-detail-color-contrast) !important; } +.red-svg svg path { + stroke: #d71010 !important; +} + a { color: var(--foreground-color); }