Ausweis Prüfen und Email

2024-02-29 11:09:23 +07:00
parent 0341ea4526
commit 022fe20524
9 changed files with 501 additions and 343 deletions
--- a/package.json
+++ b/package.json
@@ -56,12 +56,14 @@
    "sass": "^1.62.1",
    "svelte": "^3.59.1",
    "svelte-dialogs": "^1.2.2",
+    "svelte-katex": "^0.1.2",
    "svelte-preprocess": "^5.0.3",
    "svelte-ripple-action": "^1.0.5",
    "svelte-tabs": "^1.1.0",
    "tailwindcss": "^3.3.2",
    "trpc-openapi": "^1.2.0",
    "uuid": "^9.0.0",
+    "uuid-validate": "^0.0.3",
    "vite-tsconfig-paths": "^4.2.0",
    "zod": "^3.22.4"
  },
--- a/src/components/AusweisPruefenBox.svelte
+++ b/src/components/AusweisPruefenBox.svelte
@@ -6,23 +6,23 @@
 	} from "./Ausweis/types.js";
 	import AusweisPruefenTooltip from "./AusweisPruefenTooltip.svelte";
 	import { addNotification } from "./NotificationProvider/shared";
+	import { CheckCircled, CrossCircled, Image } from "radix-svelte-icons";
+	import ChevronDown from "radix-svelte-icons/src/lib/icons/ChevronDown.svelte";
+	

 	export let ausweis: VerbrauchsausweisWohnenClient;
 	export let calculations: Awaited<
 		ReturnType<typeof endEnergieVerbrauchVerbrauchsausweis_2016>
 	>;

+	console.log(ausweis);
+
 	const gebaeude_aufnahme_allgemein = ausweis.gebaeude_aufnahme_allgemein
 	

 	const ausweisArt = "VA"; // TODO: Das ist ein Platzhalter, hier muss die Ausweisart aus dem Ausweisobjekt kommen

-
-
-	try {
-		// TODO: In Zukunft sollen die Bilder von unserer API kommen, das ist allerdings noch nicht ganz fertig.
-		// images = JSON.parse(ausweis.images)
-	} catch (e) {}
+	const images = ausweis.gebaeude_aufnahme_allgemein.gebaeude_stammdaten.gebaeude_bilder;

 	let verbrauchWWGesamt_1 = "";
 	let verbrauchWWGesamt_2 = "";
@@ -448,17 +448,32 @@

 		ausweis = ausweis;
 	}
+
+	let bilderModal: HTMLDialogElement;
+	let infoVisible = false;
 </script>

-<table class="table table-row border">
+<div class="border rounded-box">
+	<table class="table table-row">
 		<tbody>
 			<tr>
