-
This commit is contained in:
Robert Jagtiani
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import HelpLabel from "#components/HelpLabel.svelte";
|
||||
import Label from "#components/Label.svelte";
|
||||
import { auditHeizungGebaeudeBaujahr } from "../Verbrauchsausweis/audits/HeizungGebaeudeBaujahr";
|
||||
import { addNotification, deleteNotification } from "@ibcornelsen/ui";
|
||||
import TagInput from "../TagInput.svelte";
|
||||
@@ -16,142 +17,165 @@
|
||||
|
||||
</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">
|
||||
<div class="w-full grid
|
||||
grid-cols-bereich-A gap-x-4
|
||||
xl:grid-cols-bereich-A-xl xl:gap-x-6
|
||||
2xl:grid-cols-bereich-A-2xl 2xl:gap-x-6
|
||||
">
|
||||
|
||||
<!-- Anlass für Energieausweis -->
|
||||
<div class="">
|
||||
<Label>* Anlass für den Energieausweis</Label>
|
||||
<div class="grid gap-x-6 mb-8
|
||||
grid-cols-[minmax(min-content,_130px)]
|
||||
xs:grid-cols-[minmax(min-content,_130px)_minmax(min-content,_130px)]
|
||||
sm:grid-cols-[minmax(min-content,_130px)_minmax(min-content,_130px)_minmax(min-content,_130px)]
|
||||
xl:grid-cols-[1fr_1fr] xl:gap-x-6 xl:mb-0
|
||||
2xl:grid-cols-[1fr_1fr_1fr]
|
||||
">
|
||||
|
||||
{#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>
|
||||
<label class="radio-inline">
|
||||
<input
|
||||
name="ausstellgrund"
|
||||
type="radio"
|
||||
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>
|
||||
<div class="grid grid-cols-1 gap-x-4
|
||||
md:grid-cols-2 md:gap-x-6
|
||||
2xl:grid-cols-4 2xl:gap-x-6
|
||||
">
|
||||
|
||||
<!-- 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>
|
||||
<!-- Baujahr Heizung -->
|
||||
<div class="">
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
<!-- Baujahr -->
|
||||
<div class="">
|
||||
<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>
|
||||
|
||||
<style>
|
||||
|
||||
<!-- Anzahl der Wohnungen -->
|
||||
<div class="">
|
||||
<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>
|
||||
|
||||
input[type="radio"] {
|
||||
@apply w-5 h-5 rounded-full;
|
||||
<!-- Sanierungsstatus -->
|
||||
<div class="">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
|
||||
input[type="radio"] {
|
||||
@apply w-5 h-5 accent-secondary
|
||||
}
|
||||
|
||||
.radio-inline {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<button type="button" class="button" on:click={() => (showHelp = !showHelp)}
|
||||
<button class="button" type="button" on:click={() => (showHelp = !showHelp)}
|
||||
>Hilfe anfordern</button
|
||||
>
|
||||
|
||||
|
||||
@@ -64,25 +64,158 @@
|
||||
$: abweichung = auditVerbrauchAbweichung(ausweis, gebaeude);
|
||||
</script>
|
||||
|
||||
<div class="w-full flex flex-col gap-4">
|
||||
<div class="w-full grid grid-cols-[1fr,1fr,1fr,1fr,1fr] gap-6">
|
||||
<div>
|
||||
|
||||
|
||||
<div>
|
||||
<div class="grid grid-cols-[40px_1fr] mb-4 xl:mb-0">
|
||||
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox w-[20px] h-[20px] self-center -mt-1"
|
||||
name="zusaetzliche_heizquelle"
|
||||
bind:checked={ausweis.zusaetzliche_heizquelle}
|
||||
/>
|
||||
|
||||
<div class="w-[150px]">
|
||||
<HelpLabel title="zusätzliche Heizquelle">
|
||||
Wenn eine zusätzliche Heizquelle vorhanden geben Sie hier drei
|
||||
zusammenhängende Verbrauchsjahre ein. Es sollen die gleichen
|
||||
Verbrauchszeiträume wie bei der primären Heizung verwendet
|
||||
werden.
|
||||
</HelpLabel>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox"
|
||||
name="zusaetzliche_heizquelle"
|
||||
bind:checked={ausweis.zusaetzliche_heizquelle}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<input class="hidden xl:invisible xl:block"/>
|
||||
<div class="grid grid-cols-[40px_120px] gap-x-1 items-center">
|
||||
<div></div>
|
||||
<span>Zeitraum:</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<HelpLabel title="Brennstoff *">
|
||||
<div class="grid grid-cols-[30px_1fr_1fr_30px_1fr] gap-x-2 items-center justify-items-center">
|
||||
|
||||
<span class="">von</span>
|
||||
|
||||
<select
|
||||
name="energieverbrauch_zeitraum_monat"
|
||||
class="rounded-tr-none rounded-br-none w-full m-0"
|
||||
bind:value={month}
|
||||
required
|
||||
>
|
||||
<option>Monat</option>
|
||||
{#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 month}
|
||||
<option value={month}>{monthNames[month]}</option>
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
|
||||
<select
|
||||
name="energieverbrauch_zeitraum_jahr"
|
||||
class="rounded-tl-none rounded-bl-none w-full m-0"
|
||||
bind:value={year}
|
||||
required
|
||||
>
|
||||
<option>Jahr</option>
|
||||
{#each Array.from(availableDates.reduce((a,c) => {
|
||||
a.add(c.year);
|
||||
return a;
|
||||
}, new Set())) as year}
|
||||
<option value={year}>{year}</option>
|
||||
{/each}
|
||||
</select>
|
||||
|
||||
|
||||
<span class="">bis</span>
|
||||
|
||||
<input
|
||||
|
||||
value={moment(ausweis.startdatum)
|
||||
.add("1", "year")
|
||||
.format("MM.Y")}
|
||||
readonly
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="invisible">
|
||||
<span>leer</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-[1fr_30px_1fr_30px_1fr] gap-x-2 items-center justify-items-center">
|
||||
|
||||
<div></div>
|
||||
|
||||
<span class="justify-self-center">von</span>
|
||||
|
||||
<input
|
||||
class="klima text-right"
|
||||
value={moment(ausweis.startdatum)
|
||||
.add("1", "year")
|
||||
.format("MM.Y")}
|
||||
readonly
|
||||
/>
|
||||
|
||||
<span class="justify-self-center">bis</span>
|
||||
|
||||
<input
|
||||
value={moment(ausweis.startdatum)
|
||||
.add("2", "years")
|
||||
.format("MM.Y")}
|
||||
readonly
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="invisible">
|
||||
<span>leer</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-[1fr_30px_1fr_30px_1fr] gap-x-2 items-center justify-items-center">
|
||||
|
||||
<div></div>
|
||||
|
||||
<span class="justify-self-center">von</span>
|
||||
|
||||
<input
|
||||
class="klima text-right"
|
||||
value={moment(ausweis.startdatum)
|
||||
.add("2", "years")
|
||||
.format("MM.Y")}
|
||||
readonly
|
||||
/>
|
||||
|
||||
<span class="justify-self-center">bis</span>
|
||||
|
||||
<input
|
||||
value={moment(ausweis.startdatum)
|
||||
.add("3", "years")
|
||||
.format("MM.Y")}
|
||||
readonly
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="grid grid-cols-2 gap-x-6">
|
||||
|
||||
<div>
|
||||
|
||||
<div class="grid grid-cols-[3fr_2fr] gap-x-2">
|
||||
|
||||
<div>
|
||||
<HelpLabel title="* Brennstoff">
|
||||
<b>Heizöl:</b> Flüssiger Brennstoff; Heizöl wird aus schwer
|
||||
entflammbaren Anteilen des Erdöls hergestellt.<br /><br />
|
||||
<b>Erdgas H, Erdgas L:</b> Brennbares Naturgas das in
|
||||
@@ -109,39 +242,92 @@
|
||||
<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br /><br />
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<select name="brennstoff_1" required bind:value={gebaeude_aufnahme_allgemein.brennstoff_1}>
|
||||
<select
|
||||
class="rounded-e-none"
|
||||
name="brennstoff_1"
|
||||
required bind:value={gebaeude_aufnahme_allgemein.brennstoff_1}
|
||||
>
|
||||
|
||||
<option disabled>Bitte auswählen</option>
|
||||
{#each Object.keys(fuelMap) as fuel}
|
||||
<option value={fuel}>{fuel}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<HelpLabel title="Einheit *">
|
||||
<div>
|
||||
<HelpLabel title="* Einheit">
|
||||
Bitte geben Sie die Einheit ein. Erdgas wird meist auf der
|
||||
Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in Litern
|
||||
vor. Pellets oder Brennholz in SRm (Schüttraummetern).
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<select
|
||||
|
||||
<select
|
||||
class="rounded-s-none"
|
||||
name="einheit_1"
|
||||
required
|
||||
bind:value={ausweis.einheit_1}
|
||||
bind:value={ausweis.einheit_1}
|
||||
>
|
||||
<option disabled>Bitte auswählen</option>
|
||||
{#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_1) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_1] : []) as unit}
|
||||
<option value={unit}>{unit}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Brennstoff *</Label>
|
||||
<div>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
|
||||
|
||||
<span>* Verbrauch</span>
|
||||
<input
|
||||
name="verbrauch_1"
|
||||
type="number"
|
||||
class:linked={abweichung.indexOf(1) > -1}
|
||||
bind:value={ausweis.verbrauch_1}
|
||||
required
|
||||
/>
|
||||
|
||||
<span>* Verbrauch</span>
|
||||
<input
|
||||
name="verbrauch_2"
|
||||
type="number"
|
||||
class:linked={abweichung.indexOf(2) > -1}
|
||||
bind:value={ausweis.verbrauch_2}
|
||||
required
|
||||
/>
|
||||
|
||||
|
||||
<span>* Verbrauch</span>
|
||||
<input
|
||||
name="verbrauch_3"
|
||||
type="number"
|
||||
class:linked={abweichung.indexOf(3) > -1}
|
||||
bind:value={ausweis.verbrauch_3}
|
||||
required
|
||||
/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
|
||||
<div class="grid grid-cols-[3fr_2fr] gap-x-2">
|
||||
|
||||
<div>
|
||||
|
||||
<Label>* Brennstoff</Label>
|
||||
|
||||
<select
|
||||
class="rounded-e-none"
|
||||
name="brennstoff_2"
|
||||
bind:value={gebaeude_aufnahme_allgemein.brennstoff_2}
|
||||
disabled={!ausweis.zusaetzliche_heizquelle}
|
||||
@@ -152,13 +338,14 @@
|
||||
<option value={fuel}>{fuel}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<Label>* Einheit</Label>
|
||||
|
||||
<div>
|
||||
<Label>Einheit *</Label>
|
||||
<div>
|
||||
<select
|
||||
class="rounded-s-none"
|
||||
name="einheit_2"
|
||||
disabled={!ausweis.zusaetzliche_heizquelle}
|
||||
bind:value={ausweis.einheit_2}
|
||||
@@ -168,138 +355,14 @@
|
||||
{#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_2) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_2] : []) as unit}
|
||||
<option value={unit}>{unit}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-[2fr_1fr_2fr_2fr] gap-6">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="column">
|
||||
<span>von</span>
|
||||
<select
|
||||
name="energieverbrauch_zeitraum_monat"
|
||||
class="rounded-tr-none rounded-br-none w-full m-0"
|
||||
bind:value={month}
|
||||
required
|
||||
>
|
||||
<option>auswählen</option>
|
||||
{#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 month}
|
||||
<option value={month}>{monthNames[month]}</option>
|
||||
{/each}
|
||||
{/if}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
|
||||
<select
|
||||
name="energieverbrauch_zeitraum_jahr"
|
||||
class="rounded-tl-none rounded-bl-none w-full m-0"
|
||||
bind:value={year}
|
||||
required
|
||||
>
|
||||
<option>auswählen</option>
|
||||
{#each Array.from(availableDates.reduce((a,c) => {
|
||||
a.add(c.year);
|
||||
return a;
|
||||
}, new Set())) as year}
|
||||
<option value={year}>{year}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="column">
|
||||
<span>von</span>
|
||||
<input
|
||||
class="klima"
|
||||
value={moment(ausweis.startdatum)
|
||||
.add("1", "year")
|
||||
.format("MM.Y")}
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
<div class="column">
|
||||
<span>von</span>
|
||||
<input
|
||||
class="klima"
|
||||
value={moment(ausweis.startdatum)
|
||||
.add("2", "years")
|
||||
.format("MM.Y")}
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="column">
|
||||
<span>bis</span>
|
||||
<input
|
||||
|
||||
value={moment(ausweis.startdatum)
|
||||
.add("1", "year")
|
||||
.format("MM.Y")}
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
<div class="column">
|
||||
<span>bis</span>
|
||||
<input
|
||||
|
||||
value={moment(ausweis.startdatum)
|
||||
.add("2", "years")
|
||||
.format("MM.Y")}
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
<div class="column">
|
||||
<span>bis</span>
|
||||
<input
|
||||
|
||||
value={moment(ausweis.startdatum)
|
||||
.add("3", "years")
|
||||
.format("MM.Y")}
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="column">
|
||||
<span>Verbrauch *</span>
|
||||
<input
|
||||
name="verbrauch_1"
|
||||
type="number"
|
||||
class:linked={abweichung.indexOf(1) > -1}
|
||||
bind:value={ausweis.verbrauch_1}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="column">
|
||||
<span>Verbrauch *</span>
|
||||
<input
|
||||
name="verbrauch_2"
|
||||
type="number"
|
||||
class:linked={abweichung.indexOf(2) > -1}
|
||||
bind:value={ausweis.verbrauch_2}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="column">
|
||||
<span>Verbrauch *</span>
|
||||
<input
|
||||
name="verbrauch_3"
|
||||
type="number"
|
||||
class:linked={abweichung.indexOf(3) > -1}
|
||||
bind:value={ausweis.verbrauch_3}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="column">
|
||||
<span>Verbrauch</span>
|
||||
<input
|
||||
name="verbrauch_4"
|
||||
@@ -308,8 +371,7 @@
|
||||
class:linked={abweichung.indexOf(4) > -1}
|
||||
disabled={!ausweis.zusaetzliche_heizquelle}
|
||||
/>
|
||||
</div>
|
||||
<div class="column">
|
||||
|
||||
<span>Verbrauch</span>
|
||||
<input
|
||||
name="verbrauch_5"
|
||||
@@ -318,8 +380,7 @@
|
||||
class:linked={abweichung.indexOf(5) > -1}
|
||||
disabled={!ausweis.zusaetzliche_heizquelle}
|
||||
/>
|
||||
</div>
|
||||
<div class="column">
|
||||
|
||||
<span>Verbrauch</span>
|
||||
<input
|
||||
name="verbrauch_6"
|
||||
@@ -328,13 +389,18 @@
|
||||
class:linked={abweichung.indexOf(6) > -1}
|
||||
disabled={!ausweis.zusaetzliche_heizquelle}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.column {
|
||||
@apply flex flex-row items-center gap-4;
|
||||
}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
|
||||
input[type="checkbox"] {@apply accent-secondary}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user