forked from MapComplete/MapComplete
57 lines
1.6 KiB
Svelte
57 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
/**
|
|
* Shows all the location-results
|
|
*/
|
|
import Translations from "../i18n/Translations"
|
|
import SidebarUnit from "../Base/SidebarUnit.svelte"
|
|
import Loading from "../Base/Loading.svelte"
|
|
import { default as GeocodeResultSvelte } from "./GeocodeResult.svelte"
|
|
import Tr from "../Base/Tr.svelte"
|
|
import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
|
|
import type { GeocodeResult } from "../../Logic/Search/GeocodingProvider"
|
|
import type { MapProperties } from "../../Models/MapProperties"
|
|
|
|
export let state: {
|
|
searchState: {
|
|
searchTerm: UIEventSource<string>
|
|
suggestions: Store<GeocodeResult[]>
|
|
suggestionsSearchRunning: Store<boolean>
|
|
}, mapProperties: MapProperties
|
|
}
|
|
|
|
let searchTerm = state.searchState.searchTerm
|
|
let results = state.searchState.suggestions
|
|
let isSearching = state.searchState.suggestionsSearchRunning ?? new ImmutableStore(false)
|
|
|
|
const t = Translations.t.general.search
|
|
</script>
|
|
|
|
{#if $searchTerm.length > 0}
|
|
<SidebarUnit>
|
|
<h3>
|
|
<Tr t={t.locations} />
|
|
</h3>
|
|
|
|
{#if $results?.length > 0}
|
|
{#each $results as entry (entry)}
|
|
<GeocodeResultSvelte on:select {entry} {state} />
|
|
{/each}
|
|
{/if}
|
|
|
|
{#if $isSearching}
|
|
<div class="m-4 my-8 flex justify-center">
|
|
<Loading>
|
|
<Tr t={t.searching} />
|
|
</Loading>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if !$isSearching && $results?.length === 0}
|
|
<b class="flex justify-center p-4">
|
|
<Tr t={t.nothingFor.Subs({ term: "<i>" + $searchTerm + "</i>" })} />
|
|
</b>
|
|
{/if}
|
|
</SidebarUnit>
|
|
{:else}
|
|
<slot name="if-no-results" />
|
|
{/if}
|