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

<script lang="ts">
<<<<<<< HEAD
=======
	console.log("Hallo Welt");
>>>>>>> origin/UMBE

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

	//import Label from "#components/Label.svelte";

	import { auditHeizungGebaeudeBaujahr } from "../Verbrauchsausweis/audits/HeizungGebaeudeBaujahr.js";
	import { addNotification, deleteNotification } from "@ibcornelsen/ui";
	import TagInput from "../TagInput.svelte";
	import type {
		BedarfsausweisWohnen,
		VerbrauchsausweisGewerbe,
	} from "@ibcornelsen/database/client";
	import { Enums } from "@ibcornelsen/database/client";
	import {
		GebaeudeAufnahmeClient,
		GebaeudeClient,
		VerbrauchsausweisWohnenClient,
	} from "./types.js";

	export let gebaeude: GebaeudeClient;
	export let ausweis:
		| VerbrauchsausweisWohnenClient
		| VerbrauchsausweisGewerbe
		| BedarfsausweisWohnen;
	export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
</script>

<<<<<<< HEAD





<div class="bereich-box relative grid 
=======
<div
	class="bereich-box grid
>>>>>>> origin/UMBE
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
"
>
	<!-- Anlass für Energieausweis -->

<<<<<<< HEAD


<!-- Anlass für Energieausweis -->
=======
	<div class="input-standard order-1 md:order-1 xl:order-1">
		<Inputlabel title="Anlass *"></Inputlabel>
>>>>>>> origin/UMBE

		<select
			id="ausstellgrund"
			class="rounded-e-none"
			name="ausstellgrund"
			placeholder="Anlass"
			required
		>
			{#each Object.entries(Enums.Ausstellgrund) as [name, ausstellgrund]}
				<option value={ausstellgrund}>{name}</option>
			{/each}
		</select>

		<div class="help-label">
			<HelpLabel>Bitte wählen Sie den Anlass.</HelpLabel>
		</div>
	</div>

	<!-- Gebäudetyp -->

	<div class="input-standard order-2 md:order-3 xl:order-2">
		<Inputlabel title="Gebäudetyp *"></Inputlabel>

		<select
			name="gebaeudetyp"
			data-test="gebaeudetyp"
			required
			bind:value={gebaeude_aufnahme_allgemein.gebaeudetyp}
		>
			<option disabled>Bitte auswählen</option>
			<option value="Einfamilienhaus">Einfamilienhaus</option>
			<option value="Freistehendes Einfamilienhaus"
				>Freistehendes Einfamilienhaus</option
			>
			<option value="Freistehendes Zweifamilienhaus"
				>Freistehendes Zweifamilienhaus</option
			>
			<option value="Doppelhaushälfte">Doppelhaushälfte</option>
			<option value="Reihenendhaus">Reihenendhaus</option>
			<option value="Reihenmittelhaus">Reihenmittelhaus</option>
			<option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
			<option value="Wohn- und Geschäftshaus"
				>Wohn- und Geschäftshaus</option
			>
			<option value="Atrium-Bungalow">Atrium-Bungalow</option>
			<option value="Winkelbungalow">Winkelbungalow</option>
		</select>

		<div class="help-label">
			<HelpLabel>Bitte wählen Sie hier den Gebäudetyp aus.</HelpLabel>
		</div>
	</div>

	<!-- Anzahl der Wohnungen -->

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

		<input
			id="einheiten"
			class="rounded-e-none"
			name="einheiten"
			type="number"
			required
			autocomplete="off"
			data-msg="Pflichtfeld"
			maxlength="3"
			bind:value={gebaeude_aufnahme_allgemein.einheiten}
		/>

		<div class="help-label">
			<HelpLabel>
				Bitte geben Sie hier die Anzahl der Wohnungen ein, die sich im
				Gebäude befinden.
			</HelpLabel>
		</div>
	</div>

	<!-- Sanierungsstatus -->

	<div class="input-standard order-4 md:order-2 xl:order-4">
		<Inputlabel title="Sanierungsstatus *"></Inputlabel>

		<select
			name="saniert"
			class=""
			required
			bind:value={gebaeude_aufnahme_allgemein.saniert}
		>
			<option disabled selected value={false}>Bitte auswählen</option>
			<option value={true}>saniert</option>
			<option value={false}>unsaniert</option>
		</select>

		<div class="help-label">
			<HelpLabel>
				Bitte geben Sie an ob das Gebäude energetisch saniert oder
				unsaniert ist. Wenn das Dach mindestens 12 cm gedämmt und
				Heizung sowie Fenster nicht älter als 30 Jahre sind, können Sie
				saniert auswählen.
			</HelpLabel>
		</div>
	</div>

	<!-- Baujahr -->

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

		<TagInput
			name="baujahr_gebaeude"
			type="number"
			onlyUnique={true}
			minChars={4}
			onFocusIn={() => {
				addNotification({
					message: "Info",
					subtext:
						"Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrem Gebäude durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
					dismissable: true,
					uid: "GEBAEUDE_BAUJAHR",
					timeout: 0,
					type: "info",
				});
			}}
			onFocusOut={() => {
				deleteNotification("GEBAEUDE_BAUJAHR");
			}}
			className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)
				? "linked"
				: ""}
			bind:tags={gebaeude_aufnahme_allgemein.baujahr_gebaeude}
		/>

		<div class="help-label">
			<HelpLabel>
				Bitte geben Sie hier das Baujahr des Gebäudes ein. Sollte eine
				eine grundlegende Sanierung von Dach, Fenster und Heizung
				stattgefunden haben, dann berücksichtigen Sie das in dem Sie bei
				Sanierungsstatus -saniert- angeben.
			</HelpLabel>
		</div>
	</div>

	<!-- Baujahr Heizung -->

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

		<TagInput
			name="baujahr_heizung"
			type="number"
			onlyUnique={true}
			minChars={4}
			onFocusIn={() => {
				addNotification({
					message: "Info",
					subtext:
						"Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrer Heizung durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
					dismissable: true,
					uid: "HEIZUNG_BAUJAHR",
					timeout: 0,
					type: "info",
				});
			}}
			onFocusOut={() => {
				deleteNotification("HEIZUNG_BAUJAHR");
			}}
			className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)
				? "linked"
				: ""}
			bind:tags={gebaeude_aufnahme_allgemein.baujahr_heizung}
		/>

		<div class="help-label">
			<HelpLabel>
				Bitte geben Sie hier das Baujahr der Heizungsanlage ein. Sollten
				unterschiedliche Baujahre vorliegen, dann geben Sie einen
				Zeitbereich ein <br />z.B. 1994-2001.
			</HelpLabel>
		</div>
	</div>
</div>