More layout tweaks and fixes

This commit is contained in:
Pieter Vander Vennet 2024-06-18 19:40:50 +02:00
parent b678efffd1
commit 2019e6c34c
11 changed files with 161 additions and 99 deletions

View file

@ -14,6 +14,7 @@
import Tr from "../Base/Tr.svelte"
import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
import GlobeAlt from "@babeard/svelte-heroicons/mini/GlobeAlt"
import { ComparisonState } from "./ComparisonState"
export let externalData: Store<
| { success: { content: Record<string, string> } }
@ -28,7 +29,20 @@
export let readonly = false
export let sourceUrl: Store<string>
export let collapsed : boolean
export let collapsed: boolean
const t = Translations.t.external
let comparisonState: Store<ComparisonState | undefined> = externalData.mapD(external => {
if (external["success"]) {
return new ComparisonState(tags, external["success"])
}
return undefined
})
let unknownImages = comparisonState.bindD(ct => ct.unknownImages)
let knownImages = comparisonState.bindD(ct => ct.knownImages)
let propertyKeysExternal = comparisonState.mapD(ct => ct.propertyKeysExternal)
let hasDifferencesAtStart = comparisonState.mapD(ct => ct.hasDifferencesAtStart)
</script>
{#if !$sourceUrl}
@ -39,20 +53,27 @@
<div class="subtle italic low-interaction p-2 px-4 rounded">
<Tr t={Translations.t.external.error} />
</div>
{:else if $externalData["success"] !== undefined}
<AccordionSingle>
{: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}>
<span slot="header" class="flex">
<GlobeAlt class="w-6 h-6"/>
<Tr t={Translations.t.external.title}/>
<GlobeAlt class="w-6 h-6" />
<Tr t={Translations.t.external.title} />
</span>
<ComparisonTable
externalProperties={$externalData["success"]}
{state}
{feature}
{layer}
{tags}
{readonly}
sourceUrl={$sourceUrl}
/>
<ComparisonTable
externalProperties={$externalData["success"]}
{state}
{feature}
{layer}
{tags}
{readonly}
sourceUrl={$sourceUrl}
comparisonState={$comparisonState}
/>
</AccordionSingle>
{/if}