40 lines
1.3 KiB
Svelte
40 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import UploadImages from "./UploadImages.svelte";
|
|
import type { BedarfsausweisWohnen, Enums, VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
|
|
import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./Ausweis/types";
|
|
|
|
export let images: UploadedGebaeudeBild[] = [];
|
|
export let max: number = 4;
|
|
export let name: string = "";
|
|
export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
|
|
export let gebaeude: GebaeudeClient;
|
|
export let kategorie: Enums.BilderKategorie
|
|
</script>
|
|
|
|
<div class="flex flex-col gap-4">
|
|
<UploadImages {name} {kategorie} {max} bind:gebaeude bind:images bind:ausweis />
|
|
<div class="grid grid-cols-2 gap-2">
|
|
{#each images as image, i}
|
|
{#if image.kategorie == kategorie}
|
|
<div class="relative group">
|
|
<img
|
|
src={image.base64}
|
|
alt={kategorie}
|
|
class="h-full rounded-lg border-2 group-hover:contrast-50 object-cover transition-all"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="invisible group-hover:visible absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] rounded-full w-[30px] h-[30px] p-2 bg-[rgba(0,0,0,0.4)]"
|
|
on:click={() => {
|
|
delete images[i];
|
|
images = images.filter((x) => x);
|
|
}}
|
|
>
|
|
R
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
</div>
|