Bugfixes und Verbesserungen

Fast alle gelisteten Probleme in https://trello.com/c/GKZotNZV werden hiermit behoben.

src/components/Ausweis/AusweisPreviewContainer.svelte

@@ -13,10 +13,8 @@
 		VerbrauchsausweisWohnenClient,
 	} from "./types";
 
-	export let ausweis:
+	export let ausweis: VerbrauchsausweisWohnenClient;
-		| VerbrauchsausweisWohnenClient;
 	export let gebaeude: GebaeudeClient;
-
 	export let images: UploadedGebaeudeBild[] = [];
 </script>
 

src/components/Ausweis/BilderZusatzsysteme.svelte

@@ -5,10 +5,6 @@
 	import DaemmungImage from "./DaemmungImage.svelte";
 	import FensterImage from "./FensterImage.svelte";
 	import Label from "../Label.svelte";
-	import type {
-		BedarfsausweisWohnen,
-		VerbrauchsausweisGewerbe,
-	} from "@ibcornelsen/database/client";
 	import {
 	GebaeudeAufnahmeClient,
 		GebaeudeClient,
@@ -18,10 +14,7 @@
 
 	export let gebaeude: GebaeudeClient;
 	export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
-	export let ausweis:
+	export let ausweis: VerbrauchsausweisWohnenClient
-		| VerbrauchsausweisWohnenClient
-		| VerbrauchsausweisGewerbe
-		| BedarfsausweisWohnen;
 	export let images: UploadedGebaeudeBild[];
 </script>
 
@@ -388,4 +381,4 @@
 	als PDF anschauen</Label
 >
 
-<AusweisPreviewContainer {ausweis} {gebaeude} />
+<AusweisPreviewContainer bind:images bind:ausweis bind:gebaeude />

src/components/Ausweis/PerformanceScore.svelte

@@ -1,17 +1,31 @@
 <script lang="ts">
 	import { endEnergieVerbrauchVerbrauchsausweis_2016 } from "#lib/Berechnungen/VerbrauchsausweisWohnen/VerbrauchsausweisWohnen_2016";
 	import ThickArrowDown from "radix-svelte-icons/src/lib/icons/ThickArrowDown.svelte";
-	import { BedarfsausweisWohnenClient, GebaeudeAufnahmeClient, GebaeudeClient, VerbrauchsausweisGewerbeClient, VerbrauchsausweisWohnenClient } from "./types";
+	import {
+		BedarfsausweisWohnenClient,
+		GebaeudeAufnahmeClient,
+		GebaeudeClient,
+		VerbrauchsausweisGewerbeClient,
+		VerbrauchsausweisWohnenClient,
+	} from "./types";
 	import ThickArrowUp from "radix-svelte-icons/src/lib/icons/ThickArrowUp.svelte";
 
 	export let ausweis: VerbrauchsausweisWohnenClient;
+	export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
+	export let gebaeude: GebaeudeClient;
 
 	let maxPerformance = 250;
 
 	/**
 	 * We use linear interpolation to scale the value between the given boundaries.
 	 */
-	function centerValueBetweenBoundaries(value: number, newMinimum: number, newMaximum: number, oldMinimum: number = 0, oldMaximum: number = 100): number {
+	function centerValueBetweenBoundaries(
+		value: number,
+		newMinimum: number,
+		newMaximum: number,
+		oldMinimum: number = 0,
+		oldMaximum: number = 100
+	): number {
 		// Calculate the center point of the current range
 		const center = (oldMinimum + oldMaximum) / 2;
 
@@ -31,33 +45,62 @@
 		const scaledValue = shiftedValue * scalingFactor;
 
 		// Shift the scaled value back to the center of the new range
-		const centeredValue = scaledValue + ((newMaximum + newMinimum) / 2);
+		const centeredValue = scaledValue + (newMaximum + newMinimum) / 2;
 
 		return centeredValue;
 	}
 
-
 	let translation_1 = 0;
 	let translation_2 = 0;
 	$: {
 		(async () => {
-			const result = (await endEnergieVerbrauchVerbrauchsausweis_2016(ausweis));
+			const result = await endEnergieVerbrauchVerbrauchsausweis_2016({
+				...ausweis,
+				gebaeude_aufnahme_allgemein: {
+					...gebaeude_aufnahme_allgemein,
+					gebaeude_stammdaten: gebaeude,
+				},
+			});
+
+			console.log(result, ausweis);
 
 			if (!result) {
-				return
+				return;
 			}
-			//const primaerEnergieVerbrauch = (await ausweis.primaerEnergieBedarf);
+			translation_1 = Math.max(
-			translation_1 = Math.max(0, Math.min(100, result.endEnergieVerbrauchGesamt / maxPerformance * 100))
+				0,
-			//translation_2 = Math.max(0, Math.min(100, primaerEnergieVerbrauch / maxPerformance * 100))
+				Math.min(
-		})()
+					100,
+					(result.endEnergieVerbrauchGesamt / maxPerformance) * 100
+				)
+			);
+			translation_2 = Math.max(0, Math.min(100, result.primaerEnergieVerbrauchGesamt / maxPerformance * 100))
+		})();
 	}
