Kundendaten + Test Ausweis PDF

src/components/Ausweis/Ausweisart.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import HelpLabel from "~/components/HelpLabel.svelte";
 
-	export let constructionYear: number;
+	export let baujahrGebaeude: number;
 	export let apartmentCount: number;
 	export let certificateReason: "Vermietung" | "Neubau" | "Verkauf" | "Modernisierung" | "Sonstiges";
 	export let sanitationStatus: boolean;
+	export let baujahrHeizungsAnlage: number;
 </script>
 
 <div class="GRB">
@@ -71,14 +72,10 @@
 		</HelpLabel>
 		<div>
 			<input
-				id="IGheizung"
 				name="IGheizung"
-				maxlength="20"
-				class="form-control input-md"
-				type="text"
+				type="number"
 				required
-				autocomplete="off"
-				data-msg="Pflichtfeld"
+				bind:value={baujahrHeizungsAnlage}
 			/>
 		</div>
 	</div>
@@ -96,15 +93,11 @@
 		</HelpLabel>
 		<div>
 			<input
-				id="IGbaujahr"
 				name="IGbaujahr"
-				maxlength="20"
-				class="form-control input-md CHECK"
-				type="text"
+				type="number"
 				required
 				autocomplete="off"
-				data-msg="Pflichtfeld"
-				bind:value={constructionYear}
+				bind:value={baujahrGebaeude}
 			/>
 		</div>
 	</div>

src/components/Ausweis/Kundendaten.svelte

@@ -223,26 +223,6 @@
 </div>
 
 <style>
