74 lines
3.0 KiB
Svelte
74 lines
3.0 KiB
Svelte
<script lang="ts">
|
|
import { AufnahmeKomplettClient, BenutzerClient } from "#components/Ausweis/types.js";
|
|
import Carousel from "#components/Carousel.svelte";
|
|
import DashboardAusweis from "#components/Dashboard/DashboardAusweis.svelte";
|
|
import { Objekt } from "#lib/client/prisma.js";
|
|
import { ChevronLeft, ChevronRight } from "radix-svelte-icons";
|
|
|
|
export let user: BenutzerClient;
|
|
export let aufnahme: AufnahmeKomplettClient;
|
|
export let objekt: Objekt;
|
|
|
|
|
|
let dropdownOpen = false;
|
|
|
|
function toggleDropdown() {
|
|
dropdownOpen = !dropdownOpen;
|
|
}
|
|
</script>
|
|
|
|
<h1>{objekt.adresse}, {objekt.plz} {objekt.ort}</h1>
|
|
|
|
<hr>
|
|
|
|
<div class="relative mb-6">
|
|
<button class="button flex flex-row rounded-lg gap-2 bg-secondary text-white text-center" on:click={toggleDropdown}>
|
|
Ausweis erstellen +
|
|
</button>
|
|
{#if dropdownOpen}
|
|
<div class="absolut mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5" on:click|stopPropagation on:keydown|stopPropagation on:keyup|stopPropagation>
|
|
<div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
|
|
<a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude?aufnahme={aufnahme.uid}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Verbrauchsausweis Wohnen Erstellen</a>
|
|
<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe?aufnahme={aufnahme.uid}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Verbrauchsausweis Gewerbe Erstellen</a>
|
|
<a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude?aufnahme={aufnahme.uid}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Bedarfsausweis Erstellen</a>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="my-4 grid grid-cols-1 md:grid-cols-1 lg:grid-cols-1 gap-2">
|
|
|
|
<div class="relative bg-gray-100 rounded-md flex justify-center items-center">
|
|
{#if aufnahme.bilder.length > 0}
|
|
<Carousel perPage={3}>
|
|
{#each aufnahme.bilder as bild, i (i)}
|
|
<img src="/bilder/{bild.uid}.jpg" alt={bild.kategorie} class="max-h-[25vh] h-full w-full object-contain">
|
|
{/each}
|
|
<span slot="left-control" class="p-2.5 bg-opacity-50 bg-white block rounded-full"><ChevronLeft size={24}></ChevronLeft></span>
|
|
<span slot="right-control" class="p-2.5 bg-opacity-50 bg-white block rounded-full"><ChevronRight size={24}></ChevronRight></span>
|
|
</Carousel>
|
|
{/if}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<style>
|
|
.button {
|
|
padding: 0.5rem 1rem;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
|
|
<div class="my-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
|
|
{#each aufnahme.verbrauchsausweise_wohnen as ausweis}
|
|
<DashboardAusweis {ausweis} {aufnahme} {objekt} progress={0}></DashboardAusweis>
|
|
{/each}
|
|
{#each aufnahme.bedarfsausweise_wohnen as ausweis}
|
|
<DashboardAusweis {ausweis} {aufnahme} {objekt} progress={0}></DashboardAusweis>
|
|
{/each}
|
|
{#each aufnahme.verbrauchsausweise_gewerbe as ausweis}
|
|
<DashboardAusweis {ausweis} {aufnahme} {objekt} progress={0}></DashboardAusweis>
|
|
{/each}
|
|
</div> |