Ansichtsausweis Verbessert

src/components/AnsichtsausweisButton.svelte

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

src/components/Ausweis/AusweisPreviewContainer.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
+	import { Verbrauchsausweis } from "src/lib/Ausweis/Verbrauchsausweis";
 	import AnsichtsausweisButton from "~/components/AnsichtsausweisButton.svelte";
 	import DatenblattButton from "~/components/DatenblattButton.svelte";
 	import HelpLabel from "~/components/HelpLabel.svelte";
+
+	export let ausweis: Verbrauchsausweis;
 </script>
 
 <div class="grid grid-cols-2 p-4 gap-4">
@@ -54,7 +57,7 @@
 				<hr class="trenner_form_100" />
 
 				<div class="flex flex-row gap-4">
-					<AnsichtsausweisButton></AnsichtsausweisButton>
+					<AnsichtsausweisButton ausweis={ausweis}></AnsichtsausweisButton>
 					<DatenblattButton></DatenblattButton>
 				</div>
 			</div>

src/components/Ausweis/PerformanceScore.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	export let performance: number;
+	export let verbrauch: number;
+	export let primär: number;
 
 	let maxPerformance = 250;
 
@@ -31,22 +32,24 @@
 		return centeredValue;
 	}
 
-	$: translation = Math.min(100, performance / maxPerformance * 100);
+	$: translation_1 = Math.min(100, verbrauch / maxPerformance * 100);
+	$: translation_2 = Math.min(100, primär / maxPerformance * 100);
 </script>
 
 <div class="w-full rounded-lg border border-[#ffcc03] relative p-2">
 	<img src="/images/SKALA-910.png" alt="Energieeffizienz Skala">
 	<img
-		class="absolute top-1 transition-left duration-700 ease-in-out"
+		class="absolute top-1 transition-left duration-1000 ease-in-out"
 		width="20px"
 		src="/images/pfeil2.png"
 		alt=""
-		style="left: {translation}%; transform: translateX({centerValueBetweenBoundaries(translation, 50, -150, 0, 100)}%)"
+		style="left: {translation_1}%; transform: translateX({centerValueBetweenBoundaries(translation_1, 50, -150, 0, 100)}%)"
 	/>
 	<img
-		class="absolute bottom-1"
+	class="absolute bottom-1 transition-left duration-1000 ease-in-out"
 		width="20px"
 		src="/images/pfeil.png"
+		style="left: {translation_2}%; transform: translateX({centerValueBetweenBoundaries(translation_2, 50, -150, 0, 100)}%)"
 		alt=""
 	/>
 </div>

src/components/Verbrauchsausweis/VerbrauchsausweisContent.svelte

