Merge pull request #245 from IBCornelsen/UMBE

.

src/components/Ausweis/AusweisPreviewContainer.svelte

@@ -11,7 +11,7 @@
 		GebaeudeClient,
 		UploadedGebaeudeBild,
 		VerbrauchsausweisWohnenClient,
-	} from "./types";
+	} from "./types.js";
 
 	export let ausweis: VerbrauchsausweisWohnenClient;
 	export let gebaeude: GebaeudeClient;
@@ -20,7 +20,7 @@
 
 <div class="grid grid-cols-2 gap-x-6 mt-6">
 	
-	<div class="box mb-0">
+	<div class="box card mb-0">
 
 		
 			<div class="form-group col-md-12 nopad">
@@ -35,6 +35,7 @@
 				name={"gebaeude_image"}
 				kategorie={Enums.BilderKategorie.Gebaeude}
 				max={1}
+				min={1}
 				bind:gebaeude
 				bind:images
 				bind:ausweis
@@ -42,7 +43,7 @@
 		
 	</div>
 
-	<div class="box mb-0">
+	<div class="box card mb-0">
 		<HelpLabel title="Ansichtsausweis & Datenblatt :">
 			Hier gehts zu Ihrem Ansichtsausweis und Datenblatt als PDF.
 		</HelpLabel>

src/components/Ausweis/Ausweisart.svelte

@@ -44,6 +44,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
 			class="rounded-e-none"
 			name="ausstellgrund"
 			placeholder="Anlass"
+			bind:value={ausweis.ausstellgrund}
 			required
 		>
 			<option disabled selected value={false}>Bitte auswählen</option>

src/components/Ausweis/BilderZusatzsysteme.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-import HelpLabel from "#labels/HelpLabel.svelte";
+	import HelpLabel from "#labels/HelpLabel.svelte";
-import Inputlabel from "#labels/InputLabel.svelte";
+	import Inputlabel from "#labels/InputLabel.svelte";
 
 	import HeizungImage from "./HeizungImage.svelte";
 	import AusweisPreviewContainer from "./AusweisPreviewContainer.svelte";
@@ -10,22 +10,23 @@ import Inputlabel from "#labels/InputLabel.svelte";
 	//import Label from "../Label.svelte";
 
 	import {
-	GebaeudeAufnahmeClient,
+		GebaeudeAufnahmeClient,
 		GebaeudeClient,
 		UploadedGebaeudeBild,
 		VerbrauchsausweisWohnenClient,
 	} from "./types.js";
-    import { boolean } from "astro:schema";
+	import { boolean } from "astro:schema";
-		import SanierungsOption from "#components/Ausweis/SanierungsOption.svelte"
+	import SanierungsOption from "#components/Ausweis/SanierungsOption.svelte";
 
 	export let gebaeude: GebaeudeClient;
 	export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
-	export let ausweis: VerbrauchsausweisWohnenClient
+	export let ausweis: VerbrauchsausweisWohnenClient;
 	export let images: UploadedGebaeudeBild[];
-
 </script>
 
-<div id="sanierungszustand" class="bereich-box grid 
+<div
+	id="sanierungszustand"
+	class="bereich-box grid
 grid-cols-1 gap-x-4 gap-y-2
 
 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
@@ -33,6 +34,7 @@ md:grid-cols-2 md:gap-x-6 md:gap-y-8
 
 xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
 2xl:grid-cols-3 2xl:gap-x-8 2xl:gap-y-2
+
 ">
 
 <SanierungsOption label="Zentral/Etage" name="zentralheizung" help="Bitte anklicken wenn die Heizwärme <b>zentral erzeugt</b> und von dort in die Räume verteilt wird. Gasthermen und Etagenheizungen in der Wohnung gehören auch dazu." value="ZH" bind:checked={gebaeude_aufnahme_allgemein.zentralheizung}></SanierungsOption>
@@ -47,14 +49,11 @@ xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
 <SanierungsOption label="Heizungsrohre gedämmt" name="heizungsrohre_gedaemmt" help="Gemeint sind die sichtbaren Rohre des Verteilsystems Heizung. Gedämmte Rohre sind an den <b>dunklen Ummantelungen</b> (Manschetten) zu erkennen.ext" value="HRGD" bind:checked={gebaeude_aufnahme_allgemein.heizungsrohre_gedaemmt}></SanierungsOption>
 <SanierungsOption label="Zirkulation" name="zirkulation" help="Kreislauf von Heizungs- oder Warmwasser <b>innerhalb eines Leitungssystems</b>, um eine gleichmäßige Wärmeverteilung sicherzustellen." value="ZK" bind:checked={gebaeude_aufnahme_allgemein.zirkulation}></SanierungsOption>
 <SanierungsOption label="Photovoltaik auf dem Dach" name="photovoltaik" help="Direkte Umwandlung von Sonnenlicht in <b>elektrische Energie</b> mittels Solarzellen, die den photoelektrischen Effekt nutzen." value="PV" bind:checked={gebaeude_aufnahme_allgemein.photovotaik}></SanierungsOption>
+
 </div>
 
 <HeizungImage bind:images bind:ausweis bind:gebaeude />
 
-<style lang="postcss">
-
-</style>
-
 <!--
 	<HelpLabel title="Heizungsanlage (bitte immer zutreffendes ankreuzen) *">
 		Wir benötigen diese Angaben um den allgemeinen Modernisierungsstand
@@ -286,3 +285,5 @@ xl:grid-cols-2 xl:gap-x-8 xl:gap-y-8
 
 -->
 
+<style lang="postcss">
+</style>

src/components/Ausweis/ButtonSpaeterHilfe.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
 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
+class="w-full mt-5 grid gap-x-4 gap-y-2 px-4
 grid-cols-1
 xs:grid-cols-2
 "
@@ -26,9 +29,9 @@ xs:grid-cols-2
     
 </div>
    
-<div class="mt-2">
+<div class="mt-2 px-4">
         <button
-            class="button"
+            class="button hidden"
             on:click={automatischAusfüllen}
             type="button">Automatisch Ausfüllen
             </button

src/components/Ausweis/DaemmungImage.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import ImageGrid from "../ImageGrid.svelte";;
 	import { Enums, type BedarfsausweisWohnen, type VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
-	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./types";
+	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./types.js";
 
 	export let images: UploadedGebaeudeBild[] = [];
 	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
@@ -59,6 +59,6 @@
 			Energieausweis!<br />
 			<strong>Bitte laden Sie hier mind. 2 Bilder hoch:</strong>
 		</p>
-		<ImageGrid max={4} name={"daemmung_image"} kategorie={Enums.BilderKategorie.Daemmung} bind:images bind:ausweis bind:gebaeude></ImageGrid>
+		<ImageGrid max={4} min={2} name={"daemmung_image"} kategorie={Enums.BilderKategorie.Daemmung} bind:images bind:ausweis bind:gebaeude></ImageGrid>
 	</div>
 </div>

src/components/Ausweis/FensterImage.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import ImageGrid from "../ImageGrid.svelte";;
 	import { Enums, type BedarfsausweisWohnen, type VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
-	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./types";
+	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./types.js";
 
 	export let images: UploadedGebaeudeBild[] = [];
 	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
@@ -55,6 +55,6 @@
 			Energieausweis!<br />
 			<strong>Bitte laden Sie hier mind. 1 Bild hoch:</strong>
 		</p>
-		<ImageGrid max={4} name={"fenster_image"} kategorie={Enums.BilderKategorie.Fenster} bind:images bind:ausweis bind:gebaeude></ImageGrid>
+		<ImageGrid max={4} min={1} name={"fenster_image"} kategorie={Enums.BilderKategorie.Fenster} bind:images bind:ausweis bind:gebaeude></ImageGrid>
 	</div>
 </div>

src/components/Ausweis/HeizungImage.svelte

@@ -51,6 +51,6 @@
 			Ihrem Energieausweis!<br />
 			<strong>Bitte laden Sie hier mind. 1 Bild hoch:</strong>
 		</p>
-		<ImageGrid name={"heizung_image"} kategorie={Enums.BilderKategorie.Heizung} max={4} bind:gebaeude bind:images bind:ausweis />
+		<ImageGrid name={"heizung_image"} kategorie={Enums.BilderKategorie.Heizung} max={4} min={1} bind:gebaeude bind:images bind:ausweis />
 	</div>
 </div>

src/components/Ausweis/PerformanceScore.svelte

@@ -79,11 +79,11 @@
 	}
 </script>
 
-<div class="w-full rounded-lg border-border-gray/35 border-4 relative p-2">
+
-	<img src="/images/SKALA-910.png" alt="Energieeffizienz Skala" />
+	<img class="" src="/images/formular/SKALA-910.png" alt="Energieeffizienz Skala" />
 	<ThickArrowDown
 		size={28}
-		class="fill-base-content absolute top-1 transition-left duration-1000 ease-in-out"
+		class="fill-base-content absolute top-0 transition-left duration-1000 ease-in-out"
 		style="left: {translation_1}%; transform: translateX({centerValueBetweenBoundaries(
 			translation_1,
 			50,
@@ -94,7 +94,7 @@
 	/>
 	<ThickArrowUp
 		size={28}
-		class="fill-base-content absolute bottom-1 transition-left duration-1000 ease-in-out"
+		class="fill-base-content absolute bottom-0 transition-left duration-1000 ease-in-out"
 		style="left: {translation_2}%; transform: translateX({centerValueBetweenBoundaries(
 			translation_2,
 			50,
@@ -103,4 +103,4 @@
 			100
 		)}%)"
 	/>
-</div>
+

