Weitere Tests, Besseres Typechecking, Alle Ausweise und Verbesserter Verbrauchsausweis Gewerbe

src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte

@@ -6,30 +6,69 @@
 	import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
 	import Label from "#components/Label.svelte";
 	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
-	import ZipSearch from "#components/ZIPSearch.svelte";
+	import ZipSearch from "#components/PlzSuche.svelte";
 	import moment from "moment";
 	import BilderZusatzsysteme from "#components/Ausweis/BilderZusatzsysteme.svelte";
-	import { RawNotificationWrapper, RawNotification, notifications, addNotification } from "@ibcornelsen/ui";
+	import { RawNotificationWrapper, RawNotification, notifications, addNotification, updateNotification } from "@ibcornelsen/ui";
 	import { auditHeizungGebaeudeBaujahr } from "#components/Verbrauchsausweis/audits/HeizungGebaeudeBaujahr";
 	import { AuditType, hidden } from "#components/Verbrauchsausweis/audits/hidden";
 	import { auditBedarfsausweisBenoetigt } from "#components/Verbrauchsausweis/audits/BedarfsausweisBenoetigt";
 	import { auditVerbrauchAbweichung } from "#components/Verbrauchsausweis/audits/VerbrauchAbweichung";
-	import type { GebaeudeStammdaten, VerbrauchsausweisWohnen } from "@ibcornelsen/database/client";
 	import { Enums } from "@ibcornelsen/database/client"
 	import { client } from "src/trpc";
 	import Overlay from "#components/Overlay.svelte";
 	import EmbeddedAuthFlowModule from "#modules/EmbeddedAuthFlowModule.svelte";
 	import AusweisGespeichertModule from "./AusweisGespeichertModule.svelte";
 	import { validateAccessTokenClient } from "src/client/lib/validateAccessToken";
+	import { UploadedGebaeudeBild, VerbrauchsausweisWohnenClient, GebaeudeClient } from "#components/Ausweis/types";
 	
