IBCornelsen/online-energieausweis
1
0
Fork 0
Code Issues 272 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Weitere Tests, Besseres Typechecking, Alle Ausweise und Verbesserter Verbrauchsausweis Gewerbe

Browse Source
This commit is contained in:
Moritz Utcke
2024-01-14 22:35:22 +07:00
parent 3e9b312354
commit ceed5f7bb7
61 changed files with 1219 additions and 394 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/ImageGrid.svelte
View File

@@ -1,33 +1,39 @@
<script lang="ts">
import UploadImages from "./UploadImages.svelte";
import type { BedarfsausweisWohnen, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "@ibcornelsen/database/client";
import type { BedarfsausweisWohnen, Enums, VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./Ausweis/types";
export let images: (File & { data: string })[] = [];
export let images: UploadedGebaeudeBild[] = [];
export let max: number = 4;
export let ausweis: VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
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 {max} bind:images bind:ausweis />
<UploadImages {name} {kategorie} {max} bind:gebaeude bind:images bind:ausweis />
<div class="grid grid-cols-2 gap-2">
{#each images as image, i}
<div class="relative group">
<img
src={image.data}
alt={image.name}
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 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>