update UMBE

This commit is contained in:
Robert Jagtiani
2024-12-16 17:07:01 +01:00
parent 48d09420ef
commit f2f67cc6b2
10 changed files with 5116 additions and 4342 deletions

File diff suppressed because one or more lines are too long

View File

@@ -28,8 +28,7 @@
export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient; export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
</script> </script>
<div <div id="ausweisart" class="bereich-box grid
class="bereich-box grid
grid-cols-1 gap-x-4 gap-y-8 grid-cols-1 gap-x-4 gap-y-8
sm:grid-cols-2 sm:gap-x-6 sm: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 xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8

View File

@@ -10,7 +10,7 @@
</script> </script>
<div id="B" class="bereich-box grid <div id="gebaeudedaten" class="bereich-box grid
grid-cols-1 gap-x-4 gap-y-8 grid-cols-1 gap-x-4 gap-y-8
sm:grid-cols-2 sm:gap-x-6 sm: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 xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
@@ -41,9 +41,9 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
<!-- PLZ / ORT --> <!-- PLZ / ORT -->
<div class="grid grid-cols-[2fr_3fr] order-2 md:order-2 xl:order-2"> <div class="grid grid-cols-2 gap-x-4 order-2 md:order-2 xl:order-2">
<div class="input-standard"> <div class="input-plz">
<Inputlabel title="PLZ *"></Inputlabel> <Inputlabel title="PLZ *"></Inputlabel>
<ZipSearch <ZipSearch

View File

