Merge pull request #259 from IBCornelsen/dev-moritz

Verbesserungen

src/components/Ausweis/Ausweisart.svelte

@@ -9,22 +9,20 @@
 	import { auditHeizungGebaeudeBaujahr } from "../Verbrauchsausweis/audits/HeizungGebaeudeBaujahr.js";
 	import { addNotification, deleteNotification } from "@ibcornelsen/ui";
 	import TagInput from "../TagInput.svelte";
-	import type {
-		BedarfsausweisWohnen,
-		VerbrauchsausweisGewerbe,
-	} from "@ibcornelsen/database/client";
 	import { Enums } from "@ibcornelsen/database/client";
 	import {
+	BedarfsausweisWohnenClient,
 		GebaeudeAufnahmeClient,
 		GebaeudeClient,
+		VerbrauchsausweisGewerbeClient,
 		VerbrauchsausweisWohnenClient,
 	} from "./types.js";
 
 	export let gebaeude: GebaeudeClient;
 	export let ausweis:
 		| VerbrauchsausweisWohnenClient
-		| VerbrauchsausweisGewerbe
-		| BedarfsausweisWohnen;
+		| VerbrauchsausweisGewerbeClient
+		| BedarfsausweisWohnenClient;
 	export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
 </script>
 

src/components/Ausweis/ButtonSpaeterHilfe.svelte

@@ -1,39 +1,28 @@
 <script lang="ts">
-import Hilfe from "#components/Ausweis/Hilfe.svelte";
-export let spaeterWeitermachen;
-export let automatischAusfüllen;
+	import Hilfe from "#components/Ausweis/Hilfe.svelte";
+	export let spaeterWeitermachen;
+	export let automatischAusfüllen;
 </script>
 
-
 <!-- Später weitermachen / Hilfe anfordern -->
 
-
 <div
-class="w-full mt-5 grid gap-x-4 gap-y-2 px-4
+	class="w-full mt-5 grid gap-x-4 gap-y-2 px-4
 grid-cols-1
 xs:grid-cols-2
 "
 >
+	<div class="md:justify-self-start">
+		<button class="button" type="button" on:click={spaeterWeitermachen}
+			>Später Weitermachen
+		</button>
+	</div>
 
-    <div class="md:justify-self-start">
-        <button
-            class="button"
-            type="button"
-            on:click={spaeterWeitermachen}>Später Weitermachen
-        </button
-        >
-    </div>
-
-    <div class="md:justify-self-end"><Hilfe />
-    </div>
-    
+	<div class="md:justify-self-end"><Hilfe /></div>
 </div>
-   
+
 <div class="mt-2 px-4">
-        <button
-            class="button"
-            on:click={automatischAusfüllen}
-            type="button">Automatisch Ausfüllen
-            </button
-        >
-</div>
+	<button class="button" on:click={automatischAusfüllen} type="button"
+		>Automatisch Ausfüllen
+	</button>
+</div>

src/components/Ausweis/Verbrauch.svelte

@@ -14,6 +14,7 @@
 		GebaeudeClient,
 		VerbrauchsausweisWohnenClient,
 	} from "./types.js";
+	import { addNotification } from "#components/Notifications/shared.js";
 
 	export let gebaeude: GebaeudeClient;
 	export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
@@ -81,6 +82,22 @@
 		}
 	}
 
+	$: {
+		console.log(month, year);
+		
+		if ((availableDates.filter(date => date.month === month && date.year === year).length === 0) && typeof month === "number" && typeof year === "number") {
+			addNotification({
+				message: "Monat nicht verfügbar.",
+				subtext: "Der ausgewählte Monat ist in diesem Jahr nicht verfügbar, bitte wählen sie einen neuen Start Monat.",
+				dismissable: true,
+				type: "warning",
+				timeout: 0,
+				uid: "monat_nicht_verfuegbar",
+				selector: "select[name='energieverbrauch_zeitraum_monat']"
+			})
+		}
+	}
+
 	$: abweichung = auditVerbrauchAbweichung(ausweis, gebaeude);
 </script>
 
@@ -147,7 +164,6 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 				bind:value={month}
 				required
 			>
