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

<script lang="ts">

	import HelpLabel from "#labels/HelpLabel.svelte";
	import Inputlabel from "#labels/InputLabel.svelte";

    import ZipSearch from "#components/PlzSuche.svelte";
    import { Enums } from "@ibcornelsen/database/client"

    export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;

</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={gebaeude_aufnahme_allgemein.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={gebaeude_aufnahme_allgemein.plz}
		bind:city={gebaeude_aufnahme_allgemein.ort}
		name="plz"
	/>

</div>

<div class="input-standard">
	<Inputlabel title="Ort *"></Inputlabel>
	
	<input
		name="ort"
		data-test="ort"
		readonly={true}
		bind:value={gebaeude_aufnahme_allgemein.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>

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

<div class="input-standard order-3 md:order-3 xl:order-3">
	<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={gebaeude_aufnahme_allgemein.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>

<!-- Dachgeschoss *-->

<div class="input-standard order-4 md:order-2 xl:order-4">
    <Inputlabel title="Dachgeschoss *"></Inputlabel>
        
    <select
		name="dachgeschoss"
		data-test="dachgeschoss"
		bind:value={gebaeude_aufnahme_allgemein.dachgeschoss}
		required
	>
			<option disabled selected value={false}>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-4 md:order-2 xl:order-4">
    <Inputlabel title="Keller *"></Inputlabel>
        
    <select
		name="keller"
		data-test="keller"
		required
		bind:value={gebaeude_aufnahme_allgemein.keller}
	>
			<option disabled selected value={false}>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>

<!-- Gesamtfläche * -->

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

    <input
		name="nutzflaeche"
		data-test="nutzflaeche"
		maxlength="4"
		type="number"
		required
		autocomplete="off"
		data-rule-minlength="2"
		data-msg-minlength="min. 2 Zeichen"
		bind:value={gebaeude_aufnahme_allgemein.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>