DaisyUI Integriert

2024-01-17 12:33:05 +07:00
parent f684ce0060
commit 79581cdcf2
18 changed files with 245 additions and 91 deletions
--- a/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
+++ b/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
@@ -17,17 +17,22 @@
 	import { Enums } from "@ibcornelsen/database/client"
 	import { client } from "src/trpc";
 	import Overlay from "#components/Overlay.svelte";
-	import EmbeddedAuthFlowModule from "#modules/EmbeddedAuthFlowModule.svelte";
 	import AusweisGespeichertModule from "./AusweisGespeichertModule.svelte";
 	import { validateAccessTokenClient } from "src/client/lib/validateAccessToken";
 	import { UploadedGebaeudeBild, VerbrauchsausweisWohnenClient, GebaeudeClient, BenutzerClient } from "#components/Ausweis/types";
-		
+	import { dialogs } from "svelte-dialogs";
+	import LoginDialog from "#components/LoginDialog.svelte";
+			
 	export let gebaeude: GebaeudeClient = {} as GebaeudeClient;
 	export let images: UploadedGebaeudeBild[] = [];
 	export let ausweis: VerbrauchsausweisWohnenClient = {} as VerbrauchsausweisWohnenClient;
 	export let user: BenutzerClient = {} as BenutzerClient;

 	async function bilderHochladen() {
+		if (images.length == 0) {
+			return;
+		}
+
 		// Alle Bilder hochladen
 		const notification = addNotification({
 			dismissable: false,
@@ -75,12 +80,12 @@
 		// Wir prüfen also ob wir eingeloggt sind und leiten den Nutzer ggf. auf die Login Seite weiter.
 		if (!await validateAccessTokenClient()) {
 			// TOOD: Auf Dialog umstellen.
-			//await spawnLoginPrompt();
-			loginOverlayHidden = false;
-			return
-		}
+			const loggedIn = await dialogs.modal(LoginDialog);

-		loginOverlayHidden = true;
+			if (!loggedIn) {
+				return false;
+			}
+		}

 		if (ausweis.uid) {
 			// Anscheinend wurde der Ausweis bereits erstellt und hat eine UID.
@@ -138,7 +143,7 @@
 		const result = await ausweisSpeichern();

 		if (result === true) {
-			window.history.pushState({}, "", `/verbrauchsausweis?uid=${ausweis.uid}`);
+			window.history.pushState({}, "", `${location.pathname}?uid=${ausweis.uid}`);
 			speichernOverlayHidden = false;
 		}
 	}
@@ -173,21 +178,17 @@
 		const result = await ausweisSpeichern();

 		if (result === true) {
+			// Falls der Nutzer zurück navigiert, sollte er wieder auf seinen Vorgang kommen.
+			// Sonst müsste er alles neu eingeben...
+			window.history.pushState({}, "", `${location.pathname}?uid=${ausweis.uid}`);
 			window.location.href = `/kundendaten?uid=${ausweis.uid}`;
 		}
 	}

 	let waitOverlayHidden = true;
-	let loginOverlayHidden = true;
 	let speichernOverlayHidden = true;
 </script>

-<Overlay bind:hidden={loginOverlayHidden}>
-	<div class="bg-white w-full max-w-screen-sm py-8">
-		<EmbeddedAuthFlowModule onLogin={ausweisAbschicken}></EmbeddedAuthFlowModule>
-	</div>
-</Overlay>
-
 <Overlay bind:hidden={speichernOverlayHidden}>
 	<div class="bg-white w-full max-w-screen-sm py-8 px-8">
 		<AusweisGespeichertModule uid={ausweis.uid}></AusweisGespeichertModule>
@@ -207,7 +208,7 @@
 	<PerformanceScore bind:ausweis bind:gebaeude />
 </div>

-<form on:submit={ausweisAbschicken} name="ausweis">
+<form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
 	<div
 		class="bg-[rgba(252,234,187,0.2)] border-2 p-4 rounded-lg border-[#ffcc03]"
 	>
@@ -245,7 +246,7 @@
 				</HelpLabel>
 				<div>
 					<input
-						name="adresse"
+						name="adresse" data-test="adresse"
 						type="text"
 						autocomplete="off"
 						required
@@ -261,7 +262,7 @@
 				<ZipSearch
 					bind:zip={gebaeude.plz}
 					bind:city={gebaeude.ort}
-					name="plz"
+					name="plz" data-test="plz"
 				/>
 			</div>

@@ -271,7 +272,7 @@
 				</HelpLabel>
 				<div>
 					<input
-						name="ort"
+						name="ort" data-test="ort"
 						readonly={true}
 						bind:value={gebaeude.ort}
 						type="text"
@@ -288,7 +289,7 @@
 				</HelpLabel>
 				<div>
 					<input
-						name="flaeche"
+						name="flaeche" data-test="flaeche"
 						maxlength="4"
 						type="number"
 						required
@@ -305,7 +306,7 @@
 				<Label>Keller *</Label>
 				<div>
 					<select
-						name="keller"
+						name="keller" data-test="keller"
 						required
 						bind:value={gebaeude.keller}
 					>
@@ -321,7 +322,7 @@
 			<div class="form-group col-md-4">
 				<Label>Dachgeschoss *</Label>
 				<div>
-					<select name="dachgeschoss" bind:value={gebaeude.dachgeschoss} required>
+					<select name="dachgeschoss" data-test="dachgeschoss" bind:value={gebaeude.dachgeschoss} required>
 						<option disabled>Bitte auswählen</option>
 						<option value={Enums.Heizungsstatus.NICHT_VORHANDEN}>nicht vorhanden</option>
 						<option value={Enums.Heizungsstatus.UNBEHEIZT}>unbeheizt</option>
@@ -350,21 +351,23 @@
 			<!-- Anteil WW enthalten -->
 			<div class="flex flex-col">
 				<div class="flex flex-row gap-4 items-center">
-					<Label>Warmwasser im Verbrauch enthalten</Label>
 					<input
 							type="checkbox"
-							name="warmwasser_enthalten"
+							class="checkbox"
+							name="warmwasser_enthalten" data-test="warmwasser_enthalten"
 							bind:checked={ausweis.warmwasser_enthalten}
 						/>
+						<Label>Warmwasser im Verbrauch enthalten</Label>
 				</div>
 				<div class="flex flex-row gap-4 items-center">
-					<Label>Anteil bekannt</Label>
 					<input
 							type="checkbox"
-							name="warmwasser_anteil_bekannt"
+							class="checkbox"
+							name="warmwasser_anteil_bekannt" data-test="warmwasser_anteil_bekannt"
 							bind:checked={ausweis.warmwasser_anteil_bekannt}
 							disabled={!ausweis.warmwasser_enthalten}
 						/>
+						<Label>Anteil bekannt</Label>
 				</div>
 			</div>

@@ -376,11 +379,11 @@
 				</HelpLabel>

 				<input
-					name="anteil_warmwasser_1"
+					name="anteil_warmwasser_1" data-test="anteil_warmwasser_1"
 					maxlength="2"
 					type="number"
 					bind:value={ausweis.anteil_warmwasser_1}
-					disabled={!ausweis.warmwasser_anteil_bekannt}
+					disabled={!ausweis.warmwasser_anteil_bekannt || !ausweis.warmwasser_enthalten}
 					autocomplete="off"
 				/>
 			</div>
@@ -392,13 +395,13 @@
 					ein Anteil von 18% angenommen.
 				</HelpLabel>
 				<input
-					name="anteil_warmwasser_2"
+					name="anteil_warmwasser_2" data-test="anteil_warmwasser_2"
 					maxlength="3"
 					type="number"
 					autocomplete="off"
 					bind:value={ausweis.anteil_warmwasser_2}
 					disabled={!ausweis.zusaetzliche_heizquelle ||
-						!ausweis.warmwasser_anteil_bekannt}
+						!ausweis.warmwasser_anteil_bekannt || !ausweis.warmwasser_enthalten}
 				/>
 			</div>

