104 lines
4.7 KiB
Svelte
104 lines
4.7 KiB
Svelte
<script lang="ts">
|
|
import { AufnahmeKomplettClient, BenutzerClient } from "#components/Ausweis/types.js";
|
|
import AusweisPruefenNotification from "#components/AusweisPruefenNotification.svelte";
|
|
import Carousel from "#components/Carousel.svelte";
|
|
import DashboardAusweis from "#components/Dashboard/DashboardAusweis.svelte";
|
|
import DashboardNachweis from "#components/Dashboard/DashboardNachweis.svelte";
|
|
import NotificationWrapper from "#components/Notifications/NotificationWrapper.svelte";
|
|
import { Objekt } from "#lib/client/prisma.js";
|
|
import mime from "mime"
|
|
import { ChevronLeft, ChevronRight, FileText } from "radix-svelte-icons";
|
|
|
|
export let user: BenutzerClient;
|
|
export let aufnahme: AufnahmeKomplettClient;
|
|
export let objekt: Objekt;
|
|
export let benutzer: BenutzerClient;
|
|
|
|
|
|
let dropdownOpen = false;
|
|
|
|
function toggleDropdown() {
|
|
dropdownOpen = !dropdownOpen;
|
|
}
|
|
</script>
|
|
|
|
<div class="justify-between items-center flex flex-row">
|
|
<div class="text-2xl rounded-lg gap-2 bg-grey-200 text-center">
|
|
ID VWRYQRWZZ4C
|
|
</div>
|
|
<div class="text-2xl">{objekt.adresse}, {objekt.plz} {objekt.ort}</div>
|
|
<div class="relative">
|
|
<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="absolute top-15 left-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-[9999]" 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.id}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Verbrauchsausweis<br>Wohnen Erstellen</a>
|
|
<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe?aufnahme={aufnahme.id}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Verbrauchsausweis<br>Gewerbe Erstellen</a>
|
|
<a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude?aufnahme={aufnahme.id}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Bedarfsausweis<br>Wohnen Erstellen</a>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<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.id}.jpg" alt={bild.kategorie} class="max-h-[15vh] 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>
|
|
{#if aufnahme.unterlagen.length > 0}
|
|
<h3 class="font-semibold">Unterlagen</h3>
|
|
<div class="grid grid-flow-col gap-4">
|
|
{#each aufnahme.unterlagen as unterlage}
|
|
<a href="/unterlagen/{unterlage.id}.{mime.getExtension(unterlage.mime)}" target="_blank" class="text-black flex flex-row items-center gap-2 bg-base-200 p-2 rounded-lg"><FileText size={32}></FileText> {unterlage.name}</a>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
</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 {benutzer} {ausweis} {aufnahme} {objekt} rechnung={ausweis.rechnung}></DashboardAusweis>
|
|
{/each}
|
|
{#each aufnahme.bedarfsausweise_wohnen as ausweis}
|
|
<DashboardAusweis {benutzer} {ausweis} {aufnahme} {objekt} rechnung={ausweis.rechnung}></DashboardAusweis>
|
|
{/each}
|
|
{#each aufnahme.verbrauchsausweise_gewerbe as ausweis}
|
|
<DashboardAusweis {benutzer} {ausweis} {aufnahme} {objekt} rechnung={ausweis.rechnung}></DashboardAusweis>
|
|
{/each}
|
|
{#each aufnahme.geg_nachweise_wohnen as nachweis}
|
|
<DashboardAusweis {benutzer} ausweis={nachweis} {aufnahme} {objekt} rechnung={nachweis.rechnung}></DashboardAusweis>
|
|
{/each}
|
|
{#each aufnahme.geg_nachweise_gewerbe as nachweis}
|
|
<DashboardAusweis {benutzer} ausweis={nachweis} {aufnahme} {objekt} rechnung={nachweis.rechnung}></DashboardAusweis>
|
|
{/each}
|
|
{#each aufnahme.bedarfsausweise_gewerbe as nachweis}
|
|
<DashboardAusweis {benutzer} ausweis={nachweis} {aufnahme} {objekt} rechnung={nachweis.rechnung}></DashboardAusweis>
|
|
{/each}
|
|
</div>
|
|
|
|
<div class="fixed bottom-8 right-8 flex flex-col gap-4">
|
|
<NotificationWrapper></NotificationWrapper>
|
|
</div> |