MapComplete/src/UI/Image/QueuedImagesView.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>