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

Merge pull request #487 from IBCornelsen/Jens

Browse Source 
Dashboard angepasst
This commit is contained in:
Jens Cornelsen
2025-04-05 13:30:27 +02:00
committed by GitHub
parent 516e854616 0bc4fd6670
commit 2dadfebccf
5 changed files with 159 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
public/effizienz-icon.svg Normal file
View File

@@ -0,0 +1,92 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="106.48949mm"
height="127.93927mm"
viewBox="0 0 106.48949 127.93927"
version="1.1"
id="svg1"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm" />
<defs
id="defs1" />
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-51.858335,-84.402082)">
<g
id="g9"
transform="matrix(0.26458333,0,0,0.26458333,51.858333,68.995396)">
<path
id="path3610"
d="m 0.02,129.3 v 59.43 h 250.93 l 21.58,-29.71 -21.65,-29.71 H 0.02 Z"
fill="#16a550" />
<path
id="path3612"
d="M 276.66,199.86 0.29,200.29 0,259.48 h 276.66 l 22.23,-29.42 -22.23,-30.21 v 0 z"
fill="#54cc4e" />
<path
id="path3614"
d="M 301.97,269.43 0,269.82 l 0.03,59.51 302.02,0.55 22.36,-30.23 -22.44,-30.23 v 0 z"
fill="#ffbc00" />
<path
id="path3616"
d="m 0,341.06 v 59.63 h 328.48 l 22.29,-29.81 -22.48,-29.81 H 0 Z"
fill="#ff5e0d" />
<path
id="path3618"
d="M 353.44,411.87 0.01,412.2 v 59.29 h 354.12 l 22.8,-29.81 z"
fill="#ff321d" />
<path
id="path3620"
d="m 0.02,482.15 v 59.63 l 379.93,-0.07 22.53,-29.76 -23.08,-29.76 z"
fill="#dd2238" />
<path
id="path3295"
d="m 0.02,58.23 v 61 H 224 l 22.32,-30.5 -22.39,-30.5 z"
fill="#128440" />
<path
d="M 45.88,103.36 43.77,96.42 H 33.15 l -2.11,6.94 H 24.38 L 34.67,74.1 h 7.55 l 10.32,29.26 z M 42.29,91.24 c -1.95,-6.29 -3.05,-9.84 -3.3,-10.66 -0.25,-0.82 -0.42,-1.47 -0.53,-1.95 -0.44,1.7 -1.69,5.91 -3.77,12.62 h 7.59 z"
fill="#ffffff"
id="path2" />
<path
d="m 24.51,144.44 h 9.07 c 4.13,0 7.13,0.59 9,1.76 1.87,1.18 2.8,3.05 2.8,5.61 0,1.74 -0.41,3.17 -1.23,4.29 -0.82,1.12 -1.9,1.79 -3.26,2.01 v 0.2 c 1.85,0.41 3.18,1.18 4,2.31 0.82,1.13 1.23,2.63 1.23,4.5 0,2.66 -0.96,4.73 -2.88,6.22 -1.92,1.49 -4.53,2.23 -7.82,2.23 h -10.9 v -29.14 z m 6.18,11.54 h 3.59 c 1.67,0 2.89,-0.26 3.64,-0.78 0.75,-0.52 1.13,-1.38 1.13,-2.57 0,-1.12 -0.41,-1.92 -1.23,-2.4 -0.82,-0.48 -2.11,-0.73 -3.88,-0.73 h -3.25 z m 0,4.9 v 7.59 h 4.03 c 1.7,0 2.96,-0.33 3.77,-0.98 0.81,-0.65 1.22,-1.65 1.22,-2.99 0,-2.42 -1.73,-3.63 -5.18,-3.63 H 30.7 Z"
fill="#ffffff"
id="path3" />
<path
d="m 37.77,219.84 c -2.33,0 -4.13,0.87 -5.4,2.62 -1.27,1.75 -1.91,4.18 -1.91,7.31 0,6.5 2.44,9.75 7.32,9.75 2.05,0 4.52,-0.51 7.43,-1.53 v 5.18 c -2.39,1 -5.06,1.49 -8.01,1.49 -4.24,0 -7.48,-1.29 -9.73,-3.86 -2.25,-2.57 -3.37,-6.26 -3.37,-11.07 0,-3.03 0.55,-5.68 1.65,-7.96 1.1,-2.28 2.69,-4.03 4.75,-5.24 2.07,-1.22 4.49,-1.82 7.27,-1.82 2.78,0 5.67,0.68 8.53,2.05 l -1.99,5.02 c -1.09,-0.52 -2.19,-0.97 -3.29,-1.36 -1.1,-0.39 -2.19,-0.58 -3.25,-0.58 z"
fill="#ffffff"
id="path5" />
<path
d="m 48.27,299.37 c 0,4.8 -1.37,8.47 -4.1,11.02 -2.73,2.55 -6.67,3.83 -11.83,3.83 h -8.25 v -29.14 h 9.15 c 4.76,0 8.45,1.26 11.08,3.77 2.63,2.51 3.95,6.02 3.95,10.52 z m -6.42,0.16 c 0,-6.26 -2.76,-9.39 -8.29,-9.39 h -3.29 v 18.98 h 2.65 c 5.95,0 8.93,-3.2 8.93,-9.59 z"
fill="#ffffff"
id="path6" />
<path
d="M 41.26,385.44 H 24.47 V 356.3 h 16.78 v 5.06 h -10.6 v 6.4 h 9.87 v 5.06 h -9.87 v 7.51 h 10.6 v 5.1 z"
fill="#ffffff"
id="path7" />
<path
d="m 30.59,456.25 h -6.08 v -29.14 h 16.7 v 5.06 H 30.59 v 7.51 h 9.89 v 5.04 h -9.89 v 11.52 z"
fill="#ffffff"
id="path8" />
<path
d="m 37.03,510.18 h 11.56 v 15.11 c -1.87,0.61 -3.64,1.04 -5.29,1.29 -1.65,0.25 -3.35,0.37 -5.07,0.37 -4.4,0 -7.76,-1.29 -10.08,-3.88 -2.32,-2.58 -3.48,-6.3 -3.48,-11.13 0,-4.83 1.35,-8.37 4.04,-11 2.69,-2.63 6.42,-3.95 11.19,-3.95 2.99,0 5.87,0.6 8.65,1.79 l -2.05,4.94 c -2.13,-1.06 -4.34,-1.59 -6.64,-1.59 -2.67,0 -4.81,0.9 -6.42,2.69 -1.61,1.79 -2.41,4.21 -2.41,7.24 0,3.03 0.65,5.58 1.94,7.25 1.29,1.67 3.18,2.5 5.65,2.5 1.29,0 2.6,-0.13 3.93,-0.4 v -6.08 h -5.52 v -5.14 z"
fill="#ffffff"
id="path9" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
public/images/profile-placeholder.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 1.5 MiB

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}