Merge pull request #27 from IBCornelsen/UMBE

workflow test

src/layouts/AusweisLayout.astro

@@ -1,5 +1,6 @@
 ---
 import "../style/global.css";
+import "../style/formular.css";
 import "../../svelte-dialogs.config"
 import Header from "#header/Header.astro";
 import Footer from "#footer/Footer.astro";
@@ -149,25 +150,9 @@ article {
 		text-indent: -9999px;
 	}
 
-	.GRB {
-		@apply border-2 border-[#ffcc03] p-4 flex flex-row rounded-lg justify-between w-full bg-[rgba(252,234,187,0.2)];
-		/* background: linear-gradient(
-			135deg,
-			rgba(252, 234, 187, 1) 0%,
-			rgba(253, 235, 189, 1) 52%,
-			rgba(251, 223, 147, 1) 100%
-		); */
-	}
 
-	.yellow-box {
-		@apply border-2 border-[#ffcc03] p-4 rounded-lg bg-[rgba(252,234,187,0.2)];
-		/* background: linear-gradient(
-			135deg,
-			rgba(252, 234, 187, 1) 0%,
-			rgba(253, 235, 189, 1) 52%,
-			rgba(251, 223, 147, 1) 100%
-		); */
-	}
+
+
 
 	.GRB3 {
 		@apply flex flex-col border-2 border-[#ffcc03] p-4 rounded-lg bg-base-200;

src/modules/Ausweise/ORG_VerbrauchsausweisWohnenModule.svelte

@@ -0,0 +1,858 @@
+<script lang="ts">
+	import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
+	import Progressbar from "#components/Ausweis/Progressbar.svelte";
+	import Hilfe from "#components/Ausweis/Hilfe.svelte";
+	import HelpLabel from "#components/HelpLabel.svelte";
+	import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
+	import Label from "#components/Label.svelte";
+	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
+	import ZipSearch from "#components/PlzSuche.svelte";
+	import moment from "moment";
+	import BilderZusatzsysteme from "#components/Ausweis/BilderZusatzsysteme.svelte";
+	import { RawNotificationWrapper, RawNotification, notifications } from "#components/Notifications/index.js";
+	import { auditHeizungGebaeudeBaujahr } from "#components/Verbrauchsausweis/audits/HeizungGebaeudeBaujahr.js";
+	import { auditHeizungJuengerDreiJahre } from "#components/Verbrauchsausweis/audits/HeizungJuengerDreiJahre.js";
+	import { auditZeitraumAktuell } from "#components/Verbrauchsausweis/audits/ZeitraumAktuell.js";
+	import { auditKlimaFaktoren } from "#components/Verbrauchsausweis/audits/KlimaFaktoren.js";
+	import { auditWohnFlaeche } from "#components/Verbrauchsausweis/audits/WohnFlaeche.js";
+	import { auditWarmWasser } from "#components/Verbrauchsausweis/audits/WarmWasser.js";
+	import { auditLeerStand } from "#components/Verbrauchsausweis/audits/LeerStand.js";
+	import { auditPlzNichtErkannt } from "#components/Verbrauchsausweis/audits/PlzNichtErkannt.js";
+	import { AuditType, hidden } from "#components/Verbrauchsausweis/audits/hidden.js";
+	import { auditBedarfsausweisBenoetigt } from "#components/Verbrauchsausweis/audits/BedarfsausweisBenoetigt.js";
+	import { auditVerbrauchAbweichung } from "#components/Verbrauchsausweis/audits/VerbrauchAbweichung.js";
+	import { auditEndEnergie } from "#components/Verbrauchsausweis/audits/EndEnergie.js";
+	import { auditWohnflaecheGroesserGesamtflaeche } from "#components/Verbrauchsausweis/audits/WohnflaecheGroesserGesamtflaeche.js";
+	import { Enums } from "@ibcornelsen/database/client"
+	import Overlay from "#components/Overlay.svelte";
+	import AusweisGespeichertModule from "./AusweisGespeichertModule.svelte";
+	import { VerbrauchsausweisWohnenClient, BenutzerClient, UploadedGebaeudeBild } from "#components/Ausweis/types.js";
+	import { verbrauchsausweisWohnenSpeichern } from "src/client/lib/verbrauchsausweisWohnenSpeichern.js";
+		
+	// 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 || {};
+	let images: (UploadedGebaeudeBild & { base64?: string })[] = ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten?.gebaeude_bilder || [];
+
+	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;
+		}
+	}
+
+	function automatischAusfüllen() {
+		gebaeude_aufnahme_allgemein.baujahr_gebaeude = [1962];
+		gebaeude_aufnahme_allgemein.baujahr_heizung = [1952];
+		gebaeude_aufnahme_allgemein.saniert = true;
+		gebaeude_aufnahme_allgemein.einheiten = 1;
+		ausweis.ausstellgrund = "Vermietung";
+		ausweis.verbrauch_1 = 15000;
+		ausweis.verbrauch_2 = 14000;
+		ausweis.verbrauch_3 = 16000;
+		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;
+		ausweis.startdatum = moment("01.01.2019").toDate();
+		gebaeude_aufnahme_allgemein.plz = "21039";
+		gebaeude_aufnahme_allgemein.ort = "Hamburg";
+		gebaeude_aufnahme_allgemein.adresse = "Curslacker Deich 170";
+		gebaeude_aufnahme_allgemein.gebaeudeteil = "Gesamtgebäude";
+
+		gebaeude = gebaeude;
+		ausweis = ausweis;
+	}
+
+
+	async function ausweisAbschicken(e: SubmitEvent) {
+		if (e && e.preventDefault) e.preventDefault();
+		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}`);
+			window.location.href = `/kundendaten?uid=${result.uid}`;
+		}
+	}
+
+	let waitOverlayHidden = true;
+	let speichernOverlayHidden = true;
+
+	$: {
+		if (gebaeude_aufnahme_allgemein.saniert 
+			&& gebaeude_aufnahme_allgemein.oberste_geschossdecke_gedaemmt  === undefined
+			&& gebaeude_aufnahme_allgemein.dachgeschoss_gedaemmt === undefined) {
+
+			gebaeude_aufnahme_allgemein.oberste_geschossdecke_gedaemmt = true;
+			gebaeude_aufnahme_allgemein.dachgeschoss_gedaemmt = true;
+		}
+	}
+</script>
+
+<Overlay bind:hidden={speichernOverlayHidden}>
+	<div class="bg-white w-full max-w-screen-sm py-8 px-8">
+		<AusweisGespeichertModule uid={ausweis.uid}></AusweisGespeichertModule>
+	</div>
+</Overlay>
+
+<Overlay bind:hidden={waitOverlayHidden}>
+	<p class="text-white font-semibold text-4xl">
+		Bitte warten sie, ihr Ausweis wird nun erstellt.
+	</p>
+</Overlay>
+
+<div class="flex flex-row gap-8 items-center mb-8">
+	<div class="flex flex-col w-full">
+		<h1>Verbrauchsausweis erstellen - 45€</h1>
+		<Progressbar progress={0} />
+	</div>
+
+	<PerformanceScore
+		bind:ausweis
+		bind:gebaeude_aufnahme_allgemein
+		bind:gebaeude
+	/>
+</div>
+
+<form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
+	<div class="yellow-box">
+		<div class="flex flex-row justify-between">
+			<button class="button" type="button" on:click={spaeterWeitermachen}
+				>Später Weitermachen</button
+			>
+			<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, Kellerund
+			Dachgeschoss</Label
+		>
+
+		<div class="GRB">
+			<!-- Strasse -->
+			<div class="form-group col-md-4">
+				<HelpLabel title="Straße, Hausnummer *">
+					Bitte geben Sie hier die Straße und Hausnummer des Gebäudes
+					ein.
+				</HelpLabel>
+				<div>
+					<input
+						name="adresse"
+						data-test="adresse"
+						type="text"
+						autocomplete="off"
+						required
+						data-msg-minlength="min. 5 Zeichen"
+						data-msg-maxlength="max. 40 Zeichen"
+						bind:value={gebaeude_aufnahme_allgemein.adresse}
+					/>
+				</div>
+			</div>
+
+			<!-- PLZ -->
+			<div class="form-group col-md-4 PLZ">
+				<ZipSearch
+					bind:zip={gebaeude_aufnahme_allgemein.plz}
+					bind:city={gebaeude_aufnahme_allgemein.ort}
+					name="plz"
+				/>
+			</div>
+
+			<div class="form-group col-md-4">
+				<HelpLabel title="Ort *">
+					Ort des Gebäudes wird automatisch ermittelt.
+				</HelpLabel>
+				<div>
+					<input
+						name="ort"
+						data-test="ort"
+						readonly={true}
+						bind:value={gebaeude_aufnahme_allgemein.ort}
+						type="text"
+					/>
+				</div>
+			</div>
+			<!-- Wohnfläche -->
+			<div class="form-group col-md-3">
+				<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="flaeche"
+						data-test="flaeche"
+						maxlength="4"
+						type="number"
+						required
+						autocomplete="off"
+						data-rule-minlength="2"
+						data-msg-minlength="min. 2 Zeichen"
+						bind:value={gebaeude_aufnahme_allgemein.flaeche}
+					/>
+				</div>
+			</div>
+
+			<!-- Keller -->
+			<div class="form-group col-md-3">
+				<Label>Keller *</Label>
+				<div>
+					<select
+						name="keller"
+						data-test="keller"
+						required
+						bind:value={gebaeude_aufnahme_allgemein.keller}
+					>
+						<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
+						>
+					</select>
+				</div>
+			</div>
+
+			<!-- Dachgeschoss -->
+			<div class="form-group col-md-3">
+				<Label>Dachgeschoss *</Label>
+				<div>
+					<select
+						name="dachgeschoss"
+						data-test="dachgeschoss"
+						bind:value={gebaeude_aufnahme_allgemein.dachgeschoss}
+						required
+					>
+						<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
+						>
+					</select>
+				</div>
+			</div>
+
+			<!-- Gesamtfläche -->
+			<div class="form-group col-md-3">
+				<HelpLabel title="Gesamtfläche m²">
+					Bitte geben Sie hier die beheizte Gesamtfläche in m² ein
+					(wenn bekannt). Dabei handelt es sich um die Wohnfläche +
+					weiterer Flächen innerhalb des Gebäudes (z.B. Fläche des
+					beheizten Kellers). Diese Fläche wird dann im Energieausweis
+					als energetische Nutzfläche (An) ausgewiesen.
+				</HelpLabel>
+				<div>
+					<input
+						name="nutzflaeche"
+						data-test="nutzflaeche"
+						maxlength="4"
+						type="number"
+						required
+						autocomplete="off"
+						data-rule-minlength="2"
+						data-msg-minlength="min. 2 Zeichen"
+						bind:value={gebaeude_aufnahme_allgemein.nutzflaeche}
+					/>
+				</div>
+			</div>
+		</div>
+
+		<hr />
+
+		<Label>C - Eingabe von 3 zusammenhängenden Verbrauchsjahren</Label>
+
+		<div class="GRB">
+			<Verbrauch
+				bind:gebaeude
+				bind:gebaeude_aufnahme_allgemein
+				bind:ausweis
+			/>
+		</div>
+
+		<hr />
+
+		<Label
+			>D - Eingabe Warmwasseranteil und Verwendung von alternativen
+			Energieversorgungssystemen</Label
+		>
+
+		<div class="GRB">
+			<!-- Anteil WW enthalten -->
+			<div class="flex flex-col">
+				<div class="flex flex-row gap-4 items-center">
+					<input
+						type="checkbox"
+						class="checkbox"
+						name="warmwasser_enthalten"
+						data-test="warmwasser_enthalten"
+						bind:checked={ausweis.warmwasser_enthalten}
+					/>
+					<Label>Warmwasser im Verbrauch enthalten</Label>
+				</div>
+				<div class="flex flex-row gap-4 items-center">
+					<input
+						type="checkbox"
+						class="checkbox"
+						name="warmwasser_anteil_bekannt"
+						data-test="warmwasser_anteil_bekannt"
+						bind:checked={ausweis.warmwasser_anteil_bekannt}
+						disabled={!ausweis.warmwasser_enthalten}
+					/>
+					<Label>Anteil bekannt</Label>
+				</div>
+			</div>
+
+			<!-- Warmwasser Antel -->
+			<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_warmwasser_1"
+					data-test="anteil_warmwasser_1"
+					maxlength="2"
+					type="number"
+					bind:value={ausweis.anteil_warmwasser_1}
+					disabled={!ausweis.warmwasser_anteil_bekannt ||
+						!ausweis.warmwasser_enthalten}
+					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_warmwasser_2"
+					data-test="anteil_warmwasser_2"
+					maxlength="3"
+					type="number"
+					autocomplete="off"
+					bind:value={ausweis.anteil_warmwasser_2}
+					disabled={!ausweis.zusaetzliche_heizquelle ||
+						!ausweis.warmwasser_anteil_bekannt ||
+						!ausweis.warmwasser_enthalten}
+				/>
+			</div>
+
+			<!-- Alternative Energieversorgungssyteme -->
+			<div class="form-group col-md-5">
+				<HelpLabel
+					title="Alternative Energieversorgungssysteme genutzt für "
+				>
+					Bitte setzen Sie den Haken falls nachhaltige CO2-Effiziente
+					Heizungssysteme vorhanden sind. Das wäre beispielsweise bei
+					Pelletofen, Wärmepumpe, BHKW, Solarsystem, etc. der Fall.
+				</HelpLabel>
+				<div class="flex flex-row gap-4">
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="alternative_heizung"
+							data-test="alternative_heizung"
+							bind:checked={ausweis.alternative_heizung}
+							value="Heizung"
+						/>Heizung</label
+					>
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="alternative_warmwasser"
+							data-test="alternative_warmwasser"
+							bind:checked={ausweis.alternative_warmwasser}
+							value="Warmwasser"
+						/>Warmwasser</label
+					>
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="alternative_lueftung"
+							data-test="alternative_lueftung"
+							bind:checked={ausweis.alternative_lueftung}
+							value="Lüftung"
+						/>Lüftung</label
+					>
+					<label class="checkbox-inline"
+						><input
+							type="checkbox"
+							name="alternative_kuehlung"
+							data-test="alternative_kuehlung"
+							bind:checked={ausweis.alternative_kuehlung}
+							value="Kühlung"
+						/>Kühlung</label
+					>
+				</div>
+			</div>
+		</div>
+
+		<hr />
+
+		<Label
+			>E - Eingabe von Gebäudetyp, Gebäudeteil, Lüftung, Kühlung und
+			Leerstand</Label
+		>
+
+		<div class="GRB">
+			<!-- Gebäudetyp -->
+			<div class="form-group col-md-3">
+				<HelpLabel title="Gebäudetyp *">
+					Bitte wählen Sie hier den Gebäudetyp aus.
+				</HelpLabel>
+				<div>
+					<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"
+							>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>
+
+			<!-- Gebäudeteil -->
+			<div class="form-group col-md-3">
+				<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="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>
+					</select>
+				</div>
+			</div>
+
+			<!-- Lüftung -->
+			<div class="form-group col-md-2">
+				<HelpLabel title="Lüftung durch *">
+					Bitte geben Sie hier ein ob über die Fenster natürlich
+					belüftet wird oder über eine Lüftungsanlage.
+				</HelpLabel>
+				<div>
+					<select
+						name="lueftung"
+						data-test="lueftung"
+						required
+						bind:value={gebaeude_aufnahme_allgemein.lueftung}
+					>
+						<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"
+							>Lüftungsanlage ohne Wärmerückgewinnung</option
+						>
+						<option value="Lüftungsanlage mit Wärmerückgewinnung"
+							>Lüftungsanlage mit Wärmerückgewinnung</option
+						>
+					</select>
+				</div>
+			</div>
+
+			<!-- Lüftung -->
+			<div class="form-group col-md-2">
+				<HelpLabel title="Anlage Kühlung *">
+					Bitte geben Sie an ob das Gebäude im Sommer zusätzlich
+					gekühlt wird.
+				</HelpLabel>
+				<div>
+					<select
+						name="kuehlung"
+						data-test="kuehlung"
+						required
+						bind:value={gebaeude_aufnahme_allgemein.kuehlung}
+					>
+						<option disabled>Bitte auswählen</option>
+						<option value="1">vorhanden</option>
+						<option value="0">nicht vorhanden</option>
+					</select>
+				</div>
+			</div>
+
+			<!-- Leerstand -->
+			<div class="form-group col-md-2">
+				<HelpLabel title="Leerstand in %">
+					Bitte geben Sie hier den Leerstand in % des Gesamtzeitraumes
+					(3 Jahre) ein. Zum Beispiel 4 Monate Leerstand in 36 Monaten
+					wären dann ca. 11%.
+				</HelpLabel>
+				<div>
+					<input
+						name="leerstand"
+						data-test="leerstand"
+						maxlength="2"
+						type="number"
+						bind:value={gebaeude_aufnahme_allgemein.leerstand}
+					/>
+				</div>
+			</div>
+		</div>
+
+		<hr />
+
+		<Label
+			>F - Bitte prüfen Sie hier die Angaben zum Sanierungszustand des
+			Gebäudes</Label
+		>
+		<BilderZusatzsysteme bind:images bind:gebaeude bind:gebaeude_aufnahme_allgemein bind:ausweis />
+		<hr />
+		<div class="flex flex-row justify-between">
+			<Hilfe />
+			<button type="submit" class="button">Weiter</button>
+		</div>
+	</div>
+</form>
+
+<RawNotificationWrapper>
+	{#each Object.entries($notifications) as [uid, notification] (uid)}
+		<RawNotification notification={{ ...notification, uid }}>
+			{@html notification.subtext}
+		</RawNotification>
+	{/each}
+
+	{#if auditBedarfsausweisBenoetigt(ausweis, gebaeude_aufnahme_allgemein)}
+		<RawNotification
+			notification={{
+				message: "Bedarfsausweis benötigt!",
+				timeout: 0,
+				uid: "BEDARFSAUSWEIS",
+				dismissable: false,
+				type: "info",
+			}}
+		>
+			Sie benötigen einen Bedarfsausweis. <a href="/bedarfsausweis"
+				>Bitte führen Sie hier Ihre Eingabe für den Bedarfsausweis fort</a
+			>.
+		</RawNotification>
+	{/if}
+
+	{#await auditPlzNichtErkannt(gebaeude_aufnahme_allgemein) then result}
+		{#if result}
+			<RawNotification
+				notification={{
+					message: "Plausibilitätsprüfung",
+					timeout: 0,
+					uid: "PLZ_NICHT_ERKANNT",
+					dismissable: false,
+					type: "warning",
+				}}
+			>
+				Die Postleitzahl konnte nicht zugeordnet werden. Bitte prüfen
+				Sie die Eingabe. Sollte die Postleitzahl korrekt eingegeben
+				sein, werden wir den Ort händisch zuordnen.
+			</RawNotification>
+		{/if}
+	{/await}
+
+	{#if auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "HEIZUNG_GEBAEUDE_BAUJAHR",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.HEIZUNG_GEBAEUDE_BAUJAHR);
+					gebaeude_aufnahme_allgemein = gebaeude_aufnahme_allgemein;
+				},
+				type: "warning",
+			}}
+		>
+			Sie haben angegeben, dass ihre Heizung vor ihrem Gebäude konstruiert
+			wurde. Sind sie sich sicher, dass das stimmt?
+		</RawNotification>
+	{/if}
+
+	{#if auditHeizungJuengerDreiJahre(gebaeude_aufnahme_allgemein)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "HEIZUNG_JUENGER_DREI_JAHRE",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.HEIZUNG_JUENGER_DREI_JAHRE);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Ihre Heizungsanlage ist jünger als 3 Jahre. Für den
+			Verbrauchsausweis müssen Sie mindestens 3 Verbrauchsjahre eingeben
+			die den aktuellen Stand des Gebäudes abbilden. Ein Verbrauchsausweis
+			ist daher nicht möglich. Bitte klicken Sie
+			<a href="/bedarfsausweis">hier</a> um zum Eingabeformular für den Bedarfsausweis
+			zu gelangen.
+		</RawNotification>
+	{/if}
+
+	{#if auditZeitraumAktuell(ausweis, gebaeude)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "ZEITRAUM_AKTUELL",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.ZEITRAUM_AKTUELL);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Die Verbrauchszeiträume sind nicht aktuell genug. Das Ende des
+			letzten Verbrauchszeitraumes darf nicht mehr als 18 Monate
+			zurückliegen. Ein Verbrauchsausweis ist mit diesen Zeiträumen daher
+			nicht möglich. Bitte klicken Sie <a href="/bedarfsausweis">hier</a> um
+			zum Eingabeformular für den Bedarfsausweis zu gelangen.
+		</RawNotification>
+	{/if}
+
+	{#await auditKlimaFaktoren(ausweis, gebaeude) then result}
+		{#if result}
+			<RawNotification
+				notification={{
+					message: "Plausibilitätsprüfung",
+					timeout: 0,
+					uid: "KLIMA_FAKTOREN",
+					dismissable: true,
+					onUserDismiss: () => {
+						hidden.add(AuditType.KLIMA_FAKTOREN);
+						gebaeude = gebaeude;
+					},
+					type: "warning",
+				}}
+			>
+				Die Verbrauchszeiträume sind zu aktuell und es liegen noch keine
+				Klimafaktoren dazu vor. Bitte verschieben Sie die
+				Verbrauchszeiträume 1 Jahr nach hinten. Wenn das nicht möglich
+				ist, klicken Sie
+				<a href="/bedarfsausweis">hier</a> um zum Eingabeformular für den
+				Bedarfsausweis zu gelangen.
+			</RawNotification>
+		{/if}
+	{/await}
+
+	{#if auditWohnFlaeche(gebaeude_aufnahme_allgemein)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "WOHN_FLAECHE",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.WOHN_FLAECHE);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Die Wohnfläche ist viel zu klein. Bitte überprüfen Sie Ihre Eingabe
+			nochmal und stellen sicher, daß sich Ihre Angaben auf das gesamte
+			Gebäude beziehen.
+		</RawNotification>
+	{/if}
+
+	{#if auditWarmWasser(ausweis)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "WARM_WASSER",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.WARM_WASSER);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Bitte überprüfen Sie nochmal die Höhe des Warmwasseranteils. Dieser
+			scheint nicht ganz im Rahmen zu liegen.
+		</RawNotification>
+	{/if}
+
+	{#if auditLeerStand(gebaeude_aufnahme_allgemein)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "LEER_STAND",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.LEER_STAND);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Bei Leerstand größer als 30% darf kein Verbrauchsausweis ausgestellt
+			werden. Bitte klicken Sie <a href="/bedarfsausweis">hier</a> um zum Eingabeformular
+			für den Bedarfsausweis zu gelangen.
+		</RawNotification>
+	{/if}
+	
+	{#if auditVerbrauchAbweichung(ausweis, gebaeude_aufnahme_allgemein).length > 0}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "VERBRAUCH_ABWEICHUNG",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.VERBRAUCH_ABWEICHUNG);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			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?
+		</RawNotification>
+	{/if}
+
+	{#await auditEndEnergie(ausweis, gebaeude, gebaeude_aufnahme_allgemein) then result}
+		{#if result}
+			<RawNotification
+				notification={{
+					message: "Plausibilitätsprüfung",
+					timeout: 0,
+					uid: "END_ENERGIE",
+					dismissable: true,
+					onUserDismiss: () => {
+						hidden.add(AuditType.END_ENERGIE);
+						gebaeude = gebaeude;
+					},
+					type: "warning",
+				}}
+			>
+				Die Endenergie liegt außerhalb des normalen Rahmens. Bitte
+				nochmal überprüfen. Bei Passivhäusern oder ganz alten
+				unsanierten Gebäuden ist so eine Abweichung durchaus möglich.
+			</RawNotification>
+		{/if}
+	{/await}
+
+	{#if auditWohnflaecheGroesserGesamtflaeche(gebaeude_aufnahme_allgemein)}
+		<RawNotification
+			notification={{
+				message: "Plausibilitätsprüfung",
+				timeout: 0,
+				uid: "WOHNFLAECHE_GROESSER_GESAMTFLAECHE",
+				dismissable: true,
+				onUserDismiss: () => {
+					hidden.add(AuditType.WOHNFLAECHE_GROESSER_GESAMTFLAECHE);
+					gebaeude = gebaeude;
+				},
+				type: "warning",
+			}}
+		>
+			Die Wohnfläche darf nicht größer als die Nutzfläche sein.
+		</RawNotification>
+	{/if}
+</RawNotificationWrapper>
+
+<style>
+	:global(input[type="number"]),
+	:global(input[type="text"]) {
+		@apply input input-bordered py-1.5 px-2 h-auto;
+	}
+
+	:global(input[type="number"]:disabled) {
+		@apply bg-gray-200 border border-gray-300;
+	}
+
+	:global(.linked) {
+		@apply border-2 border-red-400;
+	}
+</style>

src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte

@@ -119,7 +119,7 @@
 	</p>
 </Overlay>
 
-<div class="flex flex-row gap-8 items-center mb-8">
+<!-- <div class="flex flex-row gap-8 items-center mb-8">
 	<div class="flex flex-col w-full">
 		<h1>Verbrauchsausweis erstellen - 45€</h1>
 		<Progressbar progress={0} />
@@ -130,10 +130,12 @@
 		bind:gebaeude_aufnahme_allgemein
 		bind:gebaeude
 	/>
-</div>
+</div>-->
 
 <form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
-	<div class="yellow-box">
+
+	<div id="formular-box">
+		
 		<div class="flex flex-row justify-between">
 			<button class="button" type="button" on:click={spaeterWeitermachen}
 				>Später Weitermachen</button
@@ -307,285 +309,6 @@
 
 		<hr />
 
-		<Label>C - Eingabe von 3 zusammenhängenden Verbrauchsjahren</Label>
-
-		<div class="GRB">
-			<Verbrauch
-				bind:gebaeude
-				bind:gebaeude_aufnahme_allgemein
-				bind:ausweis
-			/>
-		</div>
-
-		<hr />
-
-		<Label
-			>D - Eingabe Warmwasseranteil und Verwendung von alternativen
-			Energieversorgungssystemen</Label
-		>
-
-		<div class="GRB">
-			<!-- Anteil WW enthalten -->
-			<div class="flex flex-col">
-				<div class="flex flex-row gap-4 items-center">
-					<input
-						type="checkbox"
-						class="checkbox"
-						name="warmwasser_enthalten"
-						data-test="warmwasser_enthalten"
-						bind:checked={ausweis.warmwasser_enthalten}
-					/>
-					<Label>Warmwasser im Verbrauch enthalten</Label>
-				</div>
-				<div class="flex flex-row gap-4 items-center">
-					<input
-						type="checkbox"
-						class="checkbox"
-						name="warmwasser_anteil_bekannt"
-						data-test="warmwasser_anteil_bekannt"
-						bind:checked={ausweis.warmwasser_anteil_bekannt}
-						disabled={!ausweis.warmwasser_enthalten}
-					/>
-					<Label>Anteil bekannt</Label>
-				</div>
-			</div>
-
-			<!-- Warmwasser Antel -->
-			<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_warmwasser_1"
-					data-test="anteil_warmwasser_1"
-					maxlength="2"
-					type="number"
-					bind:value={ausweis.anteil_warmwasser_1}
-					disabled={!ausweis.warmwasser_anteil_bekannt ||
-						!ausweis.warmwasser_enthalten}
-					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_warmwasser_2"
-					data-test="anteil_warmwasser_2"
-					maxlength="3"
-					type="number"
-					autocomplete="off"
-					bind:value={ausweis.anteil_warmwasser_2}
-					disabled={!ausweis.zusaetzliche_heizquelle ||
-						!ausweis.warmwasser_anteil_bekannt ||
-						!ausweis.warmwasser_enthalten}
-				/>
-			</div>
-
-			<!-- Alternative Energieversorgungssyteme -->
-			<div class="form-group col-md-5">
-				<HelpLabel
-					title="Alternative Energieversorgungssysteme genutzt für "
-				>
-					Bitte setzen Sie den Haken falls nachhaltige CO2-Effiziente
-					Heizungssysteme vorhanden sind. Das wäre beispielsweise bei
-					Pelletofen, Wärmepumpe, BHKW, Solarsystem, etc. der Fall.
-				</HelpLabel>
-				<div class="flex flex-row gap-4">
-					<label class="checkbox-inline"
-						><input
-							type="checkbox"
-							name="alternative_heizung"
-							data-test="alternative_heizung"
-							bind:checked={ausweis.alternative_heizung}
-							value="Heizung"
-						/>Heizung</label
-					>
-					<label class="checkbox-inline"
-						><input
-							type="checkbox"
-							name="alternative_warmwasser"
-							data-test="alternative_warmwasser"
-							bind:checked={ausweis.alternative_warmwasser}
-							value="Warmwasser"
-						/>Warmwasser</label
-					>
-					<label class="checkbox-inline"
-						><input
-							type="checkbox"
-							name="alternative_lueftung"
-							data-test="alternative_lueftung"
-							bind:checked={ausweis.alternative_lueftung}
-							value="Lüftung"
-						/>Lüftung</label
-					>
-					<label class="checkbox-inline"
-						><input
-							type="checkbox"
-							name="alternative_kuehlung"
-							data-test="alternative_kuehlung"
-							bind:checked={ausweis.alternative_kuehlung}
-							value="Kühlung"
-						/>Kühlung</label
-					>
-				</div>
-			</div>
-		</div>
-
-		<hr />
-
-		<Label
-			>E - Eingabe von Gebäudetyp, Gebäudeteil, Lüftung, Kühlung und
-			Leerstand</Label
-		>
-
-		<div class="GRB">
-			<!-- Gebäudetyp -->
-			<div class="form-group col-md-3">
-				<HelpLabel title="Gebäudetyp *">
-					Bitte wählen Sie hier den Gebäudetyp aus.
-				</HelpLabel>
-				<div>
-					<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"
-							>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>
-
-			<!-- Gebäudeteil -->
-			<div class="form-group col-md-3">
-				<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="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>
-					</select>
-				</div>
-			</div>
-
-			<!-- Lüftung -->
-			<div class="form-group col-md-2">
-				<HelpLabel title="Lüftung durch *">
-					Bitte geben Sie hier ein ob über die Fenster natürlich
-					belüftet wird oder über eine Lüftungsanlage.
-				</HelpLabel>
-				<div>
-					<select
-						name="lueftung"
-						data-test="lueftung"
-						required
-						bind:value={gebaeude_aufnahme_allgemein.lueftung}
-					>
-						<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"
-							>Lüftungsanlage ohne Wärmerückgewinnung</option
-						>
-						<option value="Lüftungsanlage mit Wärmerückgewinnung"
-							>Lüftungsanlage mit Wärmerückgewinnung</option
-						>
-					</select>
-				</div>
-			</div>
-
-			<!-- Lüftung -->
-			<div class="form-group col-md-2">
-				<HelpLabel title="Anlage Kühlung *">
-					Bitte geben Sie an ob das Gebäude im Sommer zusätzlich
-					gekühlt wird.
-				</HelpLabel>
-				<div>
-					<select
-						name="kuehlung"
-						data-test="kuehlung"
-						required
-						bind:value={gebaeude_aufnahme_allgemein.kuehlung}
-					>
-						<option disabled>Bitte auswählen</option>
-						<option value="1">vorhanden</option>
-						<option value="0">nicht vorhanden</option>
-					</select>
-				</div>
-			</div>
-
-			<!-- Leerstand -->
-			<div class="form-group col-md-2">
-				<HelpLabel title="Leerstand in %">
-					Bitte geben Sie hier den Leerstand in % des Gesamtzeitraumes
-					(3 Jahre) ein. Zum Beispiel 4 Monate Leerstand in 36 Monaten
-					wären dann ca. 11%.
-				</HelpLabel>
-				<div>
-					<input
-						name="leerstand"
-						data-test="leerstand"
-						maxlength="2"
-						type="number"
-						bind:value={gebaeude_aufnahme_allgemein.leerstand}
-					/>
-				</div>
-			</div>
-		</div>
-
-		<hr />
-
-		<Label
-			>F - Bitte prüfen Sie hier die Angaben zum Sanierungszustand des
-			Gebäudes</Label
-		>
-		<BilderZusatzsysteme bind:images bind:gebaeude bind:gebaeude_aufnahme_allgemein bind:ausweis />
-		<hr />
-		<div class="flex flex-row justify-between">
-			<Hilfe />
-			<button type="submit" class="button">Weiter</button>
-		</div>
 	</div>
 </form>
 

src/style/formular.css

@@ -0,0 +1,26 @@
+
+
+.Phase_und_Skala{grid-area:phase_und_skala;}
+.Bereich_A{grid-area:a}
+.Bereich_B{grid-area:b}
+
+#formular-box{
+    @apply border-2 border-[#ffcc03] p-4 rounded-lg bg-formular-box;
+    /* background: linear-gradient(
+        135deg,
+        rgba(252, 234, 187, 1) 0%,
+        rgba(253, 235, 189, 1) 52%,
+        rgba(251, 223, 147, 1) 100%
+    ); */
+}
+
+
+.GRB {
+    @apply border-2 border-[#ffcc03] p-4 flex flex-row rounded-lg justify-between w-full bg-[rgba(252,234,187,0.2)];
+    /* background: linear-gradient(
+        135deg,
+        rgba(252, 234, 187, 1) 0%,
+        rgba(253, 235, 189, 1) 52%,
+        rgba(251, 223, 147, 1) 100%
+    ); */
+}

tailwind.config.cjs

@@ -13,6 +13,7 @@ module.exports = {
 			},
 
 			colors: {
+				"formular-box": "rgba(252,234,187,0.2)",
 				"pdf-yellow-bright": "#f3cb00",
 				"pdf-yellow-light": "#fff6ca",
 				"box-heading": 'var(--box-heading)'