online-energieausweis/src/components/Ausweis/GebaeudeDaten.svelte

<script lang="ts">
	import HelpLabel from "#components/labels/HelpLabel.svelte";
	import Inputlabel from "#components/labels/InputLabel.svelte";

	
	import ZipSearch from "#components/PlzSuche.svelte";
	import { Enums } from "#lib/client/prisma.js";
	import { AufnahmeClient, ObjektClient } from "./types.js";

	export let aufnahme: AufnahmeClient;
	export let objekt: ObjektClient;

	export let ausweisart: Enums.Ausweisart;
</script>

<div
	id="gebaeudedaten"
	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
"
>
	<!-- Straße, Hausnummer * -->

	<div class="input-standard order-1 md:order-1 xl:order-1">
		<Inputlabel title="Straße, Hausnummer *"></Inputlabel>

		<input
			name="adresse"
			data-test="adresse"
			type="text"
			autocomplete="off"
			required
			data-msg-minlength="min. 5 Zeichen"
			data-msg-maxlength="max. 40 Zeichen"
			bind:value={objekt.adresse}
		/>

		<div class="help-label">
			<HelpLabel>
				Straße und Hausnummer des betrachteten Gebäudes. Die Angaen
				werden auf dem Energieausweis vermerkt.
			</HelpLabel>
		</div>
	</div>

	<!-- PLZ / ORT -->

	<div
		class="grid grid-cols-[2fr_6fr] gap-x-4 order-2 md:order-2 xl:order-2 relative"
	>
		<div class="input-noHelp">
			<Inputlabel title="PLZ *"></Inputlabel>

			<ZipSearch
				bind:zip={objekt.plz}
				bind:city={objekt.ort}
				name="plz"
			/>
		</div>

		<div class="input-standard">
			<Inputlabel title="Ort *"></Inputlabel>

			<input
				name="ort"
				data-test="ort"
				readonly={false}
				required
				bind:value={objekt.ort}
				type="text"
			/>

			<div class="help-label">
				<HelpLabel>
					Bitte geben Sie die PLZ des betrachteten Gebäudes ein, der
					Ort wird dann angezeigt und kann ausgewählt werden. Die
					Angaen werden auf dem Energieausweis vermerkt.
				</HelpLabel>
			</div>
		</div>
	</div>

{#if ausweisart == "VerbrauchsausweisWohnen" || ausweisart == "BedarfsausweisWohnen"}

	<div
		class="grid grid-cols-2 gap-x-4 order-3 md:order-3 xl:order-3 relative"
	>
		<!-- Wohnfläche m² * -->

		<div class="input-standard">
			<Inputlabel title="Wohnfläche m² *"></Inputlabel>

			<input
				name="flaeche"
				data-test="flaeche"
				maxlength="4"
				type="number"
				required
				autocomplete="off"
				data-rule-minlength="2"
				data-msg-minlength="min. 2 Zeichen"
				bind:value={aufnahme.flaeche}
			/>

			<div class="help-label">
				<HelpLabel>
					Bitte geben Sie hier die beheizte Wohnfläche in m² ein.
					Dabei handelt es sich um die Wohnfläche abzüglich
					vorhandener Flächen die sich außerhalb des Gebäudes
					befinden. (Balkone, Terassen,etc.).
				</HelpLabel>
			</div>
		</div>

		<!-- Nutzfläche m² * -->

		<div class="input-standard">
			<Inputlabel title="Nutzfläche m² *"></Inputlabel>
	
			<input
				name="nutzflaeche"
				data-test="nutzflaeche"
				maxlength="4"
				type="number"
				required
				bind:value={aufnahme.nutzflaeche}
			/>
	
			<div class="help-label">
				<HelpLabel>
					Bitte geben Sie hier die beheizte Gesamtfläche in m² ein (wenn
					bekannt). Dabei handelt es sich um die Wohnfläche + weiterer
					Flächen innerhalb des Gebäudes (z.B. Fläche des beheizten
					Kellers). <b
						>Diese Fläche wird dann im Energieausweis als energetische
						Nutzfläche (An) ausgewiesen.</b
					>
				</HelpLabel>
			</div>
		</div>

		</div>
{/if}

{#if ausweisart == "VerbrauchsausweisGewerbe"}

<div class="input-standard order-3 md:order-3 xl:order-3">
	<Inputlabel title="Nutzfläche m² *"></Inputlabel>

	<input
		name="nutzflaeche"
		data-test="nutzflaeche"
		maxlength="4"
		type="number"
		required
		bind:value={aufnahme.nutzflaeche}
	/>

	<div class="help-label">
		<HelpLabel>
			Bitte geben Sie hier die beheizte Gesamtfläche in m² ein (wenn
			bekannt). Dabei handelt es sich um die Wohnfläche + weiterer
			Flächen innerhalb des Gebäudes (z.B. Fläche des beheizten
			Kellers). <b
				>Diese Fläche wird dann im Energieausweis als energetische
				Nutzfläche (An) ausgewiesen.</b
			>
		</HelpLabel>
	</div>
</div>

{/if}


	<div class="input-standard order-4 md:order-4 xl:order-4">
		<Inputlabel title="Gebäudeteil *"></Inputlabel>

		<select
			name="gebaeudeteil"
			data-test="gebaeudeteil"
			bind:value={aufnahme.gebaeudeteil}
			required
		>
			<option disabled selected value>Bitte auswählen</option>
			<option value="Gesamtgebäude">Gesamtgebäude</option>
			<option value="Wohnen">Wohnen</option>
		</select>

		<div class="help-label">
			<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>
	</div>




	<!-- Dachgeschoss *-->

	<div class="input-standard order-5 md:order-5 xl:order-5">
		<Inputlabel title="Dachgeschoss *"></Inputlabel>

		<select
			name="dachgeschoss"
			data-test="dachgeschoss"
			bind:value={aufnahme.dachgeschoss}
			required
		>
			<option disabled selected >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>
		</select>

		<div class="help-label">
			<HelpLabel>
				Bei Obergeschoss mit vorhandenen Dachschrägen oder ausgebautem
				Dachgeschoss beheizt auswählen. Bei Kaltdächern oder
				unausgebautem Dachgeschoss bitte unbeheizt auswählen. Bei
				Flachdächern wird nicht vorhanden ausgewählt.
			</HelpLabel>
		</div>
	</div>

	<!-- Keller * -->

	<div class="input-standard order-6 md:order-6 xl:order-6">
		<Inputlabel title="Keller *"></Inputlabel>

		<select
			name="keller"
			data-test="keller"
			required
			bind:value={aufnahme.keller}
		>
			<option disabled selected >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>
		</select>

		<div class="help-label">
			<HelpLabel>
				Diese Angabe hat folgenden Einfluss.<br />
				<b>Keller beheizt:<br />Nutzfläche = Wohnfläche x 1,35.</b>
				<b>Keller unbeheizt:<br />Nutzfläche = Wohnfläche x 1,2.</b>
				Dies ist nur zulässig wenn die Nutzfläche unbekannt ist. Geben Sie
				diese daher unbedingt im nächsten Feld ein wenn bekannt.
			</HelpLabel>
		</div>
	</div>

	<!-- Nutzfläche * -->


</div>