online-energieausweis/src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte

<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 BereichLabel from "#labels/BereichLabel.svelte";
	//import HelpLabel from "#labels/HelpLabel.svelte";
	//import Inputlabel from "#labels/InputLabel.svelte";
	//import Label from "#components/Label.svelte";

	import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
	import GebaeudeDaten from "#components/Ausweis/GebaeudeDaten.svelte";
	import Warmwasseranteil from "#components/Ausweis/Warmwasseranteil.svelte";
	import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
	import LueftungundLeerstand from "#components/Ausweis/LueftungundLeerstand.svelte";
	
	//import ZipSearch from "#components/PlzSuche.svelte";
	import moment from "moment";
	import BilderZusatzsysteme from "#components/Ausweis/BilderZusatzsysteme.svelte";
	import {
		RawNotificationWrapper,
		RawNotification,
		notifications,
	} from "#components/Notifications/index.js";
	import { auditHeizungGebaeudeBaujahr } from "#components/Verbrauchsausweis/audits/HeizungGebaeudeBaujahr.js";
	import { auditHeizungJuengerDreiJahre } from "#components/Verbrauchsausweis/audits/HeizungJuengerDreiJahre.js";
	import { auditZeitraumAktuell } from "#components/Verbrauchsausweis/audits/ZeitraumAktuell.js";
	import { auditKlimaFaktoren } from "#components/Verbrauchsausweis/audits/KlimaFaktoren.js";
	import { auditWohnFlaeche } from "#components/Verbrauchsausweis/audits/WohnFlaeche.js";
	import { auditWarmWasser } from "#components/Verbrauchsausweis/audits/WarmWasser.js";
	import { auditLeerStand } from "#components/Verbrauchsausweis/audits/LeerStand.js";
	import { auditPlzNichtErkannt } from "#components/Verbrauchsausweis/audits/PlzNichtErkannt.js";
	import {
		AuditType,
		hidden,
	} from "#components/Verbrauchsausweis/audits/hidden.js";
	import { auditBedarfsausweisBenoetigt } from "#components/Verbrauchsausweis/audits/BedarfsausweisBenoetigt.js";
	import { auditVerbrauchAbweichung } from "#components/Verbrauchsausweis/audits/VerbrauchAbweichung.js";
	import { auditEndEnergie } from "#components/Verbrauchsausweis/audits/EndEnergie.js";
	import { auditWohnflaecheGroesserGesamtflaeche } from "#components/Verbrauchsausweis/audits/WohnflaecheGroesserGesamtflaeche.js";
	//import { Enums } from "@ibcornelsen/database/client"
	import Overlay from "#components/Overlay.svelte";
	import AusweisGespeichertModule from "#modules/Ausweise/AusweisGespeichertModule.svelte";
	import {
		VerbrauchsausweisWohnenClient,
		BenutzerClient,
		UploadedGebaeudeBild,
	} from "#components/Ausweis/types.js";
	import { verbrauchsausweisWohnenSpeichern } from "src/client/lib/verbrauchsausweisWohnenSpeichern.js";

	// TODO: Vom Server sollte ein volles Objekt kommen, dass alle Subobjekte enthält, weil es sonst zu Problemen führen kann
	// wenn gebaeude_aufnahme_allgemein oder gebaeude_stammdaten nicht existiert...
	export let ausweis: VerbrauchsausweisWohnenClient;
	export let user: BenutzerClient = {} as BenutzerClient;

	let gebaeude_aufnahme_allgemein = ausweis.gebaeude_aufnahme_allgemein || {};
	let gebaeude =
		ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {};
	let images: (UploadedGebaeudeBild & { base64?: string })[] =
		ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten
			?.gebaeude_bilder || [];

	async function spaeterWeitermachen() {
		const result = await verbrauchsausweisWohnenSpeichern(
			ausweis,
			gebaeude,
			gebaeude_aufnahme_allgemein,
			images,
			user
		);

		if (result !== null) {
			// Falls der Nutzer zurück navigiert, sollte er wieder auf seinen Vorgang kommen.
			// Sonst müsste er alles neu eingeben...
			ausweis.uid = result.uid;
			gebaeude.uid = result.gebaeude_uid;
			gebaeude_aufnahme_allgemein.uid = result.gebaeude_aufnahme_uid;
			window.history.pushState(
				{},
				"",
				`${location.pathname}?uid=${result.uid}`
			);
			speichernOverlayHidden = false;
		}
	}

	function automatischAusfüllen() {
		gebaeude_aufnahme_allgemein.baujahr_gebaeude = [1962];
		gebaeude_aufnahme_allgemein.baujahr_heizung = [1952];
		gebaeude_aufnahme_allgemein.saniert = true;
		gebaeude_aufnahme_allgemein.einheiten = 1;
		ausweis.ausstellgrund = "Vermietung";
		ausweis.verbrauch_1 = 15000;
		ausweis.verbrauch_2 = 14000;
		ausweis.verbrauch_3 = 16000;
		gebaeude_aufnahme_allgemein.flaeche = 152;
		gebaeude_aufnahme_allgemein.nutzflaeche = 172;
		ausweis.keller_beheizt = true;
		gebaeude_aufnahme_allgemein.brennstoff_1 = "Erdgas H";
		ausweis.einheit_1 = "kWh";
		ausweis.anteil_warmwasser_1 = 18;
		ausweis.startdatum = moment("01.01.2019").toDate();
		gebaeude_aufnahme_allgemein.plz = "21039";
		gebaeude_aufnahme_allgemein.ort = "Hamburg";
		gebaeude_aufnahme_allgemein.adresse = "Curslacker Deich 170";
		gebaeude_aufnahme_allgemein.gebaeudeteil = "Gesamtgebäude";

		gebaeude = gebaeude;
		ausweis = ausweis;
	}

	async function ausweisAbschicken(e: SubmitEvent) {
		if (e && e.preventDefault) e.preventDefault();
		const result = await verbrauchsausweisWohnenSpeichern(
			ausweis,
			gebaeude,
			gebaeude_aufnahme_allgemein,
			images,
			user
		);

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

	let waitOverlayHidden = true;
	let speichernOverlayHidden = true;

	$: {
		if (
			gebaeude_aufnahme_allgemein.saniert &&
			gebaeude_aufnahme_allgemein.oberste_geschossdecke_gedaemmt ===
				undefined &&
			gebaeude_aufnahme_allgemein.dachgeschoss_gedaemmt === undefined
		) {
			gebaeude_aufnahme_allgemein.oberste_geschossdecke_gedaemmt = true;
			gebaeude_aufnahme_allgemein.dachgeschoss_gedaemmt = true;
		}
	}
</script>

<Overlay bind:hidden={speichernOverlayHidden}>
	<div class="bg-white w-full max-w-screen-sm py-8 px-8">
		<AusweisGespeichertModule uid={ausweis.uid}></AusweisGespeichertModule>
	</div>
</Overlay>

<Overlay bind:hidden={waitOverlayHidden}>
	<p class="text-white font-semibold text-4xl">
		Bitte warten sie, ihr Ausweis wird nun erstellt.
	</p>
</Overlay>

<form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
	<div id="formular-box" class="formular-boxen ring-0">
		<!-- Später weitermachen / Hilfe anfordern -->

		<div
			class="w-full grid gap-x-4 gap-y-2
	grid-cols-1
	xs:grid-cols-2
    "
		>
			<div class="md:justify-self-start">
				<button
					class="button"
					type="button"
					on:click={spaeterWeitermachen}>Später Weitermachen</button
				>
			</div>
			<div class="md:justify-self-end"><Hilfe /></div>
		</div>

		<div class="mt-2">
			<button
				class="button hidden"
				on:click={automatischAusfüllen}
				type="button">Automatisch Ausfüllen</button
			>
		</div>

<!-- A Prüfung der Ausweisart -->
<BereichLabel bereich="A">Prüfung der Ausweisart</BereichLabel>
<div class="collapseBereich">
<Ausweisart
	bind:gebaeude
	bind:gebaeude_aufnahme_allgemein
	bind:ausweis
/>
</div>

<!-- B Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss -->

<BereichLabel bereich="B">Eingabe&nbsp;der&nbsp;Gebäudeadresse - Angaben&nbsp;zu&nbsp;Wohnfläche, Keller&nbsp;und&nbsp;Dachgeschoss</BereichLabel>
<div class="collapseBereich">
<GebaeudeDaten 
	bind:gebaeude_aufnahme_allgemein
/>
</div>

<!-- C Eingabe von 3 zusammenhängenden Verbrauchsjahren -->

<BereichLabel bereich="C">Eingabe von 3&nbsp;zusammenhängenden Verbrauchsjahren</BereichLabel>
<div class="collapseBereich">
	<Verbrauch 
	bind:gebaeude
	bind:gebaeude_aufnahme_allgemein
	bind:ausweis
/>
</div>

<!-- D Eingabe Warmwasseranteil und Verwendung von alternativen Energieversorgungssystemen -->

<BereichLabel bereich="D">Eingabe&nbsp;Warmwasseranteil und&nbsp;Verwendung&nbsp;von&nbsp;alternativen Energieversorgungssystemen</BereichLabel>
<div class="collapseBereich">
	<Warmwasseranteil 
	bind:ausweis
/>
</div>	

<!-- E Eingabe von Gebäudeteil, Lüftung, Kühlung und Leerstand -->

<BereichLabel bereich="E">Eingabe&nbsp;von&nbsp;Gebäudeteil, Lüftung,&nbsp;Kühlung&nbsp;und&nbsp;Leerstand</BereichLabel>
<div class="collapseBereich">
	<LueftungundLeerstand 
	bind:gebaeude_aufnahme_allgemein
/>
</div>

<!-- F Angaben zum Sanierungszustand des Gebäudes -->

<BereichLabel bereich="F">Angaben zum Sanierungszustand des Gebäudes</BereichLabel>
<div class="collapseBereich">
	<BilderZusatzsysteme
	bind:images 
	bind:gebaeude 
	bind:gebaeude_aufnahme_allgemein 
	bind:ausweis 
/>
</div>	








</div>

</form>

<style lang="scss">
</style>