Feature(offline): more offline hardening

This commit is contained in:
Pieter Vander Vennet 2025-08-08 13:19:49 +02:00
parent f1da97285f
commit 561e4cb009
7 changed files with 103 additions and 69 deletions

View file

@ -13,9 +13,10 @@
import Translations from "../i18n/Translations"
import Tr from "../Base/Tr.svelte"
import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
import GlobeAlt from "@babeard/svelte-heroicons/mini/GlobeAlt"
import { ComparisonState } from "./ComparisonState"
import LoginToggle from "../Base/LoginToggle.svelte"
import { IsOnline } from "../../Logic/Web/IsOnline"
import GlobeAlt from "@babeard/svelte-heroicons/mini/GlobeAlt"
export let externalData: Store<
| { success: { content: Record<string, string> } }
@ -33,7 +34,7 @@
* A switch that signals that the information should be downloaded.
* The actual 'download' code is _not_ implemented here
*/
export let downloadInformation : UIEventSource<boolean>
export let downloadInformation: UIEventSource<boolean>
export let collapsed: boolean
const t = Translations.t.external
@ -48,45 +49,47 @@
let propertyKeysExternal = comparisonState.mapD((ct) => ct.propertyKeysExternal)
let hasDifferencesAtStart = comparisonState.mapD((ct) => ct.hasDifferencesAtStart)
let enableLogin = state.featureSwitches.featureSwitchEnableLogin
const online = IsOnline.isOnline
</script>
<LoginToggle {state} silentFail>
{#if !$sourceUrl || !$enableLogin}
<!-- empty block -->
{#if $online}
<LoginToggle {state} hiddenFail>
{#if !$sourceUrl || !$enableLogin}
<!-- empty block -->
{:else if !$downloadInformation}
<button on:click={() => downloadInformation.set(true)}>
Attempt to download information from the website {$sourceUrl}
</button>
{:else if $externalData === undefined}
<div class="flex justify-center">
<Loading />
</div>
{:else if $externalData["error"] !== undefined}
<div class="subtle low-interaction rounded p-2 px-4 italic">
<Tr t={Translations.t.external.error} />
</div>
{:else if $propertyKeysExternal.length === 0 && $knownImages.size + $unknownImages.length === 0}
<Tr cls="subtle" t={t.noDataLoaded} />
{:else if !$hasDifferencesAtStart}
<button on:click={() => downloadInformation.set(true)}>
Attempt to download information from the website {$sourceUrl}
</button>
{:else if $externalData === undefined}
<div class="flex justify-center">
<Loading />
</div>
{:else if $externalData["error"] !== undefined}
<div class="subtle low-interaction rounded p-2 px-4 italic">
<Tr t={Translations.t.external.error} />
</div>
{:else if $propertyKeysExternal.length === 0 && $knownImages.size + $unknownImages.length === 0}
<Tr cls="subtle" t={t.noDataLoaded} />
{:else if !$hasDifferencesAtStart}
<span class="subtle text-sm">
<Tr t={t.allIncluded.Subs({ source: $sourceUrl })} />
</span>
{:else if $comparisonState !== undefined}
<AccordionSingle expanded={!collapsed}>
{:else if $comparisonState !== undefined}
<AccordionSingle expanded={!collapsed}>
<span slot="header" class="flex">
<GlobeAlt class="h-6 w-6" />
<Tr t={Translations.t.external.title} />
</span>
<ComparisonTable
externalProperties={$externalData["success"]}
{state}
{feature}
{layer}
{tags}
{readonly}
sourceUrl={$sourceUrl}
comparisonState={$comparisonState}
/>
</AccordionSingle>
{/if}
</LoginToggle>
<ComparisonTable
externalProperties={$externalData["success"]}
{state}
{feature}
{layer}
{tags}
{readonly}
sourceUrl={$sourceUrl}
comparisonState={$comparisonState}
/>
</AccordionSingle>
{/if}
</LoginToggle>
{/if}