Bedarfsausweis Rechnung + Datenblatt

package.json

@@ -22,6 +22,7 @@
 		"astro": "^2.1.7",
 		"cookiejs": "^2.1.2",
 		"express": "^4.18.2",
+		"jimp": "^0.22.7",
 		"jwt-simple": "^0.5.6",
 		"katex": "^0.16.7",
 		"knex": "^2.4.2",

src/components/AnsichtsausweisButton.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+	import { Bedarfsausweis } from "src/lib/Ausweis/Bedarfsausweis";
 	import { Verbrauchsausweis } from "src/lib/Ausweis/Verbrauchsausweis";
+	import { VerbrauchsausweisGewerbe } from "src/lib/Ausweis/VerbrauchsausweisGewerbe";
 
-	export let ausweis: Verbrauchsausweis;
+	export let ausweis: Verbrauchsausweis | Bedarfsausweis | VerbrauchsausweisGewerbe;
 
 	function viewAusweis() {
 		const base64 = btoa(JSON.stringify(ausweis));

src/components/Ausweis/AusweisPreviewContainer.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
 	import { Verbrauchsausweis } from "src/lib/Ausweis/Verbrauchsausweis";
+	import { VerbrauchsausweisGewerbe } from "src/lib/Ausweis/VerbrauchsausweisGewerbe";
+	import { Bedarfsausweis } from "src/lib/Ausweis/Bedarfsausweis";
 	import AnsichtsausweisButton from "~/components/AnsichtsausweisButton.svelte";
 	import DatenblattButton from "~/components/DatenblattButton.svelte";
 	import HelpLabel from "~/components/HelpLabel.svelte";
 
-	export let ausweis: Verbrauchsausweis;
+	export let ausweis:
+		| Verbrauchsausweis
+		| VerbrauchsausweisGewerbe
+		| Bedarfsausweis;
 
 	import ImageGrid from "../ImageGrid.svelte";
 
@@ -12,35 +17,29 @@
 </script>
 
 <div class="grid grid-cols-2 p-4 gap-4">
-			<div class="rounded-lg border-4 p-4 bg-white">
+	<div class="rounded-lg border-4 p-4 bg-white">
-				<div class="GRB4">
+		<div class="GRB4">
-					<div class="form-group col-md-12 nopad">
+			<div class="form-group col-md-12 nopad">
-						<HelpLabel
+				<HelpLabel title="Gebäudebild Bildupload :">
-							title="Gebäudebild Bildupload :"
+					Wenn vorhanden können Sie ein Gebäudefoto (Außenansicht)
-						>
+					hochladen.
-							Wenn vorhanden können Sie ein
-							Gebäudefoto (Außenansicht)
-							hochladen.
-						</HelpLabel>
-						<hr class="trenner_form_100" />
-					</div>
-
-					<ImageGrid max={1} bind:images></ImageGrid>
-				</div>
-			</div>
-
-			<div class="rounded-lg border-4 p-4 bg-white">
-				<HelpLabel
-					title="Ansichtsausweis & Datenblatt :"
-				>
-					Hier gehts zu Ihrem Ansichtsausweis
-					und Datenblatt als PDF.
 				</HelpLabel>
 				<hr class="trenner_form_100" />
-
-				<div class="flex flex-row gap-4">
-					<AnsichtsausweisButton ausweis={ausweis}></AnsichtsausweisButton>
-					<DatenblattButton></DatenblattButton>
-				</div>
 			</div>
-</div>
+
+			<ImageGrid max={1} bind:images />
+		</div>
+	</div>
+
+	<div class="rounded-lg border-4 p-4 bg-white">
+		<HelpLabel title="Ansichtsausweis & Datenblatt :">
+			Hier gehts zu Ihrem Ansichtsausweis und Datenblatt als PDF.
+		</HelpLabel>
+		<hr class="trenner_form_100" />
+
+		<div class="flex flex-row gap-4">
+			<AnsichtsausweisButton {ausweis} />
+			<DatenblattButton {ausweis} />
+		</div>
+	</div>
+</div>

src/components/Ausweis/Verbrauch.svelte

@@ -4,6 +4,8 @@
 	import Label from "../Label.svelte";
 	import fuelList from "./fuelList";
 	import { Verbrauchsausweis } from "src/lib/Ausweis/Verbrauchsausweis";
+	import { VerbrauchsausweisGewerbe } from "src/lib/Ausweis/VerbrauchsausweisGewerbe";
+	import { Bedarfsausweis } from "src/lib/Ausweis/Bedarfsausweis";
 
 	let availableYears = [
 		2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019,
@@ -23,12 +25,13 @@
 		"Dezember",
 	];
 
-	export let ausweis: Verbrauchsausweis;
+	export let ausweis: Verbrauchsausweis |VerbrauchsausweisGewerbe | Bedarfsausweis;
 
 	const fuelMap: Record<string, string[]> = {};
 	for (const fuel of fuelList) {
-		fuelMap[fuel.energietraeger] = fuelMap[fuel.energietraeger] || [];
+		// fuelMap[fuel.energietraeger] = ...
-		fuelMap[fuel.energietraeger].push(fuel.einheit);
+		fuelMap[fuel[0]] = fuelMap[fuel[0]] || [];
+		fuelMap[fuel[0]].push(fuel[1]);
 	}
 
 	let month: string = "01";

src/components/Ausweis/fuelList.ts

@@ -1,290 +1,49 @@
-export default [
+
-	{
+/**
-		energietraeger: "Heizöl EL",
+ * [energietraeger, einheit, umrechnungsfaktor, primärenergiefaktor, coe]
-		einheit: "l",
+ */
-		umrechnungsfaktor: 10.0,
+const brennstoffe: [
-		primärenergiefaktor: 1.1,
+	string,
-		heizwertfaktor: 1.06,
+	string,
-		coe: 0.310,
+	number,
-	},
+	number,
-	{
+	number
-		energietraeger: "Erdgas H",
+][] = [
-		einheit: "m³",
+	["Heizöl EL", "l", 10.0, 1.1, 0.31],
-		umrechnungsfaktor: 10.0,
+	["Erdgas H", "m³", 10.0, 1.1, 0.24],
-		primärenergiefaktor: 1.1,
+	["Holz-Pellets", "kg", 5.0, 0.2, 0.02],
-		heizwertfaktor: 1.11,
+	["Brennholz", "kg", 4.1, 0.2, 0.02],
-		coe: 0.240,
+	["Flüssiggas", "kg", 13.0, 1.1, 0.27],
-	},
+	["Braunkohle", "kg", 5.5, 1.2, 0.43],
-	{
+	["Holzhackschnitzel", "SRm", 650.0, 0.2, 0.02],
-		energietraeger: "Holz-Pellets",
+	["Strommix", "kWh", 1.0, 2.4, 0.56],
-		einheit: "kg",
+	["Fernwärme KWK FB", "kWh", 1.0, 0.7, 0.3],
-		umrechnungsfaktor: 5.0,
+	["Nahwärme KWK FB", "kWh", 1.0, 0.7, 0.3],
-		primärenergiefaktor: 0.2,
+	["Heizöl EL", "kWh", 1.0, 1.1, 0.31],
-		heizwertfaktor: 1.08,
+	["Erdgas H", "kWh", 1.0, 1.1, 0.24],
-		coe: 0.020,
+	["Holz-Pellets", "kWh", 1.0, 0.2, 0.02],
-	},
+	["Brennholz", "kWh", 1.0, 0.2, 0.02],
-	{
+	["Flüssiggas", "kWh", 1.0, 1.1, 0.27],
-		energietraeger: "Brennholz",
+	["Braunkohle", "kWh", 1.0, 1.2, 0.43],
-		einheit: "kg",
+	["Holzhackschnitzel", "kWh", 1.0, 0.2, 0.02],
-		umrechnungsfaktor: 4.1,
+	["Flüssiggas", "l", 7.3, 1.1, 0.27],
-		primärenergiefaktor: 0.2,
+	["Brennholz", "m³", 2000.0, 0.2, 0.02],
-		heizwertfaktor: 1.08,
+	["Flüssiggas", "m³", 26.0, 1.1, 0.27],
-		coe: 0.020,
+	["Erdgas L", "kWh", 1.0, 1.1, 0.24],
-	},
+	["Brennholz", "SRm", 800.0, 0.2, 0.02],
-	{
+	["Koks", "kg", 8.3, 1.1, 0.4],
-		energietraeger: "Flüssiggas",
+	["Erdgas L", "m³", 9.0, 1.1, 0.24],
-		einheit: "kg",
+	["Koks", "kWh", 1.0, 1.1, 0.4],
-		umrechnungsfaktor: 13.0,
+	["Holzhackschnitzel", "kg", 3.8, 0.2, 0.02],
-		primärenergiefaktor: 1.1,
+	["Nahwärme HKW EB", "kWh", 1.0, 0.1, 0.06],
-		heizwertfaktor: 1.09,
+	["Nahwärme HKW FB", "kWh", 1.0, 1.3, 0.4],
-		coe: 0.270,
+	["Nahwärme KWK EB", "kWh", 1.0, 0.0, 0.04],
-	},
+	["Fernwärme KWK EB", "kWh", 1.0, 0.0, 0.04],
-	{
+	["Fernwärme HKW FB", "kWh", 1.0, 1.3, 0.4],
-		energietraeger: "Braunkohle",
+	["Fernwärme HKW EB", "kWh", 1.0, 0.1, 0.06],
-		einheit: "kg",
+	["Erdgas", "kWh", 1.0, 1.1, 0.24],
-		umrechnungsfaktor: 5.5,
+	["Heizöl", "kWh", 1.0, 1.1, 0.31],
-		primärenergiefaktor: 1.2,
+	["Heizöl", "l", 10.0, 1.1, 0.31],
-		heizwertfaktor: 1.07,
+	["Erdgas", "m³", 9.0, 1.1, 0.24],
-		coe: 0.430,
+]
-	},
+export default brennstoffe;
-	{
-		energietraeger: "Holzhackschnitzel",
-		einheit: "SRm",
-		umrechnungsfaktor: 650.0,
-		primärenergiefaktor: 0.2,
-		heizwertfaktor: 1.08,
-		coe: 0.020,
-	},
-	{
-		energietraeger: "Strommix",
-		einheit: "kWh",
-		umrechnungsfaktor: 1.0,
-		primärenergiefaktor: 2.4,
-		heizwertfaktor: 1.00,
-		coe: 0.560,
-	},
-	{
-		energietraeger: "Fernwärme KWK FB",
-		einheit: "kWh",
-		umrechnungsfaktor: 1.0,
-		primärenergiefaktor: 0.7,
-		heizwertfaktor: 1.00,
-		coe: 0.300,
-	},
-	{
-		energietraeger: "Nahwärme KWK FB",
-		einheit: "kWh",
-		umrechnungsfaktor: 1.0,
-		primärenergiefaktor: 0.7,
-		heizwertfaktor: 1.00,
-		coe: 0.300,
-	},
-	{
-		energietraeger: "Heizöl EL",
-		einheit: "kWh",
-		umrechnungsfaktor: 1.0,
-		primärenergiefaktor: 1.1,
-		heizwertfaktor: 1.06,
-		coe: 0.310,
-	},
-	{
-		energietraeger: "Erdgas H",
-		einheit: "kWh",
-		umrechnungsfaktor: 1.0,
-		primärenergiefaktor: 1.1,
-		heizwertfaktor: 1.11,
-		coe: 0.240,
-	},
-	{
-		energietraeger: "Holz-Pellets",
-		einheit: "kWh",
-		umrechnungsfaktor: 1.0,
-		primärenergiefaktor: 0.2,
-		heizwertfaktor: 1.08,
-		coe: 0.020,
-	},
-	{
-		energietraeger: "Brennholz",
-		einheit: "kWh",
-		umrechnungsfaktor: 1.0,
-		primärenergiefaktor: 0.2,
-		heizwertfaktor: 1.08,
-		coe: 0.020,
-	},
-	{
-		energietraeger: "Flüssiggas",
-		einheit: "kWh",
-		umrechnungsfaktor: 1.0,
-		primärenergiefaktor: 1.1,
-		heizwertfaktor: 1.09,
-		coe: 0.270,
-	},
-	{
-		energietraeger: "Braunkohle",
-		einheit: "kWh",
-		umrechnungsfaktor: 1.0,
-		primärenergiefaktor: 1.2,
-		heizwertfaktor: 1.07,
-		coe: 0.430,
-	},
-	{
-		energietraeger: "Holzhackschnitzel",
-		einheit: "kWh",
-		umrechnungsfaktor: 1.0,
-		primärenergiefaktor: 0.2,
-		heizwertfaktor: 1.08,
-		coe: 0.020,
-	},
-	{
-		energietraeger: "Flüssiggas",
-		einheit: "l",
-		umrechnungsfaktor: 7.3,
-		primärenergiefaktor: 1.1,
-		heizwertfaktor: 1.09,
-		coe: 0.270,
-	},
-	{
-		energietraeger: "Brennholz",
-		einheit: "m³",
-		umrechnungsfaktor: 2000.0,
-		primärenergiefaktor: 0.2,
-		heizwertfaktor: 1.08,
-		coe: 0.020,
-	},
-	{
-		energietraeger: "Flüssiggas",
-		einheit: "m³",
-		umrechnungsfaktor: 26.0,
-		primärenergiefaktor: 1.1,
-		heizwertfaktor: 1.09,
-		coe: 0.270,
-	},
-	{
-		energietraeger: "Erdgas L",
-		einheit: "kWh",
-		umrechnungsfaktor: 1.0,
-		primärenergiefaktor: 1.1,
-		heizwertfaktor: 1.11,
-		coe: 0.240,
-	},
-	{
-		energietraeger: "Brennholz",
-		einheit: "SRm",
-		umrechnungsfaktor: 800.0,
-		primärenergiefaktor: 0.2,
-		heizwertfaktor: 1.08,
-		coe: 0.020,
-	},
-	{
-		energietraeger: "Koks",
-		einheit: "kg",
-		umrechnungsfaktor: 8.3,
-		primärenergiefaktor: 1.1,
-		heizwertfaktor: 1.02,
-		coe: 0.400,
-	},
-	{
-		energietraeger: "Erdgas L",
-		einheit: "m³",
-		umrechnungsfaktor: 9.0,
-		primärenergiefaktor: 1.1,
-		heizwertfaktor: 1.11,
-		coe: 0.240,
-	},
-	{
-		energietraeger: "Koks",
-		einheit: "kWh",
-		umrechnungsfaktor: 1.0,
-		primärenergiefaktor: 1.1,
-		heizwertfaktor: 1.02,
-		coe: 0.400,
-	},
-	{
-		energietraeger: "Holzhackschnitzel",
-		einheit: "kg",
-		umrechnungsfaktor: 3.8,
-		primärenergiefaktor: 0.2,
-		heizwertfaktor: 1.08,
-		coe: 0.020,
-	},
-	{
-		energietraeger: "Nahwärme HKW EB",
-		einheit: "kWh",
-		umrechnungsfaktor: 1.0,
-		primärenergiefaktor: 0.1,
-		heizwertfaktor: 1.00,
-		coe: 0.060,
-	},
-	{
-		energietraeger: "Nahwärme HKW FB",
-		einheit: "kWh",
-		umrechnungsfaktor: 1.0,
-		primärenergiefaktor: 1.3,
-		heizwertfaktor: 1.00,
-		coe: 0.400,
-	},
-	{
-		energietraeger: "Nahwärme KWK EB",
-		einheit: "kWh",
-		umrechnungsfaktor: 1.0,
-		primärenergiefaktor: 0.0,
-		heizwertfaktor: 1.00,
-		coe: 0.040,
-	},
-	{
-		energietraeger: "Fernwärme KWK EB",
-		einheit: "kWh",
-		umrechnungsfaktor: 1.0,
-		primärenergiefaktor: 0.0,
-		heizwertfaktor: 1.00,
-		coe: 0.040,
-	},
-	{
-		energietraeger: "Fernwärme HKW FB",
-		einheit: "kWh",
-		umrechnungsfaktor: 1.0,
-		primärenergiefaktor: 1.3,
-		heizwertfaktor: 1.00,
-		coe: 0.400,
-	},
-	{
-		energietraeger: "Fernwärme HKW EB",
-		einheit: "kWh",
-		umrechnungsfaktor: 1.0,
-		primärenergiefaktor: 0.1,
-		heizwertfaktor: 1.00,
-		coe: 0.060,
-	},
-	{
-		energietraeger: "Erdgas",
-		einheit: "kWh",
-		umrechnungsfaktor: 1.0,
-		primärenergiefaktor: 1.1,
-		heizwertfaktor: 1.11,
-		coe: 0.240,
-	},
-	{
-		energietraeger: "Heizöl",
-		einheit: "kWh",
-		umrechnungsfaktor: 1.0,
-		primärenergiefaktor: 1.1,
-		heizwertfaktor: 1.06,
-		coe: 0.310,
-	},
-	{
-		energietraeger: "Heizöl",
-		einheit: "l",
-		umrechnungsfaktor: 10.0,
-		primärenergiefaktor: 1.1,
-		heizwertfaktor: 1.06,
-		coe: 0.310,
-	},
-	{
-		energietraeger: "Erdgas",
-		einheit: "m³",
-		umrechnungsfaktor: 9.0,
-		primärenergiefaktor: 1.1,
-		heizwertfaktor: 1.11,
-		coe: 0.240,
-	},
-];

src/components/AusweisCard.svelte

@@ -4,6 +4,7 @@
 	import Katex from "./Katex.svelte";
 	import moment from "moment";
 	import Cross from "./Icons/Cross.svelte";
+	import { Dachgeschoss } from "src/lib/Ausweis/types";
 
 	interface Service {
 		name: string;
@@ -134,7 +135,7 @@
 					</tr>
 					<tr>
 						<td>DB</td><td>:</td>
-						<td>{ausweis.dachgeschoss}</td>
+						<td>{ausweis.dachgeschoss == Dachgeschoss.BEHEIZT ? "Ja" : "Nein"}</td>
 					</tr>
 				</table>
 			</div>

src/components/Bedarfsausweis/BedarfsausweisContent.svelte

@@ -11,12 +11,13 @@
 	import BilderZusatzsysteme from "../Ausweis/BilderZusatzsysteme.svelte";
 	import moment from "moment";
 	import { BitChecker } from "src/lib/BitChecker";
+	import { Dachgeschoss } from "src/lib/Ausweis/types";
 
 	let ausweis = new Bedarfsausweis();
 
-	let insulationWidths = [0, 0.02, 0.05, 0.08, 0.12, 0.16, 0.2, 0.3, 0.4];
+	let daemmungsBreiten = [0, 0.02, 0.05, 0.08, 0.12, 0.16, 0.2, 0.3, 0.4];
 
-	let windowTypes = {
+	let fensterArten = {
 		Einfachverglasung: 5,
 		"Holzfenster Doppelverglasung": 2.7,
 		"Kunststofffenster Doppelverglasung": 3,
@@ -50,7 +51,7 @@
 		ausweis.objekt_ort = "Hamburg";
 		ausweis.wohnflaeche = 152;
 		ausweis.keller_beheizt = true;
-		ausweis.dachgeschoss = "Unbeheizt";
+		ausweis.dachgeschoss = Dachgeschoss.UNBEHEIZT;
 		ausweis.energieverbrauch_zeitraum = moment("04.01.2018");
 		ausweis.energietraeger_1 = "Erdgas";
 		ausweis.energietraeger_einheit_heizquelle_1 = "kWh";
@@ -102,7 +103,7 @@
 		ausweis.heizung_speicherung = "elzs7055bis1994";
 		ausweis.energietraeger_2 = "Braunkohle";
 		ausweis.anteil_zusatzheizung = 0.7;
-		ausweis = ausweis
+		ausweis = ausweis;
 	}
 </script>
 
@@ -140,7 +141,6 @@
 			und Gebäudeteil</Label
 		>
 		<div class="GRB">
-			<!-- Strasse -->
 			<div>
 				<HelpLabel title="Straße, Hausnummer *"
 					>Bitte geben Sie hier die Straße und Hausnummer des Gebäudes
@@ -156,13 +156,13 @@
 					/>
 				</div>
 			</div>
-			<!-- PLZ -->
+
 			<ZipSearch
 				bind:zip={ausweis.objekt_plz}
 				bind:city={ausweis.objekt_ort}
 				name="zip"
 			/>
-			<!-- Objekt Ort -->
+
 			<div>
 				<HelpLabel title="Ort *"
 					>Ort des Gebäudes wird automatisch ermittelt.</HelpLabel
@@ -176,7 +176,6 @@
 				</div>
 			</div>
 
-			<!-- Wohnfläche -->
 			<div>
 				<HelpLabel title="Wohnfläche m² *"
 					>Bitte geben Sie hier die beheizte Wohnfläche in m² ein.
@@ -193,7 +192,7 @@
 					/>
 				</div>
 			</div>
-			<!-- Gebäudetyp -->
+
 			<div>
 				<HelpLabel title="Gebäudetyp *"
 					>Bitte wählen Sie hier den Gebäudetyp aus.
@@ -234,7 +233,7 @@
 					</select>
 				</div>
 			</div>
-			<!-- Gebäudeteil -->
+
 			<div>
 				<HelpLabel title="Gebäudeteil *"
 					>Bitte geben Sie hier den Gebäudeteil ein. In den meisten
@@ -275,7 +274,6 @@
 				>
 
 				<div class="grid grid-cols-4 gap-4">
-					<!-- Anzahl Vollgeschosse -->
 					<div>
 						<HelpLabel title="Anzahl Vollgeschosse *"
 							>Bitte geben Sie hier die Anzahl der Vollgeschosse
@@ -289,7 +287,7 @@
 							required
 						/>
 					</div>
-					<!-- Geschosshöhe -->
+
 					<div>
 						<HelpLabel title="Geschosshöhe *"
 							>Bitte geben Sie hier die Geschosshöhe (lichte
@@ -309,7 +307,7 @@
 							{/each}
 						</select>
 					</div>
-					<!-- Warmwasser Antel -->
+
 					<div>
 						<HelpLabel title="Gaubenanzahl"
 							>Wenn Ihr Gebäude Dachgauben besitzt geben Sie hier
@@ -321,7 +319,7 @@
 							type="number"
 						/>
 					</div>
-					<!-- Warmwasser Antel -->
+
 					<div>
 						<HelpLabel title="Breite aller Gauben in m"
 							>Bitte geben Sie hier die Gesamtbreite aller Gauben
@@ -449,12 +447,12 @@
 				</div>
 
 				<div class="grid grid-cols-2 gap-4">
-					<!-- Verbrauch 1 Monat -->
 					<div>
 						<Label>Dachfläche in m²</Label>
 						<input
 							name="dachflaeche"
 							bind:value={ausweis.dachflaeche}
+							readonly={!ausweis.tabellenwerte_aendern}
 							type="number"
 						/>
 					</div>
@@ -463,18 +461,19 @@
 						<input
 							name="dach_u_wert"
 							bind:value={ausweis.dach_u_wert}
+							readonly={!ausweis.tabellenwerte_aendern}
 							type="number"
 						/>
 					</div>
-					<!-- Verbrauch1-row-close -->
 				</div>
-				<!-- Verbrauch1-close -->
+
 				<div class="grid grid-cols-2 gap-4">
 					<div>
 						<Label>Geschoßdecke in m²</Label>
 						<input
 							name="deckenflaeche"
 							bind:value={ausweis.deckenflaeche}
+							readonly={!ausweis.tabellenwerte_aendern}
 							type="number"
 						/>
 					</div>
@@ -483,18 +482,19 @@
 						<input
 							name="decke_u_wert"
 							bind:value={ausweis.decke_u_wert}
+							readonly={!ausweis.tabellenwerte_aendern}
 							type="number"
 						/>
 					</div>
-					<!-- Verbrauch2-row-close -->
 				</div>
-				<!-- Verbrauch2-container-close -->
+
 				<div class="grid grid-cols-2 gap-4">
 					<div>
 						<Label>Außenwand in m²</Label>
 						<input
 							name="aussenwand_flaeche"
 							bind:value={ausweis.aussenwand_flaeche}
+							readonly={!ausweis.tabellenwerte_aendern}
 							type="number"
 						/>
 					</div>
@@ -503,6 +503,7 @@
 						<input
 							name="aussenwand_u_wert"
 							bind:value={ausweis.aussenwand_u_wert}
+							readonly={!ausweis.tabellenwerte_aendern}
 							type="number"
 						/>
 					</div>
@@ -514,6 +515,7 @@
 						<input
 							name="fussboden_flaeche"
 							bind:value={ausweis.fussboden_flaeche}
+							readonly={!ausweis.tabellenwerte_aendern}
 							type="number"
 						/>
 					</div>
@@ -522,6 +524,7 @@
 						<input
 							name="fussboden_u_wert"
 							bind:value={ausweis.fussboden_u_wert}
+							readonly={!ausweis.tabellenwerte_aendern}
 							type="number"
 						/>
 					</div>
@@ -536,6 +539,7 @@
 						name="volumen"
 						type="number"
 						bind:value={ausweis.volumen}
+						readonly={!ausweis.tabellenwerte_aendern}
 					/>
 				</div>
 
@@ -568,7 +572,6 @@
 			und Boden</Label
 		>
 		<div class="box grid grid-cols-4 gap-4">
-			<!-- Fensterfläche -->
 			<div>
 				<HelpLabel title="Fensterfläche 1 in m² *"
 					>Bitte geben Sie hier die Fläche der Fenster ein.</HelpLabel
@@ -581,19 +584,19 @@
 					placeholder="0"
 				/>
 			</div>
-			<!-- Fensterart -->
+
 			<div>
 				<HelpLabel title="Art der Fenster *"
 					>Bitte geben Sie hier die Art der Fenster ein.</HelpLabel
 				>
 				<select name="fenster_art_1" bind:value={ausweis.fenster_art_1}>
 					<option>bitte auswählen</option>
-					{#each Object.entries(windowTypes) as [name, value]}
+					{#each Object.entries(fensterArten) as [name, value]}
 						<option {value}>{name}</option>
 					{/each}
 				</select>
 			</div>
-			<!-- Fensterfläche -->
+
 			<div>
 				<HelpLabel title="Fensterfläche 2 in m² *"
 					>Wenn vorhanden geben Sie hier die Fläche der Fenster ein
@@ -605,7 +608,7 @@
 					bind:value={ausweis.fenster_flaeche_2}
 				/>
 			</div>
-			<!-- Fensterart -->
+
 			<div>
 				<HelpLabel title="Art der Fenster *"
 					>Bitte geben Sie hier die Art der Fenster ein.</HelpLabel
@@ -616,12 +619,12 @@
 					required
 				>
 					<option>bitte auswählen</option>
-					{#each Object.entries(windowTypes) as [name, value]}
+					{#each Object.entries(fensterArten) as [name, value]}
 						<option {value}>{name}</option>
 					{/each}
 				</select>
 			</div>
-			<!-- Fensterfläche -->
+
 			<div>
 				<HelpLabel title="Dachfenster in m² *"
 					>Bitte geben Sie hier die Fläche der Dachfenster ein.</HelpLabel
@@ -632,7 +635,7 @@
 					bind:value={ausweis.dachfenster_flaeche}
 				/>
 			</div>
-			<!-- Fensterart -->
+
 			<div>
 				<HelpLabel title="Art der Dachfenster *"
 					>Bitte geben Sie hier die Art der Fenster ein.</HelpLabel
@@ -642,12 +645,12 @@
 					bind:value={ausweis.dachfenster_art}
 				>
 					<option>bitte auswählen</option>
-					{#each Object.entries(windowTypes) as [name, value]}
+					{#each Object.entries(fensterArten) as [name, value]}
 						<option {value}>{name}</option>
 					{/each}
 				</select>
 			</div>
-			<!-- Fensterfläche -->
+
 			<div>
 				<HelpLabel title="Haustür in m² *"
 					>Bitte geben Sie hier die Fläche der Haustür ein.</HelpLabel
@@ -658,7 +661,7 @@
 					bind:value={ausweis.haustuer_flaeche}
 				/>
 			</div>
-			<!-- Fensterart -->
+
 			<div>
 				<HelpLabel title="Art der Tür *"
 					>Bitte geben Sie hier die Art der Haustür ein.</HelpLabel
@@ -690,7 +693,6 @@
 
 		<hr />
 		<div class="box grid grid-cols-4 gap-4">
-			<!-- Bauart Geschossdecke -->
 			<div>
 				<HelpLabel title="Bauart Dachfläche *"
 					>Bitte geben Sie hier die Bauart der Dachfläche ein.</HelpLabel
@@ -709,7 +711,7 @@
 					>
 				</select>
 			</div>
-			<!-- nachträgliche Dämmung -->
+
 			<div>
 				<HelpLabel title="nachträgliche Dämmung"
 					>Bitte geben Sie hier die nachträgliche Dämmung ein.</HelpLabel
@@ -720,12 +722,12 @@
 					required
 				>
 					<option>bitte auswählen</option>
-					{#each insulationWidths as width}
+					{#each daemmungsBreiten as breite}
-						<option value={width}>{width * 100} cm</option>
+						<option value={breite}>{breite * 100} cm</option>
 					{/each}
 				</select>
 			</div>
-			<!-- Bauart Geschossdecke -->
+
 			<div>
 				<HelpLabel title="Bauart Geschossdecke *"
 					>Bitte geben Sie hier die Bauart der Geschossdecke ein.</HelpLabel
@@ -744,7 +746,7 @@
 					>
 				</select>
 			</div>
-			<!-- nachträgliche Dämmung -->
+
 			<div>
 				<HelpLabel title="nachträgliche Dämmung"
 					>Bitte geben Sie hier die nachträgliche Dämmung ein.</HelpLabel
@@ -755,12 +757,12 @@
 					required
 				>
 					<option>bitte auswählen</option>
-					{#each insulationWidths as width}
+					{#each daemmungsBreiten as breite}
-						<option value={width}>{width * 100} cm</option>
+						<option value={breite}>{breite * 100} cm</option>
 					{/each}
 				</select>
 			</div>
-			<!-- Bauart Geschossdecke -->
+
 			<div>
 				<HelpLabel title="Bauart Außenwand *"
 					>Bitte geben Sie hier die Bauart der Außenwand ein.</HelpLabel
@@ -779,7 +781,7 @@
 					>
 				</select>
 			</div>
-			<!-- nachträgliche Dämmung -->
+
 			<div>
 				<HelpLabel title="nachträgliche Dämmung"
 					>Bitte geben Sie hier die nachträgliche Dämmung ein.</HelpLabel
@@ -790,12 +792,12 @@
 					required
 				>
 					<option>bitte auswählen</option>
-					{#each insulationWidths as width}
+					{#each daemmungsBreiten as breite}
-						<option value={width}>{width * 100} cm</option>
+						<option value={breite}>{breite * 100} cm</option>
 					{/each}
 				</select>
 			</div>
-			<!-- Bauart Geschossdecke -->
+
 			<div>
 				<HelpLabel title="Bauart Fußboden *"
 					>Bitte geben Sie hier die Bauart des Fußbodens ein.</HelpLabel
@@ -814,7 +816,7 @@
 					>
 				</select>
 			</div>
-			<!-- nachträgliche Dämmung -->
+
 			<div>
 				<HelpLabel title="nachträgliche Dämmung"
 					>Bitte geben Sie hier die nachträgliche Dämmung ein.</HelpLabel
@@ -825,8 +827,8 @@
 					required
 				>
 					<option>bitte auswählen</option>
-					{#each insulationWidths as width}
+					{#each daemmungsBreiten as breite}
-						<option value={width}>{width * 100} cm</option>
+						<option value={breite}>{breite * 100} cm</option>
 					{/each}
 				</select>
 			</div>
@@ -836,7 +838,6 @@
 		<Label>E - Angabe zu Keller, Dachgeschoss, Lüftung und Kühlung</Label>
 		<div class="box">
 			<div class="grid grid-cols-4 gap-4 w-full">
-				<!-- Keller -->
 				<div>
 					<label class="control-label" for="keller_beheizt"
 						>Keller *
@@ -854,7 +855,7 @@
 						</select>
 					</div>
 				</div>
-				<!-- Dachgeschoss -->
+
 				<div>
 					<label class="control-label" for="dachgeschoss"
 						>Dachgeschoss *
@@ -866,13 +867,13 @@
 							required
 						>
 							<option> Bitte auswählen</option>
-							<option value={false}> nicht vorhanden</option>
+							<option value={Dachgeschoss.NICHT_VORHANDEN}> nicht vorhanden</option>
-							<option value={false}> unbeheizt</option>
+							<option value={Dachgeschoss.UNBEHEIZT}> unbeheizt</option>
-							<option value={true}> beheizt</option>
+							<option value={Dachgeschoss.BEHEIZT}> beheizt</option>
 						</select>
 					</div>
 				</div>
-				<!-- Lüftung -->
+
 				<div>
 					<HelpLabel title="Lüftung erfolgt durch:"
 						>Bitte geben Sie hier ein ob über die Fenster natürlich
@@ -904,7 +905,7 @@
 						</select>
 					</div>
 				</div>
-				<!-- Lüftung -->
+
 				<div>
 					<HelpLabel title="Anlage zur Kühlung"
 						>Bitte geben Sie an ob das Gebäude im Sommer zusätzlich
@@ -924,7 +925,6 @@
 				</div>
 			</div>
 
-			<!-- Alternative Energieversorgungssyteme -->
 			<div>
 				<HelpLabel
 					title="Alternative Energieversorgungssyteme werden genutzt für"
@@ -972,7 +972,6 @@
 		<hr />
 		<Label>F - Eingabe der Heizungsanlage</Label>
 		<div class="box grid grid-cols-4 gap-4">
-			<!-- Brennstoff -->
 			<div>
 				<HelpLabel title="Energieträger *"
 					>Bitte geben Sie hier den Energieträger der Heizung ein.</HelpLabel
@@ -985,7 +984,7 @@
 					<option>Bitte auswählen</option>
 				</select>
 			</div>
-			<!-- Verteilung Warmwasser -->
+
 			<div>
 				<HelpLabel title="Verteilung Warmwasser *"
 					>Bitte geben Sie hier die Warmwasserverteilung ein.</HelpLabel
@@ -1029,7 +1028,7 @@
 					>
 				</select>
 			</div>
-			<!-- Speicherung Warmwasser -->
+
 			<div>
 				<HelpLabel title="Speicherung Warmwasser"
 					>Bitte geben Sie hier wenn vorhanden die Art des
@@ -1050,7 +1049,7 @@
 					<option value="elks">Elektro-Kleinspeicher</option>
 				</select>
 			</div>
-			<!-- Erzeugung Warmwasser -->
+
 			<div>
 				<HelpLabel title="Erzeugung Warmwasser *"
 					>Bitte geben Sie hier die Wärmeerzeugung für Warmwasser ein.</HelpLabel
@@ -1066,7 +1065,7 @@
 					{/each}
 				</select>
 			</div>
-			<!-- Übergabe Heizung -->
+
 			<div>
 				<HelpLabel title="Übergabe Heizung *"
 					>Bitte geben Sie hier ein ob es sich um Zentralheizung
@@ -1081,7 +1080,7 @@
 					<option value={false}>Einzelfeuerstätte</option>
 				</select>
 			</div>
-			<!-- Verteilung Heizung -->
+
 			<div>
 				<HelpLabel title="Verteilung Heizung *"
 					>Bitte geben Sie hier die Verteilung der Heizung ein.</HelpLabel
@@ -1129,7 +1128,7 @@
 					<option value="dezensys">dezentrales System</option>
 				</select>
 			</div>
-			<!-- Speicherung Heizung -->
+
 			<div>
 				<HelpLabel title="Speicherung Heizung"
 					>Bitte geben Sie hier - wenn vorhanden - den Speicher der
@@ -1160,7 +1159,7 @@
 					>
 				</select>
 			</div>
-			<!-- Fensterart -->
+
 			<div>
 				<HelpLabel title="Wärmeerzeugung Heizung *"
 					>Bitte geben Sie hier den Wärmerzeuger der Heizung ein.</HelpLabel
@@ -1249,7 +1248,6 @@
 
 		<hr />
 		<div class="box grid grid-cols-4 gap-4">
-			<!-- Energieträger Zusatzheizung -->
 			<div>
 				<HelpLabel title="Energieträger Zusatzheizung"
 					>Bitte geben Sie hier - wenn vorhanden - die Zusatzheizung
@@ -1263,7 +1261,7 @@
 					<option>Bitte auswählen</option>
 				</select>
 			</div>
-			<!-- Energieträger Zusatzheizung -->
+
 			<div>
 				<HelpLabel title="Anteil am Gesamtheizbedarf des Hauses"
 					>Bitte geben Sie hier den prozentualen Anteil der

src/components/DatenblattButton.svelte

@@ -1,4 +1,18 @@
-<a class="border-2 rounded-lg w-[30%] bg-white text-center hover:shadow-md no-underline p-6" href="/pdf/datenblatt">
+<script lang="ts">
+	import { Bedarfsausweis } from "src/lib/Ausweis/Bedarfsausweis";
+	import { Verbrauchsausweis } from "src/lib/Ausweis/Verbrauchsausweis";
+	import { VerbrauchsausweisGewerbe } from "src/lib/Ausweis/VerbrauchsausweisGewerbe";
+
+	export let ausweis: Verbrauchsausweis | Bedarfsausweis | VerbrauchsausweisGewerbe;
+
+	function viewDatenblatt() {
+		const base64 = btoa(JSON.stringify(ausweis));
+
+		window.open(`/pdf/datenblatt?base64=${base64}`, "_blank");
+	}
+</script>
+
+<button class="border-2 rounded-lg w-[30%] bg-white text-center hover:shadow-md no-underline p-6" on:click={viewDatenblatt}>
 	<img src="/images/datenblatt.webp" alt="Datenblatt" />
 	<span class="text-black font-medium text-lg">Datenblatt</span>
-</a>
+</button>

src/components/DatenblattFooter.svelte

@@ -0,0 +1,9 @@
+<script>
+
+	import moment from "moment";
+
+</script>
+<div class="flex flex-row items-end justify-between px-12 py-8 border-t-8 border-t-primary">
+	<h2>Copyright © {moment().format("YYYY")} • IB Cornelsen</h2>
+	<h2>info@online-energieausweis.org</h2>
+</div>

src/components/DatenblattHeader.svelte

@@ -0,0 +1,8 @@
+<div class="flex flex-row items-end justify-between px-12 py-8 border-b-8 border-b-primary">
+	<img src="/images/header/logo-big.png" width="250px" height="auto" alt="">
+	<div class="flex flex-col">
+		<p>fon 040 · 209339850</p>
+		<p>fax 040 · 209339859</p>
+		<p>online-energieausweis.org</p>
+	</div>
+</div>

src/components/UploadImages.svelte

@@ -58,6 +58,13 @@
 					const dataURL = canvas.toDataURL("image/jpeg", 0.75);
 
 					images.push({ ...file, data: dataURL as string } as (File & { data: string }));
+					fetch("/api/image", {
+						method: "PUT",
+						body: JSON.stringify({
+							data: dataURL,
+							name: file.name
+						})
+					})
 					images = images;
 
 					if (i == (Math.min(files.length, max) - 1)) {

src/components/Verbrauchsausweis/VerbrauchsausweisContent.svelte

@@ -44,6 +44,8 @@
 		ausweis.objekt_plz = "21039";
 		ausweis.objekt_ort = "Hamburg";
 		ausweis.objekt_strasse = "Curslacker Deich 170";
+		ausweis.objekt_gebaeudeteil = "Gesamtgebäude"
+		ausweis.upload();
 	}
 </script>
 

src/lib/Ausweis/Ausweis.ts

@@ -1,5 +1,6 @@
 import { Moment } from "moment";
 import { BitChecker } from "../BitChecker";
+import { Dachgeschoss } from "./types";
 
 export enum AusweisType {
 	VERBRAUCHSAUSWEIS,
@@ -56,7 +57,7 @@ export interface Ausweis {
 
 	wohnflaeche: number;
 	keller_beheizt: boolean;
-	dachgeschoss: string;
+	dachgeschoss: Dachgeschoss;
 	zusaetzliche_heizquelle: boolean;
 	warmwasser_enthalten: boolean;
 	lueftungskonzept: Lueftungskonzept;
@@ -96,13 +97,13 @@ export interface Ausweis {
 	volumen: number;
 	dicht: boolean;
 	fenster_flaeche_1: number;
-	fenster_art_1: string;
+	fenster_art_1: number;
 	fenster_flaeche_2: number;
-	fenster_art_2: string;
+	fenster_art_2: number;
 	dachfenster_flaeche: number;
-	dachfenster_art: string;
+	dachfenster_art: number;
 	haustuer_flaeche: number;
-	haustuer_art: string;
+	haustuer_art: number;
 	dach_bauart: string;
 	dach_daemmung: number;
 	decke_bauart: string;

src/lib/Ausweis/Bedarfsausweis.ts

@@ -3,28 +3,10 @@ import { getHeizwertfaktorClient } from "../server/Heizwertfaktor";
 import moment from "moment";
 import { BitChecker } from "../BitChecker";
 import { getHeizungswerte } from "../Heizungswerte";
+import { Ausstellgrund, Ausweisart, Dachgeschoss, Lueftungskonzept } from "./types";
+import { Ausweis } from "./Ausweis";
 
-export enum AusweisType {
+export class Bedarfsausweis implements Ausweis {
-	VERBRAUCHSAUSWEIS,
-	VERBRAUCHSAUSWEIS_NICHT_WOHNGEBAEUDE,
-	BEDARFSAUSWEIS,
-}
-
-export type Lueftungskonzept =
-	| "Fensterlüftung"
-	| "Schachtlüftung"
-	| "Lüftungsanlage ohne Wärmerückgewinnung"
-	| "Lüftungsanlage mit Wärmerückgewinnung";
-
-export type Ausweisart = "VA" | "BA" | "VANW";
-export type Ausstellgrund =
-	| "Vermietung"
-	| "Neubau"
-	| "Verkauf"
-	| "Modernisierung"
-	| "Sonstiges";
-
-export class Bedarfsausweis {
 	public ausweisart: Ausweisart = "VA";
 	public id: number = 0;
 	public user_id: number = 0;
@@ -63,7 +45,7 @@ export class Bedarfsausweis {
 
 	public wohnflaeche: number = 0;
 	public keller_beheizt: boolean = false;
-	public dachgeschoss: string = "";
+	public dachgeschoss: Dachgeschoss = Dachgeschoss.UNBEHEIZT;
 	public zusaetzliche_heizquelle: boolean = false;
 	public warmwasser_enthalten: boolean = false;
 	public lueftungskonzept: Lueftungskonzept = "Fensterlüftung";
@@ -182,16 +164,16 @@ export class Bedarfsausweis {
 	}
 
 	public get end_energie_verbrauch(): number {
-		let Uawd = 1 / (1 / this.dach_daemmung / 0.04);
+		let dach_u_wert = 1 / (1 / this.dach_daemmung / 0.04);
-		let Uawa = 1 / (1 / this.aussenwand_daemmung / 0.04);
+		let aussenwand_u_wert = 1 / (1 / this.aussenwand_daemmung / 0.04);
-		let Uawb = 1 / (1 / this.boden_daemmung / 0.04);
+		let fussboden_u_wert = 1 / (1 / this.boden_daemmung / 0.04);
-		let Uawogd =1 / (1 / this.decke_daemmung / 0.04);
+		let decke_u_wert = 1 / (1 / this.decke_daemmung / 0.04);
 
 		if (!this.tabellenwerte_aendern) {
-			this.dach_u_wert = Math.round(Uawd);
+			this.dach_u_wert = Math.round(dach_u_wert);
-			this.decke_u_wert = Math.round(Uawogd);
+			this.decke_u_wert = Math.round(decke_u_wert);
-			this.aussenwand_u_wert = Math.round(Uawa);
+			this.aussenwand_u_wert = Math.round(aussenwand_u_wert);
-			this.fussboden_u_wert = Math.round(Uawb);
+			this.fussboden_u_wert = Math.round(fussboden_u_wert);
 		}
 
 		if (this.dachgeschoss) {
@@ -210,26 +192,26 @@ export class Bedarfsausweis {
 		}
 
 		if (this.keller_beheizt) {
-			var keller_beheiztf = 1;
+			var keller_beheizt = 1;
 		} else {
-			var keller_beheiztf = 0;
+			var keller_beheizt = 0;
 		}
-		var gaubenfl =
+		var gaubenflaeche =
 			this.breite_gauben * 2 * 0.3 + this.anzahl_gauben * 2 * 1.5;
-		var gaubenvol = this.breite_gauben * 1.5;
+		var gaubenvolumen = this.breite_gauben * 1.5;
 
-		var Fawa = 1;
+		let aussenwand_anteil = 1;
 		if (
 			this.objekt_typ === "Doppelhaushälfte" ||
 			this.objekt_typ === "Reihenendhaus"
 		) {
-			var Fawa = 0.7;
+			aussenwand_anteil = 0.7;
 		} else if (this.objekt_typ === "Reihenmittelhaus") {
-			var Fawa = 0.4;
+			aussenwand_anteil = 0.4;
 		}
 
 		// Außenwand
-		var awa1 =
+		var aussenwand_flaeche =
 			((2 * this.masse_a +
 				2 * this.masse_b +
 				2 * this.masse_d +
@@ -244,18 +226,18 @@ export class Bedarfsausweis {
 					2 * this.masse_e +
 					2 * this.masse_f) *
 					2.2 *
-					keller_beheiztf) *
+					keller_beheizt) *
-				Fawa -
+				aussenwand_anteil -
 			this.fenster_flaeche_1 -
 			this.fenster_flaeche_2 -
 			this.haustuer_flaeche +
-			gaubenfl;
+			gaubenflaeche;
 
 		if (!this.tabellenwerte_aendern) {
-			this.aussenwand_flaeche = awa1;
+			this.aussenwand_flaeche = Math.round(aussenwand_flaeche);
 		}
 
-		var awd1 =
+		var dachflaeche =
 			((this.masse_a * this.masse_b +
 				this.masse_c * this.masse_d +
 				(+this.masse_f + +this.masse_c) * this.masse_e) *
@@ -263,38 +245,38 @@ export class Bedarfsausweis {
 				this.dachfenster_flaeche) *
 			dachgeschossf2;
 		if (!this.tabellenwerte_aendern) {
-			this.dachflaeche = awd1;
+			this.dachflaeche = Math.round(dachflaeche);
 		}
-		var awogd1 =
+		var deckenflaeche =
 			(this.masse_a * this.masse_b +
 				this.masse_c * this.masse_d +
 				(+this.masse_f + +this.masse_c) * this.masse_e -
 				this.dachfenster_flaeche) *
 			IOGdeckef;
 		if (!this.tabellenwerte_aendern) {
-			this.deckenflaeche = awogd1;
+			this.deckenflaeche = Math.round(deckenflaeche);
 		}
-		var awb1 =
+		var fussboden_flaeche =
 			this.masse_a * this.masse_b +
 			this.masse_c * this.masse_d +
 			(+this.masse_f + +this.masse_c) * this.masse_e;
 		if (!this.tabellenwerte_aendern) {
-			this.fussboden_flaeche = awb1;
+			this.fussboden_flaeche = Math.round(fussboden_flaeche);
 		}
 
-		var behgv =
+		var volumen =
-			awb1 * this.geschosshoehe * this.anzahl_vollgeschosse +
+			fussboden_flaeche * this.geschosshoehe * this.anzahl_vollgeschosse +
-			awb1 * 2.2 * keller_beheiztf +
+			fussboden_flaeche * 2.2 * keller_beheizt +
-			awb1 * this.geschosshoehe * dachgeschossf +
+			fussboden_flaeche * this.geschosshoehe * dachgeschossf +
-			gaubenvol;
+			gaubenvolumen;
 		if (!this.tabellenwerte_aendern) {
-			this.volumen = behgv;
+			this.volumen = Math.round(volumen);
 		}
 
 		if (this.dicht) {
-			var Hv = 0.163 * behgv;
+			var Hv = 0.163 * volumen;
 		} else {
-			var Hv = 0.19 * behgv;
+			var Hv = 0.19 * volumen;
 		}
 
 		var AHF =
@@ -364,21 +346,21 @@ export class Bedarfsausweis {
 			}
 		}
 
-		let hilfsenergiel = 0;
+		let hilfsenergie_lueftung = 0;
-		let wgewinnel = 0;
+		let waerme_gewinnung_lueftung = 0;
 
 		if (this.lueftungskonzept == "Lüftungsanlage mit Wärmerückgewinnung") {
-			hilfsenergiel = 0;
+			hilfsenergie_lueftung = 0;
-			wgewinnel = 13.5;
+			waerme_gewinnung_lueftung = 13.5;
 		}
 		if (this.lueftungskonzept == "Lüftungsanlage ohne Wärmerückgewinnung") {
 			if (this.baujahr_gebaeude < 1996) {
-				hilfsenergiel = 4;
+				hilfsenergie_lueftung = 4;
-				wgewinnel = 3.5;
+				waerme_gewinnung_lueftung = 3.5;
 			}
 			if (this.baujahr_gebaeude > 1996) {
-				hilfsenergiel = 2.6;
+				hilfsenergie_lueftung = 2.6;
-				wgewinnel = 3.2;
+				waerme_gewinnung_lueftung = 3.2;
 			}
 		}
 
@@ -414,12 +396,12 @@ export class Bedarfsausweis {
 			this.waerme_erzeugung_heizung
 		);
 
-		var endenergieh =
+		var end_energie_heizung =
 			(Qh + heizung_zentralwv + verteilunghwv + spheizungwv) *
 				werzeugungheaz -
-			wgewinnel;
+			waerme_gewinnung_lueftung;
 
-		var endenergiew =
+		var end_energie_warmwasser =
 			(12 +
 				verteilungwwwv -
 				verteilungwwhg +
@@ -435,19 +417,19 @@ export class Bedarfsausweis {
 			warmwasser_speicherunghb +
 			werzeugungwwhb +
 			Solarsystem_WWhb +
-			hilfsenergiel;
+			hilfsenergie_lueftung;
 
-		var endenergiegesamt = endenergieh + endenergiew + hilfsenergie;
+		var endenergiegesamt = end_energie_heizung + end_energie_warmwasser + hilfsenergie;
 
 		var primheizung =
-			endenergieh *
+			end_energie_heizung *
 				(1 - this.anteil_zusatzheizung) *
 				BRSPrimärenergiefaktor +
-			endenergieh * this.anteil_zusatzheizung * BRSPrimärenergiefaktor1;
+			end_energie_heizung * this.anteil_zusatzheizung * BRSPrimärenergiefaktor1;
 
 		var primaerenergiebedarf =
 			primheizung +
-			(endenergiew - Solarsystem_WWbw) * BRSPrimärenergiefaktor +
+			(end_energie_warmwasser - Solarsystem_WWbw) * BRSPrimärenergiefaktor +
 			hilfsenergie * 1.8;
 
 		return endenergiegesamt;

src/lib/Ausweis/Verbrauchsausweis.ts

@@ -2,28 +2,12 @@ import { Moment } from "moment";
 import { getKlimafaktorenClient } from "../Klimafaktoren";
 import { getHeizwertfaktorClient } from "../server/Heizwertfaktor";
 import moment from "moment";
-import fuelList from "~/components/Ausweis/fuelList";
 import { BitChecker } from "../BitChecker";
-
+import { Ausstellgrund, Ausweisart, Dachgeschoss, Lueftungskonzept } from "./types";
-export enum AusweisType {
+import { Ausweis } from "./Ausweis";
-	VERBRAUCHSAUSWEIS,
-	VERBRAUCHSAUSWEIS_NICHT_WOHNGEBAEUDE,
-	BEDARFSAUSWEIS,
-}
-
-export type Lueftungskonzept = "Fensterlüftung" | "Schachtlüftung" | "Lüftungsanlage ohne Wärmerückgewinnung" | "Lüftungsanlage mit Wärmerückgewinnung"
-
-export type Ausweisart = "VA" | "BA" | "VANW";
-export type Ausstellgrund =
-	| "Vermietung"
-	| "Neubau"
-	| "Verkauf"
-	| "Modernisierung"
-	| "Sonstiges";
 
 
-
+export class Verbrauchsausweis implements Ausweis {
-export class Verbrauchsausweis {
 	public ausweisart: Ausweisart = "VA";
 	public id: number = 0;
 	public user_id: number = 0;
@@ -62,7 +46,7 @@ export class Verbrauchsausweis {
 
 	public wohnflaeche: number = 0;
 	public keller_beheizt: boolean = false;
-	public dachgeschoss: string = "";
+	public dachgeschoss: Dachgeschoss = Dachgeschoss.NICHT_VORHANDEN;
 	public zusaetzliche_heizquelle: boolean = false;
 	public warmwasser_enthalten: boolean = false;
 	public lueftungskonzept: Lueftungskonzept = "Fensterlüftung";
@@ -70,10 +54,10 @@ export class Verbrauchsausweis {
 	public leerstand: number = 0;
 	public images: string[] = [];
 
-	public versorgungssysteme: boolean[] = BitChecker(0);
+	public versorgungssysteme: ReturnType<typeof BitChecker> = BitChecker(0);
-	public fenster_dach: boolean[] = BitChecker(0);
+	public fenster_dach: ReturnType<typeof BitChecker> = BitChecker(0);
-	public energiequelle_2_nutzung: boolean[] = BitChecker(0);
+	public energiequelle_2_nutzung: ReturnType<typeof BitChecker> = BitChecker(0);
-	public daemmung: boolean[] = BitChecker(0);
+	public daemmung: ReturnType<typeof BitChecker> = BitChecker(0);
 	public get energetische_nutzfläche(): number {
 		return this.wohnflaeche * (this.keller_beheizt ? 1.35 : 1.2);
 	};
@@ -105,13 +89,13 @@ export class Verbrauchsausweis {
 	public volumen: number = 0;
 	public dicht: boolean = false;
 	public fenster_flaeche_1: number = 0;
-	public fenster_art_1: string = "";
+	public fenster_art_1: number = 0;
 	public fenster_flaeche_2: number = 0;
-	public fenster_art_2: string = "";
+	public fenster_art_2: number = 0;
 	public dachfenster_flaeche: number = 0;
-	public dachfenster_art: string = "";
+	public dachfenster_art: number = 0;
 	public haustuer_flaeche: number = 0;
-	public haustuer_art: string = "";
+	public haustuer_art: number = 0;
 	public dach_bauart: string = "";
 	public dach_daemmung: number = 0;
 	public decke_bauart: string = "";
@@ -149,6 +133,82 @@ export class Verbrauchsausweis {
 
 	public constructor() {}
 
+	public async upload() {
+		const body = this.getUploadBody();
+		const response = await fetch("/api/ausweis/verbrauchsausweis", {
+			method: "PUT",
+			body: JSON.stringify(body)
+		})
+
+		return response;
+	}
+
+	public async save() {
+		const body = this.getUploadBody();
+		const response = await fetch("/api/ausweis/verbrauchsausweis", {
+			method: "POST",
+			body: JSON.stringify(body)
+		})
+
+		return response;
+	}
+
+	private getUploadBody() {
+		return {
+			ausweisart: "VA",
+
+			objekt_typ: this.objekt_typ,
+			objekt_plz: this.objekt_plz,
+			objekt_ort: this.objekt_ort,
+			objekt_strasse: this.objekt_strasse,
+			objekt_gebaeudeteil: this.objekt_gebaeudeteil,
+			objekt_saniert: this.objekt_saniert,
+			baujahr_gebaeude: this.baujahr_gebaeude,
+			baujahr_anlage: this.baujahr_anlage,
+			anzahl_einheiten: this.anzahl_einheiten,
+
+			ausstellgrund: this.ausstellgrund,
+
+			energieverbrauch_zeitraum: this.energieverbrauch_zeitraum.toDate(),
+			energieverbrauch_1_heizquelle_1: this.energieverbrauch_1_heizquelle_1,
+			energieverbrauch_2_heizquelle_1: this.energieverbrauch_2_heizquelle_1,
+			energieverbrauch_3_heizquelle_1: this.energieverbrauch_3_heizquelle_1,
+			energieverbrauch_1_heizquelle_2: this.energieverbrauch_1_heizquelle_2,
+			energieverbrauch_2_heizquelle_2: this.energieverbrauch_2_heizquelle_2,
+			energieverbrauch_3_heizquelle_2: this.energieverbrauch_3_heizquelle_2,
+
+			energietraeger_einheit_heizquelle_1: this.energietraeger_einheit_heizquelle_1,
+			energietraeger_einheit_heizquelle_2: this.energietraeger_einheit_heizquelle_2,
+			energietraeger_1: this.energietraeger_1,
+			energietraeger_2: this.energietraeger_2,
+
+			anteil_warmwasser_1: this.anteil_warmwasser_1,
+			anteil_warmwasser_2: this.anteil_warmwasser_2,
+			
+			wohnflaeche: this.wohnflaeche,
+
+			keller_beheizt: this.keller_beheizt,
+			dachgeschoss: this.dachgeschoss,
+			zusaetzliche_heizquelle: this.zusaetzliche_heizquelle,
+			warmwasser_enthalten: this.warmwasser_enthalten,
+			lueftungskonzept: this.lueftungskonzept,
+			wird_gekuehlt: this.wird_gekuehlt,
+			leerstand: this.leerstand,
+			images: this.images,
+
+			versorgungssysteme: this.versorgungssysteme.value,
+			fenster_dach: this.versorgungssysteme.value,
+			energiequelle_2_nutzung: this.versorgungssysteme.value,
+			daemmung: this.versorgungssysteme.value,
+
+			anrede: this.anrede,
+			name: this.name,
+			vorname: this.vorname,
+			email: this.email,
+			telefonnummer: this.telefonnummer,
+		}
+	}
+
 	public static fromBase64(base64: string): Verbrauchsausweis | null {
 		try {
 			const text = Buffer.from(base64, "base64");

src/lib/Ausweis/VerbrauchsausweisGewerbe.ts

@@ -3,26 +3,11 @@ import { getKlimafaktorenClient } from "../Klimafaktoren";
 import { getHeizwertfaktorClient } from "../server/Heizwertfaktor";
 import moment from "moment";
 import { BitChecker } from "../BitChecker";
-
+import { Ausstellgrund, Ausweisart, Dachgeschoss, Lueftungskonzept } from "./types";
-export enum AusweisType {
+import { Ausweis } from "./Ausweis";
-	VERBRAUCHSAUSWEIS,
-	VERBRAUCHSAUSWEIS_NICHT_WOHNGEBAEUDE,
-	BEDARFSAUSWEIS,
-}
-
-export type Lueftungskonzept = "Fensterlüftung" | "Schachtlüftung" | "Lüftungsanlage ohne Wärmerückgewinnung" | "Lüftungsanlage mit Wärmerückgewinnung"
-
-export type Ausweisart = "VA" | "BA" | "VANW";
-export type Ausstellgrund =
-	| "Vermietung"
-	| "Neubau"
-	| "Verkauf"
-	| "Modernisierung"
-	| "Sonstiges";
 
 
-
+export class VerbrauchsausweisGewerbe implements Ausweis {
-export class VerbrauchsausweisGewerbe {
 	public ausweisart: Ausweisart = "VA";
 	public id: number = 0;
 	public user_id: number = 0;
@@ -61,7 +46,7 @@ export class VerbrauchsausweisGewerbe {
 
 	public wohnflaeche: number = 0;
 	public keller_beheizt: boolean = false;
-	public dachgeschoss: string = "";
+	public dachgeschoss: number = Dachgeschoss.UNBEHEIZT;
 	public zusaetzliche_heizquelle: boolean = false;
 	public warmwasser_enthalten: boolean = false;
 	public lueftungskonzept: Lueftungskonzept = "Fensterlüftung";
@@ -104,13 +89,13 @@ export class VerbrauchsausweisGewerbe {
 	public volumen: number = 0;
 	public dicht: boolean = false;
 	public fenster_flaeche_1: number = 0;
-	public fenster_art_1: string = "";
+	public fenster_art_1: number = 0;
 	public fenster_flaeche_2: number = 0;
-	public fenster_art_2: string = "";
+	public fenster_art_2: number = 0;
 	public dachfenster_flaeche: number = 0;
-	public dachfenster_art: string = "";
+	public dachfenster_art: number = 0;
 	public haustuer_flaeche: number = 0;
-	public haustuer_art: string = "";
+	public haustuer_art: number = 0;
 	public dach_bauart: string = "";
 	public dach_daemmung: number = 0;
 	public decke_bauart: string = "";

src/lib/Ausweis/types.ts

@@ -0,0 +1,25 @@
+export enum AusweisType {
+	VERBRAUCHSAUSWEIS,
+	VERBRAUCHSAUSWEIS_NICHT_WOHNGEBAEUDE,
+	BEDARFSAUSWEIS,
+}
+
+export type Lueftungskonzept =
+	| "Fensterlüftung"
+	| "Schachtlüftung"
+	| "Lüftungsanlage ohne Wärmerückgewinnung"
+	| "Lüftungsanlage mit Wärmerückgewinnung";
+
+export type Ausweisart = "VA" | "BA" | "VANW";
+export type Ausstellgrund =
+	| "Vermietung"
+	| "Neubau"
+	| "Verkauf"
+	| "Modernisierung"
+	| "Sonstiges";
+
+export enum Dachgeschoss {
+	BEHEIZT,
+	UNBEHEIZT,
+	NICHT_VORHANDEN
+}

src/lib/BitChecker.ts

@@ -1,4 +1,4 @@
-export function BitChecker(initial: number = 0, length: number = 32): boolean[] {
+export function BitChecker(initial: number = 0, length: number = 32): boolean[] & { value: number } {
 	const target: boolean[] = new Array(length).fill(false).map((x, i) => {
 		return (initial & (1 << i)) !== 0 ? true : false
 	});
@@ -14,5 +14,5 @@ export function BitChecker(initial: number = 0, length: number = 32): boolean[]
 		set(target, property, value) {
 			return Reflect.set(target, property, value);
 		}
-	})
+	}) as (boolean[] & { value: number })
 }

src/lib/Heizungswerte.ts

@@ -710,12 +710,12 @@ export function getHeizungswerte(
 
 	let result = fuelList.find(
 		(value) =>
-			value.energietraeger == energietraeger && value.einheit == "kWh"
+			value[0] == energietraeger && value[1] == "kWh"
 	);
 
 	let coe = 0;
 	if (result) {
-		coe = result.coe
+		coe = result[4]
 	}
 	
 	return [

src/lib/server/Heizwertfaktor.ts

@@ -8,8 +8,14 @@ export const getHeizwertfaktorClient = function(energietraeger: string, einheit:
 	primärenergiefaktor: number
 } {
 	for (const fuel of fuelList) {
-		if (fuel.energietraeger == energietraeger && fuel.einheit == einheit) {
+		if (fuel[0] == energietraeger && fuel[1] == einheit) {
-			return fuel;
+			return {
+				coe: fuel[4],
+				energietraeger: fuel[0],
+				einheit: fuel[1],
+				umrechnungsfaktor: fuel[2],
+				primärenergiefaktor: fuel[3]
+			};
 		}
 	}
 

src/pages/api/ausweis/bedarfsausweis.ts

@@ -0,0 +1,137 @@
+import type { APIRoute } from "astro";
+import { error, success } from "src/lib/APIResponse";
+import { z } from "zod";
+
+const AusweisUploadChecker = z.object({
+	typ: z.enum(["VA", "BA", "VANW"]),
+
+	objekt: z.object({
+		typ: z.string(),
+		plz: z.string().min(4).max(5),
+		ort: z.string(),
+		strasse: z.string(),
+		baujahr: z.number(),
+		saniert: z.boolean(),
+		gebaeudeteil: z.enum(["Gesamtgebäude", "Wohnen"]),
+		einheiten: z.number(),
+	}),
+
+	heizquellen: z
+		.array(
+			z.object({
+				verbrauch: z.array(z.number()).max(3).min(3),
+				einheit: z.string(),
+				brennstoff: z.string(),
+				anteil_warmwasser: z.number(),
+			})
+		)
+		.max(2)
+		.min(1),
+
+	energieverbrauch_zeitraum: z.date(),
+	wohnflaeche: z.number(),
+
+	keller_beheizt: z.boolean(),
+	dachgeschoss: z.number(),
+	zusaetzliche_heizquelle: z.boolean(),
+	warmwasser_enthalten: z.boolean(),
+	lueftungskonzept: z.enum([
+		"Fensterlüftung",
+		"Schachtlüftung",
+		"Lüftungsanlage ohne Wärmerückgewinnung",
+		"Lüftungsanlage mit Wärmerückgewinnung",
+	]),
+	wird_gekuehlt: z.boolean(),
+	leerstand: z.number(),
+	images: z.array(z.string()),
+
+	versorgungssysteme: z.number(),
+	fenster_dach: z.number(),
+	energiequelle_2_nutzung: z.number(),
+	daemmung: z.number(),
+
+	/**
+	 * Bedarfsausweis spezifische Eigenschaften
+	 */
+	anzahl_vollgeschosse: z.number(),
+	geschosshoehe: z.number(),
+	anzahl_gauben: z.number(),
+	breite_gauben: z.number(),
+	masse_a: z.number(),
+	masse_b: z.number(),
+	masse_c: z.number(),
+	masse_d: z.number(),
+	masse_e: z.number(),
+	masse_f: z.number(),
+	fensterflaeche_so_sw: z.number(),
+	fensterflaeche_nw_no: z.number(),
+	aussenwandflaeche_unbeheizt: z.number(),
+	dachflaeche: z.number(),
+	dach_u_wert: z.number(),
+	deckenflaeche: z.number(),
+	decke_u_wert: z.number(),
+	aussenwand_flaeche: z.number(),
+	aussenwand_u_wert: z.number(),
+	fussboden_flaeche: z.number(),
+	fussboden_u_wert: z.number(),
+	volumen: z.number(),
+	dicht: z.boolean(),
+	fenster_flaeche_1: z.number(),
+	fenster_art_1: z.number(),
+	fenster_flaeche_2: z.number(),
+	fenster_art_2: z.number(),
+	dachfenster_flaeche: z.number(),
+	dachfenster_art: z.number(),
+	haustuer_flaeche: z.number(),
+	haustuer_art: z.number(),
+	dach_bauart: z.string(),
+	dach_daemmung: z.number(),
+	decke_bauart: z.string(),
+	decke_daemmung: z.number(),
+	aussenwand_bauart: z.string(),
+	aussenwand_daemmung: z.number(),
+	boden_bauart: z.string(),
+	boden_daemmung: z.number(),
+	warmwasser_verteilung: z.string(),
+	warmwasser_speicherung: z.string(),
+	warmwasser_erzeugung: z.string(),
+	heizung_zentral: z.boolean(),
+	heizung_verteilung: z.string(),
+	heizung_speicherung: z.string(),
+	waerme_erzeugung_heizung: z.string(),
+	anteil_zusatzheizung: z.number(),
+	kollektor_flaeche: z.number(),
+
+	// VANW
+
+	vanw_stromverbrauch_enthalten: z.number(),
+	vanw_stromverbrauch_sonstige: z.string(),
+	vanw_strom_1: z.number(),
+	vanw_strom_2: z.number(),
+	vanw_strom_3: z.number(),
+
+	erledigt: z.boolean(),
+
+	anrede: z.string(),
+	name: z.string(),
+	vorname: z.string(),
+	email: z.string(),
+	telefonnummer: z.string(),
+});
+
+/**
+ * Erstellt einen Verbrauchsausweis anhand der gegebenen Daten und trägt ihn in die Datenbank ein.
+ * @param param0
+ * @returns
+ */
+export const post: APIRoute = async ({ request }) => {
+	const body = await request.json();
+
+	const result = AusweisUploadChecker.safeParse(body);
+
+	if (!result.success) {
+		return error(result.error.issues);
+	}
+
+	return success({});
+};

src/pages/api/ausweis/verbrauchsausweis.ts

@@ -1,16 +1,122 @@
 import type { APIRoute } from "astro";
-import { success } from "src/lib/APIResponse";
+import { ActionFailedError, error, success } from "src/lib/APIResponse";
+import { db } from "src/lib/shared";
+import { z } from "zod";
+
+const AusweisUploadChecker = z.object({
+	ausweisart: z.enum(["VA", "BA", "VANW"]),
+
+	objekt_typ: z.string(),
+	objekt_plz: z.string(),
+	objekt_ort: z.string(),
+	objekt_strasse: z.string(),
+	objekt_gebaeudeteil: z.string(),
+	objekt_saniert: z.boolean() ,
+	baujahr_gebaeude: z.number(),
+	baujahr_anlage: z.number(),
+	anzahl_einheiten: z.number(),
+
+	ausstellgrund: z.enum(["Vermietung"
+	,"Neubau"
+	, "Verkauf"
+	, "Modernisierung"
+	, "Sonstiges"]),
+
+	energieverbrauch_zeitraum: z.string(),
+	energieverbrauch_1_heizquelle_1: z.number(),
+	energieverbrauch_2_heizquelle_1: z.number(),
+	energieverbrauch_3_heizquelle_1: z.number(),
+	energieverbrauch_1_heizquelle_2: z.number(),
+	energieverbrauch_2_heizquelle_2: z.number(),
+	energieverbrauch_3_heizquelle_2: z.number(),
+
+	energietraeger_einheit_heizquelle_1: z.string(),
+	energietraeger_einheit_heizquelle_2: z.string(),
+	energietraeger_1: z.string(),
+	energietraeger_2: z.string(),
+
+	anteil_warmwasser_1: z.number(),
+	anteil_warmwasser_2: z.number(),
+
+	wohnflaeche: z.number(),
+
+	keller_beheizt: z.boolean(),
+	dachgeschoss: z.number(),
+	zusaetzliche_heizquelle: z.boolean(),
+	warmwasser_enthalten: z.boolean(),
+	lueftungskonzept: z.enum([
+		"Fensterlüftung",
+		"Schachtlüftung",
+		"Lüftungsanlage ohne Wärmerückgewinnung",
+		"Lüftungsanlage mit Wärmerückgewinnung",
+	]),
+	wird_gekuehlt: z.boolean(),
+	leerstand: z.number(),
+	images: z.array(z.string()),
+
+	versorgungssysteme: z.number(),
+	fenster_dach: z.number(),
+	energiequelle_2_nutzung: z.number(),
+	daemmung: z.number(),
+
+	anrede: z.string().optional(),
+	name: z.string().optional(),
+	vorname: z.string().optional(),
+	email: z.string().optional(),
+	telefonnummer: z.string().optional(),
+});
 
 /**
  * Erstellt einen Verbrauchsausweis anhand der gegebenen Daten und trägt ihn in die Datenbank ein.
- * @param param0 
+ * @param param0
- * @returns 
+ * @returns
  */
 export const post: APIRoute = async ({ request }) => {
 	const body = await request.json();
 
-	
+	const validation = AusweisUploadChecker.safeParse(body);
 
+	if (!validation.success) {
+		return error(validation.error.issues);
+	}
 
-	return success({});
+	const result = await db("ausweise").insert(body).returning(["uid", "id"]);
-}
+	if (!result) {
+		return ActionFailedError();
+	}
+
+	const { uid, id } = result[0];
+
+	if (!uid || !id) {
+		return ActionFailedError();
+	}
+
+	return success({
+		uid, id
+	});
+};
+
+export const put: APIRoute = async ({ request }) => {
+	const body = await request.json();
+
+	const validation = AusweisUploadChecker.safeParse(body);
+
+	if (!validation.success) {
+		return error(validation.error.issues);
+	}
+
+	const result = await db("ausweise").insert(body).returning(["uid", "id"]);
+	if (!result) {
+		return ActionFailedError();
+	}
+
+	const { uid, id } = result[0];
+
+	if (!uid || !id) {
+		return ActionFailedError();
+	}
+
+	return success({
+		uid, id
+	});
+};

src/pages/api/image.ts

@@ -0,0 +1,44 @@
+import type { APIRoute } from "astro";
+import { ActionFailedError, error, success } from "src/lib/APIResponse";
+import * as jimp from "jimp";
+import { v4 as uuid } from "uuid";
+import { z } from "zod";
+import * as path from "path";
+
+const ImageUploadChecker = z.object({
+	data: z.string(),
+	name: z.string()
+});
+
+/**
+ * Speichert ein Bild auf unserem Server ab und gibt die UID des Bildes zurück
+ * @param param0
+ * @returns
+ */
+export const put: APIRoute = async ({ request }) => {
+	const body = await request.json();
+
+	const result = ImageUploadChecker.safeParse(body);
+
+	if (!result.success) {
+		return error(result.error.issues);
+	}
+
+	const image = Buffer.from(body.data, "base64url");
+	
+	let jimpResult;
+	try {
+		jimpResult = await jimp.read(image);
+	} catch(e) {
+		return ActionFailedError();
+	}
+
+	const uid = uuid();
+	const location = path.join(uid);
+
+	jimpResult.quality(0.75).write(location);
+
+	return success({
+		uid
+	});
+};

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>