-
 </script>
 
 <div class="w-full rounded-lg border-[#ffcc03] border-2 relative p-2">
-	<img src="/images/SKALA-910.png" alt="Energieeffizienz Skala">
+	<img src="/images/SKALA-910.png" alt="Energieeffizienz Skala" />
-	<ThickArrowDown size={28} class="fill-base-content absolute top-1 transition-left duration-1000 ease-in-out"
+	<ThickArrowDown
-	style="left: {translation_1}%; transform: translateX({centerValueBetweenBoundaries(translation_1, 50, -150, 0, 100)}%)" />
+		size={28}
-	<ThickArrowUp size={28} class="fill-base-content absolute bottom-1 transition-left duration-1000 ease-in-out"
+		class="fill-base-content absolute top-1 transition-left duration-1000 ease-in-out"
-	style="left: {translation_2}%; transform: translateX({centerValueBetweenBoundaries(translation_2, 50, -150, 0, 100)}%)" />
+		style="left: {translation_1}%; transform: translateX({centerValueBetweenBoundaries(
+			translation_1,
+			50,
+			-150,
+			0,
+			100
+		)}%)"
+	/>
+	<ThickArrowUp
+		size={28}
+		class="fill-base-content absolute bottom-1 transition-left duration-1000 ease-in-out"
+		style="left: {translation_2}%; transform: translateX({centerValueBetweenBoundaries(
+			translation_2,
+			50,
+			-150,
+			0,
+			100
+		)}%)"
+	/>
 </div>

src/components/Ausweis/Verbrauch.svelte

@@ -4,7 +4,6 @@
 	import Label from "../Label.svelte";
 	import fuelList from "./brennstoffListe";
 	import { auditVerbrauchAbweichung } from "../Verbrauchsausweis/audits/VerbrauchAbweichung";
