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

Dashboard angepasst

Browse Source
This commit is contained in:
Jens Cornelsen
2025-04-05 13:27:05 +02:00
parent 912970923f
commit 0bc4fd6670
5 changed files with 159 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/Dashboard/DashboardObjekt.svelte
View File

@@ -7,40 +7,48 @@
export let objekt: ObjektKomplettClient;
</script>
<div class="border rounded-lg border-base-300 bg-white break-inside-avoid-column mb-4">
<div class=" bg-white grid grid-cols-3 md:grid-cols-3 lg:grid-cols-3 gap-4">
{#if objekt.aufnahmen.length > 0}
{@const bild = objekt.aufnahmen[0].bilder.find(bild => bild.kategorie === Enums.BilderKategorie.Gebaeude)}
<div>
{#if bild}
<img src="/bilder/{bild.id}.jpg" class="w-full max-h-72 object-cover rounded-t-lg" alt="Gebäude">
<img src="/bilder/{bild.id}.jpg" class="w-full h-[150px] object-cover rounded-lg" alt="Gebäude">
{:else}
<img src="/placeholder.png" class="w-full max-h-72 object-cover rounded-t-lg" alt="Gebäude">
<img src="/placeholder.png" class="w-full h-[150px] object-cover rounded-lg" alt="Gebäude">
{/if}
<h3 class="text-lg font-medium">{objekt.adresse}, {objekt.plz} {objekt.ort}</h3>
</div>
{/if}
<div class="p-4">
<div class="flex flex-row justify-between items-center">
<h3 class="text-lg font-medium">{objekt.adresse}, {objekt.plz} {objekt.ort}</h3>
<span class="text-sm opacity-70 font-medium">{moment(objekt.erstellungsdatum).format("DD.MM.YYYY")}</span>
<div class="flex gap-4">
<div>
<div class="inline-block border rounded-lg bg-white">
<img src="/public/images/dashboard/ausweishaken.jpg" class="h-auto w-auto max-h-[150px] max-w-full object-contain p-1" alt="Energieausweis ausgestellt">
</div>
<div class="text-sm text-center">Energieausweis</div>
</div>
<div class="flex flex-col gap-2 mt-4">
{#each objekt.aufnahmen as aufnahme}
<div class="border rounded-lg px-4 py-2">
<div class="flex flex-row justify-between items-center">
<span>Stand vom {moment(aufnahme.erstellungsdatum).format("DD.MM.YYYY")}</span>
<a href="/dashboard/aufnahme/{aufnahme.id}" class="rounded-lg p-2 hover:bg-gray-100 transition-all"><OpenInNewWindow size={20}></OpenInNewWindow></a>
</div>
<div class="flex flex-row gap-2">
{#if aufnahme.verbrauchsausweise_wohnen.length > 0}
<a href="/dashboard/aufnahme/{aufnahme.id}" class="rounded-lg p-2 hover:bg-gray-100 transition-all"><File size={20}></File></a>
{/if}
{#if aufnahme.verbrauchsausweise_gewerbe.length > 0}
<a href="/dashboard/aufnahme/{aufnahme.id}" class="rounded-lg p-2 hover:bg-gray-100 transition-all"><File size={20}></File></a>
{/if}
</div>
</div>
{/each}
<div>
<div class="inline-block border rounded-lg bg-white">
<img src="/public/images/dashboard/ausweishaken.jpg" class="h-auto w-auto max-h-[150px] max-w-full object-contain p-1" alt="Energieausweis ausgestellt">
</div>
<div class="text-sm text-center">Energieausweis</div>
</div>
</div>
</div>
<div class="flex flex-col gap-4">
{#each objekt.aufnahmen as aufnahme}
<div class="inline-block border rounded-lg px-4 py-2 w-full">
<div class="flex justify-between items-center w-full">
<span class="text-sm">Detailübersicht<br>Stand vom {moment(aufnahme.erstellungsdatum).format("DD.MM.YYYY")}</span>
<a href="/dashboard/aufnahme/{aufnahme.id}" class="rounded-lg p-2 hover:bg-gray-100"><OpenInNewWindow size={30}></OpenInNewWindow></a>
</div>
</div>
<div class="inline-block border rounded-lg px-4 py-2 w-full">
<div class="flex justify-between items-center w-full">
<span class="text-sm">Detailübersicht<br>Stand vom {moment(aufnahme.erstellungsdatum).format("DD.MM.YYYY")}</span>
<a href="/dashboard/aufnahme/{aufnahme.id}" class="rounded-lg p-2 hover:bg-gray-100"><OpenInNewWindow size={30}></OpenInNewWindow></a>
</div>
</div>
{/each}
</div>
</div>
<hr>

34
src/components/Dashboard/DashboardSidebar.svelte
View File

@@ -40,14 +40,36 @@
<div class="flex flex-col gap-2 mt-0 md:mt-8 px-0">
<a use:ripple={rippleOptions} class="button-tab" href="/dashboard">
<Reader width={22} height={22} />
Gebäude
Vorgänge
</a>
{#each objekte as objekt}
{#if objekt.aufnahmen.length > 0}
<a class="flex ml-12" href="/dashboard/aufnahme/{objekt.aufnahmen[0].uid}">{objekt.adresse}<br>{objekt.plz} {objekt.ort}</a>
<a use:ripple={rippleOptions} class="button-tab" href="/dashboard">
<Reader width={22} height={22} />
Inbox
</a>
<hr class="border-gray-600">
{/if}
{/each}
<!--
<div class="text-base-content text-xl px-4 mt-4">Mitwirkende</div>
<div class="flex flex-col gap-4 px-4">
{#each [
{ name: "Max Mustermann", image: "/images/profile-placeholder.png", profession: "Architekt" },
{ name: "Erika Musterfrau", image: "/images/profile-placeholder.png", profession: "Ingenieurin" },
{ name: "Hans Beispiel", image: "/images/profile-placeholder.png", profession: "Energieberater" },
{ name: "Anna Beispiel", image: "/images/profile-placeholder.png", profession: "Bauleiterin" }
] as person}
<div class="flex items-center gap-4">
<img src={person.image} alt={person.name} class="w-12 h-12 rounded-full object-cover" />
<div class="flex flex-col">
<span class="text-base-content font-medium">{person.name}</span>
<span class="text-sm text-gray-500">{person.profession}</span>
</div>
<button class="ml-auto btn btn-primary btn-sm">Chat</button>
</div>
{/each}
</div>
-->
<!-- <button use:ripple={rippleOptions} class="button-tab">
<EnvelopeClosed width={22} height={22} />
Kontakt

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

@@ -96,7 +96,7 @@
export let id: string = "";
</script>
<h1>Gebäudeübersicht</h1>
<h1>Ihre aktuellen Vorgänge</h1>
<hr />
@@ -110,13 +110,13 @@
</form>
{/if}
<div class="relative mb-6">
<!-- <div class="relative mb-6">
<button class="button" on:click={() => {
objektOverlayHidden = false
}}> Gebäude anlegen + </button>
</div>
</div> -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-1 gap-4">
{#each objekte as objekt}
<DashboardObjekt {objekt}></DashboardObjekt>
{/each}