forked from MapComplete/MapComplete
More layout tweaks and fixes
This commit is contained in:
parent
b678efffd1
commit
2019e6c34c
11 changed files with 161 additions and 99 deletions
|
@ -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}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue