693 lines
19 KiB
Svelte
693 lines
19 KiB
Svelte
<script lang="ts">
|
|
import HelpLabel from "#components/labels/HelpLabel.svelte";
|
|
import Inputlabel from "#components/labels/InputLabel.svelte";
|
|
import Verbrauchslabel from "#components/labels/VerbrauchsLabel.svelte";
|
|
import StromVerbrauchslabel from "#components/labels/StromVerbrauchslabel.svelte";
|
|
import VerbrauchsHelpLabel from "#components/labels/VerbrauchsHelpLabel.svelte";
|
|
import StromVerbrauchsHelpLabel from "#components/labels/StromVerbrauchsHelpLabel.svelte";
|
|
import SanierungsOption from "#components/Ausweis/SanierungsOption.svelte"
|
|
import moment from "moment";
|
|
import fuelList from "./brennstoffListe.js";
|
|
import { auditVerbrauchAbweichung } from "../Verbrauchsausweis/audits/VerbrauchAbweichung.js";
|
|
import {
|
|
AufnahmeClient,
|
|
VerbrauchsausweisGewerbeClient,
|
|
} from "./types.js";
|
|
|
|
export let aufnahme: AufnahmeClient;
|
|
export let ausweis: VerbrauchsausweisGewerbeClient;
|
|
|
|
// Wir dürfen bis zu 4.5 Jahre alte Klimafaktoren benutzen, also nehmen wir alle Monate seitdem und generieren daraus die Auswahl.
|
|
// Allerdings müssen wir auch berücksichtigen, dass wir drei folgende Jahre brauchen, also
|
|
// kann der Nutzer nur 36 + 18 Monate zurückgehen.
|
|
let availableDates: {
|
|
year: number;
|
|
month: number;
|
|
}[] = [];
|
|
|
|
let monthNames = [
|
|
"Januar",
|
|
"Februar",
|
|
"März",
|
|
"April",
|
|
"Mai",
|
|
"Juni",
|
|
"Juli",
|
|
"August",
|
|
"September",
|
|
"Oktober",
|
|
"November",
|
|
"Dezember",
|
|
];
|
|
|
|
const startDate = moment(
|
|
aufnahme.erstellungsdatum || Date.now()
|
|
)
|
|
.subtract(4, "years")
|
|
.subtract(6, "months");
|
|
const endDate = moment(
|
|
aufnahme.erstellungsdatum || Date.now()
|
|
).subtract(3, "years");
|
|
|
|
for (let m = moment(startDate); m.isBefore(endDate); m.add(1, "month")) {
|
|
availableDates.push({
|
|
year: m.year(),
|
|
month: m.month(),
|
|
});
|
|
}
|
|
|
|
const fuelMap: Record<string, string[]> = {};
|
|
for (const fuel of fuelList) {
|
|
// fuelMap[fuel.energietraeger] = ...
|
|
fuelMap[fuel[0]] = fuelMap[fuel[0]] || [];
|
|
fuelMap[fuel[0]].push(fuel[1]);
|
|
}
|
|
|
|
let month = moment(ausweis.startdatum).month();
|
|
let year = moment(ausweis.startdatum).year();
|
|
|
|
$: {
|
|
if (typeof month === "number" && typeof year === "number") {
|
|
// Wir addieren einfach 2 Tage auf das Datum, falls der Nutzer außerhalb Deutschlands und in einer anderen Zeitzone ist.
|
|
// NOTE: Das ist eine grauenvolle Lösung aber alle anderen funktionieren irgendwie nicht...
|
|
ausweis.startdatum = moment()
|
|
.set("month", month)
|
|
.set("year", year)
|
|
.startOf("month")
|
|
.add(2, "days")
|
|
.toDate();
|
|
}
|
|
}
|
|
|
|
$: abweichung = auditVerbrauchAbweichung(ausweis, aufnahme);
|
|
</script>
|
|
|
|
<div
|
|
id="verbrauch"
|
|
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
|
|
"
|
|
>
|
|
<!-- primäre Heizquellen -->
|
|
|
|
<!-- primäre Heizquellen -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 order-1 md:order-1 xl:order-1">
|
|
<div class="input-standard">
|
|
<Inputlabel title="Heizquellen"></Inputlabel>
|
|
|
|
<div class="input-checkboxen">
|
|
<div
|
|
class="grid grid-cols-[25px_max-content] items-center justify-items-start"
|
|
>
|
|
<input
|
|
id="primaere_heizquelle"
|
|
type="checkbox"
|
|
class="checkbox"
|
|
name="primaere_heizquelle"
|
|
checked={true}
|
|
/>
|
|
<label for="primaere_heizquelle">Heizquelle</label>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>Sie haben die Möglichkeit neben der Hauptheizung die <b>Verbräuche weiterer Heizquellen</b>
|
|
(z.B. Einzelöfen, Kamin, Nachtspeicher, Wärmepumpe, zweiter Heizkessel etc.) einzugeben.
|
|
Dazu setzen Sie den Haken bei zusätzlicher Heizquelle. Eine weiterer Bereich zur Eingabe der
|
|
Verbräuche öffnet sich dann.</HelpLabel>
|
|
</div>
|
|
</div>
|
|
{#if !ausweis.zusaetzliche_heizquelle}
|
|
<div class="input-standard">
|
|
|
|
<div class="input-checkboxen">
|
|
<div
|
|
class="grid grid-cols-[25px_max-content] items-center justify-items-start"
|
|
>
|
|
|
|
<input
|
|
id="zusaetzliche_heizquelle_1"
|
|
type="checkbox"
|
|
class="checkbox"
|
|
name="zusaetzliche_heizquelle_1"
|
|
bind:checked={ausweis.zusaetzliche_heizquelle}
|
|
data-cy="zusaetzliche_heizquelle"
|
|
/>
|
|
<label
|
|
for="zusaetzliche_heizquelle_1"
|
|
class="cursor-pointer">zusätzl. Heizquelle</label
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="help-label">
|
|
<HelpLabel>Bitte geben Sie das <b>Startjahr der ersten Verbrauchsperiode</b> ein. Weitere Zeitangaben müssen nichht
|
|
gemacht werden, da alle 3 Verbrauchsjahre zusammenhängend sein sollen.</HelpLabel>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
</div>
|
|
|
|
<!-- Zeitraum 1 -->
|
|
|
|
<div class="grid grid-cols-2 gap-x-4 order-2 md:order-2 xl:order-2">
|
|
<div class="input-standard">
|
|
<Inputlabel title="Start-Monat *"></Inputlabel>
|
|
|
|
<select
|
|
name="energieverbrauch_zeitraum_monat"
|
|
class="rounded-tr-none rounded-br-none w-full m-0"
|
|
bind:value={month}
|
|
required
|
|
>
|
|
{#if year !== null}
|
|
{#each availableDates.filter((date) => date.year == year) as date}
|
|
<option value={date.month}
|
|
>{monthNames[date.month]}</option
|
|
>
|
|
{/each}
|
|
{:else}
|
|
{#each Array.from(availableDates.reduce((a, c) => {
|
|
a.add(c.month);
|
|
return a;
|
|
}, new Set())) as availableMonth}
|
|
<option
|
|
value={availableMonth}
|
|
selected={month === availableMonth}
|
|
>{monthNames[availableMonth]}</option
|
|
>
|
|
{/each}
|
|
{/if}
|
|
</select>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>Bitte geben Sie hier den <b>Startmonat der ersten Verbrauchsperiode</b> ein. Es sind nur Monate auswählbar,
|
|
die im zulässigen Zeitraum (Endzeitpunkt von Jahr 3 darf nicht älter als 18 Monate sein) liegen. Wählen Sie ein
|
|
aktuellerses Jahr um alle Monate zu sehen.
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-standard">
|
|
<Inputlabel title="Start-Jahr *"></Inputlabel>
|
|
|
|
<select
|
|
name="energieverbrauch_zeitraum_jahr"
|
|
class="rounded-tl-none rounded-bl-none w-full m-0"
|
|
bind:value={year}
|
|
required
|
|
>
|
|
{#each Array.from(availableDates.reduce((a, c) => {
|
|
a.add(c.year);
|
|
return a;
|
|
}, new Set())) as year}
|
|
<option
|
|
value={year}
|
|
selected={ausweis.startdatum?.getFullYear() === year}
|
|
>{year}</option
|
|
>
|
|
{/each}
|
|
</select>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>Bitte geben Sie das <b>Startjahr der ersten Verbrauchsperiode</b> ein. Weitere Zeitangaben müssen nichht
|
|
gemacht werden, da alle 3 Verbrauchsjahre zusammenhängend sein sollen.</HelpLabel>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- primäre Brennstoff und Einheiten * -->
|
|
|
|
<div class="grid grid-cols-2 gap-x-4 order-3 md:order-3 xl:order-3">
|
|
<div class="input-standard">
|
|
<Inputlabel title="primär. Brennstoff *"></Inputlabel>
|
|
|
|
<select
|
|
class="rounded-e-none"
|
|
name="brennstoff_1"
|
|
data-cy="brennstoff_1"
|
|
bind:value={ausweis.brennstoff_1}
|
|
required
|
|
>
|
|
<option disabled selected value={null}>Bitte auswählen</option>
|
|
{#each Object.keys(fuelMap) as fuel}
|
|
<option value={fuel}>{fuel}</option>
|
|
{/each}
|
|
</select>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
<b>Heizöl:</b> Flüssiger fossiler Brennstoff.<br/>
|
|
<b>Erdgas:</b> Gasförmiger fossiler Brennstoff.<br/>
|
|
<b>Flüssiggas:</b> Wie Erdgas fossiler Brennstoff - im Flüssiggastank gelagert<br/>
|
|
<b>Braunkohle:</b> Fester fossiler Brennstoff<br/>
|
|
<b>Holz-Pellets:</b> Stäbchenförmige Pellets - erneuerbarer (nachwachsender) Brennstoff<br/>
|
|
<b>Holzhackschnitzel:</b>Wie Holz-Pellets<br/>
|
|
<b>Fernwärme, Nahwärme:</b> kommunales Wärmenetz - <strong>erfragen Sie
|
|
den Primärenergiefaktor bei Ihrem Energieversorger</strong> (meistens mit regenartivem Anteil)<br/>
|
|
<b>Strommix:</b> Meist bei Wärmepumpe oder Nachtspeicher.<br/>
|
|
<b>Koks:</b> stark kohlenstoffhaltiger fossiler Brennstoff.<br/>
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-standard">
|
|
<Inputlabel title="Einheit *"></Inputlabel>
|
|
|
|
<select
|
|
class="rounded-s-none"
|
|
name="einheit_1"
|
|
data-cy="einheit_1"
|
|
bind:value={ausweis.einheit_1}
|
|
disabled={!ausweis.brennstoff_1}
|
|
required
|
|
>
|
|
<option disabled selected >Bitte auswählen</option>
|
|
{#each fuelMap.hasOwnProperty(ausweis.brennstoff_1) ? fuelMap[ausweis.brennstoff_1] : [] as unit}
|
|
<option value={unit}>{unit}</option>
|
|
{/each}
|
|
</select>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
Bitte geben Sie die Einheit ein. Die Liste passt sich entsprechend des ausgeählten Brennstoffes an.
|
|
Erdgas wird meist auf der Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in
|
|
Litern vor. Pellets oder Brennholz in kg.
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Verbrauch 1 -->
|
|
|
|
<div class="input-standard order-4 md:order-4 xl:order-4">
|
|
<Verbrauchslabel bind:ausweis addYear={1}></Verbrauchslabel>
|
|
|
|
<input
|
|
name="verbrauch_1"
|
|
type="number"
|
|
class:linked={abweichung.indexOf(1) > -1}
|
|
bind:value={ausweis.verbrauch_1}
|
|
required
|
|
/>
|
|
|
|
<div class="VerbrauchsEinheit">
|
|
{#if ausweis.einheit_1 === "Bitte auswählen"}
|
|
{:else if ausweis.einheit_1 != "Bitte auswählen"}
|
|
{ausweis.einheit_1}
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
<VerbrauchsHelpLabel
|
|
bind:ausweis
|
|
bind:aufnahme
|
|
addYear={1}
|
|
heizquelle={1}
|
|
></VerbrauchsHelpLabel>
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Verbrauch 2 -->
|
|
|
|
<div class="input-standard order-5 md:order-5 xl:order-5">
|
|
<Verbrauchslabel bind:ausweis addYear={2}></Verbrauchslabel>
|
|
|
|
<input
|
|
name="verbrauch_2"
|
|
type="number"
|
|
class:linked={abweichung.indexOf(2) > -1}
|
|
bind:value={ausweis.verbrauch_2}
|
|
required
|
|
/>
|
|
<div class="VerbrauchsEinheit">
|
|
{#if ausweis.einheit_1 === "Bitte auswählen"}
|
|
{:else if ausweis.einheit_1 != "Bitte auswählen"}
|
|
{ausweis.einheit_1}
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
<VerbrauchsHelpLabel
|
|
bind:ausweis
|
|
bind:aufnahme
|
|
addYear={2}
|
|
heizquelle={1}
|
|
></VerbrauchsHelpLabel>
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Verbrauch 3 -->
|
|
|
|
<div class="input-standard order-6 md:order-6 xl:order-6">
|
|
<Verbrauchslabel bind:ausweis addYear={3}></Verbrauchslabel>
|
|
|
|
<input
|
|
name="verbrauch_3"
|
|
type="number"
|
|
class:linked={abweichung.indexOf(3) > -1}
|
|
bind:value={ausweis.verbrauch_3}
|
|
required
|
|
/>
|
|
<div class="VerbrauchsEinheit">
|
|
{#if ausweis.einheit_1 === "Bitte auswählen"}
|
|
{:else if ausweis.einheit_1 != "Bitte auswählen"}
|
|
{ausweis.einheit_1}
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
<VerbrauchsHelpLabel
|
|
bind:ausweis
|
|
bind:aufnahme
|
|
addYear={3}
|
|
heizquelle={1}
|
|
></VerbrauchsHelpLabel>
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
{#if ausweis.zusaetzliche_heizquelle}
|
|
<div
|
|
class="hidden xl:block col-span-3 order-7 md:order-7 xl:order-7 h-[4px] bg-white mt-[-10px]"
|
|
></div>
|
|
|
|
<!-- zusätzliche Heizquelle -->
|
|
|
|
<div class="input-standard order-10 md:order-10 xl:order-10">
|
|
<Inputlabel title="zusätzl. Heizquelle"></Inputlabel>
|
|
|
|
<div class="input-checkboxen">
|
|
<div
|
|
class="grid grid-cols-[40px_max-content] items-center justify-items-start"
|
|
>
|
|
<input
|
|
id="zusaetzliche_heizquelle"
|
|
type="checkbox"
|
|
class="checkbox"
|
|
name="zusaetzliche_heizquelle"
|
|
bind:checked={ausweis.zusaetzliche_heizquelle}
|
|
/>
|
|
<label for="zusaetzliche_heizquelle" class="cursor-pointer"
|
|
>zusätzliche Heizquelle</label
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>Hier sind die <b>Verbräuche einer zusätzlichen Heizquelle</b>
|
|
(z.B. Einzelöfen, Kamin, Nachtspeicher, Wärmepumpe, zweiter Heizkessel etc.) einzugeben</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-standard order-11 md:order-11 xl:order-11"></div>
|
|
|
|
<!-- zusätzlicher Brennstoff und Einheiten * -->
|
|
|
|
<div class="grid grid-cols-2 gap-x-4 order-12 md:order-12 xl:order-12">
|
|
<div class="input-standard">
|
|
<Inputlabel title="zusätzl. Brennstoff *"></Inputlabel>
|
|
|
|
<select
|
|
class="rounded-e-none"
|
|
name="brennstoff_2"
|
|
data-cy="brennstoff_2"
|
|
bind:value={ausweis.brennstoff_2}
|
|
required
|
|
>
|
|
<option disabled selected
|
|
>Bitte auswählen</option
|
|
>
|
|
{#each Object.keys(fuelMap) as fuel}
|
|
<option value={fuel}>{fuel}</option>
|
|
{/each}
|
|
</select>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
<b>Heizöl:</b> Flüssiger fossiler Brennstoff.<br/>
|
|
<b>Erdgas:</b> Gasförmiger fossiler Brennstoff.<br/>
|
|
<b>Flüssiggas:</b> Wie Erdgas fossiler Brennstoff - im Flüssiggastank gelagert<br/>
|
|
<b>Braunkohle:</b> Fester fossiler Brennstoff<br/>
|
|
<b>Holz-Pellets:</b> Stäbchenförmige Pellets - erneuerbarer (nachwachsender) Brennstoff<br/>
|
|
<b>Holzhackschnitzel:</b>Wie Holz-Pellets<br/>
|
|
<b>Fernwärme, Nahwärme:</b> kommunales Wärmenetz - <strong>erfragen Sie
|
|
den Primärenergiefaktor bei Ihrem Energieversorger</strong> (meistens mit regenartivem Anteil)<br/>
|
|
<b>Strommix:</b> Meist bei Wärmepumpe oder Nachtspeicher.<br/>
|
|
<b>Koks:</b> stark kohlenstoffhaltiger fossiler Brennstoff.<br/>
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-standard">
|
|
<Inputlabel title="Einheit *"></Inputlabel>
|
|
|
|
<select
|
|
class="rounded-s-none"
|
|
name="einheit_2"
|
|
data-cy="einheit_2"
|
|
bind:value={ausweis.einheit_2}
|
|
disabled={!ausweis.brennstoff_2}
|
|
required
|
|
>
|
|
<option disabled selected
|
|
>Bitte auswählen</option
|
|
>
|
|
{#each fuelMap.hasOwnProperty(ausweis.brennstoff_2) ? fuelMap[ausweis.brennstoff_2] : [] as unit}
|
|
<option value={unit}>{unit}</option>
|
|
{/each}
|
|
</select>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
Bitte geben Sie die Einheit ein. Die Liste passt sich entsprechend des ausgeählten Brennstoffes an.
|
|
Erdgas wird meist auf der Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in
|
|
Litern vor. Pellets oder Brennholz in kg.
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Verbrauch 4 -->
|
|
|
|
<div class="input-standard order-[13] md:order-[13] xl:order-[13]">
|
|
<Verbrauchslabel bind:ausweis addYear={1}></Verbrauchslabel>
|
|
|
|
<input
|
|
name="verbrauch_4"
|
|
type="number"
|
|
bind:value={ausweis.verbrauch_4}
|
|
class:linked={abweichung.indexOf(4) > -1}
|
|
/>
|
|
<div class="VerbrauchsEinheit">
|
|
{#if ausweis.einheit_2}{ausweis.einheit_2}{/if}
|
|
</div>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
<VerbrauchsHelpLabel
|
|
bind:ausweis
|
|
bind:aufnahme
|
|
addYear={1}
|
|
heizquelle={2}
|
|
></VerbrauchsHelpLabel>
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Verbrauch 5 -->
|
|
|
|
<div class="input-standard order-[14] md:order-[14] xl:order-[14]">
|
|
<Verbrauchslabel bind:ausweis addYear={2}></Verbrauchslabel>
|
|
|
|
<input
|
|
name="verbrauch_5"
|
|
type="number"
|
|
bind:value={ausweis.verbrauch_5}
|
|
class:linked={abweichung.indexOf(5) > -1}
|
|
/>
|
|
<div class="VerbrauchsEinheit">
|
|
{#if ausweis.einheit_2}{ausweis.einheit_2}{/if}
|
|
</div>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
<VerbrauchsHelpLabel
|
|
bind:ausweis
|
|
bind:aufnahme
|
|
addYear={2}
|
|
heizquelle={2}
|
|
></VerbrauchsHelpLabel>
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Verbrauch 6 -->
|
|
|
|
<div class="input-standard order-[15] md:order-[15] xl:order-[15]">
|
|
<Verbrauchslabel bind:ausweis addYear={3}></Verbrauchslabel>
|
|
|
|
<input
|
|
name="verbrauch_6"
|
|
type="number"
|
|
bind:value={ausweis.verbrauch_6}
|
|
class:linked={abweichung.indexOf(6) > -1}
|
|
/>
|
|
<div class="VerbrauchsEinheit">
|
|
{#if ausweis.einheit_2}{ausweis.einheit_2}{/if}
|
|
</div>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
<VerbrauchsHelpLabel
|
|
bind:ausweis
|
|
bind:aufnahme
|
|
addYear={3}
|
|
heizquelle={2}
|
|
></VerbrauchsHelpLabel>
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
{/if}
|
|
|
|
|
|
<div
|
|
class="hidden xl:block col-span-3 order-[16] md:order-[16] xl:order-[16] h-[4px] bg-white mt-[-10px]">
|
|
</div>
|
|
|
|
<!-- StromVerbrauch 1 -->
|
|
|
|
<div class="input-standard order-[19] md:order-[19] xl:order-[19]">
|
|
<StromVerbrauchslabel bind:ausweis addYear={1}></StromVerbrauchslabel>
|
|
|
|
<input
|
|
name="strom_1"
|
|
type="number"
|
|
bind:value={ausweis.strom_1}
|
|
required
|
|
/>
|
|
|
|
<div class="VerbrauchsEinheit">
|
|
kWh
|
|
</div>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
<StromVerbrauchsHelpLabel
|
|
bind:ausweis
|
|
bind:aufnahme
|
|
addYear={1}
|
|
heizquelle={1}
|
|
></StromVerbrauchsHelpLabel>
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- StromVerbrauch 2 -->
|
|
|
|
<div class="input-standard order-[20] md:order-[20] xl:order-[20]">
|
|
<StromVerbrauchslabel bind:ausweis addYear={2}></StromVerbrauchslabel>
|
|
|
|
<input
|
|
name="strom_2"
|
|
type="number"
|
|
bind:value={ausweis.strom_2}
|
|
required
|
|
/>
|
|
<div class="VerbrauchsEinheit">
|
|
kWh
|
|
</div>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
<StromVerbrauchsHelpLabel
|
|
bind:ausweis
|
|
bind:aufnahme
|
|
addYear={2}
|
|
heizquelle={1}
|
|
></StromVerbrauchsHelpLabel>
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- StromVerbrauch 3 -->
|
|
|
|
<div class="input-standard order-[21] md:order-[21] xl:order-[21]">
|
|
<StromVerbrauchslabel bind:ausweis addYear={3}></StromVerbrauchslabel>
|
|
|
|
<input
|
|
name="strom_3"
|
|
type="number"
|
|
bind:value={ausweis.strom_3}
|
|
required
|
|
/>
|
|
<div class="VerbrauchsEinheit">
|
|
kWh
|
|
</div>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
<StromVerbrauchsHelpLabel
|
|
bind:ausweis
|
|
bind:aufnahme
|
|
addYear={3}
|
|
heizquelle={1}
|
|
></StromVerbrauchsHelpLabel>
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<div class="bereich-box mt-6 grid
|
|
grid-cols-1 gap-x-4 gap-y-2
|
|
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="col-span-1 sm:col-span-2 xl:col-span-3">Enthält Stromverbrauch für:</div>
|
|
|
|
<!-- Enthält Stromverbrauch für: -->
|
|
|
|
<SanierungsOption value="" label="Heizung" name="stromverbrauch_enthaelt_heizung" help="" bind:checked={ausweis.stromverbrauch_enthaelt_heizung}></SanierungsOption>
|
|
<SanierungsOption value="" label="Warmwasser " name="stromverbrauch_enthaelt_warmwasser" help="" bind:checked={ausweis.stromverbrauch_enthaelt_warmwasser}></SanierungsOption>
|
|
<SanierungsOption value="" label="Lüftung " name="stromverbrauch_enthaelt_lueftung" help="" bind:checked={ausweis.stromverbrauch_enthaelt_lueftung}></SanierungsOption>
|
|
<SanierungsOption value="" label="Beleuchtung" name="stromverbrauch_enthaelt_beleuchtung" help="" bind:checked={ausweis.stromverbrauch_enthaelt_beleuchtung}></SanierungsOption>
|
|
<SanierungsOption value="" label="Kühlung" name="stromverbrauch_enthaelt_kuehlung" help="" bind:checked={ausweis.stromverbrauch_enthaelt_kuehlung}></SanierungsOption>
|
|
|
|
<div class="input-standard mt-6 sm:mt-0">
|
|
<Inputlabel title="Sonstige"></Inputlabel>
|
|
|
|
<input
|
|
name="stromverbrauch_enthaelt_sonstige"
|
|
type="text"
|
|
bind:value={ausweis.stromverbrauch_enthaelt_sonstige}
|
|
/>
|
|
|
|
<div class="help-label">
|
|
<HelpLabel>
|
|
|
|
</HelpLabel>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<style lang="postcss">
|
|
.VerbrauchsEinheit {
|
|
@apply absolute right-[4rem];
|
|
}
|
|
</style>
|