@@ -415,7 +418,7 @@
 					<label class="checkbox-inline"
 						><input
 							type="checkbox"
-							name="alternative_heizung"
+							name="alternative_heizung" data-test="alternative_heizung"
 							bind:checked={ausweis.alternative_heizung}
 							value="Heizung"
 						/>Heizung</label
@@ -423,7 +426,7 @@
 					<label class="checkbox-inline"
 						><input
 							type="checkbox"
-							name="alternative_warmwasser"
+							name="alternative_warmwasser" data-test="alternative_warmwasser"
 							bind:checked={ausweis.alternative_warmwasser}
 							value="Warmwasser"
 						/>Warmwasser</label
@@ -431,7 +434,7 @@
 					<label class="checkbox-inline"
 						><input
 							type="checkbox"
-							name="alternative_lueftung"
+							name="alternative_lueftung" data-test="alternative_lueftung"
 							bind:checked={ausweis.alternative_lueftung}
 							value="Lüftung"
 						/>Lüftung</label
@@ -439,7 +442,7 @@
 					<label class="checkbox-inline"
 						><input
 							type="checkbox"
-							name="alternative_kuehlung"
+							name="alternative_kuehlung" data-test="alternative_kuehlung"
 							bind:checked={ausweis.alternative_kuehlung}
 							value="Kühlung"
 						/>Kühlung</label
@@ -462,7 +465,7 @@
 					Bitte wählen Sie hier den Gebäudetyp aus.
 				</HelpLabel>
 				<div>
-					<select name="gebaeudetyp" required>
+					<select name="gebaeudetyp" data-test="gebaeudetyp" required>
 						<option disabled>Bitte auswählen</option>
 						<option value="Einfamilienhaus">Einfamilienhaus</option>
 						<option value="Freistehendes Einfamilienhaus"
@@ -501,7 +504,7 @@
 					'Gewerbe'.
 				</HelpLabel>
 				<div>
-					<select name="gebaeudeteil" required>
+					<select name="gebaeudeteil" data-test="gebaeudeteil" required>
 						<option disabled>Bitte auswählen</option>
 						<option value="Gesamtgebäude">Gesamtgebäude</option>
 						<option value="Wohnen">Wohnen</option>
@@ -517,7 +520,7 @@
 				</HelpLabel>
 				<div>
 					<select
-						name="lueftung"
+						name="lueftung" data-test="lueftung"
 						required
 						bind:value={gebaeude.lueftung}
 					>
@@ -542,7 +545,7 @@
 				</HelpLabel>
 				<div>
 					<select
-						name="kuehlung"
+						name="kuehlung" data-test="kuehlung"
 						required
 						bind:value={gebaeude.kuehlung}
 					>
@@ -562,7 +565,7 @@
 				</HelpLabel>
 				<div>
 					<input
-						name="leerstand"
+						name="leerstand" data-test="leerstand"
 						maxlength="2"
 						type="number"
 						bind:value={gebaeude.leerstand}
@@ -653,6 +656,14 @@
 </RawNotificationWrapper>

 <style>
+	:global(input[type="number"]), :global(input[type="text"]) {
+		@apply input input-bordered py-1.5 px-2 h-auto;
+	}
+
+	:global(input[type="number"]:disabled) {
+		@apply bg-gray-200 border border-gray-300;
+	}
+	
 	:global(.linked) {
 		@apply border-2 border-red-400;
 	}