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

<script lang="ts">
	import HelpLabel from "#components/labels/HelpLabel.svelte";
	import Inputlabel from "#components/labels/InputLabel.svelte";
	import { VerbrauchsausweisGewerbeClient, VerbrauchsausweisWohnenClient } from "./types.js";

	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient;

	$: {
		if (!ausweis.warmwasser_enthalten) {
			ausweis.warmwasser_anteil_bekannt = false;
		}
	}
</script>

<div
	id="warmwasser"
	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
	"
>
	<div class="input-standard order-1 md:order-1 xl:order-1">
		<Inputlabel title="Warmwasser im Verbrauch enthalten"></Inputlabel>

		<div class="input-row items-center gap-2">
			<div
				class="grid grid-cols-[25px_max-content] items-center justify-items-start"
			>
				<input
					id="warmwasser_enthalten"
					type="checkbox"
					class="checkbox"
					name="warmwasser_enthalten"
					data-test="warmwasser_enthalten"
					bind:checked={ausweis.warmwasser_enthalten}
				/>
				<label for="warmwasser_enthalten" class="cursor-pointer"
					>Ja</label
				>
			</div>

			<div
				class="grid grid-cols-[25px_max-content] items-center justify-items-start"
			>
				<input
					id="warmwasser_anteil_bekannt"
					type="checkbox"
					class="checkbox"
					name="warmwasser_anteil_bekannt"
					data-test="warmwasser_anteil_bekannt"
					bind:checked={ausweis.warmwasser_anteil_bekannt}
					disabled={!ausweis.warmwasser_enthalten}
				/>
				<label for="warmwasser_anteil_bekannt" class="cursor-pointer"
					>Anteil bekannt</label
				>
			</div>
		</div>

		<div class="help-label">
			<HelpLabel>TEXT FEHLT</HelpLabel>
		</div>
	</div>

	<!-- % Anteil Warmwasser -->

	<div class="input-standard order-2 md:order-2 xl:order-2">
		<Inputlabel title="% Anteil Warmwasser"></Inputlabel>

		<input
			name="anteil_warmwasser_1"
			data-test="anteil_warmwasser_1"
			maxlength="2"
			type="number"
			bind:value={ausweis.anteil_warmwasser_1}
			disabled={!ausweis.warmwasser_anteil_bekannt ||
				!ausweis.warmwasser_enthalten}
			autocomplete="off"
		/>

		<div class="help-label">
			<HelpLabel>
				Wenn bekannt geben Sie den Anteil der Warmwasser-Versorgung hier
				ein. Standardmäßig wird ein Anteil von 18% angenommen.
			</HelpLabel>
		</div>
	</div>

	<!--zusätzliche Heizquelle -->

	<div class="input-standard order-3 md:order-3 xl:order-3">
		<Inputlabel title="zusätzliche Heizquelle"></Inputlabel>

		<input
			name="anteil_warmwasser_2"
			data-test="anteil_warmwasser_2"
			maxlength="3"
			type="number"
			autocomplete="off"
			bind:value={ausweis.anteil_warmwasser_2}
			disabled={!ausweis.zusaetzliche_heizquelle ||
				!ausweis.warmwasser_anteil_bekannt ||
				!ausweis.warmwasser_enthalten}
		/>

		<div class="help-label">
			<HelpLabel>
				Wenn bekannt geben Sie den Anteil der Warmwasser-Versorgung von
				der zusätzlichen Heizquelle hier ein. Standardmäßig wird ein
				Anteil von 18% angenommen.
			</HelpLabel>
		</div>
	</div>

	<!--Alternative Energieversorgungssyteme -->

	<div
		class="input-standard order-4 md:order-4 xl:order-4 sm:col-span-2 items-center"
	>
		<Inputlabel title="Alternative Energieversorgungssyteme"></Inputlabel>

		<div class="input-row items-center gap-2 lg:gap-20 xl:gap-24">
			<div class="grid grid-cols-[max-content_40px] gap-2 items-center">
				<input
					id="alternative_heizung"
					type="checkbox"
					name="alternative_heizung"
					data-test="alternative_heizung"
					bind:checked={ausweis.alternative_heizung}
					value="Heizung"
				/>
				<label
					for="alternative_heizung"
					class="checkbox-inline cursor-pointer">Heizung</label
				>
			</div>

			<div class="grid grid-cols-[max-content_40px] gap-2 items-center">
				<input
					id="alternative_warmwasser"
					type="checkbox"
					name="alternative_warmwasser"
					data-test="alternative_warmwasser"
					bind:checked={ausweis.alternative_warmwasser}
					value="Warmwasser"
				/>
				<label
					for="alternative_warmwasser"
					class="checkbox-inline cursor-pointer">Warmwasser</label
				>
			</div>

			<div class="grid grid-cols-[max-content_40px] gap-2 items-center">
				<input
					id="alternative_lueftung"
					type="checkbox"
					name="alternative_lueftung"
					data-test="alternative_lueftung"
					bind:checked={ausweis.alternative_lueftung}
					value="Lüftung"
				/>
				<label
					for="alternative_lueftung"
					class="checkbox-inline cursor-pointer">Lüftung</label
				>
			</div>

			<div class="grid grid-cols-[max-content_40px] gap-2 items-center">
				<input
					id="alternative_kuehlung"
					type="checkbox"
					name="alternative_kuehlung"
					data-test="alternative_kuehlung"
					bind:checked={ausweis.alternative_kuehlung}
					value="Kühlung"
				/>
				<label
					for="alternative_kuehlung"
					class="checkbox-inline cursor-pointer">Kühlung</label
				>
			</div>
		</div>

		<div class="help-label">
			<HelpLabel></HelpLabel>
		</div>
	</div>
</div>