-	import type { VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
 	import { GebaeudeAufnahmeClient, GebaeudeClient, VerbrauchsausweisWohnenClient } from "./types";
 
 	// Wir dürfen bis zu 4.5 Jahre alte Klimafaktoren benutzen, also nehmen wir alle Monate seitdem und generieren daraus die Auswahl.
@@ -43,7 +42,7 @@
 
 	export let gebaeude: GebaeudeClient;
 	export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
-	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe;
+	export let ausweis: VerbrauchsausweisWohnenClient;
 
 	const fuelMap: Record<string, string[]> = {};
 	for (const fuel of fuelList) {
@@ -53,8 +52,8 @@
 	}
 	
 
-	let month = ausweis.startdatum?.getMonth() || moment().month();
+	let month = ausweis.startdatum?.getMonth() || null;
-	let year = ausweis.startdatum?.getFullYear() || moment().subtract(3, "years").year();
+	let year = ausweis.startdatum?.getFullYear() || null;
 
 	$: {
 		if (typeof month === "number" && typeof year === "number") {
@@ -192,8 +191,11 @@
 							<option value={date.month}>{monthNames[date.month]}</option>
 						{/each}
 					{:else}
-						{#each availableDates as date}
+						{#each Array.from(availableDates.reduce((a,c) => {
-							<option value={date.month}>{monthNames[date.month]}</option>
+							a.add(c.month);
+							return a;
+						}, new Set())) as month}
+							<option value={month}>{monthNames[month]}</option>
 						{/each}
 					{/if}
 				</select>

src/components/Ausweis/types.ts

@@ -4,7 +4,7 @@ import { inferProcedureInput, inferProcedureOutput } from "@trpc/server";
 
 export type UploadedGebaeudeBild = inferProcedureOutput<
 AppRouter["v1"]["verbrauchsausweisWohnen"]["get"]
->["gebaeude_aufnahme_allgemein"]["gebaeude_stammdaten"]["gebaeude_bilder"][0];
+>["gebaeude_aufnahme_allgemein"]["gebaeude_stammdaten"]["gebaeude_bilder"][0] & { base64?: string };
 
 
 /**

src/components/ImageGrid.svelte

@@ -21,7 +21,7 @@
 			{#if image.kategorie == kategorie}
 				<div class="relative group">
 					<img
-						src={image.base64 ? image.base64 : `"/bilder/${image.uid}.webp"`}
+						src={image.base64 ? image.base64 : `/bilder/${image.uid}.webp`}
 						alt={kategorie}
 						class="h-full rounded-lg border-2 group-hover:contrast-50 object-cover transition-all"
 					/>

src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte

@@ -102,7 +102,7 @@
 		<Progressbar progress={0} />
 	</div>
 
-	<PerformanceScore bind:ausweis />
+	<PerformanceScore bind:ausweis bind:gebaeude_aufnahme_allgemein bind:gebaeude />
 </div>
 
 <form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
@@ -384,7 +384,7 @@
 					Bitte wählen Sie hier den Gebäudetyp aus.
 				</HelpLabel>
 				<div>
-					<select name="gebaeudetyp" data-test="gebaeudetyp" required>
+					<select name="gebaeudetyp" data-test="gebaeudetyp" bind:value={gebaeude_aufnahme_allgemein.gebaeudetyp} required>
 						<option disabled>Bitte auswählen</option>
 						<option value="Einfamilienhaus">Einfamilienhaus</option>
 						<option value="Freistehendes Einfamilienhaus"
@@ -423,7 +423,7 @@
 					'Gewerbe'.
 				</HelpLabel>
 				<div>
-					<select name="gebaeudeteil" data-test="gebaeudeteil" required>
+					<select name="gebaeudeteil" data-test="gebaeudeteil" bind:value={gebaeude_aufnahme_allgemein.gebaeudeteil} required>
 						<option disabled>Bitte auswählen</option>
 						<option value="Gesamtgebäude">Gesamtgebäude</option>
 						<option value="Wohnen">Wohnen</option>

src/modules/KaufabschlussModule.svelte

@@ -2,11 +2,7 @@
 	import ZipSearch from "../components/PlzSuche.svelte";
 	import Label from "../components/Label.svelte";
 	import type {
-		BedarfsausweisWohnen,
-		Benutzer,
 		Bezahlmethoden,
-		VerbrauchsausweisGewerbe,
-		VerbrauchsausweisWohnen,
 	} from "@ibcornelsen/database/client";
 	import { Enums } from "@ibcornelsen/database/client";
 	import PaymentOption from "#components/PaymentOption.svelte";
@@ -15,6 +11,7 @@
 	import type { AppRouter } from "@ibcornelsen/api";
 	import CheckoutItem from "#components/CheckoutItem.svelte";
 	import { BenutzerClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
+	import { PRICES } from "#lib/constants";
 
 	export let user: BenutzerClient;
 	export let ausweis:
@@ -22,7 +19,18 @@
 	// TODO: überarbeiten und zu inferProcedureOutput machen
 	let rechnung: inferProcedureInput<
 		AppRouter["v1"]["rechnungen"]["erstellen"]
-	> = {};
+	> = {
+		email: user.email,
+		empfaenger: user.vorname + " " + user.name,
+		strasse: user.adresse,
+		plz: user.plz,
+		ort: user.ort,
+		versand_empfaenger: user.vorname + " " + user.name,
+		versand_strasse: user.adresse,
+		versand_plz: user.plz,
+		versand_ort: user.ort,
+		telefon: user.telefon,
+	};
 
 	let services = [
 		{
@@ -54,15 +62,12 @@
 	export let selectedPaymentType: Bezahlmethoden =
 		Enums.Bezahlmethoden.paypal;
 
-	let agbAkzeptiert: boolean;
-	let datenschutzAkzeptiert: boolean;
-
 	async function createPayment(e: SubmitEvent) {
 		e.preventDefault();
 
 		const response = await client.v1.rechnungen.erstellen.mutate({
 			...rechnung,
-			ausweisart: ausweis.gebaeude_aufnahme_allgemein.ausweisart,
+			ausweisart: Enums.Ausweisart.VerbrauchsausweisWohnen,
 			uid: ausweis.uid,
 			bezahlmethode: selectedPaymentType,
 			services: services
@@ -72,9 +77,16 @@
 
 		window.location.href = response.checkout_url;
 	}
+
+	const priceTotal = services.reduce((acc, service) => {
+		if (service.selected) {
+			return acc + service.price;
+		}
+		return acc;
+	}, 0) + PRICES[Enums.Ausweisart.VerbrauchsausweisWohnen][0];
 </script>
 
-<div class="grid grid-cols-[2fr_1fr] gap-4 h-full">
+<form class="grid grid-cols-[2fr_1fr] gap-4 h-full" on:submit={createPayment}>
 	<div>
 		<h3 class="font-semibold">Ansprechpartner</h3>
 		<div class="rounded-lg border p-4 border-base-300 bg-base-100">
@@ -348,23 +360,23 @@
 			<div class="mt-auto">
 				<hr />
 				<div class="flex flex-row items-center justify-between">
-					<span class="opacity-75 text-sm">Brutto</span>
+					<span class="opacity-75 text-sm">Netto</span>
-					<span class="font-semibold text-sm">45€</span>
+					<span class="font-semibold text-sm">{priceTotal * 0.81}€</span>
 				</div>
 				<div class="flex flex-row items-center justify-between">
-					<span class="opacity-75 text-sm">Netto</span>
+					<span class="opacity-75 text-sm">19% MwSt</span>
-					<span class="font-semibold text-sm">45€</span>
+					<span class="font-semibold text-sm">{priceTotal * 0.19}€</span>
 				</div>
 				<hr />
 				<div class="flex flex-row items-center justify-between">
 					<span class="opacity-75 text-sm">Gesamt</span>
-					<span class="font-semibold text-sm">45€</span>
+					<span class="font-semibold text-sm">{priceTotal}€</span>
 				</div>
 				<p class="mt-8">Mit dem Klick auf "Bestellung Bestätigen" akzeptieren sie unsere <a href="/agb">AGB</a> und <a href="/impressum">Datenschutzbestimmungen</a>. Sie werden zu ihrem ausgewählten Bezahlprovider weitergeleitet, nach Bezahlung werden sie automatisch zu unserem Portal zurückgeleitet.</p>
-				<button class="btn btn-secondary w-full mt-4" disabled
+				<button class="btn btn-secondary w-full mt-4"
 					>Bestellung Bestätigen</button
 				>
 			</div>
 		</div>
 	</div>
-</div>
+</form>