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

Dashboard, Types und Formular

Browse Source
This commit is contained in:
Moritz Utcke
2024-02-27 12:52:45 +07:00
parent 982a739346
commit 1db59c3792
16 changed files with 267 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/modules/Dashboard/DashboardAusweiseModule.svelte
View File

@@ -1,60 +1,73 @@
<script lang="ts">
import { BenutzerClient } from "#components/Ausweis/types";
import { BenutzerClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
import DashboardAusweis from "#components/Dashboard/DashboardAusweis.svelte";
import DashboardAusweisSkeleton from "#components/Dashboard/DashboardAusweisSkeleton.svelte";
import { verbrauchsausweisWohnenCalculateFormProgress } from "#lib/VerbrauchsausweisWohnen/calculateFormProgress";
import { client } from "src/trpc";
import { onMount } from "svelte";
export let user: BenutzerClient;
let ausweisRequest = client.v1.benutzer.getAusweise.query({
limit: 10
});
let ausweise: VerbrauchsausweisWohnenClient[] | null = null;
let ausweisUeberpruefung: ReturnType<typeof verbrauchsausweisWohnenCalculateFormProgress>[] = [];
let errorCount = 0;
onMount(async () => {
ausweise = await client.v1.verbrauchsausweisWohnen.getMany.query({
limit: 10
});
if (!ausweise) return;
ausweisUeberpruefung = ausweise.map(ausweis => verbrauchsausweisWohnenCalculateFormProgress(ausweis));
errorCount = ausweisUeberpruefung.reduce((acc, { errors }) => acc + errors.length, 0);
})
</script>
{#if errorCount > 0}
<h1 class="text-4xl font-medium my-8">Wichtiges</h1>
<div class="flex flex-row gap-4">
<div class="card w-96 card-bordered bg-base-200 border-base-300">
<div class="card-body">
<div class="badge badge-warning font-semibold">Warnung!</div>
<h2 class="card-title">Gebäudebilder</h2>
<p>Wir haben festgestellt, dass die Bilder für eines ihrer Gebäude nicht ganz den Anforderungen entsprechen, beheben sie das Problem, damit der Fehler so schnell wie möglich behoben werden kann.</p>
<div class="card-actions justify-end">
<a class="btn btn-primary">Beheben</a>
<div class="flex flex-row gap-4 overflow-x-auto">
{#each ausweisUeberpruefung as { errors }}
{#if errors.length > 0}
<div class="card w-96 card-bordered bg-base-200 border-base-300">
<div class="card-body">
<div class="badge font-semibold" class:badge-warning={errors[0].severity == "warning"} class:badge-error={errors[0].severity == "error"}>{errors[0].severity == "error" ? "Achtung!" : "Wichtig!"}</div>
<h2 class="card-title">{errors[0].title}</h2>
<p>{errors[0].description}</p>
{#if errors[0].resolvehref}
<div class="card-actions justify-end">
<a class="btn btn-primary" href={errors[0].resolvehref}>Beheben</a>
</div>
{/if}
</div>
</div>
</div>
</div>
<div class="card w-96 card-bordered bg-base-200 border-base-300">
<div class="card-body">
<div class="badge badge-error font-semibold">Fehler!</div>
<h2 class="card-title">Daten</h2>
<p>Der Ausweis für <strong>Curslacker Deich 170</strong> hat unvollständige Daten oder die gegebenen Daten sind fehlerhaft, bitte beheben sie das Problem, damit der Ausweis so schnell wie möglich ausgestellt werden kann.</p>
<div class="card-actions justify-end">
<a class="btn btn-primary">Beheben</a>
</div>
</div>
</div>
{/if}
{/each}
</div>
{/if}
<h1 class="text-4xl font-medium my-8">Ihre Ausweise</h1>
<div class="grid xl:grid-cols-2 grid-cols-1 gap-4">
{#await ausweisRequest}
{#if ausweise === null}
<DashboardAusweisSkeleton></DashboardAusweisSkeleton>
<DashboardAusweisSkeleton></DashboardAusweisSkeleton>
{:then ausweise}
{:else}
{#if ausweise.length == 0}
<div class="">
<h1 class="text-2xl">Es konnten keine Ausweise gefunden werden.</h1>
<p>Erstellen sie einen Verbrauchsausweis für ihr Wohngebäude <a href="/energieausweis-erstellen/verbrauchsausweis-wohnen">hier</a></p>
</div>
{:else}
{#each ausweise as ausweis}
<DashboardAusweis {ausweis}></DashboardAusweis>
{#each ausweise as ausweis, i}
<DashboardAusweis progress={ausweisUeberpruefung[i]?.progress || 0} {ausweis}></DashboardAusweis>
{/each}
{/if}
{/await}
{/if}
</div>

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

@@ -2,10 +2,11 @@
import { BenutzerClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
import DashboardAusweis from "#components/Dashboard/DashboardAusweis.svelte";
import DashboardAusweisSkeleton from "#components/Dashboard/DashboardAusweisSkeleton.svelte";
import { verbrauchsausweisWohnenCalculateFormProgress } from "#lib/VerbrauchsausweisWohnen/calculateFormProgress";
export let user: BenutzerClient;
export let ausweise: VerbrauchsausweisWohnenClient[];
console.log(ausweise);
const ausweisUeberpruefung = ausweise.map(ausweis => verbrauchsausweisWohnenCalculateFormProgress(ausweis));
</script>
@@ -41,8 +42,9 @@
{#if ausweise.length == 0}
{:else}
{#each ausweise as ausweis}
<DashboardAusweis {ausweis}></DashboardAusweis>
{#each ausweise as ausweis, i}
{console.log(ausweis, i)}
<DashboardAusweis progress={ausweisUeberpruefung[i].progress} {ausweis}></DashboardAusweis>
{/each}
{/if}