Berechnung Bedarfsausweis

This commit is contained in:
Moritz Utcke
2023-05-08 22:03:27 +04:00
parent 2c2c69f2d3
commit e2d742e069
19 changed files with 2587 additions and 1414 deletions

View File

@@ -1,8 +1,8 @@
<script lang="ts">
import UploadImages from "../UploadImages.svelte";
import ImageGrid from "../ImageGrid.svelte";
let images: (File & { data: string })[] = [];
</script>
<div class="grid grid-cols-2 gap-4">
<div class="rounded-lg border-4 p-4 bg-white">
<input type="file" class="image_upload" multiple />
@@ -53,25 +53,10 @@
<div class="rounded-lg border-4 p-4 bg-white">
<p>
Diese Bilder erscheinen <span class="text-red-500">nicht</span> auf Ihrem
Energieausweis!<br />
Diese Bilder erscheinen <span class="text-red-500">nicht</span> auf
Ihrem Energieausweis!<br />
<strong>Bitte laden Sie hier mind. 1 Bild hoch:</strong>
</p>
<div class="flex flex-col gap-4">
<UploadImages max={4} bind:images></UploadImages>
<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>
{/each}
</div>
</div>
<ImageGrid max={4} bind:images />
</div>
</div>