2024-03-18 11:01:26 +00:00
18 changed files with 546 additions and 62 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,6 @@
 {
 	"i18n-ally.localesPaths": [
 		"public/locales"
-	]
+	],
+	"typescript.tsdk": "node_modules/typescript/lib"
 }
--- a/src/client/lib/bilderHochladen.ts
+++ b/src/client/lib/bilderHochladen.ts
@@ -1,15 +1,16 @@
 import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
+import { Enums } from "@ibcornelsen/database/client";
 import { addNotification, updateNotification } from "@ibcornelsen/ui";
 import { client } from "src/trpc";

-export async function bilderHochladen(images: (UploadedGebaeudeBild & { base64?: string })[], gebaeude: GebaeudeClient) {
+export async function bilderHochladen(images: (UploadedGebaeudeBild & { base64?: string })[], gebaeude_uid: string) {
 	if (images.length == 0) {
 		return images;
 	}

 	// Wenn Bilder hochgeladen werden konvertieren wir sie zu base64, das heißt, dass die base64 Eigenschaft bei diesen Bildern
 	// existiert. Das müssen wir TypeScript nur wissen lassen, damit es uns in Ruhe lässt.
-	const imagesToUpload = images.filter(image => !image.uid) as unknown as { base64: string, kategorie: string, uid?: string }[];
+	const imagesToUpload = images.filter(image => !image.uid || image.update) as unknown as { base64: string, kategorie: string, uid?: string, update: boolean }[];

 	if (imagesToUpload.length == 0) {
 		return images;
@@ -27,13 +28,21 @@ export async function bilderHochladen(images: (UploadedGebaeudeBild & { base64?:
 		const image = imagesToUpload[i];

 		try {
-			const response = await client.v1.bilder.upload.mutate({
-				base64: image.base64,
-				kategorie: image.kategorie,
-				gebaeude_uid: gebaeude.uid
-			})
-
-			image.uid = response.uid
+			if (image.update) {
+				await client.v1.bilder.update.mutate({
+					uid: image.uid as string,
+					base64: image.base64,
+					kategorie: image.kategorie as Enums.BilderKategorie
+				})
+			} else {
+				const response = await client.v1.bilder.upload.mutate({
+					base64: image.base64,
+					kategorie: image.kategorie as Enums.BilderKategorie,
+					gebaeude_uid
+				})
+	
+				image.uid = response.uid
+			}

 			updateNotification(notification, {
 				dismissable: true,
--- a/src/client/lib/verbrauchsausweisWohnenSpeichern.ts
+++ b/src/client/lib/verbrauchsausweisWohnenSpeichern.ts
@@ -37,7 +37,7 @@ export async function verbrauchsausweisWohnenSpeichern(
 				},
 			});

-			images = await bilderHochladen(images, gebaeude);
+			images = await bilderHochladen(images, gebaeude.uid);

 			return  { uid: ausweis.uid, gebaeude_uid: gebaeude.uid, gebaeude_aufnahme_uid: gebaeude_aufnahme_allgemein.uid };
 		} catch (e) {
@@ -57,7 +57,7 @@ export async function verbrauchsausweisWohnenSpeichern(
 					},
 				});

-			images = await bilderHochladen(images, gebaeude);
+			images = await bilderHochladen(images, response.gebaeude_uid);

 			return response;
 		} catch (e: any) {
--- a/src/components/Ausweis/Verbrauch.svelte
+++ b/src/components/Ausweis/Verbrauch.svelte
@@ -270,7 +270,7 @@
 		</div>
 		<div class="flex flex-col gap-2">
 			<div class="column">
-				<span>Verbrauch</span>
+				<span>Verbrauch *</span>
 				<input
 					name="verbrauch_1"
 					type="number"
@@ -280,7 +280,7 @@
 				/>
 			</div>
 			<div class="column">
-				<span>Verbrauch</span>
+				<span>Verbrauch *</span>
 				<input
 					name="verbrauch_2"
 					type="number"
@@ -290,7 +290,7 @@
 				/>
 			</div>
 			<div class="column">
-				<span>Verbrauch</span>
+				<span>Verbrauch *</span>
 				<input
 					name="verbrauch_3"
 					type="number"
--- a/src/components/Ausweis/types.ts
+++ b/src/components/Ausweis/types.ts
@@ -4,7 +4,7 @@ import { inferProcedureInput, inferProcedureOutput } from "@trpc/server";

 export type UploadedGebaeudeBild = inferProcedureOutput<
 AppRouter["v1"]["verbrauchsausweisWohnen"]["get"]
->["gebaeude_aufnahme_allgemein"]["gebaeude_stammdaten"]["gebaeude_bilder"][0] & { base64?: string };
+>["gebaeude_aufnahme_allgemein"]["gebaeude_stammdaten"]["gebaeude_bilder"][0] & { base64?: string, update?: boolean };


 /**
--- a/src/components/ImageGrid.svelte
+++ b/src/components/ImageGrid.svelte
@@ -2,6 +2,7 @@
 	import UploadImages from "./UploadImages.svelte";
 	import type { BedarfsausweisWohnen, Enums, VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
 	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./Ausweis/types";
+	import { RotateCounterClockwise, Trash } from "radix-svelte-icons";

 	export let images: UploadedGebaeudeBild[] = [];
 	export let max: number = 4;
@@ -10,8 +11,24 @@
 	export let gebaeude: GebaeudeClient;
 	export let kategorie: Enums.BilderKategorie

-	console.log(images);
-	
+	async function rotateImage(image: UploadedGebaeudeBild): Promise<UploadedGebaeudeBild> {
+		return new Promise((resolve, reject) => {
+			let img = new Image();
+			img.src = image.base64 ? image.base64 : `/bilder/${image.uid}.webp`;
+			img.onload = () => {
+				let canvas = document.createElement("canvas");
+				let ctx = canvas.getContext("2d");
+				canvas.width = img.height;
+				canvas.height = img.width;
+				ctx?.translate(img.height / 2, img.width / 2);
+				ctx?.rotate((-90 * Math.PI) / 180);
+				ctx?.drawImage(img, -img.width / 2, -img.height / 2);
+				image.base64 = canvas.toDataURL("image/webp");
+				image.update = true;
+				resolve(image)
+			};
+		})
+	}
 </script>

 <div class="flex flex-col gap-4">
@@ -23,20 +40,33 @@
 					<img
 						src={image.base64 ? image.base64 : `/bilder/${image.uid}.webp`}
 						alt={kategorie}
-						class="h-full rounded-lg border-2 group-hover:contrast-50 object-cover transition-all"
+						class="h-full max-h-96 w-full rounded-lg border-2 group-hover:contrast-50 object-cover transition-all"
 					/>
-					<button
+					<div class="invisible group-hover:visible absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] flex flex-row gap-2">
+						<button
 						type="button"
-						class="invisible group-hover:visible absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] rounded-full w-[30px] h-[30px] p-2 bg-[rgba(0,0,0,0.4)]"
+						class="rounded-full w-[30px] h-[30px] flex items-center justify-center p-0 bg-[rgba(0,0,0,0.4)]"
 						on:click={() => {
 							delete images[i];
 							images = images.filter((x) => x);
 						}}
 					>
-						R
+						<Trash size={20} color="#fff"></Trash>
 					</button>
+					<button
+						type="button"
+						class="rounded-full w-[30px] h-[30px] flex items-center justify-center p-0 bg-[rgba(0,0,0,0.4)]"
+						on:click={async () => {
+							let image = await rotateImage(images[i]);
+							images[i] = image;
+							images = images
+						}}
+					>
+						<RotateCounterClockwise size={20} color="#fff"></RotateCounterClockwise>
+					</button>
+					</div>
 				</div>
 			{/if}
 		{/each}
 	</div>
-</div>
+</div>
--- a/src/components/UMBE_Footer.astro
+++ b/src/components/UMBE_Footer.astro
@@ -0,0 +1,10 @@
+---
+const currentYear = new Date().getFullYear();
+---
+
+<footer class="max-w-[1920px] w-full">
+<div class="flex flex-row justify-between px-4 items-center bg-primary py-2 mt-auto">
+	<a class="text-white font-medium text-lg" href="/impressum">Impressum und Datenschutz</a>
+	<a class="text-white font-medium text-lg" href="/">© {currentYear} IB Cornelsen Hamburg.</a>
+</div>
+</footer>
--- a/src/components/UMBE_Header.astro
+++ b/src/components/UMBE_Header.astro
@@ -0,0 +1,45 @@
+<header class="max-w-[1920px] w-full relative">
+	<a class="hidden md:block w-full h-48 bg-base-200" href="/">
+		<img
+			src="/images/header/header-bg.jpg"
+			class="w-full h-full object-cover"
+			alt="Hintergrund - Rollen Architektenpapier"
+		/>
+			<img
+				src="/images/header/logo-big.svg"
+				class="absolute top-4 right-0 w-[464px]"
+				alt="IBCornelsen - Logo"
+			/>
+			<h2
+				class="text-secondary font-semibold text-2xl absolute top-8 right-4"
+			>
+				Energieausweis online erstellen
+			</h2>
+			<h2
+				class="text-primary font-semibold text-xl absolute top-16 right-4"
+			>
+				Energieausweise nach aktueller GEG
+			</h2>
+	</a>
+	<div class="px-4 flex flex-row w-full md:justify-end items-center bg-primary">
+		<a
+			class="header-button hidden md:block"
+			href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
+			>Energieausweis erstellen</a
+		>
+		<a class="header-button hidden md:block" href="/kontakt"
+			>Kontakt</a
+		>
+		<a class="header-button hidden md:block" href="/agb">AGB</a>
+			
+			<a class="hamburger_menu"
+				><img src="/images/hamburger.png" width="22" alt="hamburger" /></a
+			>
+		</div>
+</header>
+
+<style>
+	.header-button {
+		@apply px-4 py-2 text-primary-content font-medium text-lg tracking-normal hover:bg-secondary h-full;
+	}
+</style>
--- a/src/components/UMBE_SidebarLeft.astro
+++ b/src/components/UMBE_SidebarLeft.astro
@@ -0,0 +1,9 @@
+---
+import Navigation from "../components/UMBE_navcard.astro";
+---
+
+<div class="flex flex-col gap-6 bg-slate-200 grow">
+
+<Navigation>
+
+</div>
--- a/src/components/UMBE_SidebarRight.astro
+++ b/src/components/UMBE_SidebarRight.astro
@@ -0,0 +1,3 @@
+<div class="flex flex-col gap-4 bg-slate-200 grow">
+
+</div>
--- a/src/components/UMBE_navcard.astro
+++ b/src/components/UMBE_navcard.astro
@@ -0,0 +1,100 @@
+<script>
+
+
+
+</script>
+
+
+<ul id="main-navigation">
+    <a class="nav-element-link">
+    <li class="dropdown dropdown-right dropdown-hover nav-element w-full">Energieausweis erstellen<span>❯</span>
+    </a>
+
+    <ul tabindex="0" class="nav-list dropdown-content z-[1] w-full">
+      <li class="nav-second"><a class="nav-element-link">Verbrauchsausweis erstellen</a></li>
+      <li class="nav-second"><a class="nav-element-link">Bedarfsausweis erstellen</a></li>
+      <li class="nav-second"><a class="nav-element-link">Verbrauchsausweis Gewerbe erstellen</a></li>
+      <li class="nav-second"><a class="nav-element-link">Bedarfsausweis Gewerbe erstellen</a></li>    
+    </ul>
+
+</li>
+
+<li class="no-dropdown nav-element w-full">
+    <a class="nav-element-link" href="">Welcher Energieausweis</a>
+</li>
+
+<li class="dropdown lg:dropdown-bottom xl:dropdown-right dropdown-hover nav-element w-full">
+    <a class="nav-element-link" href="">Verbrauchsausweis<span>❯</span></a>
+    <ul tabindex="0" class="nav-list dropdown-content z-[1] w-full">
+    <li class="nav-second"><a class="nav-element-link">Item 1</a></li>
+    <li class="nav-second"><a class="nav-element-link">Item 2</a></li>
+    </ul>
+</li>
+
+<li class="dropdown dropdown-right dropdown-hover nav-element w-full">
+    <a class="nav-element-link" href="">Bedarfsausweis<span>❯</span></a>
+    <ul tabindex="0" class="nav-list dropdown-content z-[1] w-full">
+    <li class="nav-second"><a class="nav-element-link">Item 1</a></li>
+    <li class="nav-second"><a class="nav-element-link">Item 2</a></li>
+    </ul>
+</li>
+
+<li class="dropdown dropdown-right dropdown-hover nav-element w-full">
+    <a class="nav-element-link" href="">Energieausweis<span>❯</span></a>
+    <ul tabindex="0" class="nav-list dropdown-content z-[1] w-full">
+    <li class="nav-second"><a class="nav-element-link">Item 1</a></li>
+    <li class="nav-second"><a class="nav-element-link">Item 2</a></li>
+    </ul>
+</li>
+
+<li class="no-dropdown nav-element w-full">
+    <a class="nav-element-link" href="">EnEV Zusammenfassung - Archiv</a>
+</li>
+
+<li class="no-dropdown nav-element w-full">
+    <a class="nav-element-link" href="">Energieausweis Aussteller</a>
+</li>
+
+<li class="no-dropdown nav-element w-full">
+    <a class="nav-element-link" href="">Kundenbewertungen</a>
+</li>
+
+<li class="no-dropdown nav-element w-full">
+    <a class="nav-element-link" href="">FAQ</a>
+</li>
+
+<li class="no-dropdown nav-element w-full">
+    <a class="nav-element-link" href="">Für Entwickler</a>
+</li>
+
+</div>
+
+<style>
+
+#main-navigation, .nav-list{border-top: 1px solid #ccc;}
+#main-navigation li{border-bottom: 1px solid #ccc;border-left: 1px solid #ccc;border-right: 1px solid #ccc;}
+
+.nav-element{
+	@apply p-2 bg-white font-normal text-lg hover:bg-primary hover:text-white
+}
+
+.nav-second{
+	@apply p-2 bg-white font-normal text-lg hover:bg-secondary hover:text-white
+}
+
+.nav-element-link{
+	@apply text-black no-underline hover:no-underline hover:text-white 
+}
+
+.nav-element-link span{
+    position:absolute;right:15px;top:0.65rem;
+
+}
+
+.nav-element:hover > .nav-element-link, .nav-second:hover > .nav-element-link{ 
+	@apply text-white
+}
+
+.nav-element ul{margin: -1px 0;}
+
+</style>
--- a/src/layouts/UMBE_Layout.astro
+++ b/src/layouts/UMBE_Layout.astro
@@ -0,0 +1,96 @@
+---
+import i18next from "i18next";
+
+import "../style/UMBE_global.css";
+import "../../svelte-dialogs.config"
+import Footer from "../components/UMBE_Footer.astro";
+import Header from "../components/UMBE_Header.astro";
+import SidebarLeft from "../components/UMBE_SidebarLeft.astro";
+import SidebarRight from "../components/UMBE_SidebarRight.astro";
+import { NotificationWrapper } from "@ibcornelsen/ui";
+
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+
+
+---
+
+<!DOCTYPE html>
+<html lang={i18next.language}>
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.jpg" />
+		<meta
+			name="description"
+			content="✅ Jetzt Ihren Energieausweis online erstellen. Erhalten Sie Ihren online Energieausweis rechtssicher und nach aktueller GEG (vormals EnEV) vom Diplom Ingenieur geprüft."
+		/>
+		<title>
+			{title || "Energieausweis online erstellen - Online Energieausweis"}
+		</title>
+	</head>
+
+	<body>
+		<container class="max-w-[1920px] w-full mx-auto bg-slate-600 grid  border-solid border-grey-200 border">
+		<Header />
+		<main
+			class="lg:grid gap-6 md:p-6 lg:grid-cols-[2fr,6fr,2fr] max-w-[1920px] w-full bg-base-100"
+		>
+			<SidebarLeft />
+			<article class="w-full max-w-full bg-base-200 border border-base-300">
+				<slot />
+			</article>
+			<SidebarRight />
+		
+		</main>
+		<Footer />
+		<NotificationWrapper client:load />
+	</container>
+	</body>
+</html>
+
+<style is:global lang="scss">
+
+	:root {
+		@apply bg-base-100 text-base-content;
+	}
+
+	article {
+		@apply rounded-lg w-full shadow-md border;
+	}
+
+	.mainContent {
+		p, h1, h2, h3, h4, h5, h6 {
+			@apply text-base-content;
+		}
+	}
+
+	body {
+		min-height: 100vh;
+	}
+
+	.button {
+		@apply px-8 py-2 bg-secondary rounded-lg text-white font-medium hover:shadow-lg transition-all hover:underline active:bg-blue-900 text-center cursor-pointer;
+		color: #fff !important;
+	}
+
+	h3 {
+		@apply text-xl font-medium mt-6 mb-4;
+	}
+
+	input {
+		@apply py-1.5 px-4 w-full rounded-lg outline-none text-lg text-slate-700 border bg-gray-50 transition-colors;
+	}
+
+	input:hover,
+	input:focus {
+		@apply bg-gray-100;
+	}
+
+	label {
+		@apply text-base font-semibold;
+	}
+</style>
--- a/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
+++ b/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
@@ -29,6 +29,8 @@
 	import { VerbrauchsausweisWohnenClient, BenutzerClient, UploadedGebaeudeBild } from "#components/Ausweis/types";
 	import { verbrauchsausweisWohnenSpeichern } from "src/client/lib/verbrauchsausweisWohnenSpeichern";
 		
+	// TODO: Vom Server sollte ein volles Objekt kommen, dass alle Subobjekte enthält, weil es sonst zu Problemen führen kann
+	// wenn gebaeude_aufnahme_allgemein oder gebaeude_stammdaten nicht existiert...
 	export let ausweis: VerbrauchsausweisWohnenClient;
 	export let user: BenutzerClient = {} as BenutzerClient;

@@ -36,8 +38,6 @@
 	let gebaeude = ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {};
 	let images: (UploadedGebaeudeBild & { base64?: string })[] = ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten?.gebaeude_bilder || [];

-	
-
 	async function spaeterWeitermachen() {
 		const result = await verbrauchsausweisWohnenSpeichern(ausweis, gebaeude, gebaeude_aufnahme_allgemein, images, user);

@@ -577,12 +577,7 @@
 			>F - Bitte prüfen Sie hier die Angaben zum Sanierungszustand des
 			Gebäudes</Label
 		>
-		<BilderZusatzsysteme
-			{images}
-			{gebaeude}
-			{gebaeude_aufnahme_allgemein}
-			{ausweis}
-		/>
+		<BilderZusatzsysteme bind:images bind:gebaeude bind:gebaeude_aufnahme_allgemein bind:ausweis />
 		<hr />
 		<div class="flex flex-row justify-between">
 			<Hilfe />
--- a/src/modules/Dashboard/DashboardPDFDesignerModule.svelte
+++ b/src/modules/Dashboard/DashboardPDFDesignerModule.svelte
@@ -19,17 +19,9 @@
 	let container: HTMLDivElement;

 	let designer: Designer;
-	let page: number = 0;

 	onMount(() => {
 		designer = new Designer({ domContainer: container, template, plugins });
-
-		console.log(designer);
-		
-
-		designer.onChangePage((p) => {
-			page = p
-		});
 	});

 	function loadBasePDF() {
@@ -51,6 +43,7 @@

 	function addNewField() {
 		template = designer.getTemplate();
+		const page = designer.getPageCursor();

 		template.schemas[page]["new-field"] = {
 				type: "text",
--- a/src/pages/UMBE_test.astro
+++ b/src/pages/UMBE_test.astro
@@ -0,0 +1,16 @@
+---
+
+
+import Layout from "#layouts/UMBE_Layout.astro";
+
+
+---
+
+<Layout title="Energieausweis online erstellen - Online Energieausweis">
+	<h1>HALLO</h1>
+
+
+
+	</div>
+</Layout>
+
--- a/src/pages/energieausweis-erstellen/verbrauchsausweis-wohnen/index.astro
+++ b/src/pages/energieausweis-erstellen/verbrauchsausweis-wohnen/index.astro
@@ -1,24 +1,27 @@
 ---
-
 import AusweisLayout from "#layouts/AusweisLayout.astro";
 import VerbrauchsausweisWohnenModule from "#modules/Ausweise/VerbrauchsausweisWohnenModule.svelte";
 import { VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
 import { createCaller } from "#lib/caller";

 const uid = Astro.url.searchParams.get("uid");
-let ausweis: VerbrauchsausweisWohnenClient = {} as VerbrauchsausweisWohnenClient;
+let ausweis: VerbrauchsausweisWohnenClient = {
+	gebaeude_aufnahme_allgemein: { gebaeude_stammdaten: {} },
+} as VerbrauchsausweisWohnenClient;

 const caller = createCaller(Astro);

 if (uid) {
 	ausweis = await caller.v1.verbrauchsausweisWohnen.get({
-		uid: uid
-	})
+		uid: uid,
+	});

 	if (!ausweis) {
 		// Der Ausweis scheint nicht zu existieren.
 		// Wir leiten auf die generische Ausweisseite ohne UID weiter.
-		return Astro.redirect("/energieausweis-erstellen/verbrauchsausweis-wohnen");
+		return Astro.redirect(
+			"/energieausweis-erstellen/verbrauchsausweis-wohnen"
+		);
 	}
 }
 ---
--- a/src/pages/pdf/ansichtsausweis.astro
+++ b/src/pages/pdf/ansichtsausweis.astro
@@ -3,10 +3,13 @@ import { generate } from "@pdfme/generator";
 import VerbrauchsausweisWohnen2016Template from "../../lib/pdf/templates/GEG24_Verbrauchsausweis.json";
 import { convertAusweisData } from "#lib/AusweisData";
 import { variable } from "#lib/pdf/plugins/variables";
-import { text, image } from "@pdfme/schemas"
+import { text, image } from "@pdfme/schemas";
 import { createCaller } from "#lib/caller";
 import { VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
-import { Template } from "@pdfme/common";
+import { Schema, Template } from "@pdfme/common";
+import { Moment } from "moment";
+import { endEnergieVerbrauchVerbrauchsausweis_2016 } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016";
+import moment from "moment";

 const base64 = Astro.url.searchParams.get("base64");
 let ausweis: Partial<VerbrauchsausweisWohnenClient> | null = null;
@@ -24,30 +27,153 @@ if (base64) {
 	const caller = createCaller(Astro);

 	ausweis = await caller.v1.verbrauchsausweisWohnen.get({
-		uid: uidAusweis
-	})
+		uid: uidAusweis,
+	});
 }

 const template = VerbrauchsausweisWohnen2016Template as Template;
+const berechnungen = await endEnergieVerbrauchVerbrauchsausweis_2016(ausweis);

-template.schemas.push({})
-template.schemas.push({})
-template.schemas[2]["energie_1"] = {
-	position: {
-		x: 15,
-		y: 140
-	},
-	height: 5,
-	width: 14,
-	type: "text",
-	fontSize: 8,
-	verticalAlign: "middle"
+let inputs: Record<string, string> = {};
+
+// Verbrauchszeiträume
+const addVerbrauchszeitraum = (() => {
+	let row = 0;
+	let columnWidth = [16, 16, 80, 12, 18, 18, 18, 12];
+
+	const getPosition = (column: number) => {
+		return {
+			position: {
+				x:
+					15 +
+					columnWidth.reduce(
+						(a, c, i) => (i >= column ? a : a + c),
+						0
+					),
+				y: 141 + row * 5,
+			},
+			height: 5,
+			width: 14,
+			type: "text",
+			fontSize: 8,
+			verticalAlign: "middle",
+		};
+	};
+
+	return (
+		schema: Schema,
+		start: Moment,
+		end: Moment,
+		energietraeger: string,
+		primaerenergiefaktor: number,
+		energieverbrauch: number,
+		anteilWarmwasser: number,
+		klimafaktor: number
+	) => {
+		inputs[`verbrauchszeitraum_${row}_start`] = start.format("MM.YYYY");
+		inputs[`verbrauchszeitraum_${row}_end`] = end.format("MM.YYYY");
+		inputs[`verbrauchszeitraum_${row}_energietraeger`] = energietraeger;
+		inputs[`verbrauchszeitraum_${row}_primaerenergiefaktor`] =
+			primaerenergiefaktor.toString();
+		inputs[`verbrauchszeitraum_${row}_energieverbrauch`] =
+			energieverbrauch.toString();
+		inputs[`verbrauchszeitraum_${row}_anteil_warmwasser`] = Math.round(
+			anteilWarmwasser * energieverbrauch
+		).toString();
+		inputs[`verbrauchszeitraum_${row}_anteil_heizung`] = Math.round(
+			(1 - anteilWarmwasser) *
+			energieverbrauch
+		).toString();
+		inputs[`verbrauchszeitraum_${row}_klimafaktor`] =
+			klimafaktor.toString();
+
+		schema[`verbrauchszeitraum_${row}_start`] = getPosition(0);
+		schema[`verbrauchszeitraum_${row}_end`] = getPosition(1);
+		schema[`verbrauchszeitraum_${row}_energietraeger`] = getPosition(2);
+		schema[`verbrauchszeitraum_${row}_primaerenergiefaktor`] =
+			getPosition(3);
+		schema[`verbrauchszeitraum_${row}_energieverbrauch`] = getPosition(4);
+		schema[`verbrauchszeitraum_${row}_anteil_warmwasser`] = getPosition(5);
+		schema[`verbrauchszeitraum_${row}_anteil_heizung`] = getPosition(6);
+		schema[`verbrauchszeitraum_${row}_klimafaktor`] = getPosition(7);
+
+		row++;
+	};
+})();
+
+
+addVerbrauchszeitraum(
+	template.schemas[2],
+	moment(ausweis.startdatum),
+	moment(ausweis.startdatum).add("1", "year"),
+	ausweis.gebaeude_aufnahme_allgemein?.brennstoff_1,
+	berechnungen?.primaerfaktorww,
+	berechnungen?.verbrauch_1_kwh,
+	ausweis.anteil_warmwasser_1 / 100,
+	berechnungen?.klimafaktoren[0].klimafaktor
+);
+
+addVerbrauchszeitraum(
+	template.schemas[2],
+	moment(ausweis.startdatum).add("1", "year"),
+	moment(ausweis.startdatum).add("2", "years"),
+	ausweis.gebaeude_aufnahme_allgemein?.brennstoff_1,
+	berechnungen?.primaerfaktorww,
+	berechnungen?.verbrauch_2_kwh,
+	ausweis.anteil_warmwasser_1 / 100,
+	berechnungen?.klimafaktoren[1].klimafaktor
+);
+
+addVerbrauchszeitraum(
+	template.schemas[2],
+	moment(ausweis.startdatum).add("2", "years"),
+	moment(ausweis.startdatum).add("3", "years"),
+	ausweis.gebaeude_aufnahme_allgemein?.brennstoff_1,
+	berechnungen?.primaerfaktorww,
+	berechnungen?.verbrauch_3_kwh,
+	ausweis.anteil_warmwasser_1 / 100,
+	berechnungen?.klimafaktoren[2].klimafaktor
+);
+
+if (ausweis.zusaetzliche_heizquelle) {
+	addVerbrauchszeitraum(
+	template.schemas[2],
+		moment(ausweis.startdatum),
+		moment(ausweis.startdatum).add("1", "year"),
+		ausweis.gebaeude_aufnahme_allgemein?.brennstoff_2,
+		berechnungen?.primaerfaktorww_1,
+		berechnungen?.verbrauch_4_kwh,
+		ausweis.anteil_warmwasser_2 / 100,
+		berechnungen?.klimafaktoren[0].klimafaktor
+	);
+
+	addVerbrauchszeitraum(
+		template.schemas[2],
+		moment(ausweis.startdatum).add("1", "year"),
+		moment(ausweis.startdatum).add("2", "years"),
+		ausweis.gebaeude_aufnahme_allgemein?.brennstoff_2,
+		berechnungen?.primaerfaktorww_1,
+		berechnungen?.verbrauch_5_kwh,
+		ausweis.anteil_warmwasser_2 / 100,
+		berechnungen?.klimafaktoren[1].klimafaktor
+	);
+
+	addVerbrauchszeitraum(
+		template.schemas[2],
+		moment(ausweis.startdatum).add("2", "years"),
+		moment(ausweis.startdatum).add("3", "years"),
+		ausweis.gebaeude_aufnahme_allgemein?.brennstoff_2,
+		berechnungen?.primaerfaktorww_1,
+		berechnungen?.verbrauch_6_kwh,
+		ausweis.anteil_warmwasser_2 / 100,
+		berechnungen?.klimafaktoren[1].klimafaktor
+	);
 }

 const pdf = await generate({
 	template,
 	plugins: { text, image, variable },
-	inputs: [{...convertAusweisData(ausweis), energie_1: "Hallo"}],
+	inputs: [{ ...convertAusweisData(ausweis), ...inputs }],
 	options: {
 		author: "IB Cornelsen",
 		creationDate: new Date(),
@@ -62,4 +188,4 @@ return new Response(pdf, {
 		"Content-Type": "application/pdf",
 	},
 });
---
+---
--- a/src/style/UMBE_global.css
+++ b/src/style/UMBE_global.css
@@ -0,0 +1,48 @@
+@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
+@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");
+
+* {
+	font-weight: 400;
+	box-sizing: border-box;
+	font-family: "Abel", "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+
+
+
+
+
+
+
+
+article hr {
+	@apply mb-4 mt-4;
+}
+
+article {
+	@apply px-6 md:px-8 py-6 w-full relative bg-white;
+}
+
+article h1 {
+	@apply text-4xl font-normal my-4;
+}
+
+article h2 {
+	@apply text-2xl font-normal my-4;
+}
+
+article h3 {
+	@apply text-xl font-normal my-2;
+}
+
+article a {
+	@apply text-blue-700 font-medium text-lg;
+}
+
+article select {
+	@apply rounded-lg px-2 py-1.5 outline-none;
+}
+
+.checkbox {
+	@apply h-5 w-4 checkbox-secondary;
+}