forked from MapComplete/MapComplete
Feature: add online indicator to special renderings or hide them in case of failure
This commit is contained in:
parent
b6366412ea
commit
6f44fe31d0
7 changed files with 28 additions and 12 deletions
|
|
@ -8,6 +8,7 @@
|
|||
import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
|
||||
import Invalid from "../../assets/svg/Invalid.svelte"
|
||||
import ArrowPath from "@babeard/svelte-heroicons/mini/ArrowPath"
|
||||
import { IsOnline } from "../../Logic/Web/IsOnline"
|
||||
|
||||
export let state: {
|
||||
osmConnection: OsmConnection
|
||||
|
|
@ -17,10 +18,6 @@
|
|||
* If set, 'loading' will act as if we are already logged in.
|
||||
*/
|
||||
export let ignoreLoading: boolean = false
|
||||
/**
|
||||
* Only show the 'successful' state, don't show loading or error messages
|
||||
*/
|
||||
export let silentFail: boolean = false
|
||||
/**
|
||||
* If set and the OSM-api fails, do _not_ show any error messages nor the successful state, just hide.
|
||||
* Will still show the "not-logged-in"-slot
|
||||
|
|
@ -37,14 +34,21 @@
|
|||
}
|
||||
const apiState: Store<string> =
|
||||
state?.osmConnection?.apiIsOnline ?? new ImmutableStore<OsmServiceState>("online")
|
||||
const online = IsOnline.isOnline
|
||||
</script>
|
||||
|
||||
{#if $badge}
|
||||
{#if !ignoreLoading && !silentFail && $loadingStatus === "loading"}
|
||||
{#if !$online}
|
||||
{#if !hiddenFail}
|
||||
<div class="alert">
|
||||
Your device is offline
|
||||
</div>
|
||||
{/if}
|
||||
{:else if !ignoreLoading && !hiddenFail && $loadingStatus === "loading"}
|
||||
<slot name="loading">
|
||||
<Loading />
|
||||
</slot>
|
||||
{:else if !silentFail && ($loadingStatus === "error" || $apiState === "readonly" || $apiState === "offline")}
|
||||
{:else if ($loadingStatus === "error" || $apiState === "readonly" || $apiState === "offline")}
|
||||
{#if !hiddenFail}
|
||||
<slot name="error">
|
||||
<div class="alert flex flex-col items-center">
|
||||
|
|
@ -61,7 +65,7 @@
|
|||
{/if}
|
||||
{:else if $loadingStatus === "logged-in"}
|
||||
<slot />
|
||||
{:else if !silentFail && $loadingStatus === "not-attempted"}
|
||||
{:else if $loadingStatus === "not-attempted"}
|
||||
<slot name="not-logged-in" />
|
||||
{/if}
|
||||
{/if}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue