91 lines
3.2 KiB
Svelte
91 lines
3.2 KiB
Svelte
<script lang="ts">
|
|
import UploadImages from "./UploadImages.svelte";
|
|
import type { Enums } from "#lib/client/prisma.js";
|
|
import { BedarfsausweisWohnenClient, BildClient, ObjektClient, VerbrauchsausweisGewerbeClient, VerbrauchsausweisWohnenClient } from "./Ausweis/types.js";
|
|
import { RotateCounterClockwise, Trash, Upload } from "radix-svelte-icons";
|
|
import { api } from "astro-typesafe-api/client";
|
|
import Cookies from "js-cookie";
|
|
import { API_ACCESS_TOKEN_COOKIE_NAME } from "#lib/constants.js";
|
|
|
|
export let images: BildClient[] = [];
|
|
export let max: number = Infinity;
|
|
export let min: number = 1;
|
|
export let name: string = "";
|
|
export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient | BedarfsausweisWohnenClient;
|
|
export let objekt: ObjektClient;
|
|
export let kategorie: Enums.BilderKategorie
|
|
|
|
async function deleteImage(image: BildClient) {
|
|
await api.bild.DELETE.fetch({
|
|
uid: image.uid
|
|
}, {
|
|
headers: {
|
|
"Authorization": `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`
|
|
}
|
|
})
|
|
|
|
images = images.filter((x) => x.uid !== image.uid);
|
|
}
|
|
|
|
let upload: () => void;
|
|
</script>
|
|
|
|
<div class="flex flex-col gap-4">
|
|
<UploadImages {name} {kategorie} {max} {min} bind:upload bind:objekt bind:images bind:ausweis><slot /></UploadImages>
|
|
<div class="grid grid-cols-2 gap-2">
|
|
{#each images as image, i}
|
|
{#if image.kategorie == kategorie}
|
|
<div class="relative group">
|
|
<img
|
|
src="/bilder/{image.uid}.jpg"
|
|
alt={kategorie}
|
|
class="h-full max-h-96 w-full rounded-lg border-2 group-hover:contrast-50 object-cover transition-all"
|
|
/>
|
|
<div class="invisible group-hover:visible absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] flex flex-row gap-2">
|
|
<button
|
|
type="button"
|
|
class="rounded-full w-[30px] h-[30px] flex items-center justify-center p-0 bg-[rgba(0,0,0,0.4)]"
|
|
on:click={() => {
|
|
deleteImage(images[i])
|
|
}}
|
|
>
|
|
<Trash size={20} color="#fff"></Trash>
|
|
</button>
|
|
<!-- <button
|
|
type="button"
|
|
class="rounded-full w-[30px] h-[30px] flex items-center justify-center p-0 bg-[rgba(0,0,0,0.4)]"
|
|
on:click={async () => {
|
|
let image = await rotateImage(images[i]);
|
|
images[i] = image;
|
|
images = images
|
|
}}
|
|
>
|
|
<RotateCounterClockwise size={20} color="#fff"></RotateCounterClockwise>
|
|
</button> -->
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
{/each}
|
|
|
|
<!-- Wir zeigen Platzhalter an, damit der Nutzer sieht wie viele Bilder er hochladen soll -->
|
|
{#each { length: Math.max(0, Math.min(max, 4) - images.filter(image => image.kategorie === kategorie).length) } as _, i}
|
|
<div class="relative group">
|
|
<img
|
|
src="/placeholder.png"
|
|
alt={kategorie}
|
|
class="h-full max-h-96 w-full rounded-lg border-2 group-hover:contrast-50 object-cover transition-all"
|
|
class:opacity-35={i >= min}
|
|
/>
|
|
<div class="invisible group-hover:visible absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] flex flex-row gap-2">
|
|
<button
|
|
type="button"
|
|
class="rounded-full w-[30px] h-[30px] flex items-center justify-center p-0 bg-[rgba(0,0,0,0.4)]"
|
|
on:click={upload}
|
|
>
|
|
<Upload size={20} color="#fff"></Upload>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div> |