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

2024-01-14 22:35:22 +07:00
parent 3e9b312354
commit ceed5f7bb7
61 changed files with 1219 additions and 394 deletions
--- a/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
+++ b/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>
--- a/src/modules/EmbeddedLoginModule.svelte
+++ b/src/modules/EmbeddedLoginModule.svelte
@@ -7,7 +7,8 @@

 	export let onLogin: (response: Awaited<ReturnType<typeof loginClient>>) => void;

-	async function login() {
+	async function login(e: SubmitEvent) {
+		e.preventDefault()
 		const response = await loginClient(data.email, data.passwort)

 		if (response === null) {
@@ -24,14 +25,14 @@
 	}
 </script>

-<div style="width:50%;margin: 0 auto">
+<form style="width:50%;margin: 0 auto" on:submit={login} name="login">
 	<h1>Login</h1>
 	<div class="flex flex-col gap-4">
 		<div>
 			<h4>Email</h4>
 			<input
 				class="px-2.5 py-1.5 rounded-lg border bg-gray-50"
-				type="text"
+				type="email"
 				placeholder="Email"
 				name="email"
 				bind:value={data.email}
@@ -44,15 +45,15 @@
 				class="px-2.5 py-1.5 rounded-lg border bg-gray-50"
 				type="password"
 				placeholder="********"
-				name="password"
+				name="passwort"
 				bind:value={data.passwort}
 				required
 			/>
 		</div>
-		<button class="button" on:click={login}>Einloggen</button>
+		<button class="button" type="submit">Einloggen</button>
 		<div class="flex-row justify-between" style="margin-top: 10px">
-			<button on:click={() => navigate("signup")}>Registrieren</button>
+			<button on:click={() => navigate("signup")} name="registrieren">Registrieren</button>
 			<a href="/user/passwort_vergessen">Passwort Vergessen?</a>
 		</div>
 	</div>
-</div>
+</form>
--- a/src/modules/EmbeddedRegisterModule.svelte
+++ b/src/modules/EmbeddedRegisterModule.svelte
@@ -9,7 +9,8 @@
 	let vorname: string;
 	let name: string;

-	async function login() {
+	async function signUp(e: SubmitEvent) {
+		e.preventDefault()
 		try {
 			const response = await client.v1.benutzer.erstellen.mutate({
 				email,
@@ -36,7 +37,7 @@
 	}
 </script>

-<div style="width:50%;margin: 0 auto">
+<form style="width:50%;margin: 0 auto" name="signup" on:submit={signUp}>
 	<h1>Registrieren</h1>
 	<div class="flex flex-col gap-4">
 		<div class="flex flex-row gap-4 w-full">
@@ -45,6 +46,7 @@
 				<input
 					type="text"
 					placeholder="Vorname"
+					name="vorname"
 					class="px-2.5 py-1.5 rounded-lg border bg-gray-50"
 					bind:value={vorname}
 					required
@@ -55,6 +57,7 @@
 				<input
 					type="text"
 					placeholder="Nachname"
+					name="nachname"
 					class="px-2.5 py-1.5 rounded-lg border bg-gray-50"
 					bind:value={name}
 					required
@@ -64,8 +67,9 @@
 		<div>
 			<h4>Email</h4>
 			<input
-				type="text"
+				type="email"
 				placeholder="Email"
+				name="email"
 				class="px-2.5 py-1.5 rounded-lg border bg-gray-50"
 				bind:value={email}
 				required
@@ -76,15 +80,16 @@
 			<input
 				type="password"
 				placeholder="********"
+				name="passwort"
 				class="px-2.5 py-1.5 rounded-lg border bg-gray-50"
 				bind:value={passwort}
 				required
 			/>
 		</div>
-		<button class="button" on:click={login}>Registrieren</button>
+		<button class="button" type="submit">Registrieren</button>
 		<div class="flex-row justify-between" style="margin-top: 10px">
 			<button on:click={() => navigate("login")}>Einloggen</button>
 			<a href="/user/passwort_vergessen">Passwort Vergessen?</a>
 		</div>
 	</div>
-</div>
+</form>
--- a/src/modules/KundendatenModule.svelte
+++ b/src/modules/KundendatenModule.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import ProgressBar from "#components/Ausweis/Progressbar.svelte";
 	import HelpLabel from "#components/HelpLabel.svelte";
-	import ZipSearch from "../components/ZIPSearch.svelte";
+	import ZipSearch from "../components/PlzSuche.svelte";
 	import Label from "../components/Label.svelte";
 	import PriceContainer from "#components/Kaufabschluss/PriceContainer.svelte";
 	import type { BedarfsausweisWohnen, Benutzer, Bezahlmethoden, Rechnungen, VerbrauchsausweisGewerbe, VerbrauchsausweisWohnen } from "@ibcornelsen/database/client";
@@ -325,7 +325,7 @@
 									<input type="checkbox" bind:checked={agbAkzeptiert} />
 									<label for="accept-agb"
 										>Ich erkläre mich mit den <a
-											href="https://online-energieausweis.org/agb.php"
+											href="https://online-energieausweis.org/agb"
 											>AGB</a
 										> vom Ingenieur-Büro Cornelsen einverstanden.</label
 									>
@@ -337,12 +337,12 @@
 									/>
 									<label for="accept-datenschutz"
 										>Ich erkläre mich mit der <a
-											href="https://online-energieausweis.org/impressum.php"
+											href="https://online-energieausweis.org/impressum"
 											>Datenschutzerklärung</a
 										>
 										und
 										<a
-											href="https://online-energieausweis.org/agb.php#widerruf"
+											href="https://online-energieausweis.org/agb#widerruf"
 											>Widerrufsbelehrung</a
 										> vom Ingenieur-Büro Cornelsen einverstanden.</label
 									>
--- a/src/modules/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeModule.svelte
+++ b/src/modules/VerbrauchsausweisGewerbe/VerbrauchsausweisGewerbeModule.svelte
@@ -6,33 +6,16 @@
 	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 { buildingTypes } from "./BuildingTypes";
 	import BilderZusatzsysteme from "../../components/Ausweis/BilderZusatzsysteme.svelte";
 	import moment from "moment";
-	import { GebaeudeStammdaten, VerbrauchsausweisGewerbe, Enums } from "@ibcornelsen/database/client";
+	import { Enums } from "@ibcornelsen/database/client";
+	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisGewerbeClient } from "#components/Ausweis/types";

-	export let uid: string | null = null;
-	export let gebaeude: GebaeudeStammdaten = {} as GebaeudeStammdaten;
-	export let ausweis: VerbrauchsausweisGewerbe = {
-		ausweisart: Enums.Ausweisart.VerbrauchsausweisGewerbe
-	} as VerbrauchsausweisGewerbe;
-
-	let additionalHeating: boolean = false;
-	let heatedWaterIncluded: boolean = false;
-	let heatedWaterPortion: number = 18;
-
-	let needsRequirementCertificate: boolean = false;
-
-	$: needsRequirementCertificate =
-		(gebaeude.baujahr_gebaeude[0] < 1978 &&
-			(gebaeude.einheiten || 0) <= 4 &&
-			gebaeude.saniert == false &&
-			(ausweis.ausstellgrund == "Vermietung" ||
-				ausweis.ausstellgrund == "Sonstiges")) ||
-		ausweis.ausstellgrund == "Neubau" ||
-		ausweis.ausstellgrund == "Modernisierung" ||
-		ausweis.ausstellgrund == "Verkauf";
+	export let images: UploadedGebaeudeBild[] = [];
+	export let gebaeude: GebaeudeClient = {} as GebaeudeClient;
+	export let ausweis: VerbrauchsausweisGewerbeClient = {} as VerbrauchsausweisGewerbeClient;

 		function automatischAusfüllen() {
 		gebaeude.baujahr_gebaeude = [1962];
@@ -65,10 +48,11 @@
 		<Progressbar progress={0} />
 	</div>

-	<PerformanceScore bind:ausweis />
+	<PerformanceScore bind:ausweis bind:gebaeude />
 </div>

-<form method="post" action="/verbrauchsausweis/erstellen">
+<!-- TODO: Submit implementieren in externer Datei wenn Verbrauchsausweis Wohnen fertig ist -->
+<form name="ausweis" on:submit={() => {}}>
 	<fieldset
 		class="bg-[rgba(252,234,187,0.2)] border-2 p-4 rounded-lg border-[#ffcc03]"
 	>
@@ -92,7 +76,7 @@

 		<div
 			class="flex flex-col p-4"
-			class:hidden={!needsRequirementCertificate}
+			class:hidden={!false}
 		>
 			<div class="form-group col-md-9">
 				<HelpLabel
@@ -128,13 +112,12 @@
 				</HelpLabel>
 				<div>
 					<input
-						name="IGstrasse"
-						class=" strasse"
+						name="adresse"
 						type="text"
 						autocomplete="off"
 						required
-						data-msg-minlength="min. 5 Zeichen"
-						data-msg-maxlength="max. 40 Zeichen"
+						minlength="5"
+						maxlength="40"
 						bind:value={gebaeude.adresse}
 					/>
 				</div>
@@ -145,7 +128,7 @@
 				<ZipSearch
 					bind:zip={gebaeude.plz}
 					bind:city={gebaeude.ort}
-					name="zip"
+					name="plz"
 				/>
 			</div>

@@ -157,7 +140,7 @@
 				<div>
 					<input
 						name="ort"
-						readonly={true}
+						readonly
 						bind:value={gebaeude.ort}
 						type="text"
 					/>
@@ -178,8 +161,7 @@
 						type="number"
 						required
 						autocomplete="off"
-						data-rule-minlength="2"
-						data-msg-minlength="min. 2 Zeichen"
+						minlength="2"
 						bind:value={gebaeude.flaeche}
 					/>
 				</div>
@@ -194,7 +176,7 @@
 						required
 						bind:value={gebaeude.keller}
 					>
-						<option>Bitte auswählen</option>
+						<option disabled>Bitte auswählen</option>
 						<option value={Enums.Heizungsstatus.NICHT_VORHANDEN}>nicht vorhanden</option>
 						<option value={Enums.Heizungsstatus.UNBEHEIZT}>unbeheizt</option>
 						<option value={Enums.Heizungsstatus.BEHEIZT}>beheizt</option>
@@ -207,7 +189,7 @@
 				<Label>Dachgeschoss *</Label>
 				<div>
 					<select name="dachgeschoss" required>
-						<option>Bitte auswählen</option>
+						<option disabled>Bitte auswählen</option>
 						<option value={Enums.Heizungsstatus.NICHT_VORHANDEN}>nicht vorhanden</option>
 						<option value={Enums.Heizungsstatus.UNBEHEIZT}>unbeheizt</option>
 						<option value={Enums.Heizungsstatus.BEHEIZT}>beheizt</option>
@@ -224,25 +206,182 @@
 		<div class="GRB">
 			<Verbrauch bind:ausweis bind:gebaeude />
 		</div>
+		<hr>
+		<div class="flex flex-row gap-4">
+			<div class="GRB">
+				<div class="flex flex-col gap-4">
+					<div>
+						<HelpLabel title="Gebäudestrom">
+							Bitte geben Sie hier den Gesamtstromverbrauch der betrachteten Zeiträume in kWh ein. Bei dem Stromverbrauch der Heizung ist die Hilfsenergie gemeint, oder der Verbrauch von elektrischen Ergänzungsheizungen ( z.B. raumlufttechnische Anlagen).
+						</HelpLabel>
+					</div>
+					<div class="grid grid-cols-3 gap-4">
+						<div class="flex flex-col gap-2">
+							<div class="flex flex-row items-center gap-4">
+								<span>von</span>
+								<input
+									class="klima"
+									value={moment(ausweis.startdatum)
+										.format("MM.Y")}
+									readonly
+								/>
+							</div>
+							<div class="flex flex-row items-center gap-4">
+								<span>von</span>
+								<input
+									class="klima"
+									value={moment(ausweis.startdatum)
+										.add("1", "years")
+										.format("MM.Y")}
+									readonly
+								/>
+							</div>
+							<div class="flex flex-row items-center gap-4">
+								<span>von</span>
+								<input
+									class="klima"
+									value={moment(ausweis.startdatum)
+										.add("2", "years")
+										.format("MM.Y")}
+									readonly
+								/>
+							</div>
+						</div>
+						<div class="flex flex-col gap-2">
+							<div class="flex flex-row items-center gap-4">
+								<span>bis</span>
+								<input
+									class="klima"
+									value={moment(ausweis.startdatum)
+										.add("1", "years")
+										.format("MM.Y")}
+									readonly
+								/>
+							</div>
+							<div class="flex flex-row items-center gap-4">
+								<span>bis</span>
+								<input
+									class="klima"
+									value={moment(ausweis.startdatum)
+										.add("2", "years")
+										.format("MM.Y")}
+									readonly
+								/>
+							</div>
+							<div class="flex flex-row items-center gap-4">
+								<span>bis</span>
+								<input
+									class="klima"
+									value={moment(ausweis.startdatum)
+										.add("3", "years")
+										.format("MM.Y")}
+									readonly
+								/>
+							</div>
+						</div>
+						<div class="flex flex-col gap-2">
+							<div class="flex flex-row items-center gap-4">
+								<span>Verbrauch</span>
+								<input
+									name="strom_1"
+									type="number"
+									bind:value={ausweis.strom_1}
+									required
+								/>
+							</div>
+							<div class="flex flex-row items-center gap-4">
+								<span>Verbrauch</span>
+								<input
+									name="strom_2"
+									type="number"
+									bind:value={ausweis.strom_2}
+									required
+								/>
+							</div>
+							<div class="flex flex-row items-center gap-4">
+								<span>Verbrauch</span>
+								<input
+									name="strom_3"
+									type="number"
+									bind:value={ausweis.strom_3}
+									required
+								/>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="GRB">
+				<div class="flex flex-col gap-4 w-full">
+					<div>
+						<HelpLabel title="Enthält Stromverbrauch für">
+							Bitte geben Sie hier ein für welche technischen Gebäudekomponeten der Stromverbrauch angefallen ist. Sollte es zusätzliche Stromabnehmer geben die in dem angegebenen Verbrauch enthalten sind, dann setzen Sie den Haken bei Sonstige und benennen diese.
+						</HelpLabel>
+					</div>
+					<div class="flex flex-row gap-4 justify-between">
+						<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="stromverbrauch_enthaelt_heizung"
+									bind:checked={ausweis.stromverbrauch_enthaelt_heizung}
+								/>Heizung</label
+							>
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="stromverbrauch_enthaelt_warmwasser"
+									bind:checked={ausweis.stromverbrauch_enthaelt_warmwasser}
+								/>Warmwasser</label
+							>
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="stromverbrauch_enthaelt_lueftung"
+									bind:checked={ausweis.stromverbrauch_enthaelt_lueftung}
+								/>Lüftung</label
+							>
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="stromverbrauch_enthaelt_beleuchtung"
+									bind:checked={ausweis.stromverbrauch_enthaelt_beleuchtung}
+								/>Beleuchtung</label
+							>
+							<label class="checkbox-inline"
+								><input
+									type="checkbox"
+									name="stromverbrauch_enthaelt_kuehlung"
+									bind:checked={ausweis.stromverbrauch_enthaelt_kuehlung}
+								/>Kühlung</label
+							>
+					</div>
+					<label class="checkbox-inline"
+						>Sonstige:<input
+							type="text"
+							name="stromverbrauch_enthaelt_sonstige"
+							bind:value={ausweis.stromverbrauch_enthaelt_sonstige}
+						/></label
+					>
+				</div>
+			</div>
+		</div>
 		<hr />
 		<div>
 			<div>
 				<div class="GRB">
 					<!-- Anteil WW enthalten -->
-					<div class="flex flex-col">
-						<div class="flex flex-row gap-6">
-							<label class="radio-inline"
-								><input
-									type="checkbox"
-									class="IGwwbool"
-									name="IGwwbool"
-									bind:checked={heatedWaterIncluded}
-								/>Warmwasser im Verbrauch enthalten</label
-							>
-						</div>
+					<div class="flex flex-row items-center gap-6">
+						<label class="radio-inline"
+							><input
+								type="checkbox"
+								name="warmwasser_enthalten"
+								bind:checked={ausweis.warmwasser_enthalten}
+							/>Warmwasser im Heizverbrauch enthalten:*</label
+						>
 					</div>

-					<!-- Warmwasser Antel -->
+					<div class="flex flex-row gap-4">
+						<!-- Warmwasser Antel -->
 					<div class="form-group col-md-2">
 						<HelpLabel title="% Anteil Warmwasser">
 							Wenn bekannt geben Sie den Anteil der
@@ -251,11 +390,11 @@
 						</HelpLabel>

 						<input
-							name="IGwarmwasser"
+							name="anteil_warmwasser_1"
 							maxlength="2"
-							type="text"
-							bind:value={heatedWaterPortion}
-							disabled={!heatedWaterIncluded}
+							type="number"
+							bind:value={ausweis.anteil_warmwasser_1}
+							disabled={!ausweis.warmwasser_enthalten || !ausweis.zusaetzliche_heizquelle}
 							autocomplete="off"
 						/>
 					</div>
@@ -268,13 +407,15 @@
 							von 18% angenommen.
 						</HelpLabel>
 						<input
-							name="IGwarmwasser2"
-							maxlength="3"
-							type="text"
+							name="anteil_warmwasser_2"
+							maxlength="2"
+							type="number"
+							bind:value={ausweis.anteil_warmwasser_2}
+							disabled={!ausweis.warmwasser_enthalten || !ausweis.zusaetzliche_heizquelle}
 							autocomplete="off"
-							disabled={!additionalHeating}
 						/>
 					</div>
+					</div>

 					<!-- Alternative Energieversorgungssyteme -->
 					<div class="form-group col-md-5">
@@ -290,28 +431,32 @@
 							<label class="checkbox-inline"
 								><input
 									type="checkbox"
-									name="IGversorgungssysteme1"
+									name="alternative_heizung"
+									bind:checked={ausweis.alternative_heizung}
 									value="Heizung"
 								/>Heizung</label
 							>
 							<label class="checkbox-inline"
 								><input
 									type="checkbox"
-									name="IGversorgungssysteme2"
+									name="alternative_warmwasser"
+									bind:checked={ausweis.alternative_warmwasser}
 									value="Warmwasser"
 								/>Warmwasser</label
 							>
 							<label class="checkbox-inline"
 								><input
 									type="checkbox"
-									name="IGversorgungssysteme3"
+									name="alternative_lueftung"
+									bind:checked={ausweis.alternative_lueftung}
 									value="Lüftung"
 								/>Lüftung</label
 							>
 							<label class="checkbox-inline"
 								><input
 									type="checkbox"
-									name="IGversorgungssysteme4"
+									name="alternative_kuehlung"
+									bind:checked={ausweis.alternative_kuehlung}
 									value="Kühlung"
 								/>Kühlung</label
 							>
@@ -319,6 +464,57 @@
 					</div>
 				</div>

+				<hr>
+				<div class="GRB">
+					<!-- Anteil WW enthalten -->
+					<div class="flex flex-row items-center gap-6">
+						<label class="radio-inline"
+							><input
+								type="checkbox"
+								name="kuehlung_enthalten"
+								bind:checked={ausweis.kuehlung_enthalten}
+							/>Thermische Kühlung im Heizverbrauch enthalten *</label
+						>
+					</div>
+
+					<!-- Warmwasser Antel -->
+					<div class="flex flex-row gap-4">
+						<div class="form-group col-md-2">
+							<HelpLabel title="% Anteil Warmwasser">
+								Wenn bekannt geben Sie den Anteil der
+								Warmwasser-Versorgung hier ein. Standardmäßig wird
+								ein Anteil von 18% angenommen.
+							</HelpLabel>
+	
+							<input
+								name="anteil_kuehlung_1"
+								maxlength="2"
+								type="number"
+								bind:value={ausweis.anteil_kuehlung_1}
+								disabled={!ausweis.kuehlung_enthalten || !ausweis.zusaetzliche_heizquelle}
+								autocomplete="off"
+							/>
+						</div>
+	
+						<div class="form-group col-md-2">
+							<HelpLabel title="zusätzliche Heizquelle">
+								Wenn bekannt geben Sie den Anteil der
+								Warmwasser-Versorgung von der zusätzlichen
+								Heizquelle hier ein. Standardmäßig wird ein Anteil
+								von 18% angenommen.
+							</HelpLabel>
+							<input
+								name="anteil_kuehlung_2"
+								maxlength="2"
+								type="number"
+								bind:value={ausweis.anteil_kuehlung_2}
+								disabled={!ausweis.kuehlung_enthalten || !ausweis.zusaetzliche_heizquelle}
+								autocomplete="off"
+							/>
+						</div>
+					</div>
+				</div>
+
 				<hr />
 				<div>
 					<Label
@@ -333,9 +529,9 @@
 							>Bitte wählen Sie hier den Gebäudetyp aus.
 						</HelpLabel>
 						<div>
-							<select name="objekt_typ" required>
+							<select name="gebaeudetyp" required>
 								{#each buildingTypes as type}
-									<option value={type}>{type}</option>
+									<option value={type} selected={gebaeude.gebaeudetyp == type}>{type}</option>
 								{/each}
 							</select>
 						</div>
@@ -351,8 +547,8 @@
 							Gebäudeteil 'Wohnen' bzw. Gebäudeteil 'Gewerbe'.</HelpLabel
 						>
 						<div>
-							<select name="objekt_gebaeudeteil" required>
-								<option>Bitte auswählen</option>
+							<select name="gebaeudeteil" required>
+								<option disabled>Bitte auswählen</option>
 								<option value="Gesamtgebäude">
 									Gesamtgebäude</option
 								>
@@ -368,8 +564,8 @@
 							Lüftungsanlage.</HelpLabel
 						>
 						<div>
-							<select name="lueftungskonzept" required>
-								<option> Bitte auswählen</option>
+							<select name="lueftung" required>
+								<option disabled>Bitte auswählen</option>
 								<option value="Fensterlüftung">
 									Fensterlüftung</option
 								>
@@ -396,8 +592,8 @@
 							zusätzlich gekühlt wird.</HelpLabel
 						>
 						<div>
-							<select name="wird_gekuehlt" required>
-								<option>Bitte auswählen</option>
+							<select name="kuehlung" required>
+								<option disabled>Bitte auswählen</option>
 								<option value="1"> vorhanden</option>
 								<option value="0"> nicht vorhanden</option>
 							</select>
@@ -411,7 +607,7 @@
 							Monate Leerstand in 36 Monaten wären dann ca. 11%.</HelpLabel
 						>
 						<div>
-							<input name="leerstand" maxlength="2" type="text" />
+							<input name="leerstand" maxlength="2" type="number" />
 						</div>
 					</div>
 				</div>
@@ -424,11 +620,11 @@
 					>
 				</div>

-				<BilderZusatzsysteme {ausweis} {gebaeude} />
+				<BilderZusatzsysteme {ausweis} {gebaeude} bind:images />

 				<div class="flex flex-row justify-between">
 					<Hilfe />
-					<button formnovalidate>Weiter</button>
+					<button type="submit" class="button">Weiter</button>
 				</div>
 			</div>
 		</div>