@@ -1,7 +1,9 @@
<script lang="ts"> <script lang="ts">
import HelpLabel from "../HelpLabel.svelte"; import HelpLabel from "#labels/HelpLabel.svelte";
import moment from "moment"; import Inputlabel from "#labels/InputLabel.svelte";
import Label from "../Label.svelte"; import Label from "../Label.svelte";
import moment from "moment";
import fuelList from "./brennstoffListe.js"; import fuelList from "./brennstoffListe.js";
import { auditVerbrauchAbweichung } from "../Verbrauchsausweis/audits/VerbrauchAbweichung.js"; import { auditVerbrauchAbweichung } from "../Verbrauchsausweis/audits/VerbrauchAbweichung.js";
import { GebaeudeAufnahmeClient, GebaeudeClient, VerbrauchsausweisWohnenClient } from "./types.js"; import { GebaeudeAufnahmeClient, GebaeudeClient, VerbrauchsausweisWohnenClient } from "./types.js";
@@ -9,6 +11,7 @@
export let gebaeude: GebaeudeClient; export let gebaeude: GebaeudeClient;
export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient; export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
export let ausweis: VerbrauchsausweisWohnenClient; export let ausweis: VerbrauchsausweisWohnenClient;
// Wir dürfen bis zu 4.5 Jahre alte Klimafaktoren benutzen, also nehmen wir alle Monate seitdem und generieren daraus die Auswahl. // 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 // Allerdings müssen wir auch berücksichtigen, dass wir drei folgende Jahre brauchen, also
// kann der Nutzer nur 36 + 18 Monate zurückgehen. // kann der Nutzer nur 36 + 18 Monate zurückgehen.
@@ -62,345 +65,527 @@
} }
$: abweichung = auditVerbrauchAbweichung(ausweis, gebaeude); $: abweichung = auditVerbrauchAbweichung(ausweis, gebaeude);
function labelClick(event){
var x = event.target.previousElementSibling;
x.click();
}
</script> </script>
<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>
</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 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"> <div id="verbrauch" class="bereich-box grid
<span>leer</span> grid-cols-1 gap-x-4 gap-y-8
</div> 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="grid grid-cols-[1fr_30px_1fr_30px_1fr] gap-x-2 items-center justify-items-center"> <!-- Heizquellen -->
<div></div> <div class="input-standard order-1 md:order-1 xl:order-1">
<Inputlabel title="Auswahl der Heizquellen"></Inputlabel>
<span class="justify-self-center">von</span>
<input <div class="input-checkboxen">
class="klima text-right"
value={moment(ausweis.startdatum)
.add("1", "year")
.format("MM.Y")}
readonly
/>
<span class="justify-self-center">bis</span>
<input <div class="grid grid-cols-[40px_max-content] items-center justify-items-start">
value={moment(ausweis.startdatum) <input
.add("2", "years") type="checkbox"
.format("MM.Y")} class="checkbox"
readonly name="primaere_heizquelle"
/> checked="checked"
onclick="return false"
</div> />
<label for="primaere_heizquelle" >primäre Heizquelle</label>
</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> <div class="grid grid-cols-[40px_max-content] items-center justify-items-start">
<input
type="checkbox"
class="checkbox"
name="zusaetzliche_heizquelle"
bind:checked={ausweis.zusaetzliche_heizquelle}
/>
<label for="zusaetzliche_heizquelle" class="cursor-pointer" on:click={() => labelClick(event)}>zusätzliche Heizquelle</label>
</div>
<span class="justify-self-center">von</span> </div>
<input <div class="help-label">
class="klima text-right" <HelpLabel>
value={moment(ausweis.startdatum) TEXT FEHLT
.add("2", "years") </HelpLabel>
.format("MM.Y")} </div>
readonly
/>
<span class="justify-self-center">bis</span>
<input
value={moment(ausweis.startdatum)
.add("3", "years")
.format("MM.Y")}
readonly
/>
</div>
</div> </div>
<div class="grid grid-cols-2 gap-x-6">
<div> <!-- primäre Brennstoff und Einheiten * -->
<div class="grid grid-cols-[3fr_2fr] gap-x-2"> <div class="grid grid-cols-2 gap-x-4 order-2 md:order-2 xl:order-2">
<div> <div class="input-standard">
<HelpLabel title="* Brennstoff"> <Inputlabel title="primär Brennstoff *"></Inputlabel>
<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
unterirdischen Lagerstätten vorkommt. Erdgas H hat im Vergleich
zu Erdgas L einen leicht höheren Methangehalt, und daher einen
etwas besseren Brennwert.<br /><br />
<b>Flüssiggas:</b> Meist Propan, Butan und deren Gemische, die
bei Raumtemperatur unter vergleichsweise geringem Druck flüssig
bleiben.<br /><br />
<b>Braunkohle:</b> Durch Druck und Luftabschluss von organischen
Substanzen entstandenes, bräunlich-schwarzes Sedimentgestein.<br
/><br />
<b>Holz-Pellets:</b> Stäbchenförmige Pellets die vollständig
oder überwiegend aus Holz oder Sägenebenprodukten hergestellt
werden.<br /><br />
<b>Holzhackschnitzel:</b> Mit schneidenden Werkzeugen
zerkleinertes Holz.<br /><br />
<b>Nahwärme, Fernwärme:</b> Versorgung von thermischer Energie
über wärmegedämmte Rohrsysteme. Die Wärme wird dabei örtlich von
Heizwerken produziert oder besteht aus Prozesswärme von BHKW's.
Im Unterschied zu Fernwärme wird Nahwärme in kleineren Einheiten
dezentral realisiert.<br /><br />
<b>Strommix:</b> Heizen mit Strom (Nachtspeicher).<br /><br />
<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br /><br />
</HelpLabel>
<div>
<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>
<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 class="help-label">
<HelpLabel>
<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
unterirdischen Lagerstätten vorkommt. Erdgas H hat im Vergleich
zu Erdgas L einen leicht höheren Methangehalt, und daher einen
etwas besseren Brennwert.<br /><br />
<b>Flüssiggas:</b> Meist Propan, Butan und deren Gemische, die
bei Raumtemperatur unter vergleichsweise geringem Druck flüssig
bleiben.<br /><br />
<b>Braunkohle:</b> Durch Druck und Luftabschluss von organischen
Substanzen entstandenes, bräunlich-schwarzes Sedimentgestein.<br
/><br />
<b>Holz-Pellets:</b> Stäbchenförmige Pellets die vollständig
oder überwiegend aus Holz oder Sägenebenprodukten hergestellt
werden.<br /><br />
<b>Holzhackschnitzel:</b> Mit schneidenden Werkzeugen
zerkleinertes Holz.<br /><br />
<b>Nahwärme, Fernwärme:</b> Versorgung von thermischer Energie
über wärmegedämmte Rohrsysteme. Die Wärme wird dabei örtlich von
Heizwerken produziert oder besteht aus Prozesswärme von BHKW's.
Im Unterschied zu Fernwärme wird Nahwärme in kleineren Einheiten
dezentral realisiert.<br /><br />
<b>Strommix:</b> Heizen mit Strom (Nachtspeicher).<br /><br />
<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br /><br />
</HelpLabel>
</div>
</div> </div>
<div> <div class="input-standard">
<HelpLabel title="* Einheit"> <Inputlabel title="Einheit *"></Inputlabel>
Bitte geben Sie die Einheit ein. Erdgas wird meist auf der
Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in Litern <select
vor. Pellets oder Brennholz in SRm (Schüttraummetern). class="rounded-s-none"
</HelpLabel> name="einheit_1"
required
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 class="help-label">
<HelpLabel>
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>
</div>
</div>
<!-- zusätzlicher 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="zusätzlicher Brennstoff *"></Inputlabel>
<select <select
class="rounded-s-none" class="rounded-e-none"
name="einheit_1" name="brennstoff_2"
required bind:value={gebaeude_aufnahme_allgemein.brennstoff_2}
bind:value={ausweis.einheit_1} disabled={!ausweis.zusaetzliche_heizquelle}
required
> >
<option disabled>Bitte auswählen</option>
{#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_1) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_1] : []) as unit} <option disabled> Bitte auswählen</option>
<option value={unit}>{unit}</option> {#each Object.keys(fuelMap) as fuel}
{/each} <option value={fuel}>{fuel}</option>
{/each}
</select> </select>
<div class="help-label">
<HelpLabel>
<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
unterirdischen Lagerstätten vorkommt. Erdgas H hat im Vergleich
zu Erdgas L einen leicht höheren Methangehalt, und daher einen
etwas besseren Brennwert.<br /><br />
<b>Flüssiggas:</b> Meist Propan, Butan und deren Gemische, die
bei Raumtemperatur unter vergleichsweise geringem Druck flüssig
bleiben.<br /><br />
<b>Braunkohle:</b> Durch Druck und Luftabschluss von organischen
Substanzen entstandenes, bräunlich-schwarzes Sedimentgestein.<br
/><br />
<b>Holz-Pellets:</b> Stäbchenförmige Pellets die vollständig
oder überwiegend aus Holz oder Sägenebenprodukten hergestellt
werden.<br /><br />
<b>Holzhackschnitzel:</b> Mit schneidenden Werkzeugen
zerkleinertes Holz.<br /><br />
<b>Nahwärme, Fernwärme:</b> Versorgung von thermischer Energie
über wärmegedämmte Rohrsysteme. Die Wärme wird dabei örtlich von
Heizwerken produziert oder besteht aus Prozesswärme von BHKW's.
Im Unterschied zu Fernwärme wird Nahwärme in kleineren Einheiten
dezentral realisiert.<br /><br />
<b>Strommix:</b> Heizen mit Strom (Nachtspeicher).<br /><br />
<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br /><br />
</HelpLabel>
</div>
</div> </div>
<div class="input-standard">
<Inputlabel title="Einheit *"></Inputlabel>
<select
class="rounded-s-none"
name="einheit_2"
disabled={!ausweis.zusaetzliche_heizquelle}
bind:value={ausweis.einheit_2}
required
>
<option disabled>Bitte auswählen</option>
{#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_2) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_2] : []) as unit}
<option value={unit}>{unit}</option>
{/each}
</select>
<div class="help-label">
<HelpLabel>
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>
</div>
</div>
<!-- Zeitraum 1 -->
<div class="grid grid-cols-3 gap-x-4 order-4 md:order-4 xl:order-4">
<div class="input-standard">
<Inputlabel title="von: Monat *"></Inputlabel>
<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>
<div class="help-label">
<HelpLabel>
TEXT FEHLT
</HelpLabel>
</div>
</div>
<div class="input-standard">
<Inputlabel title="Jahr *"></Inputlabel>
<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>
<div class="help-label">
<HelpLabel>
TEXT FEHLT
</HelpLabel>
</div>
</div>
<div class="input-standard">
<Inputlabel title="bis:"></Inputlabel>
<input
value={moment(ausweis.startdatum)
.add("1", "year")
.format("MM.Y")}
readonly
/>
<div class="help-label">
<HelpLabel>
TEXT FEHLT
</HelpLabel>
</div>
</div>
</div>
<!-- Verbrauch 1 -->
<div class="input-standard order-5 md:order-5 xl:order-5">
<Inputlabel title="Verbrauch *"></Inputlabel>
<input
name="verbrauch_1"
type="number"
class:linked={abweichung.indexOf(1) > -1}
bind:value={ausweis.verbrauch_1}
required
/>
<div class="help-label">
<HelpLabel>
TEXT FEHLT
</HelpLabel>
</div>
</div>
<!-- Verbrauch 4 -->
<div class="input-standard order-6 md:order-6 xl:order-6">
<Inputlabel title="Verbrauch *"></Inputlabel>
<input
name="verbrauch_4"
type="number"
bind:value={ausweis.verbrauch_4}
class:linked={abweichung.indexOf(4) > -1}
disabled={!ausweis.zusaetzliche_heizquelle}
/>
<div class="help-label">
<HelpLabel>
TEXT FEHLT
</HelpLabel>
</div>
</div>
<!-- Zeitraum 2 -->
<div class="grid grid-cols-3 gap-x-4 order-7 md:order-7 xl:order-7">
<div class="input-standard"></div>
<div class="input-standard">
<Inputlabel title="von:"></Inputlabel>
<input
class="klima text-right"
value={moment(ausweis.startdatum)
.add("1", "year")
.format("MM.Y")}
readonly
/>
<div class="help-label">
<HelpLabel>
TEXT FEHLT
</HelpLabel>
</div>
</div> </div>
<div class="input-standard">
<div> <Inputlabel title="bis:"></Inputlabel>
<input
<span>* Verbrauch</span> value={moment(ausweis.startdatum)
<input .add("2", "years")
name="verbrauch_1" .format("MM.Y")}
type="number" readonly
class:linked={abweichung.indexOf(1) > -1} />
bind:value={ausweis.verbrauch_1}
required <div class="help-label">
/> <HelpLabel>
TEXT FEHLT
<span>* Verbrauch</span> </HelpLabel>
<input </div>
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>
<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}
required
>
<option disabled> Bitte auswählen</option>
{#each Object.keys(fuelMap) as fuel}
<option value={fuel}>{fuel}</option>
{/each}
</select>
</div>
<div>
<Label>* Einheit</Label>
<select
class="rounded-s-none"
name="einheit_2"
disabled={!ausweis.zusaetzliche_heizquelle}
bind:value={ausweis.einheit_2}
required
>
<option disabled>Bitte auswählen</option>
{#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> </div>
<div> <!-- Verbrauch 2 -->
<span>Verbrauch</span> <div class="input-standard order-8 md:order-8 xl:order-8">
<input <Inputlabel title="Verbrauch *"></Inputlabel>
name="verbrauch_4"
type="number"
bind:value={ausweis.verbrauch_4}
class:linked={abweichung.indexOf(4) > -1}
disabled={!ausweis.zusaetzliche_heizquelle}
/>
<span>Verbrauch</span>
<input
name="verbrauch_5"
type="number"
bind:value={ausweis.verbrauch_5}
class:linked={abweichung.indexOf(5) > -1}
disabled={!ausweis.zusaetzliche_heizquelle}
/>
<span>Verbrauch</span>
<input
name="verbrauch_6"
type="number"
bind:value={ausweis.verbrauch_6}
class:linked={abweichung.indexOf(6) > -1}
disabled={!ausweis.zusaetzliche_heizquelle}
/>
</div> <input
name="verbrauch_2"
type="number"
class:linked={abweichung.indexOf(2) > -1}
bind:value={ausweis.verbrauch_2}
required
/>
<div class="help-label">
<HelpLabel>
TEXT FEHLT
</HelpLabel>
</div>
</div> </div>
<!-- Verbrauch 5 -->
<div class="input-standard order-9 md:order-9 xl:order-9">
<Inputlabel title="Verbrauch *"></Inputlabel>
<input
name="verbrauch_5"
type="number"
bind:value={ausweis.verbrauch_5}
class:linked={abweichung.indexOf(5) > -1}
disabled={!ausweis.zusaetzliche_heizquelle}
/>
<div class="help-label">
<HelpLabel>
TEXT FEHLT
</HelpLabel>
</div>
</div>
<!-- Zeitraum 2 -->
<div class="grid grid-cols-3 gap-x-4 order-10 md:order-10 xl:order-10">
<div class="input-standard"></div>
<div class="input-standard">
<Inputlabel title="von:"></Inputlabel>
<input
class="klima text-right"
value={moment(ausweis.startdatum)
.add("2", "years")
.format("MM.Y")}
readonly
/>
<div class="help-label">
<HelpLabel>
TEXT FEHLT
</HelpLabel>
</div>
</div>
<div class="input-standard">
<Inputlabel title="bis:"></Inputlabel>
<input
value={moment(ausweis.startdatum)
.add("3", "years")
.format("MM.Y")}
readonly
/>
<div class="help-label">
<HelpLabel>
TEXT FEHLT
</HelpLabel>
</div>
</div>
</div>
<!-- Verbrauch 3 -->
<div class="input-standard order-11 md:order-11 xl:order-11">
<Inputlabel title="Verbrauch *"></Inputlabel>
<input
name="verbrauch_3"
type="number"
class:linked={abweichung.indexOf(3) > -1}
bind:value={ausweis.verbrauch_3}
required
/>
<div class="help-label">
<HelpLabel>
TEXT FEHLT
</HelpLabel>
</div>
</div>
<!-- Verbrauch 6 -->
<div class="input-standard order-12 md:order-12 xl:order-12">
<Inputlabel title="Verbrauch *"></Inputlabel>
<input
name="verbrauch_6"
type="number"
bind:value={ausweis.verbrauch_6}
class:linked={abweichung.indexOf(6) > -1}
disabled={!ausweis.zusaetzliche_heizquelle}
/>
<div class="help-label">
<HelpLabel>
TEXT FEHLT
</HelpLabel>
</div>
</div> </div>
</div>
<style lang="postcss"> <style lang="postcss">
input[type="checkbox"] {@apply accent-secondary}
</style> </style>

View File

@@ -5,9 +5,17 @@
export let ausweis: VerbrauchsausweisWohnenClient; export let ausweis: VerbrauchsausweisWohnenClient;
function labelClick(event){
var x = event.target.previousElementSibling;
x.click();
}
</script> </script>
<div id="B" class="bereich-box grid <div id="warmwasser" class="bereich-box grid
grid-cols-1 gap-x-4 gap-y-8 grid-cols-1 gap-x-4 gap-y-8
sm:grid-cols-2 sm:gap-x-6 sm: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 xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
@@ -15,7 +23,7 @@
<div class="input-standard order-1 md:order-1 xl:order-1"> <div class="input-standard order-1 md:order-1 xl:order-1">
<Inputlabel title="Warmwasser im Verbrauch enthalten"></Inputlabel> <Inputlabel title="Warmwasser im Verbrauch enthalten"></Inputlabel>
<div class="input-checkboxen"> <div class="input-checkboxen">
@@ -27,7 +35,7 @@
data-test="warmwasser_enthalten" data-test="warmwasser_enthalten"
bind:checked={ausweis.warmwasser_enthalten} bind:checked={ausweis.warmwasser_enthalten}
/> />
<label for="warmwasser_enthalten">Ja</label> <label for="warmwasser_enthalten" class="cursor-pointer" on:click={() => labelClick(event)}>Ja</label>
</div> </div>
<div class="grid grid-cols-[40px_max-content] items-center justify-items-start"> <div class="grid grid-cols-[40px_max-content] items-center justify-items-start">
@@ -39,7 +47,7 @@
bind:checked={ausweis.warmwasser_anteil_bekannt} bind:checked={ausweis.warmwasser_anteil_bekannt}
disabled={!ausweis.warmwasser_enthalten} disabled={!ausweis.warmwasser_enthalten}
/> />
<label for="warmwasser_anteil_bekannt">Anteil bekannt</label> <label for="warmwasser_anteil_bekannt" class="cursor-pointer" on:click={() => labelClick(event)}>Anteil bekannt</label>
</div> </div>
</div> </div>
@@ -120,7 +128,7 @@
bind:checked={ausweis.alternative_heizung} bind:checked={ausweis.alternative_heizung}
value="Heizung" value="Heizung"
/> />
<label for="alternative_heizung" class="checkbox-inline">Heizung</label> <label for="alternative_heizung" class="checkbox-inline cursor-pointer" on:click={() => labelClick(event)}>Heizung</label>
</div> </div>
<div class="grid grid-cols-[max-content_40px] gap-2 items-center"> <div class="grid grid-cols-[max-content_40px] gap-2 items-center">
@@ -132,7 +140,7 @@
bind:checked={ausweis.alternative_warmwasser} bind:checked={ausweis.alternative_warmwasser}
value="Warmwasser" value="Warmwasser"
/> />
<label for="alternative_warmwasser" class="checkbox-inline">Warmwasser</label> <label for="alternative_warmwasser" class="checkbox-inline cursor-pointer" on:click={() => labelClick(event)}>Warmwasser</label>
</div> </div>
<div class="grid grid-cols-[max-content_40px] gap-2 items-center"> <div class="grid grid-cols-[max-content_40px] gap-2 items-center">
@@ -143,7 +151,7 @@
bind:checked={ausweis.alternative_lueftung} bind:checked={ausweis.alternative_lueftung}
value="Lüftung" value="Lüftung"
/> />
<label for="alternative_lueftung" class="checkbox-inline">Lüftung</label> <label for="alternative_lueftung" class="checkbox-inline cursor-pointer" on:click={() => labelClick(event)}>Lüftung</label>
</div> </div>
<div class="grid grid-cols-[max-content_40px] gap-2 items-center"> <div class="grid grid-cols-[max-content_40px] gap-2 items-center">
@@ -155,7 +163,7 @@
bind:checked={ausweis.alternative_kuehlung} bind:checked={ausweis.alternative_kuehlung}
value="Kühlung" value="Kühlung"
/> />
<label for="alternative_kuehlung" class="checkbox-inline">Kühlung</label> <label for="alternative_kuehlung" class="checkbox-inline cursor-pointer" on:click={() => labelClick(event)}>Kühlung</label>
</div> </div>
</div> </div>

View File

@@ -0,0 +1,458 @@
<script lang="ts">
import HelpLabel from "#labels/HelpLabel.svelte";
import Inputlabel from "#labels/InputLabel.svelte";
import Label from "../Label.svelte";
import moment from "moment";
import fuelList from "./brennstoffListe.js";
import { auditVerbrauchAbweichung } from "../Verbrauchsausweis/audits/VerbrauchAbweichung.js";
import { GebaeudeAufnahmeClient, GebaeudeClient, VerbrauchsausweisWohnenClient } from "./types.js";
export let gebaeude: GebaeudeClient;
export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
export let ausweis: VerbrauchsausweisWohnenClient;
// 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(ausweis.gebaeude_aufnahme_allgemein.erstellungsdatum || Date.now()).subtract(4, "years").subtract(6, "months");
const endDate = moment(ausweis.gebaeude_aufnahme_allgemein.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 = ausweis.startdatum?.getMonth() || null;
let year = ausweis.startdatum?.getFullYear() || null;
$: {
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, gebaeude);
</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
">
<div class="input-standard order-1 md:order-1 xl:order-1">
<Inputlabel title="Warmwasser im Verbrauch enthalten"></Inputlabel>
<div class="input-checkboxen">
<div class="grid grid-cols-[40px_max-content] items-center justify-items-start">
<input
type="checkbox"
class="checkbox"
name="warmwasser_enthalten"
data-test="warmwasser_enthalten"
bind:checked={ausweis.warmwasser_enthalten}
/>
<label for="warmwasser_enthalten" class="cursor-pointer" on:click={() => labelClick(event)}>Ja</label>
</div>
<div class="grid grid-cols-[40px_max-content] items-center justify-items-start">
<input
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" on:click={() => labelClick(event)}>Anteil bekannt</label>
</div>
</div>
<div class="help-label">
<HelpLabel>
TEXT FEHLT
</HelpLabel>
</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>
</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 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
unterirdischen Lagerstätten vorkommt. Erdgas H hat im Vergleich
zu Erdgas L einen leicht höheren Methangehalt, und daher einen
etwas besseren Brennwert.<br /><br />
<b>Flüssiggas:</b> Meist Propan, Butan und deren Gemische, die
bei Raumtemperatur unter vergleichsweise geringem Druck flüssig
bleiben.<br /><br />
<b>Braunkohle:</b> Durch Druck und Luftabschluss von organischen
Substanzen entstandenes, bräunlich-schwarzes Sedimentgestein.<br
/><br />
<b>Holz-Pellets:</b> Stäbchenförmige Pellets die vollständig
oder überwiegend aus Holz oder Sägenebenprodukten hergestellt
werden.<br /><br />
<b>Holzhackschnitzel:</b> Mit schneidenden Werkzeugen
zerkleinertes Holz.<br /><br />
<b>Nahwärme, Fernwärme:</b> Versorgung von thermischer Energie
über wärmegedämmte Rohrsysteme. Die Wärme wird dabei örtlich von
Heizwerken produziert oder besteht aus Prozesswärme von BHKW's.
Im Unterschied zu Fernwärme wird Nahwärme in kleineren Einheiten
dezentral realisiert.<br /><br />
<b>Strommix:</b> Heizen mit Strom (Nachtspeicher).<br /><br />
<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br /><br />
</HelpLabel>
<div>
<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>
<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>
<select
class="rounded-s-none"
name="einheit_1"
required
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>
<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}
required
>
<option disabled> Bitte auswählen</option>
{#each Object.keys(fuelMap) as fuel}
<option value={fuel}>{fuel}</option>
{/each}
</select>
</div>
<div>
<Label>* Einheit</Label>
<select
class="rounded-s-none"
name="einheit_2"
disabled={!ausweis.zusaetzliche_heizquelle}
bind:value={ausweis.einheit_2}
required
>
<option disabled>Bitte auswählen</option>
{#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>
<div>
<span>Verbrauch</span>
<input
name="verbrauch_4"
type="number"
bind:value={ausweis.verbrauch_4}
class:linked={abweichung.indexOf(4) > -1}
disabled={!ausweis.zusaetzliche_heizquelle}
/>
<span>Verbrauch</span>
<input
name="verbrauch_5"
type="number"
bind:value={ausweis.verbrauch_5}
class:linked={abweichung.indexOf(5) > -1}
disabled={!ausweis.zusaetzliche_heizquelle}
/>
<span>Verbrauch</span>
<input
name="verbrauch_6"
type="number"
bind:value={ausweis.verbrauch_6}
class:linked={abweichung.indexOf(6) > -1}
disabled={!ausweis.zusaetzliche_heizquelle}
/>
</div>
</div>
</div>
<style lang="postcss">
input[type="checkbox"] {@apply accent-secondary}
</style>

View File

@@ -4,22 +4,20 @@
function toggleBereich(event){ function toggleBereich(event){
var x = event.target.parentNode.parentNode.parentNode; var x = event.target.parentNode.parentNode.parentNode;
var y = x.nextElementSibling; var y = x.nextElementSibling;
var z = event.target.innerHTML; var z = event.target.innerHTML;
console.log(y);
if(z=='-'){ if(z=='-'){
//y.classList.remove('hidden'); //y.classList.remove('hidden');
y.style.maxHeight = '0px'; y.style.maxHeight = '0px';
y.style.overflow = 'hidden';
event.target.innerHTML = "+"; event.target.innerHTML = "+";
}else{ }else{
//y.classList.add('hidden'); //y.classList.add('hidden');
y.style.maxHeight = '500px'; y.style.maxHeight = '500px';
y.style.overflow = 'visible';
event.target.innerHTML = "-"; event.target.innerHTML = "-";
} }

View File

@@ -4,9 +4,9 @@
import Hilfe from "#components/Ausweis/Hilfe.svelte"; import Hilfe from "#components/Ausweis/Hilfe.svelte";
import BereichLabel from "#labels/BereichLabel.svelte"; import BereichLabel from "#labels/BereichLabel.svelte";
import HelpLabel from "#labels/HelpLabel.svelte"; //import HelpLabel from "#labels/HelpLabel.svelte";
import Inputlabel from "#labels/InputLabel.svelte"; //import Inputlabel from "#labels/InputLabel.svelte";
import Label from "#components/Label.svelte"; //import Label from "#components/Label.svelte";
import Ausweisart from "#components/Ausweis/Ausweisart.svelte"; import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
import GebaeudeDaten from "#components/Ausweis/GebaeudeDaten.svelte"; import GebaeudeDaten from "#components/Ausweis/GebaeudeDaten.svelte";
@@ -204,7 +204,20 @@
<BereichLabel bereich="B">Eingabe&nbsp;der&nbsp;Gebäudeadresse - Angaben&nbsp;zu&nbsp;Wohnfläche, Keller&nbsp;und&nbsp;Dachgeschoss</BereichLabel> <BereichLabel bereich="B">Eingabe&nbsp;der&nbsp;Gebäudeadresse - Angaben&nbsp;zu&nbsp;Wohnfläche, Keller&nbsp;und&nbsp;Dachgeschoss</BereichLabel>
<div class="collapseBereich"> <div class="collapseBereich">
<GebaeudeDaten <GebaeudeDaten
bind:gebaeude_aufnahme_allgemein bind:gebaeude
bind:gebaeude_aufnahme_allgemein
bind:ausweis
/>
</div>
<!-- C Eingabe von 3 zusammenhängenden Verbrauchsjahren -->
<BereichLabel bereich="C">Eingabe von 3&nbsp;zusammenhängenden Verbrauchsjahren</BereichLabel>
<div class="collapseBereich">
<Verbrauch
bind:gebaeude
bind:gebaeude_aufnahme_allgemein
bind:ausweis
/> />
</div> </div>
@@ -213,18 +226,21 @@
<BereichLabel bereich="D">Eingabe&nbsp;Warmwasseranteil und&nbsp;Verwendung&nbsp;von&nbsp;alternativen Energieversorgungssystemen</BereichLabel> <BereichLabel bereich="D">Eingabe&nbsp;Warmwasseranteil und&nbsp;Verwendung&nbsp;von&nbsp;alternativen Energieversorgungssystemen</BereichLabel>
<div class="collapseBereich"> <div class="collapseBereich">
<Warmwasseranteil <Warmwasseranteil
bind:gebaeude
bind:gebaeude_aufnahme_allgemein
bind:ausweis bind:ausweis
/> />
</div>
</div> </div>
</form> </form>
<style lang="scss"> <style lang="scss">

View File

@@ -15,7 +15,7 @@
.bereichs-label{@apply px-4 sm:px-0 mt-6 mb-3} .bereichs-label{@apply px-4 sm:px-0 mt-6 mb-3}
.collapseBereich{@apply overflow-hidden transition-all ease-in-out duration-200 h-[auto]} .collapseBereich{@apply transition-all ease-in-out duration-200 h-[auto]}
.bereich-box {@apply w-full bg-gray-500/10 rounded-sm xl:rounded-md border-2 border-gray-500/15 pt-6 pb-8 px-4; .bereich-box {@apply w-full bg-gray-500/10 rounded-sm xl:rounded-md border-2 border-gray-500/15 pt-6 pb-8 px-4;
transform-origin: top center; transform-origin: top center;
@@ -31,6 +31,7 @@
.input-standard{@apply w-full grid grid-cols-[1fr_25px] items-center relative mt-2} .input-standard{@apply w-full grid grid-cols-[1fr_25px] items-center relative mt-2}
.input-plz{@apply w-full grid grid-cols-[1fr] items-center relative mt-2}
.input-checkboxen{@apply h-[38px] grid grid-cols-[1fr_1fr] gap-2 items-center ring-1 ring-black/15 rounded-sm bg-white} .input-checkboxen{@apply h-[38px] grid grid-cols-[1fr_1fr] gap-2 items-center ring-1 ring-black/15 rounded-sm bg-white}
.input-row{@apply w-full min-h-[38px] grid grid-cols-[1fr_1fr] sm:grid-cols-[1fr_1fr_1fr_1fr] items-center py-[6px] px-[10px] ring-1 ring-black/15 rounded-sm bg-white } .input-row{@apply w-full min-h-[38px] grid grid-cols-[1fr_1fr] sm:grid-cols-[1fr_1fr_1fr_1fr] items-center py-[6px] px-[10px] ring-1 ring-black/15 rounded-sm bg-white }

View File

@@ -58,8 +58,10 @@ body{
} }
input[type="text"], input[type="number"], input[type="password"], select{ input[type="text"], input[type="number"], input[type="password"], select{
@apply min-h-[38px] ring-1 ring-black/15 rounded-sm} @apply min-h-[38px] ring-1 ring-black/15 rounded-sm}
input[type="checkbox"]{@apply inline-block}
input[type="checkbox"]{@apply inline-block accent-secondary}
radio{@apply accent-primary} radio{@apply accent-primary}