Bedarfsausweis Rechnung + Datenblatt

src/pages/pdf/datenblatt.astro

@@ -0,0 +1,254 @@
+---
+import moment from "moment";
+import { Verbrauchsausweis } from "src/lib/Ausweis/Verbrauchsausweis";
+import { Dachgeschoss } from "src/lib/Ausweis/types";
+import Checkbox from "~/components/Checkbox.svelte";
+import DatenblattFooter from "~/components/DatenblattFooter.svelte";
+import DatenblattHeader from "~/components/DatenblattHeader.svelte";
+import PDFHeader from "~/components/PDF/PDFHeader.svelte";
+import PDFSectionHeader from "~/components/PDF/PDFSectionHeader.svelte";
+import PDFLayout from "~/layouts/PDFLayout.astro";
+
+const base64 = Astro.url.searchParams.get("base64");
+
+if (!base64) {
+	return Astro.redirect("/404")
+}
+
+const ausweis = Verbrauchsausweis.fromBase64(base64);
+
+if (!ausweis) {
+	return Astro.redirect("/404")
+}
+
+---
+
+<PDFLayout title="Datenblatt">
+	<div class="flex flex-col gap-20">
+		<div class="flex flex-col gap-4">
+			<DatenblattHeader></DatenblattHeader>
+			<div class="px-12 py-20 flex flex-col gap-2">
+				<div class="flex flex-row justify-between items-center">
+					<h2>Datenblatt Energieausweis</h2>
+					<h2>Ausweis ID: </h2>
+				</div>
+				<h3>Gebäudedaten:</h3>
+				<p>Adresse: {ausweis.objekt_strasse}, {ausweis.objekt_plz} {ausweis.objekt_ort}</p>
+				<div class="flex justify-between">
+					<Checkbox checked={ausweis.ausstellgrund == "Neubau"}>Neubau</Checkbox>
+					<Checkbox checked={ausweis.ausstellgrund == "Vermietung" || ausweis.ausstellgrund == "Verkauf"}>Vermietung/Verkauf</Checkbox>
+					<Checkbox checked={ausweis.ausstellgrund == "Modernisierung"}>Modernisierung</Checkbox>
+					<Checkbox checked={ausweis.ausstellgrund == "Sonstiges"}>Sonstiges</Checkbox>
+				</div>
+				<div class="flex justify-between gap-4">
+					<table>
+						<tbody><tr>
+							<td>Baujahr Gebäude:</td>
+							<td>{ausweis.baujahr_gebaeude}</td>
+						</tr>
+						<tr>
+							<td>Baujahr Heizung:</td>
+							<td>{ausweis.baujahr_anlage}</td>
+						</tr>
+						<tr>
+							<td>Wohnfläche:</td>
+							<td>{ausweis.wohnflaeche}</td>
+						</tr>
+						<tr>
+							<td>Lüftungskonzept:</td>
+							<td>{ausweis.lueftungskonzept}</td>
+						</tr>
+						<tr>
+							<td>Gebäudetyp:</td>
+							<td>{ausweis.objekt_typ}</td>
+						</tr></tbody>
+					</table>
+					<table>
+						<tbody><tr>
+							<td>Dachgeschoss:</td>
+							<td>{ausweis.dachgeschoss == Dachgeschoss.BEHEIZT ? "Beheizt" : (ausweis.dachgeschoss == Dachgeschoss.UNBEHEIZT ? "Unbeheizt" : "Nicht Vorhanden")}</td>
+						</tr>
+						<tr>
+							<td>Beheizter Keller:</td>
+							<td>{ausweis.keller_beheizt ? "Ja" : "Nein"}</td>
+						</tr>
+						<tr>
+							<td>Wohnungen:</td>
+							<td>{ausweis.anzahl_einheiten}</td>
+						</tr>
+						<tr>
+							<td>Anlage zur Kühlung:</td>
+							<td>{ausweis.wird_gekuehlt ? "Ja" : "Nein"}</td>
+						</tr>
+						<tr>
+							<td>Leerstand:</td>
+							<td>{ausweis.leerstand}%</td>
+						</tr></tbody>
+						
+					</table>
+				</div>
+				<div class="flex flex-row gap-8">
+					<div class="flex flex-col">
+						<h2>Heizverbrauch</h2>
+						<div class="flex flex-row justify-between gap-4">
+							<p>Von: {moment(ausweis.energieverbrauch_zeitraum).format("MM.YYYY")}</p>
+							<p>Bis: {moment(ausweis.energieverbrauch_zeitraum).add("1", "year").format("MM.YYYY")}</p>
+						</div>
+						<div class="flex flex-row justify-between gap-4">
+							<p>Von: {moment(ausweis.energieverbrauch_zeitraum).add("1", "year").format("MM.YYYY")}</p>
+							<p>Bis: {moment(ausweis.energieverbrauch_zeitraum).add("2", "years").format("MM.YYYY")}</p>
+						</div>
+						<div class="flex flex-row justify-between gap-4">
+							<p>Von: {moment(ausweis.energieverbrauch_zeitraum).add("2", "years").format("MM.YYYY")}</p>
+							<p>Bis: {moment(ausweis.energieverbrauch_zeitraum).add("3", "years").format("MM.YYYY")}</p>
+						</div>
+					</div>
+					<div class="flex flex-col">
+						<h2>{ausweis.energietraeger_1}</h2>
+						<div class="flex flex-row justify-between gap-4">
+							<p>{ausweis.energieverbrauch_1_heizquelle_1}</p>
+							<p>{ausweis.energietraeger_einheit_heizquelle_1}</p>
+						</div>
+						<div class="flex flex-row justify-between gap-4">
+							<p>{ausweis.energieverbrauch_2_heizquelle_1}</p>
+							<p>{ausweis.energietraeger_einheit_heizquelle_1}</p>
+						</div>
+						<div class="flex flex-row justify-between gap-4">
+							<p>{ausweis.energieverbrauch_3_heizquelle_1}</p>
+							<p>{ausweis.energietraeger_einheit_heizquelle_1}</p>
+						</div>
+					</div>
+				</div>
+				<div class="flex flex-row gap-8">
+					<div class="flex flex-col">
+						<h2>Heizverbrauch (Heizwert)</h2>
+						<div class="flex flex-row justify-between gap-4">
+							<p>Von: {moment(ausweis.energieverbrauch_zeitraum).format("MM.YYYY")}</p>
+							<p>Bis: {moment(ausweis.energieverbrauch_zeitraum).add("1", "year").format("MM.YYYY")}</p>
+						</div>
+						<div class="flex flex-row justify-between gap-4">
+							<p>Von: {moment(ausweis.energieverbrauch_zeitraum).add("1", "year").format("MM.YYYY")}</p>
+							<p>Bis: {moment(ausweis.energieverbrauch_zeitraum).add("2", "years").format("MM.YYYY")}</p>
+						</div>
+						<div class="flex flex-row justify-between gap-4">
+							<p>Von: {moment(ausweis.energieverbrauch_zeitraum).add("2", "years").format("MM.YYYY")}</p>
+							<p>Bis: {moment(ausweis.energieverbrauch_zeitraum).add("3", "years").format("MM.YYYY")}</p>
+						</div>
+					</div>
+					<div class="flex flex-col">
+						<h2>{ausweis.energietraeger_1}</h2>
+						<div class="flex flex-row justify-between gap-4">
+							<p>{ausweis.energieverbrauch_1_heizquelle_1}</p>
+							<p>{ausweis.energietraeger_einheit_heizquelle_1}</p>
+						</div>
+						<div class="flex flex-row justify-between gap-4">
+							<p>{ausweis.energieverbrauch_2_heizquelle_1}</p>
+							<p>{ausweis.energietraeger_einheit_heizquelle_1}</p>
+						</div>
+						<div class="flex flex-row justify-between gap-4">
+							<p>{ausweis.energieverbrauch_3_heizquelle_1}</p>
+							<p>{ausweis.energietraeger_einheit_heizquelle_1}</p>
+						</div>
+					</div>
+				</div>
+				<p>Warmwasser enthalten: {ausweis.warmwasser_enthalten ? "Ja" : "Nein"}</p>
+			</div>
+			
+			<DatenblattFooter></DatenblattFooter>
+		</div>
+		<div class="flex flex-col gap-4">
+			<DatenblattHeader></DatenblattHeader>
+			<div class="px-12 py-20 flex flex-col gap-2">
+				<h2>Modernisierungsstand</h2>
+				<h3>Heizungsanlage</h3>
+				<div class="grid grid-cols-3">
+					<Checkbox checked={ausweis.versorgungssysteme[0]}>Zentral/Etage</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[1]}>Einzelöfen</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[2]}>Durchlauferhitzer</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[3]}>Standardkessel</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[4]}>Solarsystem für Warmwasser</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[5]}>Wärmepumpe</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[6]}>Niedertemperaturkessel</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[7]}>Brennwertkessel/Therme</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[8]}>Warmwasserrohre gedämmt</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[9]}>Heizungsrohre gedämmt</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[10]}>Zirkulation</Checkbox>
+					<Checkbox checked={ausweis.versorgungssysteme[11]}>Raumtemperraturregler</Checkbox>
+				</div>
+				<h3>Fenster/Dachfenster/Türen</h3>
+				<div class="grid grid-cols-3">
+					<Checkbox checked={ausweis.fenster_dach[0]}>Einfachglas</Checkbox>
+					<Checkbox checked={ausweis.fenster_dach[1]}>Doppelverglasung</Checkbox>
+					<Checkbox checked={ausweis.fenster_dach[2]}>Isolierverglasung</Checkbox>
+					<Checkbox checked={ausweis.fenster_dach[3]}>Dreifachverglasung</Checkbox>
+					<Checkbox checked={ausweis.fenster_dach[4]}>Alle Fenster dicht</Checkbox>
+					<Checkbox checked={ausweis.fenster_dach[5]}>Fenster teilweise undicht</Checkbox>
+					<Checkbox checked={ausweis.fenster_dach[6]}>Alle Türen dicht</Checkbox>
+					<Checkbox checked={ausweis.fenster_dach[7]}>Türen teilweise undicht</Checkbox>
+					<Checkbox checked={ausweis.fenster_dach[8]}>Rolladenkästen gedämmt</Checkbox>
+				</div>
+				<h3>Wärmedämmung</h3>
+				<div class="grid grid-cols-2">
+					<Checkbox checked={ausweis.daemmung[0]}>Außenwand gedämmt</Checkbox>
+					<Checkbox checked={ausweis.daemmung[1]}>Kelleraußenwand gedämmt</Checkbox>
+					<Checkbox checked={ausweis.daemmung[2]}>Kellerdecke gedämmt</Checkbox>
+					<Checkbox checked={ausweis.daemmung[3]}>Dachgeschoss gedämmt</Checkbox>
+					<Checkbox checked={ausweis.daemmung[4]}>Oberste Geschossdecke gedämmt</Checkbox>
+					<Checkbox checked={ausweis.daemmung[5]}>Oberste Geschossdecke min. 12cm gedämmt</Checkbox>
+				</div>
+				<Checkbox checked={true}>Die Angaben sind richtig und entsprechen dem aktuellen Stand.</Checkbox>
+				<Checkbox checked={true}>Ich habe die AGB gelesen und akzeptiert.</Checkbox>
+				<p>Die Angaben auf diesem Datenblatt wurden uns übermittelt und werden zur Berechnung und
+					Ausstellung des Ausweises herangezogen.</p>
+			</div>
+			<DatenblattFooter></DatenblattFooter>
+		</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>