src/components/Ausweis/Progressbar.svelte

@@ -2,7 +2,7 @@
 	export let progress: number = 0;
 </script>
 
-<div class="flex flex-col relative">
+
 	<div class="progress-section">
 		<div class="w-full bg-gray-100 absolute h-3 rounded-lg">
 			<div class="bg-green-600 left-0 h-3 absolute" style={`width: ${progress}%;`}></div>
@@ -13,11 +13,11 @@
 	</div>
 
 	<div class="flex flex-row justify-between">
-		<p>Gebäudedaten</p>
+		<div>Gebäudedaten</div>
-		<p>Prüfung</p>
+		<div>Prüfung</div>
-		<p>Kaufabschluss</p>
+		<div>Kaufabschluss</div>
 	</div>
-</div>
+
 
 <style>
 	.progress-section {

src/components/Ausweis/Verbrauch.svelte

@@ -1,15 +1,19 @@
 <script lang="ts">
-    import HelpLabel from "#labels/HelpLabel.svelte";
+	import HelpLabel from "#labels/HelpLabel.svelte";
-    import Inputlabel from "#labels/InputLabel.svelte";
+	import Inputlabel from "#labels/InputLabel.svelte";
 	import Verbrauchslabel from "#labels/VerbrauchsLabel.svelte";
 	import VerbrauchsHelpLabel from "#labels/VerbrauchsHelpLabel.svelte";
-	
+
 	import Label from "../Label.svelte";
 
 	import moment from "moment";
 	import fuelList from "./brennstoffListe.js";
 	import { auditVerbrauchAbweichung } from "../Verbrauchsausweis/audits/VerbrauchAbweichung.js";
-	import { GebaeudeAufnahmeClient, GebaeudeClient, VerbrauchsausweisWohnenClient } from "./types.js";
+	import {
+		GebaeudeAufnahmeClient,
+		GebaeudeClient,
+		VerbrauchsausweisWohnenClient,
+	} from "./types.js";
 
 	export let gebaeude: GebaeudeClient;
 	export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
@@ -38,9 +42,15 @@
 		"Dezember",
 	];
 
-	const startDate = moment(ausweis.gebaeude_aufnahme_allgemein.erstellungsdatum || Date.now()).subtract(4, "years").subtract(6, "months");
+	const startDate = moment(
-	const endDate = moment(ausweis.gebaeude_aufnahme_allgemein.erstellungsdatum || Date.now()).subtract(3, "years");
+		ausweis.gebaeude_aufnahme_allgemein.erstellungsdatum || Date.now()
-	
+	)
+		.subtract(4, "years")
+		.subtract(6, "months");
+	const endDate = moment(
+		ausweis.gebaeude_aufnahme_allgemein.erstellungsdatum || Date.now()
+	).subtract(3, "years");
+
 	for (let m = moment(startDate); m.isBefore(endDate); m.add(1, "month")) {
 		availableDates.push({
 			year: m.year(),
@@ -54,7 +64,6 @@
 		fuelMap[fuel[0]] = fuelMap[fuel[0]] || [];
 		fuelMap[fuel[0]].push(fuel[1]);
 	}
-	
 
 	let month = ausweis.startdatum?.getMonth() || null;
 	let year = ausweis.startdatum?.getFullYear() || null;
@@ -63,451 +72,500 @@
 		if (typeof month === "number" && typeof year === "number") {
 			// Wir addieren einfach 2 Tage auf das Datum, falls der Nutzer außerhalb Deutschlands und in einer anderen Zeitzone ist.
 			// NOTE: Das ist eine grauenvolle Lösung aber alle anderen funktionieren irgendwie nicht...
-			ausweis.startdatum = moment().set("month", month).set("year", year).startOf("month").add(2, "days").toDate();
+			ausweis.startdatum = moment()
+				.set("month", month)
+				.set("year", year)
+				.startOf("month")
+				.add(2, "days")
+				.toDate();
 		}
 	}
 
 	$: abweichung = auditVerbrauchAbweichung(ausweis, gebaeude);
-
-
 </script>
 
-
+<div
-
+	id="verbrauch"
-
+	class="bereich-box grid
-<div id="verbrauch" class="bereich-box grid 
 grid-cols-1 gap-x-4 gap-y-8
 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-8
 xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
-">
+"
+>
+	<!-- primäre Heizquellen -->
 
-<!-- primäre Heizquellen -->
+	<div class="input-standard order-1 md:order-1 xl:order-1">
+		<Inputlabel title="Heizquellen"></Inputlabel>
 
-<div class="input-standard order-1 md:order-1 xl:order-1">
+		<div class="input-checkboxen">
-	<Inputlabel title="Heizquellen"></Inputlabel>
+			<div
-
+				class="grid grid-cols-[40px_max-content] items-center justify-items-start"
-<div class="input-checkboxen">
-
-	<div class="grid grid-cols-[40px_max-content] items-center justify-items-start">
-		<input
-			id="primaere_heizquelle"
-			type="checkbox"
-			class="checkbox"
-			name="primaere_heizquelle"
-			checked="checked"
-			onclick="return false"
-		/>
-		<label for="primaere_heizquelle" >primäre Heizquelle</label>
-	</div>
-
-	
-	<div class="grid grid-cols-[40px_max-content] items-center justify-items-start">
-		{#if !ausweis.zusaetzliche_heizquelle}
-		<input
-			id="zusaetzliche_heizquelle_1"
-			type="checkbox"
-			class="checkbox"
-			name="zusaetzliche_heizquelle_1"
-			bind:checked={ausweis.zusaetzliche_heizquelle}
-		/>
-	    <label for="zusaetzliche_heizquelle_1" class="cursor-pointer" on:click={() => labelClick(event)}>zusätzliche Heizquelle</label>
-		{/if}
-	</div>
-
-</div>
-
-<div class="help-label">
-	<HelpLabel>
-		TEXT FEHLT
-	</HelpLabel>
-</div>
-
-</div>
-
-<!-- Zeitraum 1 -->
-
-<div class="grid grid-cols-2 gap-x-4 order-2 md:order-2 xl:order-2">
-
-	<div class="input-standard">
-		<Inputlabel title="Start-Monat *"></Inputlabel>
-	
-		<select
-		name="energieverbrauch_zeitraum_monat"
-		class="rounded-tr-none rounded-br-none w-full m-0"
-		bind:value={month}
-		required
-		>
-		<option disabled>Monat</option>
-		{#if year !== null}
-			{#each availableDates.filter(date => date.year == year) as date}
-				<option value={date.month}>{monthNames[date.month]}</option>
-			{/each}
-		{:else}
-			{#each Array.from(availableDates.reduce((a,c) => {
-				a.add(c.month);
-				return a;
-			}, new Set())) as month}
-				<option value={month}>{monthNames[month]}</option>
-			{/each}
-		{/if}
-	</select>
-	
-	<div class="help-label">
-		<HelpLabel>
-			TEXT FEHLT
-		</HelpLabel>
-	</div>
-	
-	</div>
-	
-	<div class="input-standard">
-		<Inputlabel title="Start-Jahr *"></Inputlabel>
-	
-	<select
-	name="energieverbrauch_zeitraum_jahr"
-	class="rounded-tl-none rounded-bl-none w-full m-0"
-	bind:value={year}
-	required
-	>
-	<option disabled>Jahr</option>
-	{#each Array.from(availableDates.reduce((a,c) => {
-		a.add(c.year);
-		return a;
-	}, new Set())) as year}
-		<option value={year}>{year}</option>
-	{/each}
-	</select>
-	
-			<div class="help-label">
-				<HelpLabel>
-					TEXT FEHLT
-				</HelpLabel>
-			</div>
-	
-	</div>
-	
-	</div>
-
-<!-- primäre Brennstoff und Einheiten * -->
-
-<div class="grid grid-cols-2 gap-x-4 order-3 md:order-3 xl:order-3">
-
-	<div class="input-standard">
-	    <Inputlabel title="primär Brennstoff *"></Inputlabel>
-	
-	    <select 
-			class="rounded-e-none"
-			name="brennstoff_1" 
-			bind:value={gebaeude_aufnahme_allgemein.brennstoff_1}
-			required
 			>
