103 lines
4.3 KiB
Svelte
103 lines
4.3 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 NotificationWrapper from "#components/Notifications/NotificationWrapper.svelte";
|
|
import { Aufnahme, BedarfsausweisWohnen, Bild, Objekt, Rechnung, Unterlage, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "#lib/client/prisma.js";
|
|
import { CaretRight, ChevronLeft, ChevronRight, FileText } from "radix-svelte-icons";
|
|
import CaretLeft from "radix-svelte-icons/src/lib/icons/CaretLeft.svelte";
|
|
|
|
export let ausweis: (VerbrauchsausweisWohnen | VerbrauchsausweisGewerbe | BedarfsausweisWohnen) & {
|
|
rechnung: Rechnung,
|
|
aufnahme: Aufnahme & {
|
|
bilder: Bild[],
|
|
unterlagen: Unterlage[],
|
|
objekt: Objekt
|
|
}
|
|
};
|
|
export let benutzer: BenutzerClient;
|
|
export let page: number;
|
|
export let totalPageCount: number;
|
|
|
|
|
|
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: {ausweis.id}
|
|
</div>
|
|
<div class="text-2xl">{ausweis.aufnahme.objekt.adresse}, {ausweis.aufnahme.objekt.plz} {ausweis.aufnahme.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-50 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 w-full" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
|
|
<a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude?aufnahme={ausweis.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={ausweis.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={ausweis.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="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 ausweis.aufnahme.bilder.length > 0}
|
|
<Carousel perPage={1}>
|
|
{#each ausweis.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>
|
|
|
|
<div class="flex items-center justify-between mx-80">
|
|
{#if page > 1}
|
|
<a class="p-2 rounded-lg hover:bg-gray-200 cursor-pointer" href="/dashboard/objekte?p={page - 1}">
|
|
<CaretLeft size={34}></CaretLeft>
|
|
</a>
|
|
{:else}
|
|
<div></div>
|
|
{/if}
|
|
<div class="text-lg">Ausweis {page} / {totalPageCount}</div>
|
|
{#if totalPageCount > page}
|
|
<a class="p-2 rounded-lg hover:bg-gray-200 cursor-pointer" href="/dashboard/objekte?p={page + 1}">
|
|
<CaretRight size={34}></CaretRight>
|
|
</a>
|
|
{:else}
|
|
<div></div>
|
|
{/if}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="mb-4 grid grid-cols-[1fr] md:grid-cols-[6fr,15fr,6fr] lg:grid-cols-[6fr,15fr,6fr] min-h-[550px]">
|
|
<DashboardAusweis {benutzer} {ausweis} aufnahme={ausweis.aufnahme} objekt={ausweis.aufnahme.objekt} rechnung={ausweis.rechnung}></DashboardAusweis>
|
|
</div>
|
|
|
|
<div class="fixed bottom-8 right-8 flex flex-col gap-4">
|
|
<NotificationWrapper></NotificationWrapper>
|
|
</div>
|
|
|
|
<style>
|
|
/* TODO: Das kann auch als Tailwind Klasse gemacht werden */
|
|
.button {
|
|
padding: 0.5rem 1rem;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
</style> |