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="B" 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>
					Bitte geben Sie hier die Straße und Hausnummer des Gebäudes ein.
				</HelpLabel>
			</div>
</div>

<!-- PLZ / ORT -->

<div class="grid grid-cols-[2fr_3fr] order-2 md:order-2 xl:order-2">

<div class="input-standard">
	<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>
					Geben Sie die PLZ ein, der Ort des Gebäudes wird automatisch eingetragen.
				</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>

<!-- 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>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>
					TEXT FEHLT
				</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>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>
					TEXT FEHLT
				</HelpLabel>
            </div>
</div>

<!-- Gesamtfläche * -->

<div class="input-standard order-6 md:order-6 xl:order-6">
	<Inputlabel title="Gesamtflä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). Diese Fläche wird dann im Energieausweis
					als energetische Nutzfläche (An) ausgewiesen.
				</HelpLabel>
			</div>
</div>




</div>