MapComplete/src/UI/Search/SearchResults.svelte

37 lines
1.3 KiB
Svelte

<script lang="ts">
import { Store } from "../../Logic/UIEventSource"
import ActiveFilters from "./ActiveFilters.svelte"
import Constants from "../../Models/Constants"
import type { ActiveFilter } from "../../Logic/State/LayerState"
import ThemeViewState from "../../Models/ThemeViewState"
import ThemeResults from "./ThemeResults.svelte"
import GeocodeResults from "./GeocodeResults.svelte"
import FilterResults from "./FilterResults.svelte"
import Tr from "../Base/Tr.svelte"
import Translations from "../i18n/Translations"
export let state: ThemeViewState
let activeFilters: Store<ActiveFilter[]> = state.layerState.activeFilters.map(fs => fs.filter(f =>
(f.filter.options[0].fields.length === 0) &&
Constants.priviliged_layers.indexOf(<any>f.layer.id) < 0))
let allowOtherThemes = state.featureSwitches.featureSwitchBackToThemeOverview
let searchTerm = state.searchState.searchTerm
</script>
<div class="p-4 low-interaction flex gap-y-2 flex-col">
<ActiveFilters {state} activeFilters={$activeFilters} />
{#if $searchTerm.length === 0 && $activeFilters.length === 0 }
<div class="p-8 items-center text-center">
<b><Tr t={Translations.t.general.search.instructions}/></b>
</div>
{/if}
<FilterResults {state}/>
<GeocodeResults {state}/>
{#if $allowOtherThemes}
<ThemeResults {state} />
{/if}
</div>