forked from MapComplete/MapComplete
42 lines
1.4 KiB
Svelte
42 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import QueuedImage from "./QueuedImage.svelte"
|
|
import { ArrowPathIcon } from "@babeard/svelte-heroicons/mini"
|
|
import Loading from "../Base/Loading.svelte"
|
|
import { WithImageState } from "../../Models/ThemeViewState/WithImageState"
|
|
import Tr from "../Base/Tr.svelte"
|
|
import Translations from "../i18n/Translations"
|
|
import type { ImageUploadArguments } from "../../Logic/ImageProviders/ImageUploadQueue"
|
|
import { Store } from "../../Logic/UIEventSource"
|
|
import UploadingImageCounter from "./UploadingImageCounter.svelte"
|
|
export let state: WithImageState
|
|
let queued: Store<ImageUploadArguments[]> = state.imageUploadManager.queuedArgs
|
|
let isUploading = state.imageUploadManager.isUploading
|
|
const t = Translations.t
|
|
const q = t.imageQueue
|
|
</script>
|
|
|
|
<div class="m-4 flex flex-col">
|
|
{#if $queued.length === 0}
|
|
<Tr t={q.noFailedImages} />
|
|
{:else}
|
|
<div>
|
|
<Tr t={q.intro} />
|
|
</div>
|
|
|
|
<UploadingImageCounter {state} />
|
|
|
|
{#if $isUploading}
|
|
<Loading />
|
|
{:else}
|
|
<button class="primary" on:click={() => state.imageUploadManager.uploadQueue()}>
|
|
<ArrowPathIcon class="m-1 h-8 w-8" />
|
|
<Tr t={q.retryAll} />
|
|
</button>
|
|
{/if}
|
|
<div class="flex flex-wrap">
|
|
{#each $queued as i (i.date + i.featureId)}
|
|
<QueuedImage imageArguments={i} />
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|