-				<option disabled>Monat</option>
 				{#if year !== null}
 					{#each availableDates.filter((date) => date.year == year) as date}
 						<option value={date.month}
@@ -182,7 +198,6 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 				bind:value={year}
 				required
 			>
-				<option disabled>Jahr</option>
 				{#each Array.from(availableDates.reduce((a, c) => {
 						a.add(c.year);
 						return a;

src/components/Dashboard/DashboardSidebar.svelte

@@ -109,7 +109,7 @@
 					{#if Object.keys($notifications).length > 0}
 						<span class="indicator-item badge badge-accent text-xs">{Object.keys($notifications).length}</span>
 					{/if}
-					<button tabindex="0" class="btn btn-square btn-ghost hover:bg-base-200">
+					<button tabindex="0" class="button btn-square btn-ghost hover:bg-base-200">
 						<Bell size={24} />
 					</button>
 				</div>
@@ -119,7 +119,7 @@
 			</div>
 			
 			<a href="/dashboard/einstellungen"
-				class="btn btn-square btn-ghost hover:bg-base-200"
+				class="button btn-square btn-ghost hover:bg-base-200"
 			>
 				<Gear size={24} />
 			</a>
@@ -129,7 +129,7 @@
 	<a
 		href="/dashboard/einstellungen"
 		use:ripple={rippleOptions}
-		class="btn btn-ghost no-animation focus:shadow-none justify-start py-4 h-auto hover:bg-base-200 px-8 rounded-none w-full flex flex-row gap-4"
+		class="button btn-ghost no-animation focus:shadow-none justify-start py-4 h-auto hover:bg-base-200 px-8 rounded-none w-full flex flex-row gap-4"
 	>
 		<div class="avatar">
 			<div class="w-12 rounded-full">
@@ -173,9 +173,9 @@
 		font-family: Poppins !important;
 	}
 
-	.button-tab {
+	/* .button-tab {
 		@apply btn btn-primary btn-ghost rounded-none px-8 justify-start outline-0 gap-4 items-center text-base font-normal text-base-content no-animation;
-	}
+	} */
 
 	.button-tab:hover {
 		@apply bg-base-200 outline-0;

src/components/Notifications/RawNotificationWrapper.svelte

@@ -1,3 +1,5 @@
+<script lang="ts"></script>
+
 <div class="fixed right-8 bottom-8 max-w-[400px] flex flex-col gap-4 z-50">
 	<slot></slot>
 </div>

src/components/Notifications/shared.ts

@@ -20,6 +20,7 @@ export interface Notification {
 	type: "error" | "success" | "info" | "warning";
 	onUserDismiss: () => any;
 	uid?: string;
+	selector?: string;
 }
 
 export function updateNotification(uid: string, updater: Partial<Notification>) {

src/components/design/header/Header.astro

@@ -1,5 +1,5 @@
 ---
-import HeaderLogin from "#header/headerLogin.svelte";
+import HeaderLogin from "#header/HeaderLogin.svelte";
 ---
 
 <header id="header">
@@ -58,7 +58,7 @@ lg:px-0 lg:gap-x-4">
 </div>
 
 <div class="w-full justify-self-center">
-	<HeaderLogin  />
+	<HeaderLogin client:load  />
 </div>
 
 </div>

src/components/design/header/HeaderLogin.svelte

@@ -1,15 +1,12 @@
 <script lang="ts">
-
 	import { loginClient } from "#lib/login";
-	import CrossCircled from "radix-svelte-icons/src/lib/icons/CrossCircled.svelte";
+	import { CrossCircled } from "radix-svelte-icons";
 	import { fade } from "svelte/transition";
 
 	let email: string;
 	let passwort: string;
 
 	async function login(e: SubmitEvent) {
-		console.log(e);
-		
 		e.preventDefault();
 		const response = await loginClient(email, passwort);
 
@@ -23,12 +20,14 @@
 	let errorHidden = true;
 </script>
 
-<div id="card-login" class="rounded-none lg:rounded-lg lg:card lg:box bg-black/10 md:bg-black/5 lg:ring-2 border-t-2 lg:border-none border-gray-500/50 ring-gray-500/50 xs:px-2 md:px-4 py-2" >
-	
+<div
+	id="card-login"
+	class="rounded-none lg:rounded-lg lg:card lg:box bg-black/10 md:bg-black/5 lg:ring-2 border-t-2 lg:border-none border-gray-500/50 ring-gray-500/50 xs:px-2 md:px-4 py-2"
+>
 	<form on:submit={login}>
 		<div class="grid grid-cols-[1fr] xs:grid-cols-[2fr_2fr_1fr] gap-2">
 			<input
-				class="my-1 rounded-md px-2 py-1  w-full"
+				class="my-1 rounded-md px-2 py-1 w-full"
 				type="text"
 				placeholder="nutzer@email.com"
 				autocomplete="off"
@@ -38,7 +37,7 @@
 				required
 			/>
 			<input
-				class="my-1 rounded-md px-2 py-1  w-full"
+				class="my-1 rounded-md px-2 py-1 w-full"
 				type="password"
 				minlength="8"
 				placeholder="********"
@@ -49,39 +48,41 @@
 				required
 			/>
 			{#if !errorHidden}
-			<div role="alert" class="alert alert-error" in:fade out:fade={{delay: 400}}>
-				<CrossCircled size={24} />
-				<span class="font-semibold">Das hat leider nicht geklappt, haben sie ihr Passwort und ihre Email Adresse richtig eingegeben?</span>
-			</div>
+				<div
+					role="alert"
+					class="alert alert-error"
+					in:fade
+					out:fade={{ delay: 400 }}
+				>
+					<CrossCircled size={24} />
+					<span class="font-semibold"
+						>Das hat leider nicht geklappt, haben sie ihr Passwort
+						und ihre Email Adresse richtig eingegeben?</span
+					>
+				</div>
 			{/if}
 
 			<button class="button self-center" type="submit">login</button>
-		
 		</div>
 
-
-
-		<div id="passwort-vergessen" class="grid grid-cols-1 lg:grid-cols-[3fr_2fr] gap-2">
-		
-
+		<div
+			id="passwort-vergessen"
+			class="grid grid-cols-1 lg:grid-cols-[3fr_2fr] gap-2"
+		>
 			<div class="w-full text-left self-center">
 				<a
 					class="justify-self-start text-sm font-bold no-underline hover:text-primary"
 					href="/auth/signup">Registrieren</a
-				> /
+				>
+				/
 				<a
 					class="justify-self-start text-sm font-bold no-underline hover:text-primary"
 					href="/auth/passwort-vergessen">Passwort vergessen</a
 				>
 			</div>
-
 		</div>
 	</form>
-
-	</div>
-
+</div>
 
 <style lang="postcss">
-
-
 </style>

src/components/labels/Bereich.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	export let bereich: string;
+	export let title: string;
+	let open: boolean = true;
+	let collapse: HTMLDivElement;
+</script>
+
+<div class="bereichs-label">
+	<div>
+		<div
+			class="grid grid-cols-[max-content_1fr_40px] items-center justify-items-start gap-2"
+		>
+			<div class="formular-abschnitt1">{bereich}</div>
+			<div class="formular-abschnitt2">{title}</div>
+			<div
+				class="justify-self-center self-center cursor-pointer text-[2rem] ring-1 ring-secondary px-4 rounded-sm select-none"
+				on:click={() => {
+					open = !open
+				}}
+			>
+				{#if open}
+					-
+				{:else}
+					+
+				{/if}
+			</div>
+		</div>
+	</div>
+</div>
+<div class="collapseBereich" bind:this={collapse} class:max-h-0={!open} class:overflow-hidden={!open} class:max-h-[1500px]={open} class:overflow-visible={open}>
+	<slot></slot>
+</div>

src/components/labels/BereichLabel.svelte

@@ -1,46 +1,42 @@
 <script lang="ts">
 	export let bereich: string;
+	let label: HTMLDivElement;
+	let open: boolean = true;
 
-	
-function toggleBereich(event){
+	function toggleBereich(event: MouseEvent) {
+		var collapse = label.nextElementSibling as HTMLDivElement;
 
-	var x = event.target.parentNode.parentNode.parentNode;
-	var y = x.nextElementSibling;
-	var z = event.target.innerHTML;
-
-if(z=='-'){
-	//y.classList.remove('hidden');
-	y.style.maxHeight = '0px';
-	y.style.overflow = 'hidden';
-	event.target.innerHTML = "+";
-
-}else{
-	//y.classList.add('hidden');
-	y.style.maxHeight = '1500px';
-	y.style.overflow = 'visible';
-	event.target.innerHTML = "-";
-}
-
-}
+		if (open) {
+			//y.classList.remove('hidden');
+			collapse.style.maxHeight = "0px";
+			collapse.style.overflow = "hidden";
+		} else {
+			//y.classList.add('hidden');
+			collapse.style.maxHeight = "1500px";
+			collapse.style.overflow = "visible";
+		}
 
+		open = !open;
+	}
 </script>
 
-
-
-<div class="bereichs-label">
-
-<div>
-	<div class="grid grid-cols-[max-content_1fr_40px] items-center justify-items-start gap-2">
-	<div class="formular-abschnitt1">{bereich}</div>
-	<div class="formular-abschnitt2"><slot></slot></div>
-	<div id="BereichToggle" class="justify-self-center self-center cursor-pointer text-[2rem] ring-1 ring-secondary px-4 rounded-sm" on:click={() => toggleBereich(event)}>-</div>
+<div class="bereichs-label" bind:this={label}>
+	<div>
+		<div
+			class="grid grid-cols-[max-content_1fr_40px] items-center justify-items-start gap-2"
+		>
+			<div class="formular-abschnitt1">{bereich}</div>
+			<div class="formular-abschnitt2"><slot></slot></div>
+			<div
+				class="justify-self-center self-center cursor-pointer text-[2rem] ring-1 ring-secondary px-4 rounded-sm select-none"
+				on:click={toggleBereich}
+			>
+				{#if open}
+					-
+				{:else}
+					+
+				{/if}
+			</div>
+		</div>
 	</div>
-</div>
-
-</div>
-
-
-
-<style lang="postcss">
-    
-</style>
+</div>

src/modules/BedarfsausweisWohnen/BedarfsausweisWohnenModule.svelte

@@ -11,14 +11,23 @@
 	import moment from "moment";
 	import { BitChecker } from "src/lib/BitChecker.js";
 	import { Enums } from "@ibcornelsen/database/client";
-	import { BedarfsausweisWohnenClient, BenutzerClient, UploadedGebaeudeBild } from "#components/Ausweis/types.js";
+	import {
+		BedarfsausweisWohnenClient,
+		BenutzerClient,
+		UploadedGebaeudeBild,
+	} from "#components/Ausweis/types.js";
+	import Bereich from "#components/labels/Bereich.svelte";
+	import ButtonSpaeterHilfe from "#components/Ausweis/ButtonSpaeterHilfe.svelte";
 
 	export let ausweis: BedarfsausweisWohnenClient;
 	export let user: BenutzerClient = {} as BenutzerClient;
 
 	let gebaeude_aufnahme_allgemein = ausweis.gebaeude_aufnahme_allgemein || {};
-	let gebaeude = ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {};
-	let images: (UploadedGebaeudeBild & { base64?: string })[] = ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten?.gebaeude_bilder || [];
+	let gebaeude =
+		ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {};
+	let images: (UploadedGebaeudeBild & { base64?: string })[] =
+		ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten
+			?.gebaeude_bilder || [];
 
 	let daemmungsBreiten = [0, 0.02, 0.05, 0.08, 0.12, 0.16, 0.2, 0.3, 0.4];
 
@@ -40,6 +49,29 @@
 		"Fenster mit U-Wert 1": 1,
 	};
 
+	async function spaeterWeitermachen() {
+		// const result = await verbrauchsausweisWohnenSpeichern(
+		// 	ausweis,
+		// 	gebaeude,
+		// 	gebaeude_aufnahme_allgemein,
+		// 	images,
+		// 	user
+		// );
+		// if (result !== null) {
+		// 	// Falls der Nutzer zurück navigiert, sollte er wieder auf seinen Vorgang kommen.
+		// 	// Sonst müsste er alles neu eingeben...
+		// 	ausweis.uid = result.uid;
+		// 	gebaeude.uid = result.gebaeude_uid;
+		// 	gebaeude_aufnahme_allgemein.uid = result.gebaeude_aufnahme_uid;
+		// 	window.history.pushState(
+		// 		{},
+		// 		"",
+		// 		`${location.pathname}?uid=${result.uid}`
+		// 	);
+		// 	speichernOverlayHidden = false;
+		// }
+	}
+
 	const arrayRange = (start: number, stop: number, step: number) =>
 		Array.from(
 			{ length: (stop - start) / step + 1 },
@@ -112,157 +144,160 @@
 	}
 </script>
 
-<div class="flex flex-row gap-8 items-center mb-8">
-	<div class="flex flex-col w-full">
-		<h1>Bedarfsausweis erstellen - 75€</h1>
+<div class="grid grid-cols-2 gap-x-8 px-4 items-center">
+	<div class="w-full rounded-lg border-gray/35 border-0 relative px-4">
 		<Progressbar progress={0} />
 	</div>
 
-	<PerformanceScore {ausweis} {gebaeude} {gebaeude_aufnahme_allgemein} />
+	<div class="w-full rounded-lg border-gray/35 border-2 relative px-4">
+		<PerformanceScore
+			bind:ausweis
+			bind:gebaeude_aufnahme_allgemein
+			bind:gebaeude
+		/>
+	</div>
 </div>
 
+<ButtonSpaeterHilfe {automatischAusfüllen} {spaeterWeitermachen} />
+
 <form action="FORM/transfer/VA_1to2" enctype="multipart/form-data">
-	<fieldset
-		class="bg-[rgba(252,234,187,0.2)] border-2 p-4 rounded-lg border-[#ffcc03]"
-	>
-		<div class="flex flex-row justify-between">
-			<a class="button" href="/speichern">Später Weitermachen</a>
-			<div class="flex gap-4">
-				<Hilfe />
-				<button
-					on:click={automatischAusfüllen}
-					type="button"
-					class="button">Automatisch Ausfüllen</button
-				>
-			</div>
-		</div>
-
-		<hr />
-		<Label>A - Prüfung der Ausweisart</Label>
-		<Ausweisart bind:gebaeude
-		bind:gebaeude_aufnahme_allgemein
-		bind:ausweis />
-		<hr />
-		<Label
-			>B - Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Gebäudetyp
-			und Gebäudeteil</Label
-		>
-		<div class="GRB">
-			<div>
-				<HelpLabel title="Straße, Hausnummer *"
-					>Bitte geben Sie hier die Straße und Hausnummer des Gebäudes
-					ein.</HelpLabel
-				>
-				<div>
-					<input
-						name="objekt_strasse"
-						class=" strasse"
-						type="text"
-						bind:value={ausweis.objekt_strasse}
-						required
-					/>
-				</div>
-			</div>
-
-			<ZipSearch
-				bind:zip={ausweis.objekt_plz}
-				bind:city={ausweis.objekt_ort}
-				name="zip"
+	<div id="formular-box" class="formular-boxen ring-0">
+		<Bereich bereich="A" title="Prüfung der Ausweisart">
+			<Ausweisart
+				bind:gebaeude
+				bind:gebaeude_aufnahme_allgemein
+				bind:ausweis
 			/>
+		</Bereich>
 
-			<div>
-				<HelpLabel title="Ort *"
-					>Ort des Gebäudes wird automatisch ermittelt.</HelpLabel
-				>
+		<hr />
+		<Bereich
+			bereich="B"
+			title="Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Gebäudetyp und Gebäudeteil"
+		>
+			<div class="GRB">
 				<div>
-					<input
-						name="objekt_ort"
-						type="text"
-						bind:value={ausweis.objekt_ort}
-					/>
-				</div>
-			</div>
-
-			<div>
-				<HelpLabel title="Wohnfläche m² *"
-					>Bitte geben Sie hier die beheizte Wohnfläche in m² ein.
-					Dabei handelt es sich um die Wohnfläche abzüglich
-					vorhandener Flächen die sich außerhalb des Gebäudes
-					befinden. (Balkone, Terassen,etc.).</HelpLabel
-				>
-				<div>
-					<input
-						name="wohnflaeche"
-						type="number"
-						required
-						bind:value={ausweis.wohnflaeche}
-					/>
-				</div>
-			</div>
-
-			<div>
-				<HelpLabel title="Gebäudetyp *"
-					>Bitte wählen Sie hier den Gebäudetyp aus.
-				</HelpLabel>
-				<div>
-					<select
-						name="objekt_typ"
-						bind:value={ausweis.objekt_typ}
-						required
+					<HelpLabel title="Straße, Hausnummer *"
+						>Bitte geben Sie hier die Straße und Hausnummer des
+						Gebäudes ein.</HelpLabel
 					>
-						<option>Bitte auswählen</option>
-						<option value="Einfamilienhaus">
-							Einfamilienhaus</option
-						>
-						<option value="Freistehendes Einfamilienhaus">
-							Freistehendes Einfamilienhaus</option
-						>
-						<option value="Freistehendes Zweifamilienhaus">
-							Freistehendes Zweifamilienhaus</option
-						>
-						<option value="Doppelhaushälfte">
-							Doppelhaushälfte</option
-						>
-						<option value="Reihenendhaus"> Reihenendhaus</option>
-						<option value="Reihenmittelhaus">
-							Reihenmittelhaus</option
-						>
-						<option value="Mehrfamilienhaus">
-							Mehrfamilienhaus</option
-						>
-						<option value="Wohn- und Geschäftshaus">
-							Wohn- und Geschäftshaus</option
-						>
-						<option value="Atrium-Bungalow">
-							Atrium-Bungalow</option
-						>
-						<option value="Winkelbungalow"> Winkelbungalow</option>
-					</select>
+					<div>
+						<input
+							name="objekt_strasse"
+							class=" strasse"
+							type="text"
+							bind:value={ausweis.objekt_strasse}
+							required
+						/>
+					</div>
 				</div>
-			</div>
 
-			<div>
-				<HelpLabel title="Gebäudeteil *"
-					>Bitte geben Sie hier den Gebäudeteil ein. In den meisten
-					Fällen handelt es sich um das Gesamtgebäude. Sollte es sich
-					allerdings um ein Gebäude mit mehr als 10% Gewerbeanteil
-					handeln, so sollten 2 Ausweise erstellt werden. In diesem
-					Fall wählen Sie Gebäudeteil 'Wohnen' bzw. Gebäudeteil
-					'Gewerbe'.</HelpLabel
-				>
+				<ZipSearch
+					bind:zip={ausweis.objekt_plz}
+					bind:city={ausweis.objekt_ort}
+					name="zip"
+				/>
+
 				<div>
-					<select
-						name="objekt_gebaeudeteil"
-						bind:value={ausweis.objekt_gebaeudeteil}
-						required
+					<HelpLabel title="Ort *"
+						>Ort des Gebäudes wird automatisch ermittelt.</HelpLabel
 					>
-						<option>Bitte auswählen</option>
-						<option value="Gesamtgebäude"> Gesamtgebäude</option>
-						<option value="Wohnen"> Wohnen</option>
-					</select>
+					<div>
+						<input
+							name="objekt_ort"
+							type="text"
+							bind:value={ausweis.objekt_ort}
+						/>
+					</div>
+				</div>
+
+				<div>
+					<HelpLabel title="Wohnfläche m² *"
+						>Bitte geben Sie hier die beheizte Wohnfläche in m² ein.
+						Dabei handelt es sich um die Wohnfläche abzüglich
+						vorhandener Flächen die sich außerhalb des Gebäudes
+						befinden. (Balkone, Terassen,etc.).</HelpLabel
+					>
+					<div>
+						<input
+							name="wohnflaeche"
+							type="number"
+							required
+							bind:value={ausweis.wohnflaeche}
+						/>
+					</div>
+				</div>
+
+				<div>
+					<HelpLabel title="Gebäudetyp *"
+						>Bitte wählen Sie hier den Gebäudetyp aus.
+					</HelpLabel>
+					<div>
+						<select
+							name="objekt_typ"
+							bind:value={ausweis.objekt_typ}
+							required
+						>
+							<option>Bitte auswählen</option>
+							<option value="Einfamilienhaus">
+								Einfamilienhaus</option
+							>
+							<option value="Freistehendes Einfamilienhaus">
+								Freistehendes Einfamilienhaus</option
+							>
+							<option value="Freistehendes Zweifamilienhaus">
+								Freistehendes Zweifamilienhaus</option
+							>
+							<option value="Doppelhaushälfte">
+								Doppelhaushälfte</option
+							>
+							<option value="Reihenendhaus">
+								Reihenendhaus</option
+							>
+							<option value="Reihenmittelhaus">
+								Reihenmittelhaus</option
+							>
+							<option value="Mehrfamilienhaus">
+								Mehrfamilienhaus</option
+							>
+							<option value="Wohn- und Geschäftshaus">
+								Wohn- und Geschäftshaus</option
+							>
+							<option value="Atrium-Bungalow">
+								Atrium-Bungalow</option
+							>
+							<option value="Winkelbungalow">
+								Winkelbungalow</option
+							>
+						</select>
+					</div>
+				</div>
+
+				<div>
+					<HelpLabel title="Gebäudeteil *"
+						>Bitte geben Sie hier den Gebäudeteil ein. In den
+						meisten Fällen handelt es sich um das Gesamtgebäude.
+						Sollte es sich allerdings um ein Gebäude mit mehr als
+						10% Gewerbeanteil handeln, so sollten 2 Ausweise
+						erstellt werden. In diesem Fall wählen Sie Gebäudeteil
+						'Wohnen' bzw. Gebäudeteil 'Gewerbe'.</HelpLabel
+					>
+					<div>
+						<select
+							name="objekt_gebaeudeteil"
+							bind:value={ausweis.objekt_gebaeudeteil}
+							required
+						>
+							<option>Bitte auswählen</option>
+							<option value="Gesamtgebäude">
+								Gesamtgebäude</option
+							>
+							<option value="Wohnen"> Wohnen</option>
+						</select>
+					</div>
 				</div>
 			</div>
-		</div>
+		</Bereich>
 
 		<hr />
 		<Label
@@ -874,9 +909,17 @@
 							required
 						>
 							<option> 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>
+							<option
+								value={Enums.Heizungsstatus.NICHT_VORHANDEN}
+							>
+								nicht vorhanden</option
+							>
+							<option value={Enums.Heizungsstatus.UNBEHEIZT}>
+								unbeheizt</option
+							>
+							<option value={Enums.Heizungsstatus.BEHEIZT}>
+								beheizt</option
+							>
 						</select>
 					</div>
 				</div>
@@ -1304,10 +1347,15 @@
 			>G - Bitte prüfen Sie hier die Angaben zum Sanierungszustand des
 			Gebäudes</Label
 		>
-		<BilderZusatzsysteme {ausweis} {gebaeude} {gebaeude_aufnahme_allgemein} {images} />
+		<BilderZusatzsysteme
+			{ausweis}
+			{gebaeude}
+			{gebaeude_aufnahme_allgemein}
+			{images}
+		/>
 		<hr />
 		<div class="flex flex-row justify-between">
 			<button class="button">Weiter</button>
 		</div>
-	</fieldset>
+	</div>
 </form>

src/modules/VerbrauchsausweisWohnen/AusweisWeiter.svelte

@@ -98,7 +98,6 @@
 					gebaeude
 				})
 			})
-			// TODO: Ticket mit Fehldermeldung abschicken.
 		}
 
 		addNotification({

src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte

@@ -3,12 +3,11 @@
 	import Progressbar from "#components/Ausweis/Progressbar.svelte";
 	import Hilfe from "#components/Ausweis/Hilfe.svelte";
 
-	import BereichLabel from "#labels/BereichLabel.svelte";
+	import Bereich from "#labels/Bereich.svelte";
 	//import HelpLabel from "#labels/HelpLabel.svelte";
 	//import Inputlabel from "#labels/InputLabel.svelte";
 	//import Label from "#components/Label.svelte";
 
-	
 	import ButtonSpaeterHilfe from "#components/Ausweis/ButtonSpaeterHilfe.svelte";
 	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
 	import GebaeudeDaten from "#components/Ausweis/GebaeudeDaten.svelte";
@@ -24,11 +23,12 @@
 	import AusweisPreviewContainer from "#components/Ausweis/AusweisPreviewContainer.svelte";
 
 	//import ZipSearch from "#components/PlzSuche.svelte";
-	
+
 	import {
 		RawNotificationWrapper,
 		RawNotification,
 		notifications,
+		deleteNotification,
 	} from "#components/Notifications/index.js";
 	import { auditHeizungGebaeudeBaujahr } from "#components/Verbrauchsausweis/audits/HeizungGebaeudeBaujahr.js";
 	import { auditHeizungJuengerDreiJahre } from "#components/Verbrauchsausweis/audits/HeizungJuengerDreiJahre.js";
@@ -57,14 +57,13 @@
 	import { verbrauchsausweisWohnenSpeichern } from "src/client/lib/verbrauchsausweisWohnenSpeichern.js";
 	import AusweisWeiter from "./AusweisWeiter.svelte";
 	import { Enums } from "@ibcornelsen/database/client";
+	import { OpenInNewWindow } from "radix-svelte-icons";
 
 	// TODO: Vom Server sollte ein volles Objekt kommen, dass alle Subobjekte enthält, weil es sonst zu Problemen führen kann
 	// wenn gebaeude_aufnahme_allgemein oder gebaeude_stammdaten nicht existiert...
 	export let ausweis: VerbrauchsausweisWohnenClient;
 	export let user: BenutzerClient = {} as BenutzerClient;
 
-
-
 	let gebaeude_aufnahme_allgemein = ausweis.gebaeude_aufnahme_allgemein || {};
 	let gebaeude =
 		ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {};
@@ -101,11 +100,13 @@
 		gebaeude_aufnahme_allgemein.baujahr_heizung = [1952];
 		gebaeude_aufnahme_allgemein.saniert = true;
 		gebaeude_aufnahme_allgemein.einheiten = 1;
-		gebaeude_aufnahme_allgemein.gebaeudetyp = "Einfamilienhaus"
-		gebaeude_aufnahme_allgemein.keller = Enums.Heizungsstatus.NICHT_VORHANDEN
-		gebaeude_aufnahme_allgemein.dachgeschoss = Enums.Heizungsstatus.NICHT_VORHANDEN
-		gebaeude_aufnahme_allgemein.lueftung = "Fensterlüftung"
-		gebaeude_aufnahme_allgemein.kuehlung = "1"
+		gebaeude_aufnahme_allgemein.gebaeudetyp = "Einfamilienhaus";
+		gebaeude_aufnahme_allgemein.keller =
+			Enums.Heizungsstatus.NICHT_VORHANDEN;
+		gebaeude_aufnahme_allgemein.dachgeschoss =
+			Enums.Heizungsstatus.NICHT_VORHANDEN;
+		gebaeude_aufnahme_allgemein.lueftung = "Fensterlüftung";
+		gebaeude_aufnahme_allgemein.kuehlung = "1";
 		ausweis.ausstellgrund = "Vermietung";
 		ausweis.verbrauch_1 = 15000;
 		ausweis.verbrauch_2 = 14000;
@@ -113,7 +114,7 @@
 		gebaeude_aufnahme_allgemein.flaeche = 152;
 		gebaeude_aufnahme_allgemein.nutzflaeche = 172;
 		ausweis.keller_beheizt = true;
-		
+
 		gebaeude_aufnahme_allgemein.brennstoff_1 = "Erdgas H";
 		ausweis.einheit_1 = "kWh";
 		ausweis.anteil_warmwasser_1 = 18;
@@ -168,8 +169,6 @@
 	}
 </script>
 
-
-
 <Overlay bind:hidden={speichernOverlayHidden}>
 	<div class="bg-white w-full max-w-screen-sm py-8 px-8">
 		<AusweisGespeichertModule uid={ausweis.uid}></AusweisGespeichertModule>
@@ -184,158 +183,155 @@
 
 <h1>Verbrauchsausweis erstellen - 45€</h1>
 
-
-
 <div class="grid grid-cols-2 gap-x-8 px-4 items-center">
 	<div class="w-full rounded-lg border-gray/35 border-0 relative px-4">
 		<Progressbar progress={0} />
 	</div>
 
 	<div class="w-full rounded-lg border-gray/35 border-2 relative px-4">
-	<PerformanceScore
-		bind:ausweis
-		bind:gebaeude_aufnahme_allgemein
-		bind:gebaeude
-	/>
+		<PerformanceScore
+			bind:ausweis
+			bind:gebaeude_aufnahme_allgemein
+			bind:gebaeude
+		/>
 	</div>
 </div>
 
-<ButtonSpaeterHilfe {automatischAusfüllen} {spaeterWeitermachen}/>
+<ButtonSpaeterHilfe {automatischAusfüllen} {spaeterWeitermachen} />
 
 <form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
 	<div id="formular-box" class="formular-boxen ring-0">
-
 		<!-- A Prüfung der Ausweisart -->
 
-		<BereichLabel bereich="A">Prüfung der Ausweisart</BereichLabel>
-		<div class="collapseBereich">
+		<Bereich bereich="A" title="Prüfung der Ausweisart">
 			<Ausweisart
 				bind:gebaeude
 				bind:gebaeude_aufnahme_allgemein
 				bind:ausweis
 			/>
-		</div>
+		</Bereich>
 
 		<!-- B Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss -->
 
-		<BereichLabel bereich="B"
-			>Eingabe&nbsp;der&nbsp;Gebäudeadresse -
-			Angaben&nbsp;zu&nbsp;Wohnfläche, Keller&nbsp;und&nbsp;Dachgeschoss</BereichLabel
+		<Bereich
+			bereich="B"
+			title="Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss"
+			><GebaeudeDaten bind:gebaeude_aufnahme_allgemein /></Bereich
 		>
-		<div class="collapseBereich">
-			<GebaeudeDaten bind:gebaeude_aufnahme_allgemein />
-		</div>
 
 		<!-- C Eingabe von 3 zusammenhängenden Verbrauchsjahren -->
 
-		<BereichLabel bereich="C"
-			>Eingabe von 3&nbsp;zusammenhängenden Verbrauchsjahren</BereichLabel
-		>
-		<div class="collapseBereich">
-			<Verbrauch
+		<Bereich
+			bereich="C"
+			title="Eingabe von 3 zusammenhängenden Verbrauchsjahren"
+			><Verbrauch
 				bind:gebaeude
 				bind:gebaeude_aufnahme_allgemein
 				bind:ausweis
-			/>
-		</div>		
+			/></Bereich
+		>
 
 		<!-- D Eingabe Warmwasseranteil und Verwendung von alternativen Energieversorgungssystemen -->
 
-		<BereichLabel bereich="D"
-			>Eingabe&nbsp;Warmwasseranteil
-			und&nbsp;Verwendung&nbsp;von&nbsp;alternativen
-			Energieversorgungssystemen</BereichLabel
+		<Bereich
+			bereich="D"
+			title="Eingabe Warmwasseranteil und Verwendung von alternativen Energieversorgungssystemen"
+			><Warmwasseranteil bind:ausweis /></Bereich
 		>
-		<div class="collapseBereich">
-			<Warmwasseranteil bind:ausweis />
-		</div>
 
 		<!-- E Eingabe von Gebäudeteil, Lüftung, Kühlung und Leerstand -->
 
-		<BereichLabel bereich="E"
-			>Eingabe&nbsp;von&nbsp;Gebäudeteil,
-			Lüftung,&nbsp;Kühlung&nbsp;und&nbsp;Leerstand</BereichLabel
+		<Bereich
+			bereich="E"
+			title="Eingabe von Gebäudeteil, Lüftung, Kühlung und Leerstand"
+			><LueftungundLeerstand bind:gebaeude_aufnahme_allgemein /></Bereich
 		>
-		<div class="collapseBereich">
-			<LueftungundLeerstand bind:gebaeude_aufnahme_allgemein />
-		</div>
 
 		<!-- F Angaben zur Heizungsanlage -->
 
-		<BereichLabel bereich="F"
-			>Angaben zur Heizunganlage</BereichLabel
-		>
-		<div class="collapseBereich">
-			<SanierungszustandHeizungsanlage
+		<Bereich bereich="F" title="Angaben zur Heizunganlage"
+			><SanierungszustandHeizungsanlage
 				bind:images
 				bind:gebaeude
 				bind:gebaeude_aufnahme_allgemein
 				bind:ausweis
-			/>
-		</div>
+			/></Bereich
+		>
 
 		<!-- G Angaben zur Fenster, Dachfenster und Türen -->
 
-		<BereichLabel bereich="G"
-		>Angaben zu Fenster, Dachfenster und Türen</BereichLabel
-		>
-		<div class="collapseBereich">
-			<SanierungszustandFensterTueren
+		<Bereich bereich="G" title="Angaben zu Fenster, Dachfenster und Türen"
+			><SanierungszustandFensterTueren
 				bind:images
 				bind:gebaeude
 				bind:gebaeude_aufnahme_allgemein
 				bind:ausweis
-			/>
-		</div>
-
+			/></Bereich
+		>
 		<!-- H Angaben zur Wärmedammung -->
 
-		<BereichLabel bereich="H"
-		>Angaben zur Wärmedämmung</BereichLabel
-		>
-		<div class="collapseBereich">
-			<SanierungszustandWaermedammung
+		<Bereich bereich="H" title="Angaben zur Wärmedämmung"
+			><SanierungszustandWaermedammung
 				bind:images
 				bind:gebaeude
 				bind:gebaeude_aufnahme_allgemein
 				bind:ausweis
-			/>
-		</div>
+			/></Bereich
+		>
 
 		<!-- I Gebäudebild und Energieausweis PDF Vorschau  -->
 
-		<BereichLabel bereich="I"
-		>Gebäudebild und Energieausweis PDF Vorschau</BereichLabel
+		<Bereich bereich="I" title="Gebäudebild und Energieausweis PDF Vorschau"
+			><AusweisPreviewContainer
+				bind:images
+				bind:ausweis
+				bind:gebaeude
+			/></Bereich
 		>
-		<div class="collapseBereich">
-			<AusweisPreviewContainer 
-				bind:images 
-				bind:ausweis 
-				bind:gebaeude />
-		</div>
-
-
 	</div>
 	<div
-class="w-full px-4 mt-5 grid gap-x-4 gap-y-2
+		class="w-full px-4 mt-5 grid gap-x-4 gap-y-2
 grid-cols-1
 xs:grid-cols-2"
->
+	>
+		<div class="md:justify-self-start">
+			<AusweisWeiter
+				bind:ausweis
+				bind:images
+				bind:user
+				bind:gebaeude
+				bind:gebaeude_aufnahme_allgemein
+			></AusweisWeiter>
+		</div>
 
-<div class="md:justify-self-start">
-	<AusweisWeiter bind:ausweis bind:images bind:user bind:gebaeude bind:gebaeude_aufnahme_allgemein></AusweisWeiter>
-	
-</div>
-
-<div class="md:justify-self-end"><Hilfe />
-</div>
-</div>
+		<div class="md:justify-self-end"><Hilfe /></div>
+	</div>
 </form>
 
 <RawNotificationWrapper>
 	{#each Object.entries($notifications) as [uid, notification] (uid)}
 		<RawNotification notification={{ ...notification, uid }}>
 			{@html notification.subtext}
+			{#if notification.selector}
+			<button on:click={() => {
+				const element = document.querySelector(notification.selector);
+
+				element?.classList.add("bg-red-300")
+
+				element?.scrollIntoView({
+					behavior: "smooth",
+					block: "center",
+					inline: "center"
+				})
+
+				element.focus()
+				deleteNotification(notification.uid)
+
+				setTimeout(() => {
+					element?.classList.remove("bg-red-300")
+				}, 3000)
+			}} class="px-4 py-2 border rounded-lg mt-2 flex flex-row text-base gap-2 font-bold" title="Anzeigen"><OpenInNewWindow size={22}></OpenInNewWindow> Anzeigen</button>
+			{/if}
 		</RawNotification>
 	{/each}
 
@@ -520,7 +516,7 @@ xs:grid-cols-2"
 			für den Bedarfsausweis zu gelangen.
 		</RawNotification>
 	{/if}
-	
+
 	{#if auditVerbrauchAbweichung(ausweis, gebaeude_aufnahme_allgemein).length > 0}
 		<RawNotification
 			notification={{
@@ -537,10 +533,12 @@ xs:grid-cols-2"
 		>
 			Die Abweichung der Verbräuche zwischen Zeitraum {auditVerbrauchAbweichung(
 				ausweis,
-				gebaeude_aufnahme_allgemein,
-			)[0]} und {auditVerbrauchAbweichung(ausweis, gebaeude_aufnahme_allgemein)[1]} beträgt mehr
-			als 30% und sie haben keinen Leerstand angegeben. Sind sie sich sicher,
-			dass das stimmt?
+				gebaeude_aufnahme_allgemein
+			)[0]} und {auditVerbrauchAbweichung(
+				ausweis,
+				gebaeude_aufnahme_allgemein
+			)[1]} beträgt mehr als 30% und sie haben keinen Leerstand angegeben.
+			Sind sie sich sicher, dass das stimmt?
 		</RawNotification>
 	{/if}
 

src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule_V01.svelte

@@ -146,7 +146,7 @@ xs:grid-cols-2
 
 	</div>
 
-	<div class="mt-2"><button class="button hidden" on:click={automatischAusfüllen} type="button" >Automatisch Ausfüllen</button></div>
+	<div class="mt-2"><button class="button" on:click={automatischAusfüllen} type="button" >Automatisch Ausfüllen</button></div>
 		
 		<hr />
 

src/pages/energieausweis-erstellen/bedarfsausweis-wohngebaeude/index.astro

@@ -1,7 +1,7 @@
 ---
 
 import AusweisLayout from "#layouts/AusweisLayout.astro";
-import BedarfsausweisContent from "#modules/BedarfsausweisWohnen/BedarfsausweisContent.svelte";
+import BedarfsausweisWohnenModule from "#modules/BedarfsausweisWohnen/BedarfsausweisWohnenModule.svelte";
 import { BedarfsausweisWohnenClient } from "#components/Ausweis/types";
 import { createCaller } from "#lib/caller";
 
@@ -31,5 +31,5 @@ if (uid) {
 
 ---
 <AusweisLayout title="Bedarfsausweis erstellen | IBCornelsen">
-	<BedarfsausweisContent client:load ausweis={ausweis}></BedarfsausweisContent>
+	<BedarfsausweisWohnenModule client:load ausweis={ausweis}></BedarfsausweisWohnenModule>
 </AusweisLayout>