tRPC Hinzugefügt
This commit is contained in:
Moritz Utcke
535
src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
Normal file
535
src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
Normal file
@@ -0,0 +1,535 @@
|
||||
<script lang="ts">
|
||||
import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
|
||||
import Progressbar from "#components/Ausweis/Progressbar.svelte";
|
||||
import Hilfe from "#components/Ausweis/Hilfe.svelte";
|
||||
import HelpLabel from "#components/HelpLabel.svelte";
|
||||
import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
|
||||
import Label from "#components/Label.svelte";
|
||||
import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
|
||||
import ZipSearch from "#components/ZIPSearch.svelte";
|
||||
import moment from "moment";
|
||||
import BilderZusatzsysteme from "#components/Ausweis/BilderZusatzsysteme.svelte";
|
||||
import { RawNotificationWrapper, RawNotification, notifications } from "@ibcornelsen/ui";
|
||||
import { auditHeizungGebaeudeBaujahr } from "#components/Verbrauchsausweis/audits/HeizungGebaeudeBaujahr";
|
||||
import { AuditType, hidden } from "#components/Verbrauchsausweis/audits/hidden";
|
||||
import { auditBedarfsausweisBenoetigt } from "#components/Verbrauchsausweis/audits/BedarfsausweisBenoetigt";
|
||||
import { auditVerbrauchAbweichung } from "#components/Verbrauchsausweis/audits/VerbrauchAbweichung";
|
||||
import { GebaeudeStammdaten, VerbrauchsausweisWohnen } from "@ibcornelsen/database";
|
||||
import trpc from "src/trpc";
|
||||
|
||||
export let uid: string = "";
|
||||
|
||||
let gebaeude: GebaeudeStammdaten = {} as GebaeudeStammdaten;
|
||||
let ausweis: VerbrauchsausweisWohnen = {} as VerbrauchsausweisWohnen;
|
||||
if (uid) {
|
||||
async () => {
|
||||
const result = await fetch(`/api/verbrauchsausweis?uid=${uid}`, {
|
||||
method: "GET",
|
||||
});
|
||||
|
||||
const json = await result.json();
|
||||
|
||||
if (json.success) {
|
||||
gebaeude = json.data.gebaeude
|
||||
ausweis = json.data.ausweis
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function automatischAusfüllen() {
|
||||
gebaeude.baujahr_gebaeude = [1962];
|
||||
gebaeude.baujahr_heizung = [1952];
|
||||
gebaeude.saniert = true;
|
||||
gebaeude.einheiten = 1;
|
||||
ausweis.ausstellgrund = "Vermietung";
|
||||
ausweis.verbrauch_1 = 15000;
|
||||
ausweis.verbrauch_2 = 14000;
|
||||
ausweis.verbrauch_3 = 16000;
|
||||
gebaeude.flaeche = 152;
|
||||
ausweis.keller_beheizt = true;
|
||||
ausweis.brennstoff_1 = "Erdgas H";
|
||||
ausweis.einheit_1 = "kWh";
|
||||
ausweis.anteil_warmwasser_1 = 18;
|
||||
ausweis.startdatum = moment("12.01.2019").toDate();
|
||||
gebaeude.plz = "21039";
|
||||
gebaeude.ort = "Hamburg";
|
||||
gebaeude.adresse = "Curslacker Deich 170";
|
||||
gebaeude.gebaeudeteil = "Gesamtgebäude";
|
||||
|
||||
gebaeude = gebaeude;
|
||||
ausweis = ausweis;
|
||||
}
|
||||
|
||||
|
||||
async function ausweisAbschicken() {
|
||||
overlay.ariaHidden = "false";
|
||||
const response = await trpc.v1.verbrauchsausweisWohnen[2016].erstellen.mutate({
|
||||
...ausweis,
|
||||
gebaeude_stammdaten: gebaeude
|
||||
})
|
||||
}
|
||||
|
||||
let overlay: HTMLDivElement;
|
||||
|
||||
</script>
|
||||
|
||||
<div bind:this={overlay} aria-hidden="true" class="aria-hidden:hidden fixed top-0 left-0 w-[100vw] h-[100vh] flex items-center justify-center bg-[rgba(0,0,0,0.8)] z-50">
|
||||
<p class="text-white font-semibold text-4xl">Bitte warten sie, ihr Ausweis wird nun erstellt.</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row gap-8 items-center mb-8">
|
||||
<div class="flex flex-col w-full">
|
||||
<h1>Verbrauchsausweis erstellen - 45€</h1>
|
||||
<Progressbar progress={0} />
|
||||
</div>
|
||||
|
||||
<PerformanceScore bind:ausweis bind:gebaeude />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div
|
||||
class="bg-[rgba(252,234,187,0.2)] border-2 p-4 rounded-lg border-[#ffcc03]"
|
||||
>
|
||||
<div class="flex flex-row justify-between">
|
||||
<a class="button" href="/speichern">Später Weitermachen</a>
|
||||
<div class="flex gap-4">
|
||||
<Hilfe />
|
||||
<button
|
||||
on:click={automatischAusfüllen}
|
||||
type="button"
|
||||
class="button">Automatisch Ausfüllen</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<Label>A - Prüfung der Ausweisart</Label>
|
||||
|
||||
<Ausweisart bind:gebaeude bind:ausweis />
|
||||
|
||||
<hr />
|
||||
|
||||
<Label
|
||||
>B - Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Kellerund
|
||||
Dachgeschoss</Label
|
||||
>
|
||||
|
||||
<div class="GRB">
|
||||
<!-- Strasse -->
|
||||
<div class="form-group col-md-4">
|
||||
<HelpLabel title="Straße, Hausnummer *">
|
||||
Bitte geben Sie hier die Straße und Hausnummer des Gebäudes
|
||||
ein.
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<input
|
||||
name="adresse"
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
required
|
||||
data-msg-minlength="min. 5 Zeichen"
|
||||
data-msg-maxlength="max. 40 Zeichen"
|
||||
bind:value={gebaeude.adresse}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PLZ -->
|
||||
<div class="form-group col-md-4 PLZ">
|
||||
<ZipSearch
|
||||
bind:zip={gebaeude.plz}
|
||||
bind:city={gebaeude.ort}
|
||||
name="zip"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group col-md-4">
|
||||
<HelpLabel title="Ort *">
|
||||
Ort des Gebäudes wird automatisch ermittelt.
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<input
|
||||
name="ort"
|
||||
readonly={true}
|
||||
bind:value={gebaeude.ort}
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Wohnfläche -->
|
||||
<div class="form-group col-md-4">
|
||||
<HelpLabel title="Wohnfläche m² *">
|
||||
Bitte geben Sie hier die beheizte Wohnfläche in m² ein.
|
||||
Dabei handelt es sich um die Wohnfläche abzüglich
|
||||
vorhandener Flächen die sich außerhalb des Gebäudes
|
||||
befinden. (Balkone, Terassen,etc.).
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<input
|
||||
name="flaeche"
|
||||
maxlength="4"
|
||||
type="number"
|
||||
required
|
||||
autocomplete="off"
|
||||
data-rule-minlength="2"
|
||||
data-msg-minlength="min. 2 Zeichen"
|
||||
bind:value={gebaeude.flaeche}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Keller -->
|
||||
<div class="form-group col-md-4">
|
||||
<Label>Keller *</Label>
|
||||
<div>
|
||||
<select
|
||||
name="keller_beheizt"
|
||||
required
|
||||
bind:value={ausweis.keller_beheizt}
|
||||
>
|
||||
<option>Bitte auswählen</option>
|
||||
<option value={false}>nicht vorhanden</option>
|
||||
<option value={false}>unbeheizt</option>
|
||||
<option value={true}>beheizt</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dachgeschoss -->
|
||||
<div class="form-group col-md-4">
|
||||
<Label>Dachgeschoss *</Label>
|
||||
<div>
|
||||
<select name="dachgeschoss" required>
|
||||
<option>Bitte auswählen</option>
|
||||
<option value="dnein">nicht vorhanden</option>
|
||||
<option value="dub">unbeheizt</option>
|
||||
<option value="dbh">beheizt</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<Label>C - Eingabe von 3 zusammenhängenden Verbrauchsjahren</Label>
|
||||
|
||||
<div class="GRB">
|
||||
<Verbrauch bind:gebaeude bind:ausweis />
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<Label
|
||||
>D - Eingabe Warmwasseranteil und Verwendung von alternativen
|
||||
Energieversorgungssystemen</Label
|
||||
>
|
||||
|
||||
<div class="GRB">
|
||||
<!-- Anteil WW enthalten -->
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-row gap-6">
|
||||
<label class="radio-inline"
|
||||
><input
|
||||
type="checkbox"
|
||||
name="warmwasser_enthalten"
|
||||
bind:checked={ausweis
|
||||
.warmwasser_enthalten}
|
||||
/>Warmwasser im Verbrauch enthalten</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Warmwasser Antel -->
|
||||
<div class="form-group col-md-2">
|
||||
<HelpLabel title="% Anteil Warmwasser">
|
||||
Wenn bekannt geben Sie den Anteil der Warmwasser-Versorgung
|
||||
hier ein. Standardmäßig wird ein Anteil von 18% angenommen.
|
||||
</HelpLabel>
|
||||
|
||||
<input
|
||||
name="anteil_warmwasser_1"
|
||||
maxlength="2"
|
||||
type="number"
|
||||
bind:value={ausweis.anteil_warmwasser_1}
|
||||
disabled={!ausweis.warmwasser_enthalten}
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group col-md-2">
|
||||
<HelpLabel title="zusätzliche Heizquelle">
|
||||
Wenn bekannt geben Sie den Anteil der Warmwasser-Versorgung
|
||||
von der zusätzlichen Heizquelle hier ein. Standardmäßig wird
|
||||
ein Anteil von 18% angenommen.
|
||||
</HelpLabel>
|
||||
<input
|
||||
name="anteil_warmwasser_2"
|
||||
maxlength="3"
|
||||
type="number"
|
||||
autocomplete="off"
|
||||
bind:value={ausweis.anteil_warmwasser_2}
|
||||
disabled={!ausweis.zusaetzliche_heizquelle ||
|
||||
!ausweis.warmwasser_enthalten}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Alternative Energieversorgungssyteme -->
|
||||
<div class="form-group col-md-5">
|
||||
<HelpLabel
|
||||
title="Alternative Energieversorgungssysteme genutzt für "
|
||||
>
|
||||
Bitte setzen Sie den Haken falls nachhaltige CO2-Effiziente
|
||||
Heizungssysteme vorhanden sind. Das wäre beispielsweise bei
|
||||
Pelletofen, Wärmepumpe, BHKW, Solarsystem, etc. der Fall.
|
||||
</HelpLabel>
|
||||
<div class="flex flex-row gap-4">
|
||||
<label class="checkbox-inline"
|
||||
><input
|
||||
type="checkbox"
|
||||
name="alternative_heizung"
|
||||
bind:checked={ausweis.alternative_heizung}
|
||||
value="Heizung"
|
||||
/>Heizung</label
|
||||
>
|
||||
<label class="checkbox-inline"
|
||||
><input
|
||||
type="checkbox"
|
||||
name="alternative_warmwasser"
|
||||
bind:checked={ausweis.alternative_warmwasser}
|
||||
value="Warmwasser"
|
||||
/>Warmwasser</label
|
||||
>
|
||||
<label class="checkbox-inline"
|
||||
><input
|
||||
type="checkbox"
|
||||
name="alternative_lueftung"
|
||||
bind:checked={ausweis.alternative_lueftung}
|
||||
value="Lüftung"
|
||||
/>Lüftung</label
|
||||
>
|
||||
<label class="checkbox-inline"
|
||||
><input
|
||||
type="checkbox"
|
||||
name="alternative_kuehlung "
|
||||
bind:checked={ausweis.alternative_kuehlung}
|
||||
value="Kühlung"
|
||||
/>Kühlung</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<Label
|
||||
>E - Eingabe von Gebäudetyp, Gebäudeteil, Lüftung, Kühlung und
|
||||
Leerstand</Label
|
||||
>
|
||||
|
||||
<div class="GRB">
|
||||
<!-- Gebäudetyp -->
|
||||
<div class="form-group col-md-3">
|
||||
<HelpLabel title="Gebäudetyp *">
|
||||
Bitte wählen Sie hier den Gebäudetyp aus.
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<select name="gebaeudetyp" required autocomplete="off">
|
||||
<option>Bitte auswählen</option>
|
||||
<option value="Einfamilienhaus">Einfamilienhaus</option>
|
||||
<option value="Freistehendes Einfamilienhaus"
|
||||
>Freistehendes Einfamilienhaus</option
|
||||
>
|
||||
<option value="Freistehendes Zweifamilienhaus"
|
||||
>Freistehendes Zweifamilienhaus</option
|
||||
>
|
||||
<option value="Doppelhaushälfte"
|
||||
>Doppelhaushälfte</option
|
||||
>
|
||||
<option value="Reihenendhaus">Reihenendhaus</option>
|
||||
<option value="Reihenmittelhaus"
|
||||
>Reihenmittelhaus</option
|
||||
>
|
||||
<option value="Mehrfamilienhaus"
|
||||
>Mehrfamilienhaus</option
|
||||
>
|
||||
<option value="Wohn- und Geschäftshaus"
|
||||
>Wohn- und Geschäftshaus</option
|
||||
>
|
||||
<option value="Atrium-Bungalow">Atrium-Bungalow</option>
|
||||
<option value="Winkelbungalow">Winkelbungalow</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gebäudeteil -->
|
||||
<div class="form-group col-md-3">
|
||||
<HelpLabel title="Gebäudeteil *">
|
||||
Bitte geben Sie hier den Gebäudeteil ein. In den meisten
|
||||
Fällen handelt es sich um das Gesamtgebäude. Sollte es sich
|
||||
allerdings um ein Gebäude mit mehr als 10% Gewerbeanteil
|
||||
handeln, so sollten 2 Ausweise erstellt werden. In diesem
|
||||
Fall wählen Sie Gebäudeteil 'Wohnen' bzw. Gebäudeteil
|
||||
'Gewerbe'.
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<select name="gebaeudeteil" class="" required autocomplete="off">
|
||||
<option>Bitte auswählen</option>
|
||||
<option value="Gesamtgebäude">Gesamtgebäude</option>
|
||||
<option value="Wohnen">Wohnen</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lüftung -->
|
||||
<div class="form-group col-md-2">
|
||||
<HelpLabel title="Lüftung durch *">
|
||||
Bitte geben Sie hier ein ob über die Fenster natürlich
|
||||
belüftet wird oder über eine Lüftungsanlage.
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<select
|
||||
name="lueftung"
|
||||
required
|
||||
autocomplete="off"
|
||||
bind:value={gebaeude.lueftung}
|
||||
>
|
||||
<option>Bitte auswählen</option>
|
||||
<option value="Fensterlüftung">Fensterlüftung</option>
|
||||
<option value="Schachtlüftung">Schachtlüftung</option>
|
||||
<option value="Lüftungsanlage ohne Wärmerückgewinnung"
|
||||
>Lüftungsanlage ohne Wärmerückgewinnung</option
|
||||
>
|
||||
<option value="Lüftungsanlage mit Wärmerückgewinnung"
|
||||
>Lüftungsanlage mit Wärmerückgewinnung</option
|
||||
>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lüftung -->
|
||||
<div class="form-group col-md-2">
|
||||
<HelpLabel title="Anlage Kühlung *">
|
||||
Bitte geben Sie an ob das Gebäude im Sommer zusätzlich
|
||||
gekühlt wird.
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<select
|
||||
name="kuehlung"
|
||||
class=""
|
||||
required
|
||||
autocomplete="off"
|
||||
bind:value={gebaeude.kuehlung}
|
||||
>
|
||||
<option>Bitte auswählen</option>
|
||||
<option value="1">vorhanden</option>
|
||||
<option value="0">nicht vorhanden</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Leerstand -->
|
||||
<div class="form-group col-md-2">
|
||||
<HelpLabel title="Leerstand in %">
|
||||
Bitte geben Sie hier den Leerstand in % des Gesamtzeitraumes
|
||||
(3 Jahre) ein. Zum Beispiel 4 Monate Leerstand in 36 Monaten
|
||||
wären dann ca. 11%.
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<input
|
||||
name="leerstand"
|
||||
maxlength="2"
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
bind:value={gebaeude.leerstand}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<Label
|
||||
>F - Bitte prüfen Sie hier die Angaben zum Sanierungszustand des
|
||||
Gebäudes</Label
|
||||
>
|
||||
<BilderZusatzsysteme {gebaeude} {ausweis} />
|
||||
<hr />
|
||||
<div class="flex flex-row justify-between">
|
||||
<Hilfe />
|
||||
<button class="button" on:click={ausweisAbschicken}>Weiter</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<RawNotificationWrapper>
|
||||
{#each Object.entries($notifications) as [uid, notification] (uid)}
|
||||
<RawNotification notification={{ ...notification, uid }}>
|
||||
{@html notification.subtext}
|
||||
</RawNotification>
|
||||
{/each}
|
||||
|
||||
{#if auditBedarfsausweisBenoetigt(ausweis, gebaeude)}
|
||||
<RawNotification
|
||||
notification={{
|
||||
message: "Bedarfsausweis benötigt!",
|
||||
timeout: 0,
|
||||
uid: "BEDARFSAUSWEIS",
|
||||
dismissable: false,
|
||||
type: "info",
|
||||
}}
|
||||
>
|
||||
Sie benötigen einen Bedarfsausweis. <a href="/bedarfsausweis"
|
||||
>Bitte führen Sie hier Ihre Eingabe für den Bedarfsausweis fort</a
|
||||
>.
|
||||
</RawNotification>
|
||||
{/if}
|
||||
|
||||
{#if auditHeizungGebaeudeBaujahr(gebaeude)}
|
||||
<RawNotification
|
||||
notification={{
|
||||
message: "Plausibilitätsprüfung",
|
||||
timeout: 0,
|
||||
uid: "HEIZUNG_VOR_GEBAEUDE",
|
||||
dismissable: true,
|
||||
onUserDismiss: () => {
|
||||
hidden.add(AuditType.HEIZUNG_GEBAEUDE_BAUJAHR);
|
||||
gebaeude = gebaeude;
|
||||
},
|
||||
type: "warning",
|
||||
}}
|
||||
>
|
||||
Sie haben angegeben, dass ihre Heizung vor ihrem Gebäude konstruiert
|
||||
wurde. Sind sie sich sicher, dass das stimmt?
|
||||
</RawNotification>
|
||||
{/if}
|
||||
|
||||
{#if auditVerbrauchAbweichung(ausweis, gebaeude).length > 0}
|
||||
<RawNotification
|
||||
notification={{
|
||||
message: "Plausibilitätsprüfung",
|
||||
timeout: 0,
|
||||
uid: "VERBRAUCH_ABWEICHUNG",
|
||||
dismissable: true,
|
||||
onUserDismiss: () => {
|
||||
hidden.add(AuditType.VERBRAUCH_ABWEICHUNG);
|
||||
gebaeude = gebaeude;
|
||||
},
|
||||
type: "warning",
|
||||
}}
|
||||
>
|
||||
Die Abweichung der Verbräuche zwischen Zeitraum {auditVerbrauchAbweichung(ausweis,
|
||||
gebaeude
|
||||
)[0]} und {auditVerbrauchAbweichung(ausweis, gebaeude)[1]} beträgt mehr als 25%
|
||||
und sie haben keinen Leerstand angegeben. Sind sie sich sicher, dass
|
||||
das stimmt?
|
||||
</RawNotification>
|
||||
{/if}
|
||||
</RawNotificationWrapper>
|
||||
|
||||
<style>
|
||||
:global(.linked) {
|
||||
@apply border-2 border-red-400;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user