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

<script lang="ts">
	import HelpLabel from "#components/HelpLabel.svelte";
	import { auditHeizungGebaeudeBaujahr } from "../Verbrauchsausweis/audits/HeizungGebaeudeBaujahr";
	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";

	export let gebaeude: GebaeudeClient;
	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
	export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;

</script>

<div class="GRB">
	<!-- Anlass für Energieausweis -->
	<div class="flex flex-col">
		<span>Anlass für Energieausweis * </span>
		<div class="grid grid-cols-2 gap-x-2 items-center lg:grid-cols-3">
			{#each Object.entries(Enums.Ausstellgrund) as [name, ausstellgrund]}
				<label class="radio-inline">
					<input
						name="ausstellgrund"
						type="radio"
						class="radio radio-secondary"
						value={ausstellgrund}
						bind:group={ausweis.ausstellgrund}
					/>{name}</label
				>
			{/each}
		</div>
	</div>

	<!-- Baujahr Heizung -->
	<div class="form-group col-md-2">
		<HelpLabel title="Baujahr Heizung *">
			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>
			<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>
	</div>

	<!-- Baujahr -->
	<div class="form-group col-md-2">
		<HelpLabel title="Baujahr Gebäude *">
			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>
			<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>
	</div>

	<!-- Anzahl der Wohnungen -->
	<div class="form-group col-md-2">
		<HelpLabel title="Anzahl Wohnungen *">
			Bitte geben Sie hier die Anzahl der Wohnungen ein, die sich im
			Gebäude befinden.
		</HelpLabel>
		<div>
			<input
				name="einheiten"
				type="number"
				required
				autocomplete="off"
				data-msg="Pflichtfeld"
				bind:value={gebaeude_aufnahme_allgemein.einheiten}
				maxlength="3"
			/>
		</div>
	</div>

	<!-- Dachgeschoss -->
	<div class="form-group col-md-2">
		<HelpLabel title="Sanierungsstatus *">
			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>
			<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>
	</div>
</div>

<style>
	

	input[type="radio"] {
		@apply w-5 h-5 rounded-full;
	}

	.radio-inline {
		@apply flex items-center;
	}
</style>