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

Dashboard, Datenblatt usw.

Browse Source
This commit is contained in:
Moritz Utcke
2025-02-19 18:12:48 +11:00
parent 198912c792
commit 69566f1c74
39 changed files with 1479 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/modules/Dashboard/DashboardModule.svelte
View File

@@ -1,33 +1,20 @@
<script lang="ts">
import { BenutzerClient, ObjektClient, UploadedGebaeudeBild } from "#components/Ausweis/types.js";
import { Enums } from "@ibcornelsen/database/server";
import { BenutzerClient, ObjektKomplettClient } from "#components/Ausweis/types.js";
import DashboardAusweis from "#components/Dashboard/DashboardAusweis.svelte";
import DashboardObjekt from "#components/Dashboard/DashboardObjekt.svelte";
export let user: BenutzerClient;
export let objekte: (ObjektClient & {bilder: UploadedGebaeudeBild[]})[];
console.log(objekte);
export let objekte: ObjektKomplettClient[];
</script>
<h1 class="text-4xl font-medium my-8">Willkommen zurück, {user.vorname}!</h1>
<h1 class="text-4xl font-medium">Willkommen zurück, {user.vorname}!</h1>
<p class="text-lg">
Hier finden Sie eine Übersicht über all ihre Ausweise und Gebäude.
</p>
<h1 class="text-4xl font-medium my-8">Gebäude</h1>
<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
{#each objekte as objekt}
<div class="card lg:card-side bg-base-200 card-bordered border-base-300">
<figure class="lg:w-1/2">
<img
src={(objekt.bilder && `/bilder/${objekt.bilder.find(bild => bild.kategorie === Enums.BilderKategorie.Gebaeude)?.uid}.webp`) || "/images/placeholder.jpg"}
class="object-cover w-full h-full"
alt="Gebäudebild"
/>
</figure>
<div class="card-body lg:w-1/2 p-4">
<h4 class="text-lg font-semibold">{objekt.adresse}, {objekt.plz} {objekt.ort}</h4>
</div>
</div>
{/each}
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
{#each objekte as objekt}
<DashboardObjekt {objekt}></DashboardObjekt>
{/each}
</div>

31
src/modules/Dashboard/DashboardObjektModule.svelte Normal file
View File

@@ -0,0 +1,31 @@
<script lang="ts">
import { BenutzerClient, ObjektKomplettClient } from "#components/Ausweis/types.js";
import Carousel from "#components/Carousel.svelte";
import DashboardAusweis from "#components/Dashboard/DashboardAusweis.svelte";
import { ChevronLeft, ChevronRight } from "radix-svelte-icons";
export let user: BenutzerClient;
export let objekt: ObjektKomplettClient;
</script>
<h1 class="text-4xl font-medium mb-8">{objekt.adresse}</h1>
<Carousel perPage={1}>
{#each objekt.bilder as bild, i (i)}
<img src="/bilder/{bild.uid}.webp" alt={bild.kategorie} class="max-h-[60vh] 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>
<div class="my-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
{#each objekt.aufnahmen as aufnahme}
{@const ausweis = aufnahme.verbrauchsausweis_wohnen ?? aufnahme.verbrauchsausweis_gewerbe ?? aufnahme.bedarfsausweis_wohnen}
{#if !ausweis}
<p>Diese Aufnahme hat noch keinen Ausweis.</p>
{:else}
<DashboardAusweis {ausweis} {aufnahme} {objekt} progress={0}></DashboardAusweis>
{/if}
{/each}
</div>