341 lines
9.5 KiB
Svelte
341 lines
9.5 KiB
Svelte
<script lang="ts">
|
|
import HelpLabel from "../HelpLabel.svelte";
|
|
import moment from "moment";
|
|
import Label from "../Label.svelte";
|
|
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 class="w-full flex flex-col gap-4">
|
|
<div class="w-full grid grid-cols-[1fr,1fr,1fr,1fr,1fr] gap-6">
|
|
<div>
|
|
<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>
|
|
<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 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>
|
|
<div>
|
|
<select
|
|
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>
|
|
<Label>Brennstoff *</Label>
|
|
<div>
|
|
<select
|
|
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>
|
|
|
|
<div>
|
|
<Label>Einheit *</Label>
|
|
<div>
|
|
<select
|
|
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 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>
|
|
|
|
<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"
|
|
type="number"
|
|
bind:value={ausweis.verbrauch_4}
|
|
class:linked={abweichung.indexOf(4) > -1}
|
|
disabled={!ausweis.zusaetzliche_heizquelle}
|
|
/>
|
|
</div>
|
|
<div class="column">
|
|
<span>Verbrauch</span>
|
|
<input
|
|
name="verbrauch_5"
|
|
type="number"
|
|
bind:value={ausweis.verbrauch_5}
|
|
class:linked={abweichung.indexOf(5) > -1}
|
|
disabled={!ausweis.zusaetzliche_heizquelle}
|
|
/>
|
|
</div>
|
|
<div class="column">
|
|
<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>
|
|
</div>
|
|
|
|
<style>
|
|
.column {
|
|
@apply flex flex-row items-center gap-4;
|
|
}
|
|
</style>
|