@@ -45,10 +45,10 @@
 			ausweis.anzahl_einheiten <= 4 &&
 			ausweis.objekt_saniert == false &&
 			(ausweis.ausstellgrund == "Vermietung" ||
-			ausweis.ausstellgrund == "Sonstiges")) ||
-			ausweis.ausstellgrund == "Neubau" ||
-			ausweis.ausstellgrund == "Modernisierung" ||
-			ausweis.ausstellgrund == "Verkauf";
+				ausweis.ausstellgrund == "Sonstiges")) ||
+		ausweis.ausstellgrund == "Neubau" ||
+		ausweis.ausstellgrund == "Modernisierung" ||
+		ausweis.ausstellgrund == "Verkauf";
 
 	function automatischAusfüllen() {
 		ausweis.baujahr_gebaeude = 1962;
@@ -56,7 +56,7 @@
 		ausweis.objekt_saniert = true;
 		ausweis.anzahl_einheiten = 1;
 		ausweis.ausstellgrund = "Vermietung";
-		energyConsumption = [15000, 14000, 16000]
+		energyConsumption = [15000, 14000, 16000];
 		area = 152;
 		ausweis.keller_beheizt = true;
 		ausweis.warmwasser_enthalten = true;
@@ -70,7 +70,10 @@
 		<Progressbar progress={0} />
 	</div>
 
-	<PerformanceScore performance={energyPerformance} />
+	<PerformanceScore
+		verbrauch={energyPerformance}
+		primär={energyPerformance * 1.1}
+	/>
 </div>
 
 <form method="post" action="/verbrauchsausweis/erstellen">
@@ -81,7 +84,9 @@
 			<a class="button" href="/speichern">Später Weitermachen</a>
 			<div class="flex gap-4">
 				<Hilfe />
-				<button on:click={automatischAusfüllen}>Automatisch Ausfüllen</button>
+				<button on:click={automatischAusfüllen}
+					>Automatisch Ausfüllen</button
+				>
 			</div>
 		</div>
 
@@ -134,8 +139,8 @@
 			<!-- Strasse -->
 			<div class="form-group col-md-4">
 				<HelpLabel title="Straße, Hausnummer *">
-					Bitte geben Sie hier die Straße und Hausnummer des
-					Gebäudes ein.
+					Bitte geben Sie hier die Straße und Hausnummer des Gebäudes
+					ein.
 				</HelpLabel>
 				<div>
 					<input
@@ -152,7 +157,11 @@
 
 			<!-- PLZ -->
 			<div class="form-group col-md-4 PLZ">
-				<ZipSearch bind:zip={ausweis.objekt_plz} bind:city={ausweis.objekt_ort} name="zip" />
+				<ZipSearch
+					bind:zip={ausweis.objekt_plz}
+					bind:city={ausweis.objekt_ort}
+					name="zip"
+				/>
 			</div>
 
 			<!-- IGort: readonly entfernt - Nelson -->
@@ -196,7 +205,11 @@
 			<div class="form-group col-md-4">
 				<Label>Keller *</Label>
 				<div>
-					<select name="IGkeller" required bind:value={ausweis.keller_beheizt}>
+					<select
+						name="IGkeller"
+						required
+						bind:value={ausweis.keller_beheizt}
+					>
 						<option>Bitte auswählen</option>
 						<option value={false}>nicht vorhanden</option>
 						<option value={false}>unbeheizt</option>
@@ -793,7 +806,7 @@
 			Energieausweis als PDF anschauen</Label
 		>
 
-		<AusweisPreviewContainer />
+		<AusweisPreviewContainer {ausweis} />
 
 		<div class="flex flex-row justify-between">
 			<Hilfe />

src/lib/Ausweis/Verbrauchsausweis.ts

@@ -175,10 +175,20 @@ export class Verbrauchsausweis {
 
 	public constructor() {}
 
+	public static fromBase64(base64: string): Verbrauchsausweis | null {
+		try {
+			const text = Buffer.from(base64, "base64");
+
+			const json = JSON.parse(text.toString());
+			return json;
+
+		} catch(e) {
+			return null;
+		}
+	}
+
 	public async endEnergieVerbrauch(): Promise<number> {
-		const date = Date.parse(
-			`${this.energieverbrauch_zeitraum_jahr}-${this.energieverbrauch_zeitraum_monat}-01 00:00:01`
-		);
+		const date = this.energieverbrauch_zeitraum
 		const klimafaktoren = await getKlimafaktorenClient(
 			date,
 			this.objekt_plz

src/pages/developers/index.astro

@@ -3,4 +3,7 @@ import Layout from "~/layouts/Layout.astro"
 
 ---
 
-<Layout title="FAQ - IBCornelsen"></Layout>
+<Layout title="Für Entwickler - IBCornelsen">
+	<h1>Warum das IBCornelsen?</h1>
+	<p>Unser Unternehmen bietet eine weite Auswahl an Schnittstellen und damit einhergehenden Daten. Unsere API bietet uneingeschränkten Zugang zu Immobilien, Verbrauchsdaten und vielem Weiteren.</p>
+</Layout>

src/pages/pdf/ansichtsausweis.astro

@@ -1,12 +1,27 @@
 ---
 import moment from "moment";
+import { Ausweis } from "src/lib/Ausweis";
+import { Verbrauchsausweis } from "src/lib/Ausweis/Verbrauchsausweis";
 import Checkbox from "~/components/Checkbox.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="">
+<PDFLayout title="Ansichtsausweis">
 	<div class="flex flex-col gap-20">
 		<div class="flex flex-col gap-2">
 			<PDFHeader></PDFHeader>
@@ -14,7 +29,7 @@ import PDFLayout from "~/layouts/PDFLayout.astro";
 				<p class="text-xs">
 					Gültig bis: <span
 						>{
-							moment().add("10", "years").format("DD. MMM. YYYY")
+							moment().add("10", "years").locale("de").format("DD. MMM. YYYY")
 						}</span>
 				</p>
 				<p class="text-xs">Ausweis ID <span>1293819</span></p>
@@ -31,37 +46,37 @@ import PDFLayout from "~/layouts/PDFLayout.astro";
 						<table>
 							<tr>
 								<td>Gebäudetyp</td>
-								<td>Einfamilienhaus</td>
+								<td>{ausweis.objekt_typ}</td>
 							</tr>
 							<tr>
 								<td>Adresse</td>
-								<td>Mönckebergstraße, 22049 Hamburg</td>
+								<td>{ausweis.objekt_strasse}</td>
 							</tr>
 							<tr>
 								<td>Gebäudeteil</td>
-								<td>Gesamtgebäude</td>
+								<td>{ausweis.objekt_gebaeudeteil}</td>
 							</tr>
 							<tr>
 								<td>Baujahr Gebäude ³</td>
-								<td>1962</td>
+								<td>{ausweis.baujahr_gebaeude}</td>
 							</tr>
 							<tr>
 								<td
 									>Baujahr Wärmeerzeuger <sup>3</sup>
 									<sup>4</sup></td
 								>
-								<td>1974</td>
+								<td>{ausweis.baujahr_anlage}</td>
 							</tr>
 							<tr>
 								<td>Anzahl Wohnungen</td>
-								<td>1</td>
+								<td>{ausweis.anzahl_einheiten}</td>
 							</tr>
 							<tr>
 								<td>Gebäudenutzfläche (A<sub>N</sub>)</td>
 								<td>
 									<table>
 										<tr>
-											<td>182m²</td>
+											<td>192m²</td>
 											<td
 												class="flex flex-row items-center h-full w-full gap-2 pl-2"
 											>

tsconfig.json

@@ -19,8 +19,6 @@
 		"skipLibCheck": true,
 		// Enable strict mode
 		"strict": true,
-		// Error when a value import is only used as a type
-		"importsNotUsedAsValues": "error",
 		"baseUrl": ".",
 		"paths": {
 			"~/components/*": ["./src/components/*"],