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

Dashboard

Browse Source
This commit is contained in:
Jens Cornelsen
2025-02-23 04:35:02 +01:00
parent f8f53d0ac9
commit 8f9f79a02d
7 changed files with 117 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/modules/Dashboard/DashboardAufnahmeModule.svelte
View File

@@ -3,35 +3,71 @@
import Carousel from "#components/Carousel.svelte";
import DashboardAusweis from "#components/Dashboard/DashboardAusweis.svelte";
import { Objekt } from "#lib/client/prisma";
import { ChevronLeft, ChevronRight, Plus } from "radix-svelte-icons";
import { ChevronLeft, ChevronRight } from "radix-svelte-icons";
export let user: BenutzerClient;
export let aufnahme: AufnahmeKomplettClient;
export let objekt: Objekt;
import { onMount } from "svelte";
let dropdownOpen = false;
function toggleDropdown() {
dropdownOpen = !dropdownOpen;
}
function closeDropdown() {
dropdownOpen = false;
}
</script>
<h1>{objekt.adresse}, {objekt.plz} {objekt.ort}</h1>
<div class="bg-white rounded-lg">
<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">
<button class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Verbrauchsausweis Wohnen Erstellen</button>
<button class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Verbrauchsausweis Gewerbe Erstellen</button>
<button class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Bedarfsausweis Erstellen</button>
</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={1}>
{#each aufnahme.bilder as bild, i (i)}
<img src="/bilder/{bild.uid}.jpg" alt={bild.kategorie} class="max-h-[30vh] 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>
<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 class="flex flex-row gap-4">
<button class="button flex flex-row rounded-lg gap-2"><Plus size={20}></Plus> Verbrauchsausweis Wohnen Erstellen</button>
<button class="button flex flex-row rounded-lg gap-2"><Plus size={20}></Plus> Verbrauchsausweis Gewerbe Erstellen</button>
<button class="button flex flex-row rounded-lg gap-2"><Plus size={20}></Plus> Bedarfsausweis Erstellen</button>
</div>
<div class="my-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<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}