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

Dashboard #388

Merged
IB-Cornelsen merged 2 commits from Jens into main 2025-02-23 03:40:17 +00:00
Conversation 0 Commits 2 Files Changed 7 +117 -70
7 changed files with 117 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Carousel.svelte
View File

@@ -102,7 +102,7 @@
}
</script>
<div class="carousel">
<div class="carousel w-100">
<div class="slides" bind:this={siema}>
<slot></slot>
</div>

14
src/components/Dashboard/DashboardAusweis.svelte
View File

@@ -115,7 +115,7 @@
</div>
<div class="flex flex-row flex-wrap gap-2">
{#if ausweisart == Enums.Ausweisart.VerbrauchsausweisWohnen}
<div class="badge badge-accent font-semibold">
<div class="badge badge-accent font-semibold text-secondary text-lg">
Verbrauchsausweis Wohnen
</div>
{:else if ausweisart == Enums.Ausweisart.BedarfsausweisWohnen}
@@ -132,7 +132,7 @@
<div class="badge badge-success font-semibold">Ausgestellt</div>
{/if}
</div>
<h2 class="card-title">{objekt.adresse}</h2>
<div class="badge badge-accent font-semibold text-black text-m">{objekt.adresse}</div>
<div class="mb-4 flex flex-row items-center gap-4">
<progress class="progress w-full" value={progress} max="100"
></progress>
@@ -192,8 +192,14 @@
<a
class="button text-sm"
href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude?uid={ausweis.uid}"
>Bearbeiten</a
>
>Stornieren</a>
<a
class="button text-sm"
href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude?uid={ausweis.uid}"
>Freigeben</a>
<a
class="p-2 rounded-lg hover:bg-gray-200"
title="PDF Herunterladen"

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

@@ -26,7 +26,7 @@
{#each objekt.aufnahmen as aufnahme}
<div class="border rounded-lg px-4 py-2">
<div class="flex flex-row justify-between items-center">
<span>Sanierungsstand vom {moment(aufnahme.erstellungsdatum).format("DD.MM.YYYY")}</span>
<span>Stand vom {moment(aufnahme.erstellungsdatum).format("DD.MM.YYYY")}</span>
<a href="/dashboard/aufnahme/{aufnahme.uid}" class="rounded-lg p-2 hover:bg-gray-100 transition-all"><OpenInNewWindow size={20}></OpenInNewWindow></a>
</div>
<div class="flex flex-row gap-2">

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

@@ -8,6 +8,7 @@
import ThemeController from "#components/ThemeController.svelte";
import { BenutzerClient } from "#components/Ausweis/types.js";
import Cross1 from "radix-svelte-icons/src/lib/icons/Cross1.svelte";
import { flex } from "#lib/pdf/elements/index.js";
export let lightTheme: boolean;
export let benutzer: BenutzerClient;
@@ -20,37 +21,36 @@
let headerOpen = false;
</script>
<header class="fixed top-0 left-0 w-full h-16 flex items-center justify-between px-4 border-b z-10 bg-base-200">
<button on:click={() => headerOpen = !headerOpen}>
{#if headerOpen}
<Cross1 size={28}></Cross1>
{:else}
<HamburgerMenu size={28}></HamburgerMenu>
{/if}
</button>
<a href="/" class="block md:hidden"
><img
src="/images/header/logo-IBC-big.svg"
class="w-24"
alt="IBCornelsen - Logo"
/></a
>
</header>
<aside class:hidden={!headerOpen} class="fixed left-0 top-16 w-full h-[calc(100%-4rem)] flex z-30 md:relative md:h-auto md:w-auto md:top-0 md:flex bg-base-200 border-r border-r-base-300 flex-col py-4">
<a href="/" class="px-8 hidden md:block"
><img
src="/images/header/logo-IBC-big.svg"
class="w-24"
alt="IBCornelsen - Logo"
/></a
>
<div class="flex flex-row items-center px-4">
<div class="flex flex-row mr-6">
<a href="/"><img src="/images/header/logo-IBC-big.svg" class="h-16" alt="IBCornelsen - Logo"/></a>
</div>
<div class="flex flex-col gap-2 mt-0 md:mt-12 px-0">
<div class="flex-col items-end">
<div class="text-base-content font-semibold text-left flex"
>{benutzer.vorname} {benutzer.name}</div>
<div class="text-base-content text-sm flex">{benutzer.email}</div>
</div>
</div>
<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} />
Objekte
Gebäude
</a>
<div class="flex ml-12">Katendeich 5AAA<br>44145 Dortmund</div>
<hr class="border-gray-600">
<div class="flex ml-12">Birkenalee<br>33175 Bad Lippspringe</div>
<hr class="border-gray-600">
<div class="flex ml-12">Birkenalee<br>33175 Bad Lippspringe</div>
<hr class="border-gray-600">
<div class="flex ml-12">Katendeich 5AAA<br>44145 Dortmund</div>
<hr class="border-gray-600">
<div class="flex ml-12">Katendeich 5AAA<br>44145 Dortmund</div>
<!-- <button use:ripple={rippleOptions} class="button-tab">
<EnvelopeClosed width={22} height={22} />
Kontakt
@@ -87,7 +87,7 @@
</details></li>
{/if}
</div>
<div class="mt-auto flex flex-col gap-4 px-8">
<div class="mt-10 flex flex-col gap-4 px-8">
<div class="flex flex-row justify-between items-center">
<ThemeController bind:lightTheme></ThemeController>
<div class="dropdown dropdown-top">
@@ -117,19 +117,7 @@
use:ripple={rippleOptions}
class="hover:bg-gray-200 no-animation focus:shadow-none justify-start py-4 h-auto px-8 rounded-none w-full flex flex-row gap-4"
>
<div class="avatar">
<div class="w-12 rounded-full">
<img
src={benutzer.profilbild || "/images/profile-placeholder.png"}
/>
</div>
</div>
<div class="flex flex-col">
<span class="text-base-content font-semibold text-left"
>{benutzer.vorname} {benutzer.name}</span
>
<span class="text-base-content text-sm">{benutzer.email}</span>
</div>
</a>
</aside>

21
src/layouts/DashboardLayout.astro
View File

@@ -1,5 +1,5 @@
---
import "svelte-ripple-action/ripple.css";
// import "svelte-ripple-action/ripple.css";
import "../style/global.css";
import "../../svelte-dialogs.config";
import DashboardSidebar from "../components/Dashboard/DashboardSidebar.svelte";
@@ -95,14 +95,27 @@ let lightTheme = Astro.cookies.get("theme")?.value === "light";
</title>
</head>
<body class="min-h-screen grid md:grid-cols-[300px_1fr]">
<body>
<main
class="p-0 grid max-w-[1920px]
xs:grid-cols-[minmax(1fr,1fr)] xs:gap-1 xs:p-0
sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:p-0
md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:p-0
lg:grid-cols-[minmax(150px,250px)1fr] lg:gap-3 lg:p-4
xl:grid-cols-[minmax(150px,350px)1fr] xl:gap-4 xl:p-6
2xl:grid-cols-[minmax(150px,300px)1fr] 2xl:gap-5 2xl:p-6"
>
<DashboardSidebar lightTheme={lightTheme} benutzer={user} client:load>
</DashboardSidebar>
<main class="overflow-auto h-screen bg-base-100 pt-24 px-6 w-full">
<article class="box rounded-tl-none
<article class="box rounded-tl-none
xl:px-10 py-8">
<slot />
</article>
</main>
</body>
</html>

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}

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

@@ -7,12 +7,16 @@
export let objekte: ObjektKomplettClient[];
</script>
<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>Gebäudeübersicht</h1>
<hr>
<div class="relative mb-6">
<button class="button flex flex-row rounded-lg gap-2 bg-secondary text-white text-center">
Gebäude anlegen +
</button>
</div>
<h1 class="text-4xl font-medium my-8">Gebäude</h1>
<div class="columns columns-1 md:columns-2 lg:columns-3 gap-4">
{#each objekte as objekt}
<DashboardObjekt {objekt}></DashboardObjekt>