forked from MapComplete/MapComplete
88 lines
2.8 KiB
Svelte
88 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
/**
|
|
* Shows information about how much images are uploaded for the given feature
|
|
*
|
|
* Either pass in a store with tags or a featureId.
|
|
*/
|
|
|
|
import type { SpecialVisualizationState } from "../SpecialVisualization"
|
|
import { Store } from "../../Logic/UIEventSource"
|
|
import type { NoteId, OsmTags, OsmId } from "../../Models/OsmFeature"
|
|
import Translations from "../i18n/Translations"
|
|
import Tr from "../Base/Tr.svelte"
|
|
import Loading from "../Base/Loading.svelte"
|
|
import UploadFailedMessage from "./UploadFailedMessage.svelte"
|
|
|
|
export let state: SpecialVisualizationState
|
|
export let tags: Store<OsmTags> = undefined
|
|
export let featureId: OsmId | NoteId | "*" = tags?.data?.id ?? "*"
|
|
if (featureId === undefined) {
|
|
throw "No tags or featureID given"
|
|
}
|
|
export let showThankYou: boolean = true
|
|
|
|
/*
|
|
Number of images uploaded succesfully
|
|
*/
|
|
function getCount(input: Store<string[]>): Store<number> {
|
|
if (featureId == "*") {
|
|
return input.map((inp) => inp.length)
|
|
}
|
|
return input.map((success) => success.filter((item) => item === featureId).length)
|
|
}
|
|
|
|
let successfull = getCount(state.imageUploadManager.successfull)
|
|
/* Number of failed uploads */
|
|
let failed = getCount(state.imageUploadManager.fails)
|
|
|
|
let pending = getCount(state.imageUploadManager.queued)
|
|
const t = Translations.t.image
|
|
const debugging = state.featureSwitches.featureSwitchIsDebugging
|
|
let dismissed = 0
|
|
failed.addCallbackAndRun((failed) => {
|
|
dismissed = Math.min(failed, dismissed)
|
|
})
|
|
let progress = state.imageUploadManager.progressCurrentImage
|
|
</script>
|
|
|
|
{#if $debugging}
|
|
<div class="low-interaction">
|
|
Pending {$pending} Done {$successfull} Err {$failed}
|
|
</div>
|
|
{/if}
|
|
|
|
{#if $pending - $failed > 0}
|
|
<div class="alert">
|
|
<Loading>
|
|
<div class="flex w-full flex-col">
|
|
<div class="flex w-full justify-between gap-x-8">
|
|
{#if $pending - $failed === 1}
|
|
<Tr t={t.upload.one.uploading} />
|
|
{:else if $pending - $failed > 1}
|
|
<Tr t={t.upload.multiple.uploading.Subs({ count: $pending })} />
|
|
{/if}
|
|
{#if $progress !== undefined}
|
|
{$progress}%
|
|
{/if}
|
|
</div>
|
|
{#if $progress !== undefined}
|
|
<div class="low-interaction h-1 w-full overflow-hidden rounded-full">
|
|
<div class="h-1 bg-black" style={`width: calc(${$progress}%)`} />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</Loading>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if $failed > dismissed}
|
|
<UploadFailedMessage failed={$failed} on:click={() => (dismissed = $failed)} />
|
|
{/if}
|
|
|
|
{#if showThankYou}
|
|
{#if $successfull === 1}
|
|
<Tr cls="thanks" t={t.upload.one.done} />
|
|
{:else if $successfull > 1}
|
|
<Tr cls="thanks" t={t.upload.multiple.done.Subs({ count: $successfull })} />
|
|
{/if}
|
|
{/if}
|