forked from MapComplete/MapComplete
69 lines
2.2 KiB
Svelte
69 lines
2.2 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 border-interactive m-1 flex w-fit flex-col rounded p-2">
|
|
<img class="max-h-64 w-auto w-auto max-w-64" {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="m-1 w-8" />
|
|
<Tr t={t.imageQueue.confirmDeleteTitle} />
|
|
</svelte:fragment>
|
|
|
|
<div class="flex flex-col">
|
|
<div class="flex justify-center">
|
|
<img
|
|
class="max-w-128 max-h-128 w-auto 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="m-1 w-8" />
|
|
<Tr t={t.imageQueue.confirmDelete} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Page>
|
|
</Popup>
|
|
</div>
|