forked from MapComplete/MapComplete
66 lines
2.1 KiB
Svelte
66 lines
2.1 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import type { ImageUploadArguments } from "../../Logic/ImageProviders/ImageUploadQueue"
|
||
|
|
import ImageUploadQueue from "../../Logic/ImageProviders/ImageUploadQueue"
|
||
|
|
import { TrashIcon } from "@babeard/svelte-heroicons/mini"
|
||
|
|
import Popup from "../Base/Popup.svelte"
|
||
|
|
import { UIEventSource } from "../../Logic/UIEventSource"
|
||
|
|
import Page from "../Base/Page.svelte"
|
||
|
|
import BackButton from "../Base/BackButton.svelte"
|
||
|
|
import Tr from "../Base/Tr.svelte"
|
||
|
|
import Translations from "../i18n/Translations"
|
||
|
|
|
||
|
|
let queue = ImageUploadQueue.singleton
|
||
|
|
export let imageArguments: ImageUploadArguments
|
||
|
|
let confirmDelete = new UIEventSource(false)
|
||
|
|
|
||
|
|
|
||
|
|
function del() {
|
||
|
|
queue.delete(imageArguments)
|
||
|
|
}
|
||
|
|
|
||
|
|
const t = Translations.t
|
||
|
|
let src = undefined
|
||
|
|
try{
|
||
|
|
|
||
|
|
src = URL.createObjectURL(imageArguments.blob)
|
||
|
|
}catch (e) {
|
||
|
|
console.error("Could not create an ObjectURL for blob", imageArguments.blob)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="low-interaction rounded border-interactive w-fit p-2 m-1 flex flex-col">
|
||
|
|
|
||
|
|
<img class="max-w-64 w-auto max-h-64 w-auto" {src} />
|
||
|
|
{imageArguments.featureId} {imageArguments.layoutId}
|
||
|
|
<button class="as-link self-end" on:click={() => {confirmDelete.set(true)}}>
|
||
|
|
<TrashIcon class="w-4" />
|
||
|
|
<Tr t={t.imageQueue.delete} />
|
||
|
|
</button>
|
||
|
|
<Popup shown={confirmDelete} dismissable={true}>
|
||
|
|
<Page shown={confirmDelete}>
|
||
|
|
<svelte:fragment slot="header">
|
||
|
|
<TrashIcon class="w-8 m-1" />
|
||
|
|
<Tr t={t.imageQueue.confirmDeleteTitle} />
|
||
|
|
</svelte:fragment>
|
||
|
|
|
||
|
|
<div class="flex flex-col ">
|
||
|
|
|
||
|
|
<div class="flex justify-center">
|
||
|
|
<img class="max-w-128 w-auto max-h-128 w-auto" src={URL.createObjectURL(imageArguments.blob)} />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex w-full">
|
||
|
|
<BackButton clss="w-full" on:click={() => confirmDelete.set(false)}>
|
||
|
|
<Tr t={t.general.back} />
|
||
|
|
</BackButton>
|
||
|
|
<button on:click={() => del()} class="primary w-full">
|
||
|
|
|
||
|
|
<TrashIcon class="w-8 m-1" />
|
||
|
|
<Tr t={t.imageQueue.confirmDelete} />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Page>
|
||
|
|
</Popup>
|
||
|
|
</div>
|