IBCornelsen/online-energieausweis
1
0
Fork 0
Code Issues 272 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Bildupload - UI - Globaler Ausweis

Browse Source
This commit is contained in:
Moritz Utcke
2023-05-08 16:35:36 +04:00
parent 7e13a6da50
commit 2c2c69f2d3
21 changed files with 452 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/components/Ausweis/Verbrauch.svelte
View File

@@ -1,8 +1,9 @@
<script lang="ts">
import HelpLabel from "../HelpLabel.svelte";
import moment from "moment";
import moment, { Moment } from "moment";
import Label from "../Label.svelte";
import fuelList from "./fuelList";
import { Verbrauchsausweis } from "src/lib/Ausweis/Verbrauchsausweis";
let availableYears = [
2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019,
@@ -22,42 +23,7 @@
"Dezember",
];
let month: number = 1;
let year: number = availableYears[0];
export let additionalHeating: boolean = false;
// Verbräuche aller drei Verbrauchsjahre der primären Energiequelle
export let energyConsumption: number[] = [0, 0, 0];
// Verbräuche aller drei Verbrauchsjahre der sekundären Energiequelle
export let additionalEnergyConsumption: number[] = [0, 0, 0];
export let climateFactors: number[];
export let conversionFactor: number;
export let calorificValueFactor: number;
$: conversionFactor =
fuelList.find((x) => {
return x.energietraeger == fuel && x.einheit == unit;
})?.umrechnungsfaktor || 1;
$: calorificValueFactor =
fuelList.find((x) => {
return x.energietraeger == fuel && x.einheit == unit;
})?.heizwertfaktor || 1;
async function fetchClimateFactors() {
const url = `/api/climate_factor?start=${month}.01.${year}&end=${month}.01.${
year + 2
}&accuracy=years&zip=21039`;
fetch(url)
.then((response) => response.json())
.then((result) => {
climateFactors = Object.values(result.data);
});
}
export let ausweis: Verbrauchsausweis;
const fuelMap: Record<string, string[]> = {};
for (const fuel of fuelList) {
@@ -65,12 +31,18 @@
fuelMap[fuel.energietraeger].push(fuel.einheit);
}
let fuel: string = fuelList[0].energietraeger;
let unit: string = fuelList[0].einheit;
let month: string = "01";
let year: string = "2018";
$: {
if (month && year) {
ausweis.energieverbrauch_zeitraum = moment(`${month}.01.${year}`);
}
}
</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 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
@@ -81,7 +53,7 @@
<input
type="checkbox"
class="IGzus1verbrauch1"
bind:checked={additionalHeating}
bind:checked={ausweis.zusaetzliche_heizquelle}
/>
</div>
@@ -113,7 +85,7 @@
<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br /><br />
</HelpLabel>
<div>
<select name="energietraeger_1" required bind:value={fuel}>
<select name="energietraeger_1" required bind:value={ausweis.energietraeger_1}>
<option>Bitte auswählen</option>
{#each Object.keys(fuelMap) as fuel}
<option value={fuel}>{fuel}</option>
@@ -132,10 +104,10 @@
<select
name="energietraeger_einheit_heizquelle_1"
required
bind:value={unit}
bind:value={ausweis.energietraeger_einheit_heizquelle_1}
>
<option>Bitte auswählen</option>
{#each fuelMap[fuel] as unit}
{#each (fuelMap.hasOwnProperty(ausweis.energietraeger_1) ? fuelMap[ausweis.energietraeger_1] : []) as unit}
<option value={unit}>{unit}</option>
{/each}
</select>
@@ -147,11 +119,14 @@
<div>
<select
name="energietraeger_2"
disabled={!additionalHeating}
bind:value={ausweis.energietraeger_2}
disabled={!ausweis.zusaetzliche_heizquelle}
required
>
<option> Bitte auswählen</option>
<!-- TODO: Energieträger aus Datenbank holen -->
{#each Object.keys(fuelMap) as fuel}
<option value={fuel}>{fuel}</option>
{/each}
</select>
</div>
</div>
@@ -161,15 +136,14 @@
<div>
<select
name="energietraeger_einheit_heizquelle_2"
disabled={!additionalHeating}
disabled={!ausweis.zusaetzliche_heizquelle}
bind:value={ausweis.energietraeger_einheit_heizquelle_2}
required
>
<option>Bitte auswählen</option>
<option value="kWh"> kWh</option>
<option value="m³">m³</option>
<option value="l">l</option>
<option value="kg">kg</option>
<option value="SRm"> SRm</option>
{#each (fuelMap.hasOwnProperty(ausweis.energietraeger_2) ? fuelMap[ausweis.energietraeger_2] : []) as unit}
<option value={unit}>{unit}</option>
{/each}
</select>
</div>
</div>
@@ -183,7 +157,6 @@
name="energieverbrauch_zeitraum_monat"
class="rounded-tr-none rounded-br-none w-full m-0"
bind:value={month}
on:change={fetchClimateFactors}
required
>
<option>auswählen</option>
@@ -196,7 +169,6 @@
name="energieverbrauch_zeitraum_jahr"
class="rounded-tl-none rounded-bl-none w-full m-0"
bind:value={year}
on:change={fetchClimateFactors}
required
>
<option>auswählen</option>
@@ -209,7 +181,7 @@
<span>von</span>
<input
class="klima"
value={moment(`${month}.01.${year}`)
value={moment(ausweis.energieverbrauch_zeitraum)
.add("1", "year")
.format("MM.Y")}
readonly
@@ -219,7 +191,7 @@
<span>von</span>
<input
class="klima"
value={moment(`${month}.01.${year}`)
value={moment(ausweis.energieverbrauch_zeitraum)
.add("2", "years")
.format("MM.Y")}
readonly
@@ -231,7 +203,7 @@
<span>bis</span>
<input
class="form-control"
value={moment(`${month}.01.${year}`)
value={moment(ausweis.energieverbrauch_zeitraum)
.add("1", "year")
.format("MM.Y")}
readonly
@@ -241,7 +213,7 @@
<span>bis</span>
<input
class="form-control"
value={moment(`${month}.01.${year}`)
value={moment(ausweis.energieverbrauch_zeitraum)
.add("2", "years")
.format("MM.Y")}
readonly
@@ -251,7 +223,7 @@
<span>bis</span>
<input
class="form-control"
value={moment(`${month}.01.${year}`)
value={moment(ausweis.energieverbrauch_zeitraum)
.add("3", "years")
.format("MM.Y")}
readonly
@@ -264,7 +236,7 @@
<input
name="energieverbrauch_1_heizquelle_1"
type="number"
bind:value={energyConsumption[0]}
bind:value={ausweis.energieverbrauch_1_heizquelle_1}
required
/>
</div>
@@ -273,7 +245,7 @@
<input
name="energieverbrauch_2_heizquelle_1"
type="number"
bind:value={energyConsumption[1]}
bind:value={ausweis.energieverbrauch_2_heizquelle_1}
required
/>
</div>
@@ -282,7 +254,7 @@
<input
name="energieverbrauch_3_heizquelle_1"
type="number"
bind:value={energyConsumption[2]}
bind:value={ausweis.energieverbrauch_3_heizquelle_1}
required
/>
</div>
@@ -293,8 +265,8 @@
<input
name="energieverbrauch_1_heizquelle_2"
type="number"
bind:value={additionalEnergyConsumption[0]}
disabled={!additionalHeating}
bind:value={ausweis.energieverbrauch_1_heizquelle_2}
disabled={!ausweis.zusaetzliche_heizquelle}
/>
</div>
<div class="column">
@@ -302,8 +274,8 @@
<input
name="energieverbrauch_2_heizquelle_2"
type="number"
bind:value={additionalEnergyConsumption[1]}
disabled={!additionalHeating}
bind:value={ausweis.energieverbrauch_2_heizquelle_2}
disabled={!ausweis.zusaetzliche_heizquelle}
/>
</div>
<div class="column">
@@ -311,8 +283,8 @@
<input
name="energieverbrauch_3_heizquelle_2"
type="number"
bind:value={additionalEnergyConsumption[2]}
disabled={!additionalHeating}
bind:value={ausweis.energieverbrauch_3_heizquelle_2}
disabled={!ausweis.zusaetzliche_heizquelle}
/>
</div>
</div>