Dashboard
This commit is contained in:
Moritz Utcke
44
src/modules/Dashboard/DashboardAufnahmeModule.svelte
Normal file
44
src/modules/Dashboard/DashboardAufnahmeModule.svelte
Normal file
@@ -0,0 +1,44 @@
|
||||
<script lang="ts">
|
||||
import { AufnahmeKomplettClient, BenutzerClient } from "#components/Ausweis/types.js";
|
||||
import Carousel from "#components/Carousel.svelte";
|
||||
import DashboardAusweis from "#components/Dashboard/DashboardAusweis.svelte";
|
||||
import { Objekt } from "@ibcornelsen/database/client";
|
||||
import { ChevronLeft, ChevronRight, Plus } from "radix-svelte-icons";
|
||||
|
||||
export let user: BenutzerClient;
|
||||
export let aufnahme: AufnahmeKomplettClient;
|
||||
export let objekt: Objekt;
|
||||
</script>
|
||||
|
||||
<h1 class="text-4xl font-medium mb-8">{objekt.adresse}, {objekt.plz} {objekt.ort}</h1>
|
||||
|
||||
<div class="bg-white rounded-lg">
|
||||
{#if aufnahme.bilder.length > 0}
|
||||
<Carousel perPage={1}>
|
||||
{#each aufnahme.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>
|
||||
{/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">
|
||||
{#each aufnahme.verbrauchsausweise_wohnen as ausweis}
|
||||
<DashboardAusweis {ausweis} {aufnahme} {objekt} progress={0}></DashboardAusweis>
|
||||
{/each}
|
||||
{#each aufnahme.bedarfsausweise_wohnen as ausweis}
|
||||
<DashboardAusweis {ausweis} {aufnahme} {objekt} progress={0}></DashboardAusweis>
|
||||
{/each}
|
||||
{#each aufnahme.verbrauchsausweise_gewerbe as ausweis}
|
||||
<DashboardAusweis {ausweis} {aufnahme} {objekt} progress={0}></DashboardAusweis>
|
||||
{/each}
|
||||
</div>
|
||||
@@ -1,114 +1,126 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
AufnahmeClient,
|
||||
ObjektClient,
|
||||
UploadedGebaeudeBild,
|
||||
VerbrauchsausweisWohnenClient,
|
||||
} from "#components/Ausweis/types.js";
|
||||
import AusweisPruefenBox from "#components/AusweisPruefenBox.svelte";
|
||||
import NotificationProvider from "#components/NotificationProvider/NotificationProvider.svelte";
|
||||
import { endEnergieVerbrauchVerbrauchsausweis_2016 } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016.js";
|
||||
import AusweisPruefenNotification from "#components/AusweisPruefenNotification.svelte";
|
||||
import DashboardAusweisSkeleton from "#components/Dashboard/DashboardAusweisSkeleton.svelte"
|
||||
import { Event } from "@ibcornelsen/database/client";
|
||||
import Pagination from "#components/Pagination.svelte";
|
||||
import { api } from "astro-typesafe-api/client";
|
||||
import Cookies from "js-cookie"
|
||||
import { API_ACCESS_TOKEN_COOKIE_NAME } from "#lib/constants.js"
|
||||
import AusweisePruefenFilter from "#components/Dashboard/AusweisePruefenFilter.svelte";
|
||||
import { z, ZodTypeAny } from "zod";
|
||||
import { filterAusweise } from "#lib/filters.js";
|
||||
|
||||
export let ausweise: {
|
||||
ausweis: VerbrauchsausweisWohnenClient,
|
||||
aufnahme: AufnahmeClient,
|
||||
objekt: ObjektClient,
|
||||
bilder: UploadedGebaeudeBild[],
|
||||
events: Event[]
|
||||
}[];
|
||||
export let page: number;
|
||||
export let totalPages: number;
|
||||
|
||||
let filters: { name: keyof z.infer<typeof filterAusweise>, type: ZodTypeAny, value: any }[] = []
|
||||
</script>
|
||||
|
||||
<div class="gap-4 flex flex-col">
|
||||
{#each ausweise as { ausweis, objekt, aufnahme, bilder, events }}
|
||||
{#await endEnergieVerbrauchVerbrauchsausweis_2016(ausweis, aufnahme, objekt)}
|
||||
<div class="rounded-lg border w-full h-20 p-2.5 gap-4 flex flex-row items-center">
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-8 h-8 rounded-full"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="skeleton w-4 h-4"></div>
|
||||
<div class="skeleton w-4 h-4"></div>
|
||||
<div class="skeleton w-4 h-4"></div>
|
||||
<div class="skeleton w-4 h-4"></div>
|
||||
<div class="skeleton w-4 h-4"></div>
|
||||
<div class="skeleton w-4 h-4"></div>
|
||||
<div class="skeleton w-4 h-4"></div>
|
||||
<div class="skeleton w-4 h-4"></div>
|
||||
<div class="skeleton w-4 h-4"></div>
|
||||
<div class="skeleton w-4 h-4"></div>
|
||||
</div>
|
||||
{:then calculations}
|
||||
<AusweisPruefenBox {ausweis} {aufnahme} {objekt} {bilder} {events} {calculations}></AusweisPruefenBox>
|
||||
{/await}
|
||||
{/each}
|
||||
<div class="flex flex-col mb-4">
|
||||
<AusweisePruefenFilter bind:filters={filters}></AusweisePruefenFilter>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center mt-12">
|
||||
<div class="join">
|
||||
<button class="join-item btn btn-ghost shadow-none">1</button>
|
||||
<button class="join-item btn btn-ghost shadow-none">2</button>
|
||||
<button class="join-item btn btn-ghost shadow-none">3</button>
|
||||
<button class="join-item btn btn-ghost shadow-none">4</button>
|
||||
</div>
|
||||
<div class="gap-4 flex flex-col">
|
||||
{#await api.ausweise.GET.fetch({
|
||||
limit: 10,
|
||||
skip: (page - 1) * 10,
|
||||
filters: filters.reduce((acc, filter) => {
|
||||
acc[filter.name] = filter.value
|
||||
return acc
|
||||
}, {})
|
||||
}, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`
|
||||
}
|
||||
})}
|
||||
<DashboardAusweisSkeleton></DashboardAusweisSkeleton>
|
||||
{:then ausweise}
|
||||
{#each ausweise as { ausweis, objekt, aufnahme, bilder, events }}
|
||||
{#await endEnergieVerbrauchVerbrauchsausweis_2016(ausweis, aufnahme, objekt)}
|
||||
<div class="rounded-lg border w-full h-20 p-2.5 gap-4 flex flex-row items-center">
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-8 h-8 rounded-full"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="w-1/12 h-full flex flex-col gap-2">
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
<div class="skeleton w-full h-4"></div>
|
||||
</div>
|
||||
<div class="skeleton w-4 h-4"></div>
|
||||
<div class="skeleton w-4 h-4"></div>
|
||||
<div class="skeleton w-4 h-4"></div>
|
||||
<div class="skeleton w-4 h-4"></div>
|
||||
<div class="skeleton w-4 h-4"></div>
|
||||
<div class="skeleton w-4 h-4"></div>
|
||||
<div class="skeleton w-4 h-4"></div>
|
||||
<div class="skeleton w-4 h-4"></div>
|
||||
<div class="skeleton w-4 h-4"></div>
|
||||
<div class="skeleton w-4 h-4"></div>
|
||||
</div>
|
||||
{:then calculations}
|
||||
<AusweisPruefenBox {ausweis} {aufnahme} {objekt} {bilder} {events} {calculations}></AusweisPruefenBox>
|
||||
{/await}
|
||||
{/each}
|
||||
{/await}
|
||||
|
||||
</div>
|
||||
|
||||
<Pagination pages={totalPages} current={page} prev="/dashboard/admin/ausweise-pruefen/{page - 1}" next="/dashboard/admin/ausweise-pruefen/{page + 1}"></Pagination>
|
||||
|
||||
<div class="fixed bottom-8 right-8 flex flex-col gap-4">
|
||||
<NotificationProvider component={AusweisPruefenNotification}></NotificationProvider>
|
||||
</div>
|
||||
@@ -161,7 +161,7 @@
|
||||
|
||||
<style>
|
||||
:global(.tab-list) {
|
||||
@apply menu flex flex-col gap-2 px-0 bg-base-200 rounded-lg border border-base-300;
|
||||
@apply flex flex-col gap-2 px-0 bg-base-200 rounded-lg border;
|
||||
}
|
||||
|
||||
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap");
|
||||
@@ -171,15 +171,15 @@
|
||||
}
|
||||
|
||||
:global(.tab.selected) {
|
||||
@apply bg-base-300;
|
||||
@apply bg-gray-200;
|
||||
}
|
||||
|
||||
:global(.tab) {
|
||||
@apply btn btn-primary btn-ghost rounded-none px-8 justify-start outline-0 gap-4 items-center text-base font-normal text-base-content no-animation;
|
||||
@apply rounded-none px-8 justify-start outline-0 gap-4 items-center text-base font-normal text-base-content;
|
||||
}
|
||||
|
||||
:global(.tab:hover) {
|
||||
@apply bg-base-300 outline-0;
|
||||
@apply bg-gray-200 outline-0;
|
||||
}
|
||||
|
||||
:global(.tab:focus) {
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
</p>
|
||||
|
||||
<h1 class="text-4xl font-medium my-8">Gebäude</h1>
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div class="columns columns-1 md:columns-2 lg:columns-3 gap-4">
|
||||
{#each objekte as objekt}
|
||||
<DashboardObjekt {objekt}></DashboardObjekt>
|
||||
{/each}
|
||||
|
||||
@@ -1,33 +0,0 @@
|
||||
<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>
|
||||
|
||||
<div class="bg-white rounded-lg">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
Reference in New Issue
Block a user