-			<option disabled selected value={false}>Bitte auswählen</option>
+				<input
-			{#each Object.keys(fuelMap) as fuel}
+					id="primaere_heizquelle"
-				<option value={fuel}>{fuel}</option>
+					type="checkbox"
-			{/each}
+					class="checkbox"
-		</select>
+					name="primaere_heizquelle"
-
+					checked={true}
-	            <div class="help-label">
+				/>
-	                <HelpLabel>
+				<label for="primaere_heizquelle">primäre Heizquelle</label>
-						<b>Heizöl:</b> Flüssiger Brennstoff; Heizöl wird aus schwer
+			</div>
-						entflammbaren Anteilen des Erdöls hergestellt.<br /><br />
-						<b>Erdgas H, Erdgas L:</b> Brennbares Naturgas das in
-						unterirdischen Lagerstätten vorkommt. Erdgas H hat im Vergleich
-						zu Erdgas L einen leicht höheren Methangehalt, und daher einen
-						etwas besseren Brennwert.<br /><br />
-						<b>Flüssiggas:</b> Meist Propan, Butan und deren Gemische, die
-						bei Raumtemperatur unter vergleichsweise geringem Druck flüssig
-						bleiben.<br /><br />
-						<b>Braunkohle:</b> Durch Druck und Luftabschluss von organischen
-						Substanzen entstandenes, bräunlich-schwarzes Sedimentgestein.<br
-						/><br />
-						<b>Holz-Pellets:</b> Stäbchenförmige Pellets die vollständig
-						oder überwiegend aus Holz oder Sägenebenprodukten hergestellt
-						werden.<br /><br />
-						<b>Holzhackschnitzel:</b> Mit schneidenden Werkzeugen
-						zerkleinertes Holz.<br /><br />
-						<b>Nahwärme, Fernwärme:</b> Versorgung von thermischer Energie
-						über wärmegedämmte Rohrsysteme. Die Wärme wird dabei örtlich von
-						Heizwerken produziert oder besteht aus Prozesswärme von BHKW's.
-						Im Unterschied zu Fernwärme wird Nahwärme in kleineren Einheiten
-						dezentral realisiert.<br /><br />
-						<b>Strommix:</b> Heizen mit Strom (Nachtspeicher).<br /><br />
-						<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br /><br />
-					</HelpLabel>
-	            </div>
-	</div>
-
-	<div class="input-standard">
-	    <Inputlabel title="Einheit *"></Inputlabel>
-	
-		<select
-		class="rounded-s-none"
-		name="einheit_1"
-		bind:value={ausweis.einheit_1}
-		disabled={!gebaeude_aufnahme_allgemein.brennstoff_1}
-		required
-		
-		>
-		
-		<option disabled selected value={false}>Bitte auswählen</option>
-		{#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_1) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_1] : []) as unit}
-			<option value={unit}>{unit}</option>
-		{/each}
-	</select>
-
-	            <div class="help-label">
-	                <HelpLabel>
-						Bitte geben Sie die Einheit ein. Erdgas wird meist auf der
-						Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in Litern
-						vor. Pellets oder Brennholz in SRm (Schüttraummetern).
-					</HelpLabel>
-	            </div>
-	</div>
-
-</div>
-
-<!-- Verbrauch 1 -->
-
-<div class="input-standard order-4 md:order-4 xl:order-4">
-	<Verbrauchslabel bind:ausweis addYear=1></Verbrauchslabel>
-
-	<input
-	name="verbrauch_1"
-	type="number"
-	class:linked={abweichung.indexOf(1) > -1}
-	bind:value={ausweis.verbrauch_1}
-	required
-/>
-
-<div class="VerbrauchsEinheit">{#if !ausweis.einheit_1}{:else}{ausweis.einheit_1}{/if}</div>
 
+			<div
+				class="grid grid-cols-[40px_max-content] items-center justify-items-start"
+			>
+				{#if !ausweis.zusaetzliche_heizquelle}
+					<input
+						id="zusaetzliche_heizquelle_1"
+						type="checkbox"
+						class="checkbox"
+						name="zusaetzliche_heizquelle_1"
+						bind:checked={ausweis.zusaetzliche_heizquelle}
+					/>
+					<label
+						for="zusaetzliche_heizquelle_1"
+						class="cursor-pointer">zusätzliche Heizquelle</label
+					>
+				{/if}
+			</div>
+		</div>
 
 		<div class="help-label">
-				<HelpLabel>
+			<HelpLabel>TEXT FEHLT</HelpLabel>
-					<VerbrauchsHelpLabel bind:ausweis bind:gebaeude_aufnahme_allgemein addYear=1 heizquelle=1></VerbrauchsHelpLabel>
+		</div>
-				</HelpLabel>
-			</div>
-</div>
-
-<!-- Verbrauch 2 -->
-
-<div class="input-standard order-5 md:order-5 xl:order-5">
-	<Verbrauchslabel bind:ausweis addYear=2></Verbrauchslabel>
-
-	<input
-	name="verbrauch_2"
-	type="number"
-	class:linked={abweichung.indexOf(2) > -1}
-	bind:value={ausweis.verbrauch_2}
-	required
-/>
-<div class="VerbrauchsEinheit">{#if !ausweis.einheit_1}{:else}{ausweis.einheit_1}{/if}</div>
-
-		<div class="help-label">
-				<HelpLabel>
-					<VerbrauchsHelpLabel bind:ausweis bind:gebaeude_aufnahme_allgemein addYear=2 heizquelle=1></VerbrauchsHelpLabel>
-				</HelpLabel>
-			</div>
-</div>
-
-<!-- Verbrauch 3 -->
-
-<div class="input-standard order-6 md:order-6 xl:order-6">
-	<Verbrauchslabel bind:ausweis addYear=3></Verbrauchslabel>
-
-	<input
-	name="verbrauch_3"
-	type="number"
-	class:linked={abweichung.indexOf(3) > -1}
-	bind:value={ausweis.verbrauch_3}
-	required
-/>
-<div class="VerbrauchsEinheit">{#if !ausweis.einheit_1}{:else}{ausweis.einheit_1}{/if}</div>
-
-		<div class="help-label">
-				<HelpLabel>
-					<VerbrauchsHelpLabel bind:ausweis bind:gebaeude_aufnahme_allgemein addYear=3 heizquelle=1></VerbrauchsHelpLabel>
-				</HelpLabel>
-			</div>
-</div>
-
-{#if ausweis.zusaetzliche_heizquelle}
-
-<div class="col-span-3 order-7 md:order-7 xl:order-7 h-[4px] bg-white mt-[-10px]"></div>
-
-<!-- zusätzliche Heizquelle -->
-
-<div class="input-standard order-7 md:order-7 xl:order-7">
-	<Inputlabel title="zusätzliche Heizquelle"></Inputlabel>
-
-<div class="input-checkboxen">
-
-	<div class="grid grid-cols-[40px_max-content] items-center justify-items-start">
-		<input
-			id="zusaetzliche_heizquelle"
-			type="checkbox"
-			class="checkbox"
-			name="zusaetzliche_heizquelle"
-
-			bind:checked={ausweis.zusaetzliche_heizquelle}
-		/>
-	    <label for="zusaetzliche_heizquelle" class="cursor-pointer" on:click={() => labelClick(event)}>zusätzliche Heizquelle</label>
 	</div>
 
-</div>
+	<!-- Zeitraum 1 -->
 
-<div class="help-label">
+	<div class="grid grid-cols-2 gap-x-4 order-2 md:order-2 xl:order-2">
-	<HelpLabel>
+		<div class="input-standard">
-		TEXT FEHLT
+			<Inputlabel title="Start-Monat *"></Inputlabel>
-	</HelpLabel>
-</div>
 
-</div>
+			<select
+				name="energieverbrauch_zeitraum_monat"
+				class="rounded-tr-none rounded-br-none w-full m-0"
+				bind:value={month}
+				required
+			>
+				<option disabled>Monat</option>
+				{#if year !== null}
+					{#each availableDates.filter((date) => date.year == year) as date}
+						<option value={date.month}
+							>{monthNames[date.month]}</option
+						>
+					{/each}
+				{:else}
+					{#each Array.from(availableDates.reduce((a, c) => {
+							a.add(c.month);
+							return a;
+						}, new Set())) as month}
+						<option
+							value={month}
+							selected={ausweis.startdatum?.getMonth() === month}
+							>{monthNames[month]}</option
+						>
+					{/each}
+				{/if}
+			</select>
 
-<div class="input-standard order-8 md:order-8 xl:order-8">
+			<div class="help-label">
-</div>
+				<HelpLabel>TEXT FEHLT</HelpLabel>
+			</div>
+		</div>
 
-<!-- zusätzlicher Brennstoff und Einheiten *  -->
+		<div class="input-standard">
+			<Inputlabel title="Start-Jahr *"></Inputlabel>
 
-<div class="grid grid-cols-2 gap-x-4 order-9 md:order-9 xl:order-9">
+			<select
+				name="energieverbrauch_zeitraum_jahr"
+				class="rounded-tl-none rounded-bl-none w-full m-0"
+				bind:value={year}
+				required
+			>
+				<option disabled>Jahr</option>
+				{#each Array.from(availableDates.reduce((a, c) => {
+						a.add(c.year);
+						return a;
+					}, new Set())) as year}
+					<option
+						value={year}
+						selected={ausweis.startdatum?.getFullYear() === year}
+						>{year}</option
+					>
+				{/each}
+			</select>
+
+			<div class="help-label">
+				<HelpLabel>TEXT FEHLT</HelpLabel>
+			</div>
+		</div>
+	</div>
+
+	<!-- primäre Brennstoff und Einheiten * -->
+
+	<div class="grid grid-cols-2 gap-x-4 order-3 md:order-3 xl:order-3">
+		<div class="input-standard">
+			<Inputlabel title="primär Brennstoff *"></Inputlabel>
 
-	<div class="input-standard">
-	    <Inputlabel title="zusätzlicher Brennstoff *"></Inputlabel>
-	
 			<select
 				class="rounded-e-none"
-				name="brennstoff_2"
+				name="brennstoff_1"
-				bind:value={gebaeude_aufnahme_allgemein.brennstoff_2}
+				bind:value={gebaeude_aufnahme_allgemein.brennstoff_1}
 				required
-				>
+			>
-
 				<option disabled selected value={false}>Bitte auswählen</option>
 				{#each Object.keys(fuelMap) as fuel}
 					<option value={fuel}>{fuel}</option>
 				{/each}
 			</select>
 
-	        <div class="help-label">
+			<div class="help-label">
-	            <HelpLabel>
+				<HelpLabel>
 					<b>Heizöl:</b> Flüssiger Brennstoff; Heizöl wird aus schwer
 					entflammbaren Anteilen des Erdöls hergestellt.<br /><br />
 					<b>Erdgas H, Erdgas L:</b> Brennbares Naturgas das in
-					unterirdischen Lagerstätten vorkommt. Erdgas H hat im Vergleich
+					unterirdischen Lagerstätten vorkommt. Erdgas H hat im
-					zu Erdgas L einen leicht höheren Methangehalt, und daher einen
+					Vergleich zu Erdgas L einen leicht höheren Methangehalt, und
-					etwas besseren Brennwert.<br /><br />
+					daher einen etwas besseren Brennwert.<br /><br />
-					<b>Flüssiggas:</b> Meist Propan, Butan und deren Gemische, die
+					<b>Flüssiggas:</b> Meist Propan, Butan und deren Gemische,
-					bei Raumtemperatur unter vergleichsweise geringem Druck flüssig
+					die bei Raumtemperatur unter vergleichsweise geringem Druck
-					bleiben.<br /><br />
+					flüssig bleiben.<br /><br />
-					<b>Braunkohle:</b> Durch Druck und Luftabschluss von organischen
+					<b>Braunkohle:</b> Durch Druck und Luftabschluss von
-					Substanzen entstandenes, bräunlich-schwarzes Sedimentgestein.<br
+					organischen Substanzen entstandenes, bräunlich-schwarzes
-					/><br />
+					Sedimentgestein.<br /><br />
 					<b>Holz-Pellets:</b> Stäbchenförmige Pellets die vollständig
-					oder überwiegend aus Holz oder Sägenebenprodukten hergestellt
+					oder überwiegend aus Holz oder Sägenebenprodukten
-					werden.<br /><br />
+					hergestellt werden.<br /><br />
 					<b>Holzhackschnitzel:</b> Mit schneidenden Werkzeugen
 					zerkleinertes Holz.<br /><br />
-					<b>Nahwärme, Fernwärme:</b> Versorgung von thermischer Energie
+					<b>Nahwärme, Fernwärme:</b> Versorgung von thermischer
-					über wärmegedämmte Rohrsysteme. Die Wärme wird dabei örtlich von
+					Energie über wärmegedämmte Rohrsysteme. Die Wärme wird dabei
-					Heizwerken produziert oder besteht aus Prozesswärme von BHKW's.
+					örtlich von Heizwerken produziert oder besteht aus
-					Im Unterschied zu Fernwärme wird Nahwärme in kleineren Einheiten
+					Prozesswärme von BHKW's. Im Unterschied zu Fernwärme wird
-					dezentral realisiert.<br /><br />
+					Nahwärme in kleineren Einheiten dezentral realisiert.<br
-					<b>Strommix:</b> Heizen mit Strom (Nachtspeicher).<br /><br />
+					/><br />
-					<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br /><br />
+					<b>Strommix:</b> Heizen mit Strom (Nachtspeicher).<br /><br
+					/>
+					<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br /><br
+					/>
 				</HelpLabel>
-	            </div>
+			</div>
-	</div>
+		</div>
+
+		<div class="input-standard">
+			<Inputlabel title="Einheit *"></Inputlabel>
 
-	<div class="input-standard">
-	    <Inputlabel title="Einheit *"></Inputlabel>
-	
 			<select
-			class="rounded-s-none"
+				class="rounded-s-none"
-			name="einheit_2"
+				name="einheit_1"
-			bind:value={ausweis.einheit_2}
+				bind:value={ausweis.einheit_1}
-			disabled={!gebaeude_aufnahme_allgemein.brennstoff_2}
+				disabled={!gebaeude_aufnahme_allgemein.brennstoff_1}
-			required
+				required
 			>
-			<option disabled selected value={false}>Bitte auswählen</option>
+				<option disabled selected value={false}>Bitte auswählen</option>
-			{#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_2) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_2] : []) as unit}
+				{#each fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_1) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_1] : [] as unit}
-				<option value={unit}>{unit}</option>
+					<option value={unit}>{unit}</option>
-			{/each}
+				{/each}
 			</select>
 
-	        <div class="help-label">
+			<div class="help-label">
-	            <HelpLabel>
+				<HelpLabel>
 					Bitte geben Sie die Einheit ein. Erdgas wird meist auf der
-					Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in Litern
+					Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in
-					vor. Pellets oder Brennholz in SRm (Schüttraummetern).
+					Litern vor. Pellets oder Brennholz in SRm
+					(Schüttraummetern).
 				</HelpLabel>
-	        </div>
+			</div>
+		</div>
 	</div>
 
-</div>
+	<!-- Verbrauch 1 -->
 
-<!-- Verbrauch 4 -->
+	<div class="input-standard order-4 md:order-4 xl:order-4">
+		<Verbrauchslabel bind:ausweis addYear={1}></Verbrauchslabel>
 
-<div class="input-standard order-10 md:order-10 xl:order-10">
+		<input
-	<Verbrauchslabel bind:ausweis addYear=1></Verbrauchslabel>
+			name="verbrauch_1"
+			type="number"
+			class:linked={abweichung.indexOf(1) > -1}
+			bind:value={ausweis.verbrauch_1}
+			required
+		/>
 
-	<input
+		<div class="VerbrauchsEinheit">
-	name="verbrauch_4"
+			{#if ausweis.einheit_1}{ausweis.einheit_1}{/if}
-	type="number"
+		</div>
-	bind:value={ausweis.verbrauch_4}
-	class:linked={abweichung.indexOf(4) > -1}
-/>
-<div class="VerbrauchsEinheit">{#if !ausweis.einheit_2}{:else}{ausweis.einheit_2}{/if}</div>
 
 		<div class="help-label">
-				<HelpLabel>
+			<HelpLabel>
-					<VerbrauchsHelpLabel bind:ausweis bind:gebaeude_aufnahme_allgemein addYear=1 heizquelle=2></VerbrauchsHelpLabel>
+				<VerbrauchsHelpLabel
-				</HelpLabel>
+					bind:ausweis
-			</div>
+					bind:gebaeude_aufnahme_allgemein
-</div>
+					addYear={1}
+					heizquelle={1}
+				></VerbrauchsHelpLabel>
+			</HelpLabel>
+		</div>
+	</div>
 
-<!-- Verbrauch 5 -->
+	<!-- Verbrauch 2 -->
 
-<div class="input-standard order-11 md:order-11 xl:order-11">
+	<div class="input-standard order-5 md:order-5 xl:order-5">
-	<Verbrauchslabel bind:ausweis addYear=2></Verbrauchslabel>
+		<Verbrauchslabel bind:ausweis addYear={2}></Verbrauchslabel>
 
-	<input
+		<input
-	name="verbrauch_5"
+			name="verbrauch_2"
-	type="number"
+			type="number"
-	bind:value={ausweis.verbrauch_5}
+			class:linked={abweichung.indexOf(2) > -1}
-	class:linked={abweichung.indexOf(5) > -1}
+			bind:value={ausweis.verbrauch_2}
-/>
+			required
-<div class="VerbrauchsEinheit">{#if !ausweis.einheit_2}{:else}{ausweis.einheit_2}{/if}</div>
+		/>
+		<div class="VerbrauchsEinheit">
+			{#if ausweis.einheit_1}{ausweis.einheit_1}{/if}
+		</div>
 
 		<div class="help-label">
-				<HelpLabel>
+			<HelpLabel>
-					<VerbrauchsHelpLabel bind:ausweis bind:gebaeude_aufnahme_allgemein addYear=2 heizquelle=2></VerbrauchsHelpLabel>
+				<VerbrauchsHelpLabel
-				</HelpLabel>
+					bind:ausweis
-			</div>
+					bind:gebaeude_aufnahme_allgemein
-</div>
+					addYear={2}
+					heizquelle={1}
+				></VerbrauchsHelpLabel>
+			</HelpLabel>
+		</div>
+	</div>
 
-<!-- Verbrauch 6 -->
+	<!-- Verbrauch 3 -->
 
-<div class="input-standard order-12 md:order-12 xl:order-12">
+	<div class="input-standard order-6 md:order-6 xl:order-6">
-	<Verbrauchslabel bind:ausweis addYear=3></Verbrauchslabel>
+		<Verbrauchslabel bind:ausweis addYear={3}></Verbrauchslabel>
 
-	<input
+		<input
-	name="verbrauch_6"
+			name="verbrauch_3"
-	type="number"
+			type="number"
-	bind:value={ausweis.verbrauch_6}
+			class:linked={abweichung.indexOf(3) > -1}
-	class:linked={abweichung.indexOf(6) > -1}
+			bind:value={ausweis.verbrauch_3}
-/>
+			required
-<div class="VerbrauchsEinheit">{#if !ausweis.einheit_2}{:else}{ausweis.einheit_2}{/if}</div>
+		/>
+		<div class="VerbrauchsEinheit">
+			{#if ausweis.einheit_1}{ausweis.einheit_1}{/if}
+		</div>
 
 		<div class="help-label">
+			<HelpLabel>
+				<VerbrauchsHelpLabel
+					bind:ausweis
+					bind:gebaeude_aufnahme_allgemein
+					addYear={3}
+					heizquelle={1}
+				></VerbrauchsHelpLabel>
+			</HelpLabel>
+		</div>
+	</div>
+
+	{#if ausweis.zusaetzliche_heizquelle}
+		<div
+			class="col-span-3 order-7 md:order-7 xl:order-7 h-[4px] bg-white mt-[-10px]"
+		></div>
+
+		<!-- zusätzliche Heizquelle -->
+
+		<div class="input-standard order-7 md:order-7 xl:order-7">
+			<Inputlabel title="zusätzliche Heizquelle"></Inputlabel>
+
+			<div class="input-checkboxen">
+				<div
+					class="grid grid-cols-[40px_max-content] items-center justify-items-start"
+				>
+					<input
+						id="zusaetzliche_heizquelle"
+						type="checkbox"
+						class="checkbox"
+						name="zusaetzliche_heizquelle"
+						bind:checked={ausweis.zusaetzliche_heizquelle}
+					/>
+					<label for="zusaetzliche_heizquelle" class="cursor-pointer"
+						>zusätzliche Heizquelle</label
+					>
+				</div>
+			</div>
+
+			<div class="help-label">
+				<HelpLabel>TEXT FEHLT</HelpLabel>
+			</div>
+		</div>
+
+		<div class="input-standard order-8 md:order-8 xl:order-8"></div>
+
+		<!-- zusätzlicher Brennstoff und Einheiten *  -->
+
+		<div class="grid grid-cols-2 gap-x-4 order-9 md:order-9 xl:order-9">
+			<div class="input-standard">
+				<Inputlabel title="zusätzlicher Brennstoff *"></Inputlabel>
+
+				<select
+					class="rounded-e-none"
+					name="brennstoff_2"
+					bind:value={gebaeude_aufnahme_allgemein.brennstoff_2}
+					required
+				>
+					<option disabled selected value={false}
+						>Bitte auswählen</option
+					>
+					{#each Object.keys(fuelMap) as fuel}
+						<option value={fuel}>{fuel}</option>
+					{/each}
+				</select>
+
+				<div class="help-label">
+					<HelpLabel>
+						<b>Heizöl:</b> Flüssiger Brennstoff; Heizöl wird aus
+						schwer entflammbaren Anteilen des Erdöls hergestellt.<br
+						/><br />
+						<b>Erdgas H, Erdgas L:</b> Brennbares Naturgas das in
+						unterirdischen Lagerstätten vorkommt. Erdgas H hat im
+						Vergleich zu Erdgas L einen leicht höheren Methangehalt,
+						und daher einen etwas besseren Brennwert.<br /><br />
+						<b>Flüssiggas:</b> Meist Propan, Butan und deren
+						Gemische, die bei Raumtemperatur unter vergleichsweise
+						geringem Druck flüssig bleiben.<br /><br />
+						<b>Braunkohle:</b> Durch Druck und Luftabschluss von
+						organischen Substanzen entstandenes, bräunlich-schwarzes
+						Sedimentgestein.<br /><br />
+						<b>Holz-Pellets:</b> Stäbchenförmige Pellets die
+						vollständig oder überwiegend aus Holz oder
+						Sägenebenprodukten hergestellt werden.<br /><br />
+						<b>Holzhackschnitzel:</b> Mit schneidenden Werkzeugen
+						zerkleinertes Holz.<br /><br />
+						<b>Nahwärme, Fernwärme:</b> Versorgung von thermischer
+						Energie über wärmegedämmte Rohrsysteme. Die Wärme wird
+						dabei örtlich von Heizwerken produziert oder besteht aus
+						Prozesswärme von BHKW's. Im Unterschied zu Fernwärme
+						wird Nahwärme in kleineren Einheiten dezentral
+						realisiert.<br /><br />
+						<b>Strommix:</b> Heizen mit Strom (Nachtspeicher).<br
+						/><br />
+						<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br
+						/><br />
+					</HelpLabel>
+				</div>
+			</div>
+
+			<div class="input-standard">
+				<Inputlabel title="Einheit *"></Inputlabel>
+
+				<select
+					class="rounded-s-none"
+					name="einheit_2"
+					bind:value={ausweis.einheit_2}
+					disabled={!gebaeude_aufnahme_allgemein.brennstoff_2}
+					required
+				>
+					<option disabled selected value={false}
+						>Bitte auswählen</option
+					>
+					{#each fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_2) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_2] : [] as unit}
+						<option value={unit}>{unit}</option>
+					{/each}
+				</select>
+
+				<div class="help-label">
+					<HelpLabel>
+						Bitte geben Sie die Einheit ein. Erdgas wird meist auf
+						der Abrechnung in kWh ausgewiesen. Heizöl liegt meistens
+						in Litern vor. Pellets oder Brennholz in SRm
+						(Schüttraummetern).
+					</HelpLabel>
+				</div>
+			</div>
+		</div>
+
+		<!-- Verbrauch 4 -->
+
+		<div class="input-standard order-10 md:order-10 xl:order-10">
+			<Verbrauchslabel bind:ausweis addYear={1}></Verbrauchslabel>
+
+			<input
+				name="verbrauch_4"
+				type="number"
+				bind:value={ausweis.verbrauch_4}
+				class:linked={abweichung.indexOf(4) > -1}
+			/>
+			<div class="VerbrauchsEinheit">
+				{#if ausweis.einheit_2}{ausweis.einheit_2}{/if}
+			</div>
+
+			<div class="help-label">
 				<HelpLabel>
-					<VerbrauchsHelpLabel bind:ausweis bind:gebaeude_aufnahme_allgemein addYear=3 heizquelle=2></VerbrauchsHelpLabel>
+					<VerbrauchsHelpLabel
+						bind:ausweis
+						bind:gebaeude_aufnahme_allgemein
+						addYear={1}
+						heizquelle={2}
+					></VerbrauchsHelpLabel>
 				</HelpLabel>
 			</div>
-</div> 
+		</div>
 
-{/if}
+		<!-- Verbrauch 5 -->
 
+		<div class="input-standard order-11 md:order-11 xl:order-11">
+			<Verbrauchslabel bind:ausweis addYear={2}></Verbrauchslabel>
+
+			<input
+				name="verbrauch_5"
+				type="number"
+				bind:value={ausweis.verbrauch_5}
+				class:linked={abweichung.indexOf(5) > -1}
+			/>
+			<div class="VerbrauchsEinheit">
+				{#if ausweis.einheit_2}{ausweis.einheit_2}{/if}
+			</div>
+
+			<div class="help-label">
+				<HelpLabel>
+					<VerbrauchsHelpLabel
+						bind:ausweis
+						bind:gebaeude_aufnahme_allgemein
+						addYear={2}
+						heizquelle={2}
+					></VerbrauchsHelpLabel>
+				</HelpLabel>
+			</div>
+		</div>
+
+		<!-- Verbrauch 6 -->
+
+		<div class="input-standard order-12 md:order-12 xl:order-12">
+			<Verbrauchslabel bind:ausweis addYear={3}></Verbrauchslabel>
+
+			<input
+				name="verbrauch_6"
+				type="number"
+				bind:value={ausweis.verbrauch_6}
+				class:linked={abweichung.indexOf(6) > -1}
+			/>
+			<div class="VerbrauchsEinheit">
+				{#if ausweis.einheit_2}{ausweis.einheit_2}{/if}
+			</div>
+
+			<div class="help-label">
+				<HelpLabel>
+					<VerbrauchsHelpLabel
+						bind:ausweis
+						bind:gebaeude_aufnahme_allgemein
+						addYear={3}
+						heizquelle={2}
+					></VerbrauchsHelpLabel>
+				</HelpLabel>
+			</div>
+		</div>
+	{/if}
 </div>
 
 <style lang="postcss">
-.VerbrauchsEinheit{@apply absolute right-[4rem]}
+	.VerbrauchsEinheit {
+		@apply absolute right-[4rem];
+	}
 </style>

src/components/ImageGrid.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import UploadImages from "./UploadImages.svelte";
 	import type { BedarfsausweisWohnen, Enums, VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
-	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./Ausweis/types";
+	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./Ausweis/types.js";
-	import { RotateCounterClockwise, Trash } from "radix-svelte-icons";
+	import { RotateCounterClockwise, Trash, Upload } from "radix-svelte-icons";
 
 	export let images: UploadedGebaeudeBild[] = [];
 	export let max: number = 4;
+	export let min: number = 1;
 	export let name: string = "";
 	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
 	export let gebaeude: GebaeudeClient;
@@ -23,16 +24,19 @@
 				ctx?.translate(img.height / 2, img.width / 2);
 				ctx?.rotate((-90 * Math.PI) / 180);
 				ctx?.drawImage(img, -img.width / 2, -img.height / 2);
-				image.base64 = canvas.toDataURL("image/webp");
+				const clone = Object.assign({}, image)
-				image.update = true;
+				clone.base64 = canvas.toDataURL("image/webp");
-				resolve(image)
+				clone.update = true;
+				resolve(clone)
 			};
 		})
 	}
+
+	let upload: () => void;
 </script>
 
 <div class="flex flex-col gap-4">
-	<UploadImages {name} {kategorie} {max} bind:gebaeude bind:images bind:ausweis />
+	<UploadImages {name} {kategorie} {max} {min} bind:upload bind:gebaeude bind:images bind:ausweis />
 	<div class="grid grid-cols-2 gap-2">
 		{#each images as image, i}
 			{#if image.kategorie == kategorie}
@@ -68,5 +72,26 @@
 				</div>
 			{/if}
 		{/each}
+
+		<!-- Wir zeigen Platzhalter an, damit der Nutzer sieht wie viele Bilder er hochladen soll -->
+		{#each { length: max - images.filter(image => image.kategorie === kategorie).length } as _, i}
+		<div class="relative group">
+			<img
+				src="/placeholder.png"
+				alt={kategorie}
+				class="h-full max-h-96 w-full rounded-lg border-2 group-hover:contrast-50 object-cover transition-all"
+				class:opacity-35={i >= min}
+			/>
+			<div class="invisible group-hover:visible absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] flex flex-row gap-2">
+				<button
+					type="button"
+					class="rounded-full w-[30px] h-[30px] flex items-center justify-center p-0 bg-[rgba(0,0,0,0.4)]"
+					on:click={upload}
+				>
+					<Upload size={20} color="#fff"></Upload>
+				</button>
+			</div>
+		</div>
+		{/each}
 	</div>
 </div>

src/components/UploadImages.svelte

@@ -2,10 +2,11 @@
 	import type { BedarfsausweisWohnen, Enums, VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
 
 	export let max: number = 2;
+	export let min: number = 1;
 	export let name: string = ""
 
 	// Array of base64 encoded images read into the input.
-	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./Ausweis/types";
+	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./Ausweis/types.js";
 
 	export let images: UploadedGebaeudeBild[] = [];
 	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
@@ -77,10 +78,19 @@
 			reader.readAsArrayBuffer(file);
 		}
 	}
+
+	let fileUpload: HTMLInputElement;
+
+	export const upload = () => {
+		fileUpload.click()
+	}
 </script>
 
-{#if max > 1}
+<!-- Falls die maximale Anzahl Bilder erreicht wurde grauen wir den input aus und zeigen einen Hilfstext -->
-	<input type="file" class="file-input file-input-ghost" {name} multiple on:change={getAllImages} />
+{#if images.filter((image) => image.kategorie === kategorie).length === max}
+	<span class="bg-base-200 border px-4 py-2">Maximale Anzahl Bilder wurde erreicht.</span>
+{:else if max > 1}
+	<input type="file" class="file-input file-input-ghost" bind:this={fileUpload} {name} multiple on:change={getAllImages} />
 {:else}
-	<input type="file" class="file-input file-input-ghost" {name} on:change={getAllImages} />
+	<input type="file" class="file-input file-input-ghost" bind:this={fileUpload} {name} on:change={getAllImages} />
 {/if}

src/components/labels/VerbrauchsHelpLabel.svelte

@@ -1,36 +1,41 @@
 <script lang="ts">
-    import moment from "moment";
+	import moment from "moment";
 
-    export let addYear: number;
+	export let addYear: number;
-    export let heizquelle: number;
+	export let heizquelle: number;
-    export let gebaeude_aufnahme_allgemein;
+	export let gebaeude_aufnahme_allgemein;
 	export let ausweis;
-
 </script>
 
-
-
 {#if ausweis.startdatum}
-Bitte geben Sie Ihre
+	Bitte geben Sie Ihre
-{#if heizquelle==1}
+	{#if heizquelle == 1}
-{#if gebaeude_aufnahme_allgemein.brennstoff_1}<b> {gebaeude_aufnahme_allgemein.brennstoff_1} </b>{/if}
+		{#if gebaeude_aufnahme_allgemein.brennstoff_1}<b>
-Verbräuche {#if ausweis.einheit_1} in <b>{ausweis.einheit_1} </b>{/if}
+				{gebaeude_aufnahme_allgemein.brennstoff_1}
-{:else if heizquelle==2}
+			</b>{/if}
-{#if gebaeude_aufnahme_allgemein.brennstoff_2}<b> {gebaeude_aufnahme_allgemein.brennstoff_2} </b>{/if}
+		Verbräuche {#if ausweis.einheit_1}
-Verbräuche {#if ausweis.einheit_2} in <b>{ausweis.einheit_2} </b>{/if}
+			in <b>{ausweis.einheit_1} </b>{/if}
-{/if}
+	{:else if heizquelle == 2}
-
+		{#if gebaeude_aufnahme_allgemein.brennstoff_2}<b>
-
+				{gebaeude_aufnahme_allgemein.brennstoff_2}
-von <b>{moment(ausweis.startdatum).add((addYear-1), "year").format("MM.Y")}</b>
+			</b>{/if}
-bis <b>{moment(ausweis.startdatum).add((addYear), "year").format("MM.Y")}</b>
+		Verbräuche {#if ausweis.einheit_2}
-ein.
+			in <b>{ausweis.einheit_2} </b>{/if}
+	{/if}
 
+	von
+	<b
+		>{moment(ausweis.startdatum)
+			.add(addYear - 1, "year")
+			.format("MM.Y")}</b
+	>
+	bis <b>{moment(ausweis.startdatum).add(addYear, "year").format("MM.Y")}</b>
+	ein.
 {:else}
-Bitte geben Sie zuerst einen Starttermin für Ihre Verbräuche, den Brennstoff und die Einheit in die entsprechenden Felder ein. Danach können Sie hier die Verbräuche für den angegebenen Zeitraum eintragen.
+	Bitte geben Sie zuerst einen Starttermin für Ihre Verbräuche, den Brennstoff
+	und die Einheit in die entsprechenden Felder ein. Danach können Sie hier die
+	Verbräuche für den angegebenen Zeitraum eintragen.
 {/if}
 
-
-
 <style lang="postcss">
-
+</style>
-</style>

src/layouts/AusweisLayout.astro

@@ -100,65 +100,7 @@ const { title } = Astro.props;
 		}
 	}
 
-	article h1 {
-	font-size: 1.7rem;
-	font-weight: 500;
-	line-height: 1.2rem;
-	width: 100%;
-	text-align: center;
-	margin: 1em 0em;
-}
 
-article a {
-	color: #3a4ab5;
-	text-decoration: none;
-	display: inline;
-}
-
-article a:hover {
-	text-decoration: underline;
-}
-
-article p {
-	line-height: 1.7em;
-	padding-right: 1em;
-	font-size: 1.1em;
-	text-transform: none;
-}
-
-
-
-
-
-	h3 {
-		@apply text-xl font-medium mt-6 mb-4;
-	}
-
-	input, select, textarea, .input {
-		@apply py-1.5 px-2.5 w-full outline-none text-base text-slate-800 border bg-white;
-	}
-
-	input:disabled, input:read-only, select:disabled {
-		@apply bg-gray-200 border-gray-300;
-	}
-
-	input:disabled {
-		text-indent: -9999px;
-	}
-
-
-
-
-
-	.GRB3 {
-		@apply flex flex-col border-2 border-[#ffcc03] p-4 rounded-lg bg-base-200;
-		/* background: linear-gradient(
-			135deg,
-			rgba(252, 234, 187, 1) 0%,
-			rgba(253, 235, 189, 1) 52%,
-			rgba(251, 223, 147, 1) 100%
-		); */
-	}
 
 
 	.headline {

src/modules/EmbeddedAuthFlowModule.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { loginClient } from "#lib/login";
+	import { loginClient } from "#lib/login.js";
 	import EmbeddedLoginModule from "./EmbeddedLoginModule.svelte"
 	import EmbeddedRegisterModule from "./EmbeddedRegisterModule.svelte"
 

src/modules/EmbeddedLoginModule.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { addNotification } from "@ibcornelsen/ui";
-	import { loginClient } from "#lib/login";
+	import { loginClient } from "#lib/login.js";
 
 	export let navigate: (target: string) => void;
 	export let data: { email: string; passwort: string };

src/modules/KundendatenModule.svelte

@@ -1,11 +1,16 @@
 <script lang="ts">
 	import ProgressBar from "#components/Ausweis/Progressbar.svelte";
-	import type {
+	import type { Bezahlmethoden } from "@ibcornelsen/database/client";
-		Bezahlmethoden,
-	} from "@ibcornelsen/database/client";
 	import { Enums } from "@ibcornelsen/database/client";
 	import { dialogs } from "svelte-dialogs";
-import LoginDialog from "#components/LoginDialog.svelte";
+	import LoginDialog from "#components/LoginDialog.svelte";
+	import { PRICES } from "#lib/constants.js";
+	import {
+		BenutzerClient,
+		VerbrauchsausweisWohnenClient,
+	} from "#components/Ausweis/types.js";
+	import { validateAccessTokenClient } from "src/client/lib/validateAccessToken.js";
+	import { client } from "src/trpc.js";
 
 	export let user: BenutzerClient;
 	export let ausweis: VerbrauchsausweisWohnenClient;
@@ -40,16 +45,11 @@ import LoginDialog from "#components/LoginDialog.svelte";
 	export let selectedPaymentType: Bezahlmethoden =
 		Enums.Bezahlmethoden.paypal;
 
-	import { PRICES } from "#lib/constants";
+	let prices: number[] = [];
-	import { BenutzerClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
-	import { validateAccessTokenClient } from "src/client/lib/validateAccessToken";
-	import { client } from "src/trpc";
 
-		let prices: number[] = []
+	if (ausweis.gebaeude_aufnahme_allgemein.ausweisart) {
-
+		prices = PRICES[ausweis.gebaeude_aufnahme_allgemein.ausweisart];
-		if (ausweis.gebaeude_aufnahme_allgemein.ausweisart) {
+	}
-			prices = PRICES[ausweis.gebaeude_aufnahme_allgemein.ausweisart]
-		}
 
 	let basePrice: number = prices[0];
 
@@ -61,7 +61,7 @@ import LoginDialog from "#components/LoginDialog.svelte";
 		);
 
 	async function speichern(e: SubmitEvent) {
-		e.preventDefault()
+		e.preventDefault();
 
 		// Um einen Ausweis zu speichern müssen wir eingeloggt sein, andernfalls wird die API den call ablehnen.
 		// Wir prüfen also ob wir eingeloggt sind und leiten den Nutzer ggf. auf die Login Seite weiter.
@@ -76,13 +76,11 @@ import LoginDialog from "#components/LoginDialog.svelte";
 
 		// Falls der Ausweis noch keine benutzer_id hat müssen wir ihn claimen, damit er dem jetzigen Nutzer zugewiesen wird...
 		await client.v1.verbrauchsausweisWohnen.claim.mutate({
-			uid: ausweis.uid
+			uid: ausweis.uid,
-		})
+		});
 
 		window.location.href = `/kaufabschluss?uid=${ausweis.uid}`;
 	}
-
-
 </script>
 
 <div class="w-full px-8">
@@ -95,7 +93,9 @@ import LoginDialog from "#components/LoginDialog.svelte";
 
 	<form on:submit={speichern}>
 		<div class="grid grid-cols-[1.5fr_2fr] gap-4">
-			<div class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col gap-4">
+			<div
+				class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col gap-4"
+			>
 				<div class="flex flex-col gap-2 test-box">
 					<strong>A - Prüfung der Ausweisart</strong>
 					<div>
@@ -160,15 +160,13 @@ import LoginDialog from "#components/LoginDialog.svelte";
 				</div>
 			</div>
 			<div>
-				<div class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col">
+				<div
+					class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col"
+				>
 					<table>
 						<tr>
 							<td><strong>Produkt:</strong></td>
-							<td
+							<td><div class="py-2">Verbrauchsausweis</div></td>
-								><div class="py-2">
-									Verbrauchsausweis
-								</div></td
-							>
 						</tr>
 						<tr>
 							<td><strong>Beschreibung:</strong></td>
@@ -196,7 +194,7 @@ import LoginDialog from "#components/LoginDialog.svelte";
 								</div></td
 							>
 						</tr>
-						<hr>
+						<hr />
 						<tr>
 							<td>Preis inkl. MwSt.</td>
 							<td
@@ -207,13 +205,17 @@ import LoginDialog from "#components/LoginDialog.svelte";
 						</tr>
 					</table>
 				</div>
-				<h3 class="font-semibold mt-8">Hiermit bestelle ich folgende Version des Energieausweises:</h3>
+				<h3 class="font-semibold mt-8">
-				<div class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col">
+					Hiermit bestelle ich folgende Version des Energieausweises:
+				</h3>
+				<div
+					class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col"
+				>
 					<table>
 						<tr>
 							<td
-								>Verbrauchsausweis online für {prices[0]} € inkl. MwSt.
+								>Verbrauchsausweis online für {prices[0]} € inkl.
-								als PDF per E-Mail</td
+								MwSt. als PDF per E-Mail</td
 							>
 							<td
 								><input
@@ -242,8 +244,8 @@ import LoginDialog from "#components/LoginDialog.svelte";
 							</td>
 						</tr><tr>
 							<td
-								>Verbrauchsausweis offline für {prices[2]} € inkl. MwSt.
+								>Verbrauchsausweis offline für {prices[2]} € inkl.
-								als PDF per E-Mail (Sie schicken uns 3 Verbrauchsabrechnungen)</td
+								MwSt. als PDF per E-Mail (Sie schicken uns 3 Verbrauchsabrechnungen)</td
 							>
 							<td
 								><input
@@ -257,9 +259,11 @@ import LoginDialog from "#components/LoginDialog.svelte";
 						</tr>
 					</table>
 				</div>
-	
+
 				<h3 class="font-semibold mt-8">Zusatzleistungen</h3>
-				<div class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col">
+				<div
+					class="rounded-lg border p-4 border-base-300 bg-base-100 flex flex-col"
+				>
 					<table>
 						{#each services as service}
 							<tr>
@@ -276,7 +280,6 @@ import LoginDialog from "#components/LoginDialog.svelte";
 					</table>
 				</div>
 			</div>
-			
 		</div>
 		<div class="flex flex-row justify-between">
 			<!-- TODO: Zurück implementieren -->
@@ -284,7 +287,8 @@ import LoginDialog from "#components/LoginDialog.svelte";
 			<div class="flex flex-row gap-4">
 				<!-- TODO: Speichern implementieren -->
 				<button class="btn btn-secondary mt-4">Speichern</button>
-				<button class="btn btn-secondary mt-4">Zum Kaufabschluss</button>
+				<button class="btn btn-secondary mt-4">Zum Kaufabschluss</button
+				>
 			</div>
 		</div>
 	</form>

src/modules/VerbrauchsausweisWohnen/AusweisWeiter.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
-	import { BenutzerClient, GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
+	import { BenutzerClient, GebaeudeAufnahmeClient, GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types.js";
 	import { addNotification, updateNotification } from "@ibcornelsen/ui";
-	import { validateAccessTokenClient } from "../../client/lib/validateAccessToken";
+	import { validateAccessTokenClient } from "../../client/lib/validateAccessToken.js";
-	import { client } from "src/trpc";
+	import { client } from "src/trpc.js";
 	import EmbeddedAuthFlowModule from "#modules/EmbeddedAuthFlowModule.svelte";
 	import Overlay from "#components/Overlay.svelte";
+	import { verbrauchsausweisWohnenSpeichern } from "#client/lib/verbrauchsausweisWohnenSpeichern.js";
 
 	export let gebaeude: GebaeudeClient;
 	export let images: UploadedGebaeudeBild[];
 	export let ausweis: VerbrauchsausweisWohnenClient;
 	export let user: BenutzerClient;
+	export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
 
 	async function bilderHochladen() {
 		// Alle Bilder hochladen
@@ -62,6 +64,8 @@
 			return
 		}
 
+		
+
 		loginOverlayHidden = true;
 
 		if (ausweis.uid) {
@@ -82,16 +86,24 @@
 		} else {
 			// Wir speichern den Ausweis ab und leiten auf die "ausweis-gespeichert" Seite weiter.
 			try {
-				const response = await client.v1.verbrauchsausweisWohnen[2016].erstellen.mutate({
+				const response = await verbrauchsausweisWohnenSpeichern(ausweis,
-					ausweis,
+				gebaeude,
-					gebaeude
+				gebaeude_aufnahme_allgemein,
-				})
+				images,
-				ausweis.uid = response.uid;
+				user)
-				gebaeude.uid = response.gebaeude_uid;
 
-				await bilderHochladen();
+				if (response !== null) {
+					await bilderHochladen();
+					// Falls der Nutzer zurück navigiert, sollte er wieder auf seinen Vorgang kommen.
+					// Sonst müsste er alles neu eingeben...
+					ausweis.uid = response.uid;
+					gebaeude.uid = response.gebaeude_uid;
+					gebaeude_aufnahme_allgemein.uid = response.gebaeude_aufnahme_uid;
+					
+					return true
+				}
 
-				return true;
+				return false;
 			} catch (e: any) {
 				await client.v1.tickets.erstellen.mutate({
 					titel: "Ausweis konnte nicht gespeichert werden",
@@ -116,11 +128,15 @@
 		return false
 	}
 
-	async function ausweisAbschicken(e: SubmitEvent) {
+	async function ausweisAbschicken() {
-		e.preventDefault()
 		const result = await ausweisSpeichern();
 
 		if (result === true) {
+			window.history.pushState(
+				{},
+				"",
+				`${location.pathname}?uid=${ausweis.uid}`
+			);
 			window.location.href = `/kundendaten?uid=${ausweis.uid}`;
 		}
 	}
@@ -134,4 +150,4 @@
 	</div>
 </Overlay>
 
-<button type="submit" class="button">Weiter</button>
+<button on:click={ausweisAbschicken} type="button" class="button">Weiter</button>

src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte

@@ -1,7 +1,7 @@
 <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 Hilfe from "#components/Ausweis/Hilfe.svelte";
 
 	import BereichLabel from "#labels/BereichLabel.svelte";
 	//import HelpLabel from "#labels/HelpLabel.svelte";
@@ -55,6 +55,8 @@
 		UploadedGebaeudeBild,
 	} from "#components/Ausweis/types.js";
 	import { verbrauchsausweisWohnenSpeichern } from "src/client/lib/verbrauchsausweisWohnenSpeichern.js";
+	import AusweisWeiter from "./AusweisWeiter.svelte";
+	import { Enums } from "@ibcornelsen/database/client";
 
 	// 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...
@@ -99,6 +101,11 @@
 		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"
 		ausweis.ausstellgrund = "Vermietung";
 		ausweis.verbrauch_1 = 15000;
 		ausweis.verbrauch_2 = 14000;
@@ -106,10 +113,11 @@
 		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();
+		ausweis.startdatum = moment("01.01.2021").toDate();
 		gebaeude_aufnahme_allgemein.plz = "21039";
 		gebaeude_aufnahme_allgemein.ort = "Hamburg";
 		gebaeude_aufnahme_allgemein.adresse = "Curslacker Deich 170";
@@ -174,26 +182,29 @@
 	</p>
 </Overlay>
 
+<h1>Verbrauchsausweis erstellen - 45€</h1>
 
-<div class="grid grid-cols-2 gap-x-8 px-4">
+
-	<div class="w-full rounded-lg border-gray/35 border-4 relative px-8 py-4">
+
-		<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
 	/>
+	</div>
 </div>
 
+<ButtonSpaeterHilfe {automatischAusfüllen} {spaeterWeitermachen}/>
 
 <form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
 	<div id="formular-box" class="formular-boxen ring-0">
 
-		<ButtonSpaeterHilfe />
-
 		<!-- A Prüfung der Ausweisart -->
 
 		<BereichLabel bereich="A">Prüfung der Ausweisart</BereichLabel>
@@ -226,7 +237,7 @@
 				bind:gebaeude_aufnahme_allgemein
 				bind:ausweis
 			/>
-		</div>
+		</div>		
 
 		<!-- D Eingabe Warmwasseranteil und Verwendung von alternativen Energieversorgungssystemen -->
 
@@ -291,7 +302,6 @@
 			/>
 		</div>
 
-
 		<!-- I Gebäudebild und Energieausweis PDF Vorschau  -->
 
 		<BereichLabel bereich="I"
@@ -304,16 +314,276 @@
 				bind:gebaeude />
 		</div>
 
-	
-		<ButtonSpaeterHilfe />
-
 
 	</div>
+	<div
+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-end"><Hilfe />
+</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 lang="scss">
 </style>

src/style/768.scss

@@ -1,46 +0,0 @@
-@media (min-width: 576px) and (max-width: 767.98px) {
-
-	/*-----------------------------------------------------------------*/
-	/*-                                                               -*/
-	/*-                 General Styles & Structure               	  -*/
-	/*-         (min-width: 576px) and (max-width: 767.98px)          -*/
-	/*-----------------------------------------------------------------*/
-	.content {
-		max-width: 1920px;
-		display: grid;
-		column-gap: 0px;
-		grid-template-columns: 1fr;
-		grid-template-rows: auto;
-	}
-
-	.stretch-2 {
-		-ms-grid-row: 1;
-		-ms-grid-column: 1;
-		-ms-grid-column-span: 1;
-		grid-area: 1/1/1/4 !important;
-		width: calc(100% - 3%);
-	}
-
-	.only-form-mainContent {
-		padding: 20px 1% !important;
-		width: 100%;
-	}
-
-	.right-sidebar {
-		display: block;
-		max-width: 940px;
-		-ms-grid-row: 1;
-		-ms-grid-column: 3;
-		grid-area: 1/3/1/3;
-		padding-top: 0px;
-		margin-top: 0px;
-		width: 100%;
-	}
-
-	.login-container {
-		grid-template-columns: 1fr !important;
-	}
-
-}
-
-/* END QUERY */

src/style/992.scss

@@ -1,228 +0,0 @@
-@media (min-width: 992px) and (max-width: 10000px) {
-	/*-----------------------------------------------------------------*/
-	/*-                                                               -*/
-	/*-                 General Styles & Structure               	  -*/
-	/*-         (min-width: 992px) and (max-width: 10000px)            -*/
-	/*-----------------------------------------------------------------*/
-
-	.hide-on-mobile {
-		display: block !important;
-	}
-
-	.content {
-		max-width: 1920px;
-		width: 100%;
-		padding: 0 2% 10px 2%;
-		margin: 20px auto;
-		display: grid;
-		column-gap: 20px;
-		grid-template-columns: 2fr 6fr 2fr;
-		grid-template-rows: auto;
-	}
-
-	.stretch-2 {
-		-ms-grid-row: 1;
-		-ms-grid-column: 2;
-		-ms-grid-column-span: 2;
-		grid-area: 1/2/1/2;
-		width: calc(100% - 4%);
-
-	}
-
-	.only-form-mainContent {
-		padding: 20px 1% !important;
-		width: calc(100% - 0%) !important;
-		grid-area: 1/2/1/4;
-
-
-	}
-
-	.only-login-mainContent {
-		padding: 20px 1% !important;
-		width: calc(100% - 0%) !important;
-		grid-area: 1/2/1/4;
-
-
-	}
-
-	.right-sidebar {
-		display: block;
-		max-width: 940px;
-		-ms-grid-row: 1;
-		-ms-grid-column: 3;
-		grid-area: 1/3/1/3;
-		padding-top: 0px;
-		margin-top: 0px;
-		width: 100%;
-	}
-
-	.mainContent h1 {
-		margin-top: 0;
-		font-size: 2.5rem;
-		font-weight: 500;
-		line-height: 1.2;
-		width: 100%;
-		text-align: left;
-	}
-
-	.mainContent a {
-		color: #3A4AB5;
-		text-decoration: none;
-		display: inline;
-	}
-
-	.mainContent a:hover {
-		text-decoration: underline;
-	}
-
-	.mainContent p {
-		line-height: 1.7em;
-		padding-right: 1em;
-		font-size: 1.1em;
-		text-transform: none;
-	}
-
-
-	/*-----------------------------------------------------------------*/
-	/*-                                                               -*/
-	/*-                      Branding: 		                          -*/
-	/*-        (min-width: 992px) and (max-width: 10000px)		      -*/
-	/*-----------------------------------------------------------------*/
-
-
-	.hamburger_menu {
-		display: none !important;
-	}
-
-	nav {
-		margin-top: 0px;
-	}
-
-	.active {
-		background-color: none;
-		opacity: 1;
-		transition: none;
-	}
-
-
-	
-
-	.nav-hr {
-		display: block;
-		border: 1px solid #ff7d26;
-		margin: 0em 0;
-		height: 0px;
-	}
-
-	
-
-	.active {
-		background-color: #FFF !important;
-		color: #000 !important;
-		opacity: 1;
-	}
-
-	.active:hover {
-		background-color: #ff7d26 !important;
-		color: #FFF !important;
-	}
-
-	.droparrow1::after {
-		transform: translate(0, -50%) rotate(0deg) !important;
-		transition: none !important;
-	}
-
-
-	
-
-
-	footer a {
-		font-size: 18px;
-		line-height: 40px;
-		display: inline;
-		color: #fff;
-		text-decoration: none;
-		margin: 0 2em;
-	}
-
-	.grw-net-widget {
-		width: 100% !important
-	}
-
-
-
-	/*-----------------------------------------------------------------*/
-	/*-                                                               -*/
-
-
-
-
-
-
-}
-
-/* END QUERY */
-
-/**
-* SECTION: User Interface - Ausweis style
-*/
-
-.container-ausweis {
-	display: flex;
-	flex-direction: column;
-	background: #fff;
-	box-shadow: 0 0 16px 2px rgba(0, 0, 0, 0.1);
-	padding: 20px;
-	border-radius: 8px;
-	width: 100%;
-	gap: 10px;
-}
-
-.container-ausweis a {
-	cursor: pointer;
-	color: rgb(58, 74, 181) !important;
-	text-decoration: none;
-}
-
-.container-ausweis h4 {
-	font-size: 24px;
-	font-weight: normal;
-}
-
-.container-ausweis h5 {
-	font-size: 18px;
-}
-
-.login-container {
-	grid-area: 4/1/4/3;
-	display: grid;
-	grid-gap: 20px;
-	grid-template-columns: repeat(2, 1fr);
-	grid-template-rows: auto;
-}
-
-.energieausweis-img {
-	width: 100%;
-	height: min-content;
-	max-width: 80px;
-}
-
-/**
-* SECTION: Popups
-*/
-
-
-.popup-bottom {
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	min-height: 50px;
-	width: 100%;
-	background-color: rgb(255, 125, 38);
-	color: #fff;
-	text-align: center;
-	padding: 10px 20px;
-	z-index: 10;
-	font-size: 20px;
-	font-weight: 600;
-}

src/style/ORG_global.scss

@@ -1,46 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
-@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap");
-
-* {
-	font-weight: 400;
-	box-sizing: border-box;
-	font-family: "Abel", "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
-
-@import './576';
-@import './768';
-@import './992';
-
-@import "./smaller-768";
-
-article hr {
-	@apply mb-4 mt-4;
-}
-
-article {
-	@apply px-6 md:px-8 py-6 w-full relative bg-white;
-}
-
-article h1 {
-	@apply text-4xl font-normal my-4;
-}
-
-article h2 {
-	@apply text-2xl font-normal my-4;
-}
-
-article h3 {
-	@apply text-xl font-normal my-2;
-}
-
-article a {
-	@apply text-blue-700 font-medium text-lg;
-}
-
-article select {
-	@apply rounded-lg px-2 py-1.5 outline-none;
-}
-
-.checkbox {
-	@apply h-5 w-4 checkbox-secondary;
-}

src/style/global.css

@@ -31,20 +31,11 @@
 	font-family: "Heron";
 }
 
-
+.promo{
-.promo1{
-	font-weight: 700;
-	box-sizing: border-box;
-	font-family: "Antique Olive Compact bold";
-	text-shadow: 2px 2px 8px #222;
-
-}
-
-	.promo{
 		font-weight: 700;
 		box-sizing: border-box;
 		font-family: "Antique Olive Compact bold";
-	}
+}
 
 
 body{
@@ -57,13 +48,23 @@ body{
 	hover:bg-gradient-to-br from-secondary to-secondary-grad hover:shadow-lg transition-all hover:no-underline hover:ring-2 hover:ring-primary
 }
 
-input[type="text"], input[type="number"], input[type="password"], select{
+input, select, textarea{
+	@apply py-1.5 px-2.5 w-full outline-none;
+}
+
+input[type="text"], 
+input[type="number"], 
+input[type="password"], 
+select{
 @apply min-h-[38px] ring-1 ring-black/15 rounded-sm}
 
 input[type="checkbox"]{@apply inline-block accent-secondary}
 
 radio{@apply accent-primary}
 
+input:disabled, input:read-only, select:disabled {
+	@apply bg-gray-200 border-gray-500/15;
+}
 
 /*ARTICLE*/
 
@@ -76,15 +77,18 @@ article {
 	h2{@apply text-2xl font-normal mb-2;}
 	h3 {@apply text-xl font-normal ml-1;}
 	
-	a {@apply text-blue-700 font-medium text-lg;}
+	a {@apply text-blue-700 font-medium inline;}
+
 	p {@apply text-lg font-normal mb-2;}
 	li {@apply text-lg font-normal}
 	ul {@apply inline-block}
 	span {@apply text-secondary font-bold;}
 	
-	
+
+		
 }
 
+
 /*SIDEBARS*/
 
 /*BOXES*/

src/style/smaller-768.scss

@@ -1,9 +0,0 @@
-/*=============================================
-=        Target Everything below 768px        =
-=============================================*/
-
-@media only screen and (max-width: 768px) {
-	.filter-bar {
-		flex-wrap: wrap;
-	}
-}