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...
@@ -163,19 +163,23 @@
 <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
 				bind:gebaeude_aufnahme_allgemein
-		bind:ausweis />
+				bind:ausweis
+			/>
 		</Bereich>
 
 		<hr />
-		<Bereich bereich="B" title="Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Gebäudetyp und Gebäudeteil">
-
+		<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
-						ein.</HelpLabel
+						>Bitte geben Sie hier die Straße und Hausnummer des
+						Gebäudes ein.</HelpLabel
 					>
 					<div>
 						<input
@@ -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
-						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
+						>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
@@ -281,16 +289,16 @@
 							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
 			>C - Berechnungshilfe und Tabelle der Hüllflächen, U-Werte und
@@ -901,9 +909,17 @@
 							required
 						>
 							<option> Bitte auswählen</option>
-							<option value={Enums.Heizungsstatus.NICHT_VORHANDEN}> nicht vorhanden</option>
-							<option value={Enums.Heizungsstatus.UNBEHEIZT}> unbeheizt</option>
-							<option value={Enums.Heizungsstatus.BEHEIZT}> beheizt</option>
+							<option
+								value={Enums.Heizungsstatus.NICHT_VORHANDEN}
+							>
+								nicht vorhanden</option
+							>
+							<option value={Enums.Heizungsstatus.UNBEHEIZT}>
+								unbeheizt</option
+							>
+							<option value={Enums.Heizungsstatus.BEHEIZT}>
+								beheizt</option
+							>
 						</select>
 					</div>
 				</div>
@@ -1331,7 +1347,12 @@
 			>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>

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";
@@ -30,6 +28,7 @@
 		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.keller = Enums.Heizungsstatus.NICHT_VORHANDEN
-		gebaeude_aufnahme_allgemein.dachgeschoss = Enums.Heizungsstatus.NICHT_VORHANDEN
-		gebaeude_aufnahme_allgemein.lueftung = "Fensterlüftung"
-		gebaeude_aufnahme_allgemein.kuehlung = "1"
+		gebaeude_aufnahme_allgemein.gebaeudetyp = "Einfamilienhaus";
+		gebaeude_aufnahme_allgemein.keller =
+			Enums.Heizungsstatus.NICHT_VORHANDEN;
+		gebaeude_aufnahme_allgemein.dachgeschoss =
+			Enums.Heizungsstatus.NICHT_VORHANDEN;
+		gebaeude_aufnahme_allgemein.lueftung = "Fensterlüftung";
+		gebaeude_aufnahme_allgemein.kuehlung = "1";
 		ausweis.ausstellgrund = "Vermietung";
 		ausweis.verbrauch_1 = 15000;
 		ausweis.verbrauch_2 = 14000;
@@ -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,8 +183,6 @@
 
 <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} />
@@ -205,7 +201,6 @@
 
 <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,13 +213,17 @@
 
 		<!-- 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_aufnahme_allgemein
@@ -234,13 +233,17 @@
 
 		<!-- 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
 		>
 
@@ -282,7 +285,8 @@
 			><AusweisPreviewContainer
 				bind:images
 				bind:ausweis
-		bind:gebaeude /></Bereich
+				bind:gebaeude
+			/></Bereich
 		>
 	</div>
 	<div
@@ -290,14 +294,17 @@ 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>
-	
+			<AusweisWeiter
+				bind:ausweis
+				bind:images
+				bind:user
+				bind:gebaeude
+				bind:gebaeude_aufnahme_allgemein
+			></AusweisWeiter>
 		</div>
 
-<div class="md:justify-self-end"><Hilfe />
-</div>
+		<div class="md:justify-self-end"><Hilfe /></div>
 	</div>
 </form>
 
@@ -305,6 +312,26 @@ xs:grid-cols-2"
 	{#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}
 
@@ -506,10 +533,12 @@ xs:grid-cols-2"
 		>
 			Die Abweichung der Verbräuche zwischen Zeitraum {auditVerbrauchAbweichung(
 				ausweis,
-				gebaeude_aufnahme_allgemein,
-			)[0]} und {auditVerbrauchAbweichung(ausweis, gebaeude_aufnahme_allgemein)[1]} beträgt mehr
-			als 30% und sie haben keinen Leerstand angegeben. Sind sie sich sicher,
-			dass das stimmt?
+				gebaeude_aufnahme_allgemein
+			)[0]} und {auditVerbrauchAbweichung(
+				ausweis,
+				gebaeude_aufnahme_allgemein
+			)[1]} beträgt mehr als 30% und sie haben keinen Leerstand angegeben.
+			Sind sie sich sicher, dass das stimmt?
 		</RawNotification>
 	{/if}