mapcomplete/UI/BigComponents/Filterview.svelte

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

108 lines
4.3 KiB
Svelte
Raw Normal View History

2023-03-28 05:13:48 +02:00
<script lang="ts">/**
* The FilterView shows the various options to enable/disable a single layer or to only show a subset of the data.
2023-03-28 05:13:48 +02:00
*/
import type FilteredLayer from "../../Models/FilteredLayer";
import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
import ToSvelte from "../Base/ToSvelte.svelte";
import Checkbox from "../Base/Checkbox.svelte";
import FilterConfig from "../../Models/ThemeConfig/FilterConfig";
2023-05-11 17:29:25 +02:00
import type {Writable} from "svelte/store";
2023-03-28 05:13:48 +02:00
import If from "../Base/If.svelte";
import Dropdown from "../Base/Dropdown.svelte";
2023-05-11 17:29:25 +02:00
import {onDestroy} from "svelte";
import {ImmutableStore, Store} from "../../Logic/UIEventSource";
import FilterviewWithFields from "./FilterviewWithFields.svelte";
import Tr from "../Base/Tr.svelte";
import Translations from "../i18n/Translations";
2023-03-28 05:13:48 +02:00
export let filteredLayer: FilteredLayer;
2023-05-11 17:29:25 +02:00
export let highlightedLayer: Store<string | undefined> = new ImmutableStore(undefined);
2023-04-24 03:22:43 +02:00
export let zoomlevel: Store<number> = new ImmutableStore(22);
2023-03-28 05:13:48 +02:00
let layer: LayerConfig = filteredLayer.layerDef;
2023-05-14 18:25:32 +02:00
let isDisplayed: Store<boolean> = filteredLayer.isDisplayed;
2023-03-28 05:13:48 +02:00
/**
* Gets a UIEventSource as boolean for the given option, to be used with a checkbox
*/
function getBooleanStateFor(option: FilterConfig): Writable<boolean> {
2023-05-11 17:29:25 +02:00
const state = filteredLayer.appliedFilters.get(option.id);
return state.sync(f => f === 0, [], (b) => b ? 0 : undefined);
2023-03-28 05:13:48 +02:00
}
/**
* Gets a UIEventSource as number for the given option, to be used with a dropdown or radiobutton
*/
function getStateFor(option: FilterConfig): Writable<number> {
2023-05-11 17:29:25 +02:00
return filteredLayer.appliedFilters.get(option.id);
2023-03-28 05:13:48 +02:00
}
let mainElem: HTMLElement;
$: onDestroy(
2023-05-11 17:29:25 +02:00
highlightedLayer.addCallbackAndRun(highlightedLayer => {
if (highlightedLayer === filteredLayer.layerDef.id) {
mainElem?.classList?.add("glowing-shadow");
} else {
mainElem?.classList?.remove("glowing-shadow");
}
})
);
2023-03-28 05:13:48 +02:00
</script>
{#if filteredLayer.layerDef.name}
2023-05-14 18:25:32 +02:00
<div bind:this={mainElem} class="mb-1.5">
<label class="flex gap-1 no-image-background">
<Checkbox selected={isDisplayed}/>
2023-05-11 17:29:25 +02:00
<If condition={filteredLayer.isDisplayed}>
<ToSvelte
construct={() => layer.defaultIcon()?.SetClass("block h-6 w-6 no-image-background")}></ToSvelte>
<ToSvelte slot="else"
construct={() => layer.defaultIcon()?.SetClass("block h-6 w-6 no-image-background opacity-50")}></ToSvelte>
</If>
2023-03-28 05:13:48 +02:00
2023-05-11 17:29:25 +02:00
{filteredLayer.layerDef.name}
2023-05-11 17:29:25 +02:00
{#if $zoomlevel < layer.minzoom}
<span class="alert">
2023-05-11 17:29:25 +02:00
<Tr t={Translations.t.general.layerSelection.zoomInToSeeThisLayer}/>
</span>
2023-03-28 05:13:48 +02:00
{/if}
2023-05-11 17:29:25 +02:00
</label>
2023-05-14 18:25:32 +02:00
{#if $isDisplayed && filteredLayer.layerDef.filters?.length > 0}
<div id="subfilters" class="flex flex-col gap-y-1 ml-4">
2023-05-11 17:29:25 +02:00
{#each filteredLayer.layerDef.filters as filter}
<div>
<!-- There are three (and a half) modes of filters: a single checkbox, a radio button/dropdown or with searchable fields -->
{#if filter.options.length === 1 && filter.options[0].fields.length === 0}
<label>
<Checkbox selected={getBooleanStateFor(filter)}/>
{filter.options[0].question}
</label>
{/if}
{#if filter.options.length === 1 && filter.options[0].fields.length > 0}
<FilterviewWithFields id={filter.id} filteredLayer={filteredLayer}
option={filter.options[0]}></FilterviewWithFields>
{/if}
2023-03-28 05:13:48 +02:00
2023-05-11 17:29:25 +02:00
{#if filter.options.length > 1}
<Dropdown value={getStateFor(filter)}>
{#each filter.options as option, i}
<option value={i}>
{ option.question}
</option>
{/each}
</Dropdown>
{/if}
2023-03-28 05:13:48 +02:00
2023-05-11 17:29:25 +02:00
</div>
{/each}
</div>
2023-05-14 18:25:32 +02:00
{/if}
2023-05-11 17:29:25 +02:00
</div>
2023-03-28 05:13:48 +02:00
{/if}
2023-05-11 17:29:25 +02:00