BereichLabel zu Bereich geändert und Code gesäubert

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

@@ -4,36 +4,25 @@ 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
 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-end"><Hilfe />
+		<button class="button" type="button" on:click={spaeterWeitermachen}
+			>Später Weitermachen
+		</button>
 	</div>
 
+	<div class="md:justify-self-end"><Hilfe /></div>
 </div>
 
 <div class="mt-2 px-4">
-        <button
-            class="button hidden"
-            on:click={automatischAusfüllen}
-            type="button">Automatisch Ausfüllen
-            </button
-        >
+	<button class="button" on:click={automatischAusfüllen} type="button"
+		>Automatisch Ausfüllen
+	</button>
 </div>

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/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,8 +20,10 @@
 	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
@@ -49,39 +48,41 @@
 				required
 			/>
 			{#if !errorHidden}
-			<div role="alert" class="alert alert-error" in:fade out:fade={{delay: 400}}>
+				<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>
+					<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>
 
-
 <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: MouseEvent) {
+		var collapse = label.nextElementSibling as HTMLDivElement;
 
-function toggleBereich(event){
-
-	var x = event.target.parentNode.parentNode.parentNode;
-	var y = x.nextElementSibling;
-	var z = event.target.innerHTML;
-
-if(z=='-'){
+		if (open) {
 			//y.classList.remove('hidden');
-	y.style.maxHeight = '0px';
-	y.style.overflow = 'hidden';
-	event.target.innerHTML = "+";
-
+			collapse.style.maxHeight = "0px";
+			collapse.style.overflow = "hidden";
 		} else {
 			//y.classList.add('hidden');
-	y.style.maxHeight = '1500px';
-	y.style.overflow = 'visible';
-	event.target.innerHTML = "-";
+			collapse.style.maxHeight = "1500px";
+			collapse.style.overflow = "visible";
 		}
 
+		open = !open;
 	}
-
 </script>
 
-
-
-<div class="bereichs-label">
-
+<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="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="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>
-
-
-
-<style lang="postcss">
-    
-</style>

src/modules/BedarfsausweisWohnen/BedarfsausweisWohnenModule.svelte

@@ -12,13 +12,19 @@
 	import { BitChecker } from "src/lib/BitChecker.js";
 	import { Enums } from "@ibcornelsen/database/client";
 	import { BedarfsausweisWohnenClient, BenutzerClient, UploadedGebaeudeBild } from "#components/Ausweis/types.js";
+	import Bereich from "#components/labels/Bereich.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];
 
@@ -138,15 +144,15 @@
 		</div>
 
 		<hr />
-		<Label>A - Prüfung der Ausweisart</Label>
+		<Bereich bereich="A" title="Prüfung der Ausweisart">
 			<Ausweisart bind:gebaeude
 		bind:gebaeude_aufnahme_allgemein
 		bind:ausweis />
+		</Bereich>
+		
 		<hr />
-		<Label
-			>B - Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Gebäudetyp
-			und Gebäudeteil</Label
-		>
+		<Bereich bereich="B" title="Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Gebäudetyp und Gebäudeteil">
+
 			<div class="GRB">
 				<div>
 					<HelpLabel title="Straße, Hausnummer *"
@@ -264,6 +270,9 @@
 				</div>
 			</div>
 
+		</Bereich>
+		
+
 		<hr />
 		<Label
 			>C - Berechnungshilfe und Tabelle der Hüllflächen, U-Werte und

src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte

@@ -4,6 +4,7 @@
 	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";
@@ -207,114 +208,82 @@
 
 		<!-- 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
-		>
-		<div class="collapseBereich">
-			<AusweisPreviewContainer 
+		<Bereich bereich="I" title="Gebäudebild und Energieausweis PDF Vorschau"
+		><AusweisPreviewContainer 
 		bind:images 
 		bind:ausweis 
-				bind:gebaeude />
-		</div>
-
-
+		bind:gebaeude /></Bereich
+		>
 	</div>
 	<div
 class="w-full px-4 mt-5 grid gap-x-4 gap-y-2

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>