UX: Disable comparison tool if not logged in

This commit is contained in:
Pieter Vander Vennet 2024-08-27 19:37:21 +02:00
parent 5c56651b5e
commit 065f03691f

View file

@ -15,6 +15,7 @@
import AccordionSingle from "../Flowbite/AccordionSingle.svelte" import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
import GlobeAlt from "@babeard/svelte-heroicons/mini/GlobeAlt" import GlobeAlt from "@babeard/svelte-heroicons/mini/GlobeAlt"
import { ComparisonState } from "./ComparisonState" import { ComparisonState } from "./ComparisonState"
import LoginToggle from "../Base/LoginToggle.svelte"
export let externalData: Store< export let externalData: Store<
| { success: { content: Record<string, string> } } | { success: { content: Record<string, string> } }
@ -45,35 +46,38 @@
let enableLogin = state.featureSwitches.featureSwitchEnableLogin let enableLogin = state.featureSwitches.featureSwitchEnableLogin
</script> </script>
{#if !$sourceUrl || !$enableLogin} <LoginToggle {state} silentFail>
<!-- empty block -->
{:else if $externalData === undefined} {#if !$sourceUrl || !$enableLogin}
<Loading /> <!-- empty block -->
{:else if $externalData["error"] !== undefined} {:else if $externalData === undefined}
<div class="subtle low-interaction rounded p-2 px-4 italic"> <Loading />
<Tr t={Translations.t.external.error} /> {:else if $externalData["error"] !== undefined}
</div> <div class="subtle low-interaction rounded p-2 px-4 italic">
{:else if $propertyKeysExternal.length === 0 && $knownImages.size + $unknownImages.length === 0} <Tr t={Translations.t.external.error} />
<Tr cls="subtle" t={t.noDataLoaded} /> </div>
{:else if !$hasDifferencesAtStart} {:else if $propertyKeysExternal.length === 0 && $knownImages.size + $unknownImages.length === 0}
<Tr cls="subtle" t={t.noDataLoaded} />
{:else if !$hasDifferencesAtStart}
<span class="subtle text-sm"> <span class="subtle text-sm">
<Tr t={t.allIncluded.Subs({ source: $sourceUrl })} /> <Tr t={t.allIncluded.Subs({ source: $sourceUrl })} />
</span> </span>
{:else if $comparisonState !== undefined} {:else if $comparisonState !== undefined}
<AccordionSingle expanded={!collapsed}> <AccordionSingle expanded={!collapsed}>
<span slot="header" class="flex"> <span slot="header" class="flex">
<GlobeAlt class="h-6 w-6" /> <GlobeAlt class="h-6 w-6" />
<Tr t={Translations.t.external.title} /> <Tr t={Translations.t.external.title} />
</span> </span>
<ComparisonTable <ComparisonTable
externalProperties={$externalData["success"]} externalProperties={$externalData["success"]}
{state} {state}
{feature} {feature}
{layer} {layer}
{tags} {tags}
{readonly} {readonly}
sourceUrl={$sourceUrl} sourceUrl={$sourceUrl}
comparisonState={$comparisonState} comparisonState={$comparisonState}
/> />
</AccordionSingle> </AccordionSingle>
{/if} {/if}
</LoginToggle>