-	export let uid: string | null = null;
-	export let gebaeude: GebaeudeStammdaten = {} as GebaeudeStammdaten;
-	export let ausweis: VerbrauchsausweisWohnen = {
-		ausweisart: Enums.Ausweisart.VerbrauchsausweisWohnen
-	} as VerbrauchsausweisWohnen;
+	export let gebaeude: GebaeudeClient = {} as GebaeudeClient;
+	export let images: UploadedGebaeudeBild[] = [];
+	export let ausweis: VerbrauchsausweisWohnenClient = {} as VerbrauchsausweisWohnenClient;
+	
+	async function uploadImages() {
+		// Alle Bilder hochladen
+		for (let i = 0; i < images.length; i++) {
+			const image = images[i];
+			if (image.uid) {
+				// Bild wurde bereits hochgeladen, wir müssen es also nicht nochmal hochladen.
+				continue
+			}
 
-	console.log(Enums);
-	
+			const notification = addNotification({
+				dismissable: false,
+				message: "Bilder hochladen.",
+				subtext: `Bild ${i + 1}/${images.length} wird hochgeladen, bitte haben sie Geduld.`,
+				timeout: 0,
+				type: "info"
+			})
+
+			try {
+				const response = await client.v1.bilder.upload.mutate({
+					base64: image.base64,
+					kategorie: image.kategorie,
+					gebaeude_uid: gebaeude.uid
+				})
+
+				image.uid = response.uid
+
+				updateNotification(notification, {
+					dismissable: true,
+					message: "Bild hochgeladen.",
+					subtext: `Bild ${i + 1}/${images.length} wurde erfolgreich hochgeladen.`,
+					timeout: 4000
+				})
+			} catch (e) {
+				updateNotification(notification, {
+					dismissable: true,
+					message: "Bild konnte nicht hochgeladen werden.",
+					subtext: `Bild ${i + 1}/${images.length} konnte nicht hochgeladen werden, wir haben bereits ein Ticket erstellt und melden uns so schnell wie möglich bei ihnen.`,
+					timeout: 150000,
+					type: "error"
+				})
+			}
+		}
+	}
 
 	async function ausweisSpeichern() {
 		// Um einen Ausweis zu speichern müssen wir eingeloggt sein, andernfalls wird die API den call ablehnen.
@@ -41,16 +80,17 @@
 
 		loginOverlayHidden = true;
 
-		if (uid) {
+		if (ausweis.uid) {
 			// Anscheinend wurde der Ausweis bereits erstellt und hat eine UID.
 			// Jetzt müssen wir ihn nun nur noch abspeichern.
 			try {
 				await client.v1.verbrauchsausweisWohnen[2016].speichern.mutate({
 					ausweis,
-					gebaeude,
-					uid
+					gebaeude
 				})
 
+				await uploadImages();
+
 				return true;
 			} catch (e) {
 				addNotification({
@@ -64,12 +104,18 @@
 			}
 		} else {
 			// Wir speichern den Ausweis ab und leiten auf die "ausweis-gespeichert" Seite weiter.
+			console.log(ausweis, gebaeude);
+			
 			try {
 				const response = await client.v1.verbrauchsausweisWohnen[2016].erstellen.mutate({
 					ausweis,
 					gebaeude
 				})
-				uid = response.uid
+				ausweis.uid = response.uid;
+				gebaeude.uid = response.gebaeude_uid;
+
+				await uploadImages();
+
 				return true;
 			} catch (e) {
 				addNotification({
@@ -88,7 +134,7 @@
 		const result = await ausweisSpeichern();
 
 		if (result === true) {
-			window.history.pushState({}, "", `/verbrauchsausweis?uid=${uid}`);
+			window.history.pushState({}, "", `/verbrauchsausweis?uid=${ausweis.uid}`);
 			speichernOverlayHidden = false;
 		}
 	}
@@ -118,11 +164,12 @@
 	}
 
 
-	async function ausweisAbschicken() {
+	async function ausweisAbschicken(e: SubmitEvent) {
+		e.preventDefault()
 		const result = await ausweisSpeichern();
 
 		if (result === true) {
-			window.location.href = `/kundendaten?uid=${uid}`;
+			window.location.href = `/kundendaten?uid=${ausweis.uid}`;
 		}
 	}
 
@@ -139,7 +186,7 @@
 
 <Overlay bind:hidden={speichernOverlayHidden}>
 	<div class="bg-white w-full max-w-screen-sm py-8 px-8">
-		<AusweisGespeichertModule {uid}></AusweisGespeichertModule>
+		<AusweisGespeichertModule uid={ausweis.uid}></AusweisGespeichertModule>
 	</div>
 </Overlay>
 
@@ -156,12 +203,12 @@
 	<PerformanceScore bind:ausweis bind:gebaeude />
 </div>
 
-<div>
+<form on:submit={ausweisAbschicken} name="ausweis">
 	<div
 		class="bg-[rgba(252,234,187,0.2)] border-2 p-4 rounded-lg border-[#ffcc03]"
 	>
 		<div class="flex flex-row justify-between">
-			<button class="button" on:click={spaeterWeitermachen}>Später Weitermachen</button>
+			<button class="button" type="button" on:click={spaeterWeitermachen}>Später Weitermachen</button>
 			<div class="flex gap-4">
 				<Hilfe />
 				<button
@@ -388,7 +435,7 @@
 					<label class="checkbox-inline"
 						><input
 							type="checkbox"
-							name="alternative_kuehlung	"
+							name="alternative_kuehlung"
 							bind:checked={ausweis.alternative_kuehlung}
 							value="Kühlung"
 						/>Kühlung</label
@@ -411,8 +458,8 @@
 					Bitte wählen Sie hier den Gebäudetyp aus.
 				</HelpLabel>
 				<div>
-					<select name="gebaeudetyp" required autocomplete="off">
-						<option>Bitte auswählen</option>
+					<select name="gebaeudetyp" required>
+						<option disabled>Bitte auswählen</option>
 						<option value="Einfamilienhaus">Einfamilienhaus</option>
 						<option value="Freistehendes Einfamilienhaus"
 							>Freistehendes Einfamilienhaus</option
@@ -450,8 +497,8 @@
 					'Gewerbe'.
 				</HelpLabel>
 				<div>
-					<select name="gebaeudeteil" class="" required autocomplete="off">
-						<option>Bitte auswählen</option>
+					<select name="gebaeudeteil" required>
+						<option disabled>Bitte auswählen</option>
 						<option value="Gesamtgebäude">Gesamtgebäude</option>
 						<option value="Wohnen">Wohnen</option>
 					</select>
@@ -468,10 +515,9 @@
 					<select
 						name="lueftung"
 						required
-						autocomplete="off"
 						bind:value={gebaeude.lueftung}
 					>
-						<option>Bitte auswählen</option>
+						<option disabled>Bitte auswählen</option>
 						<option value="Fensterlüftung">Fensterlüftung</option>
 						<option value="Schachtlüftung">Schachtlüftung</option>
 						<option value="Lüftungsanlage ohne Wärmerückgewinnung"
@@ -493,12 +539,10 @@
 				<div>
 					<select
 						name="kuehlung"
-						class=""
 						required
-						autocomplete="off"
 						bind:value={gebaeude.kuehlung}
 					>
-						<option>Bitte auswählen</option>
+						<option disabled>Bitte auswählen</option>
 						<option value="1">vorhanden</option>
 						<option value="0">nicht vorhanden</option>
 					</select>
@@ -516,8 +560,7 @@
 					<input
 						name="leerstand"
 						maxlength="2"
-						type="text"
-						autocomplete="off"
+						type="number"
 						bind:value={gebaeude.leerstand}
 					/>
 				</div>
@@ -530,14 +573,14 @@
 			>F - Bitte prüfen Sie hier die Angaben zum Sanierungszustand des
 			Gebäudes</Label
 		>
-		<BilderZusatzsysteme {gebaeude} {ausweis} />
+		<BilderZusatzsysteme {images} {gebaeude} {ausweis} />
 		<hr />
 		<div class="flex flex-row justify-between">
 			<Hilfe />
-			<button class="button" on:click={ausweisAbschicken}>Weiter</button>
+			<button type="submit" class="button">Weiter</button>
 		</div>
 	</div>
-</div>
+</form>
 
 
 <RawNotificationWrapper>