Notification Update (Selector)

src/components/Ausweis/Verbrauch.svelte

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

src/components/Notifications/RawNotificationWrapper.svelte

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

src/components/Notifications/shared.ts

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

src/modules/BedarfsausweisWohnen/BedarfsausweisWohnenModule.svelte

@@ -11,16 +11,17 @@
 	import moment from "moment";
 	import { BitChecker } from "src/lib/BitChecker.js";
 	import { Enums } from "@ibcornelsen/database/client";
-	import { BedarfsausweisWohnenClient, BenutzerClient, UploadedGebaeudeBild } from "#components/Ausweis/types.js";
+	import {
+		BedarfsausweisWohnenClient,
+		BenutzerClient,
+		UploadedGebaeudeBild,
+	} from "#components/Ausweis/types.js";
 	import Bereich from "#components/labels/Bereich.svelte";
 	import ButtonSpaeterHilfe from "#components/Ausweis/ButtonSpaeterHilfe.svelte";
 
-
 	export let ausweis: BedarfsausweisWohnenClient;
 	export let user: BenutzerClient = {} as BenutzerClient;
 
-
-
 	let gebaeude_aufnahme_allgemein = ausweis.gebaeude_aufnahme_allgemein || {};
 	let gebaeude =
 		ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {};
@@ -56,7 +57,6 @@
 		// 	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...
@@ -150,32 +150,36 @@
 	</div>
 
 	<div class="w-full rounded-lg border-gray/35 border-2 relative px-4">
-	<PerformanceScore
+		<PerformanceScore
-		bind:ausweis
+			bind:ausweis
-		bind:gebaeude_aufnahme_allgemein
+			bind:gebaeude_aufnahme_allgemein
-		bind:gebaeude
+			bind:gebaeude
-	/>
+		/>
 	</div>
 </div>
 
-<ButtonSpaeterHilfe {automatischAusfüllen} {spaeterWeitermachen}/>
+<ButtonSpaeterHilfe {automatischAusfüllen} {spaeterWeitermachen} />
 
 <form action="FORM/transfer/VA_1to2" enctype="multipart/form-data">
 	<div id="formular-box" class="formular-boxen ring-0">
 		<Bereich bereich="A" title="Prüfung der Ausweisart">
-			<Ausweisart bind:gebaeude
+			<Ausweisart
-		bind:gebaeude_aufnahme_allgemein
+				bind:gebaeude
-		bind:ausweis />
+				bind:gebaeude_aufnahme_allgemein
+				bind:ausweis
+			/>
 		</Bereich>
-		
-		<hr />
-		<Bereich bereich="B" title="Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Gebäudetyp und Gebäudeteil">
 
+		<hr />
+		<Bereich
+			bereich="B"
+			title="Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Gebäudetyp und Gebäudeteil"
+		>
 			<div class="GRB">
 				<div>
 					<HelpLabel title="Straße, Hausnummer *"
-						>Bitte geben Sie hier die Straße und Hausnummer des Gebäudes
+						>Bitte geben Sie hier die Straße und Hausnummer des
-						ein.</HelpLabel
+						Gebäudes ein.</HelpLabel
 					>
 					<div>
 						<input
@@ -187,13 +191,13 @@
 						/>
 					</div>
 				</div>
-	
+
 				<ZipSearch
 					bind:zip={ausweis.objekt_plz}
 					bind:city={ausweis.objekt_ort}
 					name="zip"
 				/>
-	
+
 				<div>
 					<HelpLabel title="Ort *"
 						>Ort des Gebäudes wird automatisch ermittelt.</HelpLabel
@@ -206,7 +210,7 @@
 						/>
 					</div>
 				</div>
-	
+
 				<div>
 					<HelpLabel title="Wohnfläche m² *"
 						>Bitte geben Sie hier die beheizte Wohnfläche in m² ein.
@@ -223,7 +227,7 @@
 						/>
 					</div>
 				</div>