-			<td width="30px"
-				><img
-					src="{StatusIcon}"
-					alt="Status"
-					class="w-8 h-8 max-w-8 max-h-8"
-				/>{zurueckGestellt}</td
+				<td><button on:click={() => infoVisible = !infoVisible}><ChevronDown size={22} class="transition-all {infoVisible ? "" : "rotate-180"}"></ChevronDown></button></td>
+				<td class="w-6 px-2"
+					>
+					{#if gebaeude_aufnahme_allgemein.erledigt}
+						<div class="tooltip" data-tip="Ausweis wurde ausgestellt">
+							<div class="rounded-full w-6 h-6 bg-success"></div>
+						</div>
+					{:else if gebaeude_aufnahme_allgemein.bestellt}
+						<div class="tooltip" data-tip="Ausweis wurde bestellt">
+							<div class="rounded-full w-6 h-6 bg-warning"></div>
+						</div>
+					{:else}
+						<div class="tooltip" data-tip="Ausweis ist in Bearbeitung">
+							<div class="rounded-full w-6 h-6 bg-error"></div>
+						</div>
+					{/if}
+					</td
 				>
 				<td width="150px"
 					>
@@ -662,31 +677,44 @@
 					</AusweisPruefenTooltip>
 					</td
 				>
-			<td title="Gebäudebilder anzeigen" width="35px"
-				><div
-					class="imagePreview"
-					data-imagePreview="{imagePreview}"
-				>
-					<img
-						src="/images/dashboard/SymbolBilder.svg"
-						alt="Gebäudebilder"
-						width="35"
-						height="35"
-					/>
-				</div></td
-			>
-			<td width="30px"
-				><div class="checkTextPreviewButton">
-					<img src="{symbolPruefung}" alt="Boxpruefung" />
-					<div
-						class="checkTextPreview"
-						style="display:none; position: absolute; background-color: black; color: white; padding: 10px; border-radius: 5px; max-width: 450px; z-index:9999;"
-					>
-						{gebaeude_aufnahme_allgemein.prueftext}
+				<td title="Gebäudebilder anzeigen"
+					><!-- Open the modal using ID.showModal() method -->
+	<button class="btn btn-square" on:click={() => bilderModal.showModal()}><Image size={22}></Image></button>
+	<dialog bind:this={bilderModal} class="modal">
+		<div class="modal-box flex flex-row gap-4 items-center justify-center">
+			{#if images.length === 0}
+				<div class="flex flex-col gap-4 items-center justify-center">
+					<p>Für diesen Ausweis sind noch keine Bilder vorhanden.</p>
+					<button class="btn btn-primary" tabindex="0">Erinnerung Verschicken</button>
 				</div>
-				</div></td
+			{:else}
+				{#each images as image}
+					<div>
+						<h2 class="text-lg mb-4 font-bold">{image.kategorie}</h2>
+						<img src="/bilder/{image.uid}.webp">
+					</div>
+				{/each}
+			{/if}
+		</div>
+		<form method="dialog" class="modal-backdrop">
+			<button>close</button>
+		</form>
+	</dialog></td
 				>
-			<td title="Ausweis anzeigen" width="50px"
+				<td class="w-[30px]"
+					>
+					<AusweisPruefenTooltip>
+						<div slot="tooltip">
+							<span>{gebaeude_aufnahme_allgemein.prueftext}</span>
+						</div>
+						{#if gebaeude_aufnahme_allgemein.boxpruefung}
+							<CheckCircled size={22}></CheckCircled>
+						{:else}
+							<CrossCircled size={22}></CrossCircled>
+						{/if}
+					</AusweisPruefenTooltip></td
+				>
+				<td title="Ausweis anzeigen" class="w-[50px]"
 					><a
 						class="energieausweis-img"
 						href="/pdf/ansichtsausweis?uid={ausweis.uid}"
@@ -694,6 +722,7 @@
 						><img
 							src="/images/dashboard/ausweis.jpg"
 							alt="Energieausweis"
+							class="w-full h-8"
 						/></a
 					></td
 				>
@@ -772,4 +801,76 @@
 					: ""}
 			</tr>
 		</tbody>
-</table>
+	</table>
+
+	<div class:hidden={!infoVisible} class:block={infoVisible} class="py-4 border-t">
+		<div class="grid grid-cols-[2fr_1fr] prose max-w-full">
+			<div class="border-r px-8">
+				<h3 class="mt-0">Wichtige Daten</h3>
+				<table>
+					<tbody>
+						<tr>
+							<td>Angewendete Berechnungsformel</td>
+							<td><strong>EnEV 2016</strong></td>
+						</tr>
+						<tr>
+							<td>Berechnungsergebnis</td>
+							<td>{calculations?.endEnergieVerbrauchGesamt}kWh/m2/A - Energieeffizienzklasse <strong>{calculations?.energieEffizienzKlasse}</strong></td>
+						</tr>
+						<tr>
+							<td>Informationen des Nutzers</td>
+							<td>{gebaeude_aufnahme_allgemein.boxpruefung}</td>
+						</tr>
+						<tr>
+							<td>UID</td>
+							<td><strong><pre>{ausweis.uid}</pre></strong></td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+			<div class="px-8">
+				<h3 class="mt-0">Ereignisse</h3>
+				<ul class="timeline timeline-snap-icon max-md:timeline-compact timeline-vertical">
+					<li>
+						<div class="timeline-middle">
+							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
+						</div>
+						<div class="timeline-start md:text-end mb-10">
+							<time class="font-mono italic">{moment(ausweis.erstellungsdatum).format("DD.MM.YYYY - HH:mm")} Uhr</time>
+							<div class="text-lg font-black">Ausweis erstellt</div>
+						</div>
+						<hr/>
+					</li>
+					{#each ausweis.gebaeude_aufnahme_allgemein.gebaeude_stammdaten.events as event, i}
+						<li>
+							<hr />
+							<div class="timeline-middle">
+								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
+							</div>
+							<div class="mb-10" class:timeline-end={i % 2 == 0} class:timeline-start={i % 2 == 1}>
+								<time class="font-mono italic">{moment(event.date).format("DD.MM.YYYY - HH:mm")} Uhr</time>
+								<div class="text-lg font-black">{event.title}</div>
+								{event.description || ""}
+							</div>
+							<hr />
+						</li>
+					{/each}
+					{#if ausweis.erledigt}
+					<li>
+						<hr />
+						<div class="timeline-middle">
+							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /></svg>
+						</div>
+						<div class="mb-10 timeline-end">
+							<time class="font-mono italic">{moment(ausweis.ausstellungsdatum).format("DD.MM.YYYY - HH:mm")} Uhr</time>
+							<div class="text-lg font-black">Ausweis ausgestellt</div>
+							{ausweis.registriernummer ? `Registriernummer: ${ausweis.registriernummer}` : ""}
+						</div>
+						<hr />
+					</li>
+					{/if}
+				</ul>
+			</div>
+		</div>
+	</div>
+</div>
--- a/src/components/Dashboard/DashboardAusweis.svelte
+++ b/src/components/Dashboard/DashboardAusweis.svelte
@@ -13,8 +13,6 @@
 	} from "radix-svelte-icons";
 	import { endEnergieVerbrauchVerbrauchsausweis_2016 } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016";
 	import { client } from "src/trpc";
-	import { verbrauchsausweisWohnenCalculateFormProgress } from "#lib/VerbrauchsausweisWohnen/calculateFormProgress";
-	import { number } from "zod";
 		
 	export let ausweis: VerbrauchsausweisWohnenClient;
 	export let progress: number;
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -8,7 +8,6 @@ import Header from "../components/Header.astro";
 import SidebarLeft from "../components/SidebarLeft.astro";
 import SidebarRight from "../components/SidebarRight.astro";
 import { NotificationWrapper } from "@ibcornelsen/ui";
-import HeaderAlternative from "#components/HeaderAlternative.svelte";

 export interface Props {
 	title: string;
--- a/src/lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016.ts
+++ b/src/lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016.ts
@@ -232,6 +232,29 @@ export async function endEnergieVerbrauchVerbrauchsausweis_2016(
 		co2EmissionenLeerstandsZuschlag +
 		co2EmissionenKuehlungsZuschlag;

+		// Energieeffizienzklasse
+		let energieEffizienzKlasse = "";
+		if (endEnergieVerbrauchGesamt < 30) {
+			energieEffizienzKlasse = 'A+';
+		}else if (endEnergieVerbrauchGesamt < 50) {
+			energieEffizienzKlasse = 'A';
+		}else if (endEnergieVerbrauchGesamt < 75) {
+			energieEffizienzKlasse = 'B';
+		}else if (endEnergieVerbrauchGesamt < 100) {
+			energieEffizienzKlasse = 'C';
+		}else if (endEnergieVerbrauchGesamt < 130) {
+			energieEffizienzKlasse = 'D';
+		}else if (endEnergieVerbrauchGesamt < 160) {
+			energieEffizienzKlasse = 'E';
+		}else if (endEnergieVerbrauchGesamt < 200) {
+			energieEffizienzKlasse = 'F';
+		}else if (endEnergieVerbrauchGesamt < 250) {
+			energieEffizienzKlasse = 'G';
+		}else if (endEnergieVerbrauchGesamt >= 250) {
+			energieEffizienzKlasse = 'H';
+		}
+
+
 	return {
 		brennstoff_1: brennstoff_1,
 		brennstoff_2: brennstoff_2,
@@ -320,5 +343,6 @@ export async function endEnergieVerbrauchVerbrauchsausweis_2016(
 		primaerEnergieVerbrauchGesamt: Math.round(
 			primaerEnergieVerbrauchGesamt
 		),
+		energieEffizienzKlasse
 	};
 }
--- a/src/modules/Dashboard/DashboardAusweiseModule.svelte
+++ b/src/modules/Dashboard/DashboardAusweiseModule.svelte
@@ -17,6 +17,9 @@
 			limit: 10
 		});

+		console.log(ausweise);
+		
+
 		if (!ausweise) return;

 		ausweisUeberpruefung = ausweise.map(ausweis => verbrauchsausweisWohnenCalculateFormProgress(ausweis));
--- a/src/pages/bilder/[uid].webp.ts
+++ b/src/pages/bilder/[uid].webp.ts
@@ -1,5 +1,6 @@
 import { createCaller } from "#lib/caller";
 import { APIRoute } from "astro";
+import { validate } from "uuid";

 export const get: APIRoute = async ({params, cookies}) => {
 	const { uid } = params;
@@ -8,6 +9,10 @@ export const get: APIRoute = async ({params, cookies}) => {
 		return new Response("No uid provided", { status: 400 });
 	}

+	if (!validate(uid)) {
+		return new Response("Invalid uid", { status: 400 });
+	}
+
 	const caller = createCaller({ cookies })

 	const image = await caller.v1.bilder.getBase64({ uid })
--- a/src/pages/dashboard/ausweise/index.astro
+++ b/src/pages/dashboard/ausweise/index.astro
@@ -1,24 +1,19 @@
 ---
 import UserLayout from "../../../layouts/UserLayout.astro";
-import { API_UID_COOKIE_NAME } from "../../../lib/constants";
 import DashboardAusweiseModule from "#modules/Dashboard/DashboardAusweiseModule.svelte";
-import { prisma } from "@ibcornelsen/database/server";

-const uid = Astro.cookies.get(API_UID_COOKIE_NAME).value
+import { validateAccessTokenServer } from "src/server/lib/validateAccessToken";
+import { createCaller } from "#lib/caller";

-if (!uid) {
+const accessTokenValid = await validateAccessTokenServer(Astro);
+
+if (!accessTokenValid) {
 	return Astro.redirect("/auth/login")
 }

-const user = await prisma.benutzer.findUnique({
-	where: {
-		uid
-	}
-})
+const caller = createCaller(Astro);

-if (!user) {
-	return Astro.redirect("/auth/login")
-}
+const user = await caller.v1.benutzer.self();
 ---

 <UserLayout title="Dashboard">
--- a/src/pages/email.astro
+++ b/src/pages/email.astro
@@ -0,0 +1,31 @@
+---
+import ThemeController from "../components/ThemeController.svelte";
+import moment from "moment"
+
+const lightTheme = Astro.cookies.get("theme").value === "light";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>email</title>
+</head>
+<body class="p-8">
+	<main class="prose border rounded-box flex flex-col items-center border-base-300">
+		<div class="bg-base-200 h-auto w-full flex flex-col items-center gap-4 justify-start py-4 border-b border-base-300 rounded-t-box">
+			<img src="/images/header/logo-big.svg" class="h-12 my-0">
+		</div>
+		<div class="bg-base-100 h-auto w-full flex flex-col items-center gap-4 justify-start py-16 px-8">
+			<h2 class="my-0">Erinnerung vom IBCornelsen</h2>
+			<p class="text-center">Bitte denken sie daran, die restlichen Bilder für ihr Gebäude hochzuladen. Die aktuelle Gesetzgebung erfordert dies, bevor ihr Ausweis ausgestellt werden kann.</p>
+			<a class="btn btn-primary text-primary-content no-underline">Bilder Hochladen</a>
+		</div>
+		<div class="bg-base-200 h-auto w-full flex flex-col items-center gap-4 justify-start py-4 border-t border-base-300 rounded-b-box">
+			<a class="text-base-content font-medium text-sm" href="https://online-energieausweis.org">© {moment().format("YYYY")} IB Cornelsen Hamburg</a>
+		</div>
+	</main>
+	<ThemeController lightTheme={lightTheme}></ThemeController>
+</body>
+</html>