forked from MapComplete/MapComplete
41 lines
1.2 KiB
Svelte
41 lines
1.2 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import ThemeViewState from "../../Models/ThemeViewState";
|
||
|
|
import Translations from "../i18n/Translations";
|
||
|
|
import Tr from "../Base/Tr.svelte";
|
||
|
|
import Loading from "../Base/Loading.svelte";
|
||
|
|
|
||
|
|
export let state: ThemeViewState
|
||
|
|
/**
|
||
|
|
* Gives the contributor some feedback based on the current state:
|
||
|
|
* - is data loading?
|
||
|
|
* - Is all data hidden due to filters?
|
||
|
|
* - Is no data in view?
|
||
|
|
*/
|
||
|
|
|
||
|
|
let dataIsLoading = state.dataIsLoading
|
||
|
|
let currentState = state.hasDataInView
|
||
|
|
currentState.data === ""
|
||
|
|
const t = Translations.t.centerMessage
|
||
|
|
</script>
|
||
|
|
{#if $currentState === "has-visible-features"}
|
||
|
|
<!-- don't show anything -->
|
||
|
|
{:else if $currentState === "zoom-to-low"}
|
||
|
|
<div class="w-fit p-4 alert">
|
||
|
|
<Tr t={t.zoomIn}/>
|
||
|
|
</div>
|
||
|
|
{:else if $currentState === "all-filtered-away"}
|
||
|
|
<div class="w-fit p-4 alert">
|
||
|
|
<Tr t={t.allFilteredAway}/>
|
||
|
|
</div>
|
||
|
|
{:else if $dataIsLoading}
|
||
|
|
<div class="w-fit p-4 alert">
|
||
|
|
<Loading>
|
||
|
|
<Tr t={Translations.t.centerMessage.loadingData}/>
|
||
|
|
</Loading>
|
||
|
|
</div>
|
||
|
|
{:else if $currentState === "no-data"}
|
||
|
|
<div class="w-fit p-4 alert">
|
||
|
|
<Tr t={t.noData}/>
|
||
|
|
</div>
|
||
|
|
{/if}
|