-	
+
 				<div>
 					<HelpLabel title="Gebäudetyp *"
 						>Bitte wählen Sie hier den Gebäudetyp aus.
@@ -247,7 +251,9 @@
 							<option value="Doppelhaushälfte">
 								Doppelhaushälfte</option
 							>
-							<option value="Reihenendhaus"> Reihenendhaus</option>
+							<option value="Reihenendhaus">
+								Reihenendhaus</option
+							>
 							<option value="Reihenmittelhaus">
 								Reihenmittelhaus</option
 							>
@@ -260,19 +266,21 @@
 							<option value="Atrium-Bungalow">
 								Atrium-Bungalow</option
 							>
-							<option value="Winkelbungalow"> Winkelbungalow</option>
+							<option value="Winkelbungalow">
+								Winkelbungalow</option
+							>
 						</select>
 					</div>
 				</div>
-	
+
 				<div>
 					<HelpLabel title="Gebäudeteil *"
-						>Bitte geben Sie hier den Gebäudeteil ein. In den meisten
+						>Bitte geben Sie hier den Gebäudeteil ein. In den
-						Fällen handelt es sich um das Gesamtgebäude. Sollte es sich
+						meisten Fällen handelt es sich um das Gesamtgebäude.
-						allerdings um ein Gebäude mit mehr als 10% Gewerbeanteil
+						Sollte es sich allerdings um ein Gebäude mit mehr als
-						handeln, so sollten 2 Ausweise erstellt werden. In diesem
+						10% Gewerbeanteil handeln, so sollten 2 Ausweise
-						Fall wählen Sie Gebäudeteil 'Wohnen' bzw. Gebäudeteil
+						erstellt werden. In diesem Fall wählen Sie Gebäudeteil
-						'Gewerbe'.</HelpLabel
+						'Wohnen' bzw. Gebäudeteil 'Gewerbe'.</HelpLabel
 					>
 					<div>
 						<select
@@ -281,15 +289,15 @@
 							required
 						>
 							<option>Bitte auswählen</option>
-							<option value="Gesamtgebäude"> Gesamtgebäude</option>
+							<option value="Gesamtgebäude">
+								Gesamtgebäude</option
+							>
 							<option value="Wohnen"> Wohnen</option>
 						</select>
 					</div>
 				</div>
 			</div>
-
 		</Bereich>
-		
 
 		<hr />
 		<Label
@@ -901,9 +909,17 @@
 							required
 						>
 							<option> Bitte auswählen</option>
-							<option value={Enums.Heizungsstatus.NICHT_VORHANDEN}> nicht vorhanden</option>
+							<option
-							<option value={Enums.Heizungsstatus.UNBEHEIZT}> unbeheizt</option>
+								value={Enums.Heizungsstatus.NICHT_VORHANDEN}
-							<option value={Enums.Heizungsstatus.BEHEIZT}> beheizt</option>
+							>
+								nicht vorhanden</option
+							>
+							<option value={Enums.Heizungsstatus.UNBEHEIZT}>
+								unbeheizt</option
+							>
+							<option value={Enums.Heizungsstatus.BEHEIZT}>
+								beheizt</option
+							>
 						</select>
 					</div>
 				</div>
@@ -1331,10 +1347,15 @@
 			>G - Bitte prüfen Sie hier die Angaben zum Sanierungszustand des
 			Gebäudes</Label
 		>
-		<BilderZusatzsysteme {ausweis} {gebaeude} {gebaeude_aufnahme_allgemein} {images} />
+		<BilderZusatzsysteme
+			{ausweis}
+			{gebaeude}
+			{gebaeude_aufnahme_allgemein}
+			{images}
+		/>
 		<hr />
 		<div class="flex flex-row justify-between">
 			<button class="button">Weiter</button>
 		</div>
-		</div>
+	</div>
 </form>

src/modules/VerbrauchsausweisWohnen/AusweisWeiter.svelte

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

src/modules/VerbrauchsausweisWohnen/VerbrauchsausweisWohnenModule.svelte

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