-	:global(.GRB) {
-		@apply border-2 border-[#ffcc03] p-4 flex flex-row rounded-lg justify-between w-full;
-		background: linear-gradient(
-			135deg,
-			rgba(252, 234, 187, 1) 0%,
-			rgba(253, 235, 189, 1) 52%,
-			rgba(251, 223, 147, 1) 100%
-		);
-	}
-
-	:global(.GRB3) {
-		@apply flex flex-col border-2 border-[#ffcc03] p-4 rounded-lg;
-		background: linear-gradient(
-			135deg,
-			rgba(252, 234, 187, 1) 0%,
-			rgba(253, 235, 189, 1) 52%,
-			rgba(251, 223, 147, 1) 100%
-		);
-	}
-
 	input,
 	select {
 		display: block;

src/components/Bedarfsausweis/BedarfsausweisContent.svelte

@@ -12,7 +12,8 @@
 	import { hotWaterProductionTypes } from "./HotWaterProductionTypes";
 	import AusweisPreviewContainer from "../Ausweis/AusweisPreviewContainer.svelte";
 
-	let constructionYear: number;
+	let baujahrGebaeude: number;
+	let baujahrHeizungsAnlage: number;
 	let apartmentCount: number;
 	let certificateReason:
 		| "Vermietung"
@@ -78,10 +79,11 @@
 		<hr />
 		<Label>A - Prüfung der Ausweisart</Label>
 		<Ausweisart
-			bind:constructionYear
+			bind:baujahrGebaeude
 			bind:apartmentCount
 			bind:certificateReason
 			bind:sanitationStatus
+			bind:baujahrHeizungsAnlage
 		/>
 		<hr />
 		<Label
@@ -1348,51 +1350,3 @@
 		<input type="hidden" name="ausweisart" value="BA" />
 	</fieldset>
 </form>
-
-<style>
-	:global(.GRB) {
-		@apply border-2 border-[#ffcc03] p-4 flex flex-row rounded-lg justify-between w-full;
-		background: linear-gradient(
-			135deg,
-			rgba(252, 234, 187, 1) 0%,
-			rgba(253, 235, 189, 1) 52%,
-			rgba(251, 223, 147, 1) 100%
-		);
-	}
-
-	:global(.GRB3) {
-		@apply flex flex-col border-2 border-[#ffcc03] p-4 rounded-lg;
-		background: linear-gradient(
-			135deg,
-			rgba(252, 234, 187, 1) 0%,
-			rgba(253, 235, 189, 1) 52%,
-			rgba(251, 223, 147, 1) 100%
-		);
-	}
-
-	:global(.box) {
-		@apply border-2 border-[#ffcc03] p-4 rounded-lg;
-		background: linear-gradient(
-			135deg,
-			rgba(252, 234, 187, 1) 0%,
-			rgba(253, 235, 189, 1) 52%,
-			rgba(251, 223, 147, 1) 100%
-		);
-	}
-
-	:global(.headline) {
-		@apply text-lg;
-	}
-
-	:global(.radio-inline) {
-		@apply flex flex-row gap-2;
-	}
-
-	:global(.checkbox-inline) {
-		@apply flex flex-row gap-2;
-	}
-
-	:global(input[type="checkbox"]) {
-		width: auto;
-	}
-</style>

src/components/Checkbox.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	let id = Math.random().toString();
+
+	export let checked: boolean = false;
+</script>
+
+<div class="flex flex-row gap-2 items-start my-2">
+	<input type="checkbox" id={id} bind:checked={checked}>
+	<label for={id}><slot></slot></label>
+</div>

src/components/Kaufabschluss/Kaufabschluss.svelte

@@ -95,36 +95,4 @@
 			<a class="button" href="/verbrauchsausweis">Daten ändern</a>
 		</div>
 	</div>
-</form>
-
-<style>
-	:global(.GRB) {
-		@apply flex flex-col border-2 border-[#ffcc03] p-4 rounded-lg;
-		background: linear-gradient(
-			135deg,
-			rgba(252, 234, 187, 1) 0%,
-			rgba(253, 235, 189, 1) 52%,
-			rgba(251, 223, 147, 1) 100%
-		);
-	}
-
-	:global(.headline) {
-		@apply text-lg;
-	}
-
-	:global(.radio-inline) {
-		@apply flex flex-row gap-2;
-	}
-
-	:global(.checkbox-inline) {
-		@apply flex flex-row gap-2;
-	}
-
-	:global(input[type="checkbox"]) {
-		width: auto;
-	}
-
-	:global(table, td) {
-		@apply border-none;
-	}
-</style>
+</form>

src/components/Kaufabschluss/KundendatenContainer.svelte

@@ -56,3 +56,17 @@
 		</tr>
 	</table>
 </div>
+
+<style>
+	table tr {
+		@apply border-none;
+	}
+
+	table, td, tr {
+		@apply border-0 p-2;
+	}
+
+	tr:not(:last-child) {
+		@apply border-b border-b-[rgba(0,0,0,0.1)];
+	}
+</style>

src/components/Verbrauchsausweis/VerbrauchsausweisContent.svelte

@@ -41,7 +41,8 @@
 		);
 	}
 
-	let constructionYear: number;
+	let baujahrGebaeude: number;
+	let baujahrHeizungsAnlage: number;
 	let apartmentCount: number;
 	let certificateReason:
 		| "Vermietung"
@@ -54,7 +55,7 @@
 	let needsRequirementCertificate: boolean = false;
 
 	$: needsRequirementCertificate =
-		(constructionYear < 1978 &&
+		(baujahrGebaeude < 1978 &&
 			apartmentCount <= 4 &&
 			sanitationStatus == false &&
 			(certificateReason == "Vermietung" ||
@@ -62,6 +63,19 @@
 		certificateReason == "Neubau" ||
 		certificateReason == "Modernisierung" ||
 		certificateReason == "Verkauf";
+
+	function automatischAusfüllen() {
+		baujahrGebaeude = 1962;
+		baujahrHeizungsAnlage = 1974;
+		sanitationStatus = true;
+		apartmentCount = 1;
+		certificateReason = "Vermietung";
+		energyConsumption = [15000, 14000, 16000]
+		area = 152;
+		hasCellar = true;
+		heatedWaterIncluded = true;
+		heatedWaterPortion = 18;
+	}
 </script>
 
 <div class="flex flex-row gap-8 items-center mb-8">
@@ -79,7 +93,10 @@
 	>
 		<div class="flex flex-row justify-between">
 			<a class="button" href="/speichern">Später Weitermachen</a>
-			<Hilfe />
+			<div class="flex gap-4">
+				<Hilfe />
+				<button on:click={automatischAusfüllen}>Automatisch Ausfüllen</button>
+			</div>
 		</div>
 
 		<hr />
@@ -89,10 +106,11 @@
 		</div>
 
 		<Ausweisart
-			bind:constructionYear
+			bind:baujahrGebaeude
 			bind:apartmentCount
 			bind:certificateReason
 			bind:sanitationStatus
+			bind:baujahrHeizungsAnlage
 		/>
 
 		<div
@@ -796,42 +814,4 @@
 			<button formnovalidate>Weiter</button>
 		</div>
 	</fieldset>
-</form>
-
-<style>
-	:global(.GRB) {
-		@apply border-2 border-[#ffcc03] p-4 flex flex-row rounded-lg justify-between w-full;
-		background: linear-gradient(
-			135deg,
-			rgba(252, 234, 187, 1) 0%,
-			rgba(253, 235, 189, 1) 52%,
-			rgba(251, 223, 147, 1) 100%
-		);
-	}
-
-	:global(.GRB3) {
-		@apply flex flex-col border-2 border-[#ffcc03] p-4 rounded-lg;
-		background: linear-gradient(
-			135deg,
-			rgba(252, 234, 187, 1) 0%,
-			rgba(253, 235, 189, 1) 52%,
-			rgba(251, 223, 147, 1) 100%
-		);
-	}
-
-	:global(.headline) {
-		@apply text-lg;
-	}
-
-	:global(.radio-inline) {
-		@apply flex flex-row gap-2;
-	}
-
-	:global(.checkbox-inline) {
-		@apply flex flex-row gap-2;
-	}
-
-	:global(input[type="checkbox"]) {
-		width: auto;
-	}
-</style>
+</form>

src/components/Verbrauchsausweis/energyPerformanceCalculation.ts

@@ -23,6 +23,7 @@ export function calculateEnergyPerformanceScore(
 	let energyConsumptionKWh = energyConsumption.map((x) => convertEnergyConsumptionToKWh(x, conversionFactor, calorificValueFactor))
 	let additionalEnergyConsumptionKWh = additionalEnergyConsumption.map((x) => convertEnergyConsumptionToKWh(x, conversionFactor, calorificValueFactor))
 	let heatingPortion = 1 - (waterHeatingPortion / 100);
+	
 
 	return (heatingPortion * (energyConsumptionKWh[0] + additionalEnergyConsumptionKWh[0]) * climateFactors[0] +
 		(waterHeatingPortion / 100) * (energyConsumptionKWh[0] + additionalEnergyConsumptionKWh[0]) +

src/components/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeContent.svelte

@@ -29,7 +29,8 @@
 	let zip: string = "";
 	let city: string = "";
 
-	let constructionYear: number;
+	let baujahrGebaeude: number;
+	let baujahrHeizungsAnlage: number;
 	let apartmentCount: number;
 	let certificateReason:
 		| "Vermietung"
@@ -42,7 +43,7 @@
 	let needsRequirementCertificate: boolean = false;
 
 	$: needsRequirementCertificate =
-		(constructionYear < 1978 &&
+		(baujahrGebaeude < 1978 &&
 			apartmentCount <= 4 &&
 			sanitationStatus == false &&
 			(certificateReason == "Vermietung" ||
@@ -77,10 +78,11 @@
 		</div>
 
 		<Ausweisart
-			bind:constructionYear
+			bind:baujahrGebaeude
 			bind:apartmentCount
 			bind:certificateReason
 			bind:sanitationStatus
+			bind:baujahrHeizungsAnlage
 		/>
 		<div
 			class="flex flex-col p-4"
@@ -854,52 +856,4 @@
 			</div>
 		</div>
 	</fieldset>
-</form>
-
-<style>
-	:global(.GRB) {
-		@apply border-2 border-[#ffcc03] p-4 flex flex-row rounded-lg justify-between w-full;
-		background: linear-gradient(
-			135deg,
-			rgba(252, 234, 187, 1) 0%,
-			rgba(253, 235, 189, 1) 52%,
-			rgba(251, 223, 147, 1) 100%
-		);
-	}
-
-	:global(.GRB3) {
-		@apply flex flex-col border-2 border-[#ffcc03] p-4 rounded-lg;
-		background: linear-gradient(
-			135deg,
-			rgba(252, 234, 187, 1) 0%,
-			rgba(253, 235, 189, 1) 52%,
-			rgba(251, 223, 147, 1) 100%
-		);
-	}
-
-	:global(.box) {
-		@apply border-2 border-[#ffcc03] p-4 rounded-lg;
-		background: linear-gradient(
-			135deg,
-			rgba(252, 234, 187, 1) 0%,
-			rgba(253, 235, 189, 1) 52%,
-			rgba(251, 223, 147, 1) 100%
-		);
-	}
-
-	:global(.headline) {
-		@apply text-lg;
-	}
-
-	:global(.radio-inline) {
-		@apply flex flex-row gap-2;
-	}
-
-	:global(.checkbox-inline) {
-		@apply flex flex-row gap-2;
-	}
-
-	:global(input[type="checkbox"]) {
-		width: auto;
-	}
-</style>
+</form>

src/layouts/AusweisLayout.astro

@@ -121,4 +121,50 @@ const schema = JSON.stringify({
 	input:disabled {
 		text-indent: -9999px;
 	}
+
+	.GRB {
+		@apply border-2 border-[#ffcc03] p-4 flex flex-row rounded-lg justify-between w-full;
+		background: linear-gradient(
+			135deg,
+			rgba(252, 234, 187, 1) 0%,
+			rgba(253, 235, 189, 1) 52%,
+			rgba(251, 223, 147, 1) 100%
+		);
+	}
+
+	.GRB3 {
+		@apply flex flex-col border-2 border-[#ffcc03] p-4 rounded-lg;
+		background: linear-gradient(
+			135deg,
+			rgba(252, 234, 187, 1) 0%,
+			rgba(253, 235, 189, 1) 52%,
+			rgba(251, 223, 147, 1) 100%
+		);
+	}
+
+	.box {
+		@apply border-2 border-[#ffcc03] p-4 rounded-lg;
+		background: linear-gradient(
+			135deg,
+			rgba(252, 234, 187, 1) 0%,
+			rgba(253, 235, 189, 1) 52%,
+			rgba(251, 223, 147, 1) 100%
+		);
+	}
+
+	.headline {
+		@apply text-lg;
+	}
+
+	.radio-inline {
+		@apply flex flex-row gap-2;
+	}
+
+	.checkbox-inline {
+		@apply flex flex-row gap-2;
+	}
+
+	input[type="checkbox"] {
+		width: auto;
+	}
 </style>

src/layouts/PDFLayout.astro

@@ -0,0 +1,33 @@
+---
+
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<title>
+			{title || 'Energieausweis online erstellen - Online Energieausweis'}
+		</title>
+	</head>
+
+	<body class="w-[210mm] h-[297mm] py-[12mm] px-[16mm]">
+		<main>
+			<article class="mainContent">
+				<slot />
+			</article>
+		</main>
+	</body>
+</html>
+
+<style is:global>
+	* {
+		font-family: Arial, Helvetica, sans-serif;
+	}
+</style>

src/pages/pdf/test.astro

@@ -0,0 +1,169 @@
+---
+import moment from "moment";
+import Checkbox from "~/components/Checkbox.svelte";
+import PDFLayout from "~/layouts/PDFLayout.astro";
+
+---
+
+<PDFLayout title="">
+	<div class="flex flex-col gap-2">
+		<div class="rounded-lg border-4 border-pdf-yellow-bright p-2">
+			<div class="flex flex-row gap-2 items-end">
+				<h1 class="text-4xl font-bold">ENERGIEAUSWEIS</h1>
+				<span class="text-lg font-semibold">für Wohngebäude</span>
+			</div>
+			<p>gemäß den §§ 16 ff. Energieeinsparverordnung (EnEV) vom ¹ <span class="bg-gray-300 p-0.5">18. November 2013</span></p>
+		</div>
+		<div class="flex flex-row gap-2">
+			<div class="bg-pdf-yellow-light rounded-lg w-full h-10 items-center justify-between flex flex-row px-2">
+				<p class="text-xs">Gültig bis: <span>{moment().add("10", "years").format("DD. MMM. YYYY")}</span></p>
+				<p class="text-xs">Ausweis ID <span>1293819</span></p>
+				<p class="text-xs">Registriernummer wird nach Zahlungseingang vergeben</p>
+			</div>
+			<span class="w-10 h-10 rounded-full border-pdf-yellow-bright border-4 bg-pdf-yellow-light flex items-center justify-center font-bold text-xl">1</span>
+		</div>
+		<div class="border-4 border-pdf-yellow-bright bg-pdf-yellow-light rounded-lg">
+			<h2>Gebäude</h2>
+			<div class="flex flex-col">
+				<div class="flex flex-row">
+					<table>
+						<tr>
+							<td>Gebäudetyp</td>
+							<td>Einfamilienhaus</td>
+						</tr>
+						<tr>
+							<td>Adresse</td>
+							<td>Mönckebergstraße, 22049 Hamburg</td>
+						</tr>
+						<tr>
+							<td>Gebäudeteil</td>
+							<td>Gesamtgebäude</td>
+						</tr>
+						<tr>
+							<td>Baujahr Gebäude ³</td>
+							<td>1962</td>
+						</tr>
+						<tr>
+							<td>Baujahr Wärmeerzeuger <sup>3</sup> <sup>4</sup></td>
+							<td>1974</td>
+						</tr>
+						<tr>
+							<td>Anzahl Wohnungen</td>
+							<td>1</td>
+						</tr>
+						<tr>
+							<td>Gebäudenutzfläche (A<sub>N</sub>)</td>
+							<td>
+								<table>
+									<tr>
+										<td>182m²</td>
+										<td class="flex flex-row items-center h-full w-full gap-2 pl-2">
+											<input type="checkbox">
+											nach § 19 EnEV aus der Wohnfläche ermittelt
+										</td>
+									</tr>
+								</table>
+							</td>
+						</tr>
+						<tr>
+							<td>Wesentliche Energieträger für<br> Heizung und Warmwasser <sup>3</sup></td>
+							<td>Erdgas, BraunkohleBraunkohle, Strommix</td>
+						</tr>
+					</table>
+					<div class="w-[35%]">
+						<img src="" alt="">
+					</div>
+				</div>
+				<div>
+					<table>
+
+					</table>
+				</div>
+			</div>
+		</div>
+		<div class="box">
+			<h2>Hinweise zu den Angaben über die energetische Qualität des Gebäudes</h2>
+			<div class="bg-white w-full">
+				<p>Die energetische Qualität eines Gebäudes kann durch die Berechnung des <strong>Energiebedarfs</strong> unter Annahme von
+					standardisierten Randbedingungen oder durch die Auswertung des <strong>Energieverbrauchs</strong> ermittelt werden. Als Bezugsfläche dient die energetische Gebäudenutzfläche nach der EnEV, die sich in der Regel von den allgemeinen
+					Wohnflächenangaben unterscheidet. Die angegebenen Vergleichswerte sollen überschlägige Vergleiche ermöglichen (<strong>Erläuterungen - siehe Seite 5</strong>). Teil des Energieausweises sind die Modernisierungsempfehlungen (Seite 4).</p>
+				<Checkbox checked={true}>
+					Der Energieausweis wurde auf der Grundlage von Berechnungen des <strong>Energiebedarfs</strong> erstellt (Energiebedarfsausweis). Die Ergebnisse sind auf <strong>Seite 2</strong> dargestellt. Zusätzliche Informationen zum Verbrauch sind freiwillig.
+				</Checkbox>
+				<Checkbox checked={false}>
+					Der Energieausweis wurde auf der Grundlage von Auswertungen des <strong>Energieverbrauchs</strong> erstellt (Energieverbrauchsausweis). Die Ergebnisse sind auf <strong>Seite 3</strong> dargestellt.
+				</Checkbox>
+				<div class="flex flex-row justify-between items-center w-[80%]">
+					<p>Datenerhebung Bedarf/Verbrauch durch</p>
+					<Checkbox checked={true}>
+						Eigentümer
+					</Checkbox>
+					<Checkbox checked={false}>
+						Aussteller
+					</Checkbox>
+				</div>
+				<Checkbox>Dem Energieausweis sind zusätzliche Informationen zur energetischen Qualität beigefügt (freiwillige Angabe).</Checkbox>
+			</div>
+		</div>
+		<div class="box">
+			<h2>Hinweise zur Verwendung des Energieausweises</h2>
+			<p class="bg-white">Der Energieausweis dient lediglich der Information. Die Angaben im Energieausweis beziehen sich auf das
+				gesamte Wohngebäude oder den oben bezeichneten Gebäudeteil. Der Energieausweis ist lediglich dafür gedacht,
+				einen überschlägigen Vergleich von Gebäuden zu ermöglichen.</p>
+		</div>
+		<div class="flex flex-row gap-2">
+			<div class="bg-pdf-yellow-light rounded-lg p-2 w-full h-20">
+				<p>Aussteller:</p>
+			</div>
+			<div class="bg-pdf-yellow-light rounded-lg p-2 w-full h-20">
+				<p>Aussteller:</p>
+			</div>
+		</div>
+	</div>
+</PDFLayout>
+
+<style is:global>
+	table {
+		@apply w-full h-full;
+	}
+
+	td > table td {
+		@apply px-0 py-0 border-t-0 border-b-0;
+	}
+
+	td:has(table) {
+		@apply p-0;
+	}
+
+	td > table td:first-child {
+		@apply border-l-0;
+	}
+
+	td > table td:last-child {
+		@apply border-r-0;
+	}
+
+	td {
+		@apply border border-black px-1 text-xs py-0.5;
+	}
+
+	td:not(:first-child) {
+		@apply bg-white;
+	}
+
+	h2 {
+		@apply font-bold text-sm;
+	}
+
+	p, label {
+		@apply text-xs;
+	}
+
+	.box {
+		@apply border-4 border-pdf-yellow-bright bg-pdf-yellow-light rounded-lg;
+	}
+
+	.box > * {
+		@apply px-1 py-0.5;
+	}
+</style>

src/style/576.scss

@@ -676,21 +676,6 @@ table {
 	border-collapse: collapse;
 }
 
-tr {
-	border: 0;
-}
-
-th,
-td {
-	padding: 8px;
-}
-
-table,
-th,
-td {
-	border: 1px solid rgba(0, 0, 0, .1);
-}
-
 .grid-3 {
 	display: -ms-grid;
 	display: grid;

tailwind.config.cjs

@@ -10,6 +10,8 @@ module.exports = {
 				bg: "white",
 				"status-error": "red",
 				"status-success": "green",
+				"pdf-yellow-bright": "#f3cb00",
+				"pdf-yellow-light": "#fff6ca"
 			},
 		},
 	},