Merge pull request #204 from IBCornelsen/UMBE

FELDER DESIGN
This commit is contained in:
UMBENOMENA
2024-12-10 20:51:50 +01:00
committed by GitHub
7 changed files with 637 additions and 737 deletions

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,43 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 38 38">
<defs>
<style>
.cls-1, .cls-2 {
fill: #fff;
}
.cls-3 {
fill: none;
stroke: #fff;
stroke-miterlimit: 10;
stroke-width: .5px;
}
.cls-4 {
fill: #445095;
}
.cls-2 {
font-family: Elephant-Regular, Elephant;
font-size: 32px;
}
.cls-5 {
display: none;
}
</style>
</defs>
<!-- Generator: Adobe Illustrator 28.7.3, SVG Export Plug-In . SVG Version: 1.2.0 Build 164) -->
<g>
<g id="Ebene_1">
<circle class="cls-4" cx="19" cy="19.2" r="19.2"/>
<circle class="cls-3" cx="19" cy="19.2" r="16.4"/>
<g class="cls-5">
<path class="cls-1" d="M15.9,29.2c-.7,0-1.1-.2-1.5-.7-.4-.6-.6-1.4-.6-2.4,0-1.8,1-5.2,2.9-10l.8-1.9c0-.2.3-.4.6-.4s.2,0,.4,0c.5.1,1,.3,1.4.6.4.3.6.6.6.9s-.1.5-.4,1.2c-1.9,4.7-2.8,7.9-2.8,9.8s0,.6.3.6.5-.3,1-.8c.6-.7,1.2-1.4,1.7-2.1,1.3-1.7,2.3-3,3-4,.1-.2.3-.3.5-.3s.3,0,.4.2c.1.1.2.3.2.4s0,.3-.1.4c-1.4,2-2.9,4-4.4,6-.4.5-.9,1.1-1.7,1.7-.6.5-1.3.8-2,.8ZM20.3,13.3c-.5,0-.9-.2-1.3-.5s-.5-.8-.5-1.3.2-.9.5-1.3c.4-.4.8-.5,1.3-.5s.9.2,1.3.5c.4.4.5.8.5,1.3s-.2.9-.5,1.3-.8.5-1.3.5Z"/>
</g>
</g>
<g id="Ebene_2">
<text class="cls-2" transform="translate(13.6 30.1)"><tspan x="0" y="0">i</tspan></text>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@@ -146,7 +146,10 @@
</div>
<div class="form-container">
<div class="form-grid">
<!-- Anlass für Energieausweis -->
<div class="form-group">
<select id="ausstellgrund" name="ausstellgrund" required class="form-select">
@@ -282,6 +285,9 @@
</div>
<style lang="scss">
.form-section {

View File

@@ -0,0 +1,215 @@
<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 Ausweisart from "#components/Ausweis/Ausweisart.svelte";
import Label from "#components/Label.svelte";
import HelpLabel_new from "#components/HelpLabel_new.svelte";
import ZipSearch from "#components/PlzSuche.svelte";
import { hotWaterProductionTypes } from "./HotWaterProductionTypes";
import BilderZusatzsysteme from "../Ausweis/BilderZusatzsysteme.svelte";
import moment from "moment";
import { BitChecker } from "src/lib/BitChecker";
import type { BedarfsausweisWohnen } from "@ibcornelsen/database/client";
let ausweis: BedarfsausweisWohnen = {} as BedarfsausweisWohnen;
let daemmungsBreiten = [0, 0.02, 0.05, 0.08, 0.12, 0.16, 0.2, 0.3, 0.4];
let fensterArten = {
Einfachverglasung: 5,
"Holzfenster Doppelverglasung": 2.7,
"Kunststofffenster Doppelverglasung": 3,
"Alu- oder Stahlfenster Doppelverglasung": 4.3,
"Fenster Doppelverglasung (ab 1995)": 1.8,
"Fenster Doppelverglasung (U-Wert 1,1)": 1.1,
"Dreifach-Wärmeschutzverglasung(U-Wert 0,9)": 0.9,
"Dreifach-Wärmeschutzverglasung(U-Wert 0,85)": 0.85,
"Passivhausfenster(U-Wert 0,7)": 0.7,
"Passivhausfenster(U-Wert 0,6)": 0.6,
"Fenster mit U-Wert 2,3": 2.3,
"Fenster mit U-Wert 1,6": 1.6,
"Fenster mit U-Wert 1,7": 1.7,
"Fenster mit U-Wert 1,3": 1.3,
"Fenster mit U-Wert 1": 1,
};
const arrayRange = (start: number, stop: number, step: number) =>
Array.from(
{ length: (stop - start) / step + 1 },
(value, index) => start + index * step
);
function automatischAusfüllen() {
ausweis.baujahr_anlage = 1974;
ausweis.baujahr_gebaeude = 1962;
ausweis.anzahl_einheiten = 1;
ausweis.objekt_saniert = true;
ausweis.objekt_strasse = "Mönckebergstraße";
ausweis.objekt_plz = "22049";
ausweis.objekt_ort = "Hamburg";
ausweis.wohnflaeche = 152;
ausweis.keller_beheizt = true;
ausweis.dachgeschoss = Dachgeschoss.UNBEHEIZT;
ausweis.energieverbrauch_zeitraum = moment("04.01.2018");
ausweis.energietraeger_1 = "Erdgas";
ausweis.energietraeger_einheit_heizquelle_1 = "kWh";
ausweis.versorgungssysteme = BitChecker(1);
ausweis.fenster_dach = BitChecker(1);
ausweis.daemmung = BitChecker(1);
ausweis.objekt_typ = "Einfamilienhaus";
ausweis.objekt_gebaeudeteil = "Gesamtgebäude";
ausweis.lueftungskonzept = "Fensterlüftung";
ausweis.wird_gekuehlt = false;
ausweis.energieverbrauch_1_heizquelle_1 = 40120;
ausweis.energieverbrauch_2_heizquelle_1 = 42120;
ausweis.energieverbrauch_3_heizquelle_1 = 41120;
ausweis.anzahl_vollgeschosse = 2;
ausweis.geschosshoehe = 2.25;
ausweis.anzahl_gauben = 1;
ausweis.breite_gauben = 0.7;
ausweis.masse_a = 4;
ausweis.masse_b = 12;
ausweis.masse_c = 3;
ausweis.masse_d = 6;
ausweis.masse_e = 4;
ausweis.masse_f = 9;
ausweis.fensterflaeche_so_sw = 8;
ausweis.fensterflaeche_nw_no = 8;
ausweis.aussenwandflaeche_unbeheizt = 15;
ausweis.fenster_flaeche_1 = 16;
ausweis.fenster_art_1 = 5;
ausweis.fenster_flaeche_2 = 0;
ausweis.fenster_art_2 = 5;
ausweis.dachfenster_flaeche = 12;
ausweis.dachfenster_art = 5;
ausweis.haustuer_flaeche = 2;
ausweis.haustuer_art = 5;
ausweis.dach_bauart = "Massive Konstruktion";
ausweis.dach_daemmung = 0;
ausweis.decke_bauart = "Massive Konstruktion";
ausweis.decke_daemmung = 0.02;
ausweis.aussenwand_bauart = "Massive Konstruktion";
ausweis.aussenwand_daemmung = 0.05;
ausweis.boden_bauart = "Massive Konstruktion";
ausweis.boden_daemmung = 0.08;
ausweis.warmwasser_verteilung = "zvmzbis1978";
ausweis.warmwasser_speicherung = "zwwsath";
ausweis.warmwasser_erzeugung = "ktkesselbis1986";
ausweis.heizung_zentral = false;
ausweis.heizung_verteilung = "zv7055bis1978";
ausweis.waerme_erzeugung_heizung = "ktkesselbis1986h";
ausweis.heizung_speicherung = "elzs7055bis1994";
ausweis.energietraeger_2 = "Braunkohle";
ausweis.anteil_zusatzheizung = 0.7;
ausweis = ausweis;
}
function toggleSection(section: HTMLElement): void {
// Find the next sibling element and assert it's an HTMLElement
const formContainer = section.nextElementSibling as HTMLElement | null;
if (!formContainer) {
console.error("Form container not found.");
return;
}
// Find the icon inside the section and assert it's an HTMLElement
const icon = section.querySelector('.toggle-icon') as HTMLElement | null;
if (!icon) {
console.error("Toggle icon not found.");
return;
}
// Toggle classes for expanded and collapsed states
formContainer.classList.toggle('expanded');
section.classList.toggle('collapsed');
}
</script>
<form action="" enctype="multipart/form-data">
<div class="w-[300px] p-4">
<!-- Anlass für Energieausweis -->
<div class="grid grid-cols-[max-content_1fr_38px] items-center">
<div class=" w-full justify-self-start bg-secondary text-white py-[6px] px-[10px] rounded-s-md min-h-[38px] ring-1 ring-secondary">Anlass*</div>
<select id="ausstellgrund" class="rounded-s-none" name="ausstellgrund">
<option value="" disabled selected>Anlass</option>
<option value="Neubau">Neubau</option>
<option value="Vermietung">Vermietung</option>
<option value="Verkauf">Verkauf</option>
<option value="Modernisierung">Modernisierung</option>
<option value="Sonstiges">Sonstiges</option>
</select>
<div class=""><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
</div>
<br>
<div class="grid grid-cols-[1fr_38px] items-center relative">
<div class="absolute text-[12px] right-[45px] top-[3px]">Baujahr Heizung</div>
<input id="baujahr_anlage" class="pt-[18px]" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Baujahr Heizung">
<div class=""><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!-- Baujahr Heizung -->
<!-- Baujahr Gebäude -->
<input id="baujahr_gebaeude" name="baujahr_gebaeude" type="text" maxlength="20" required autocomplete="off" placeholder="Baujahr Gebäude *" class="form-input">
<!-- Anzahl der Wohnungen -->
<input id="anzahl_einheiten" name="anzahl_einheiten" type="text" maxlength="3" required autocomplete="off" placeholder="Anzahl Wohnungen *" class="form-input">
<!-- Sanierungsstatus -->
<select id="objekt_saniert" name="objekt_saniert" required class="form-select">
<option value="" disabled selected>Sanierungsstatus *</option>
<option value="1">saniert</option>
<option value="0">unsaniert</option>
</select>
</form>
<style lang="scss">
</style>

View File

@@ -0,0 +1,32 @@
<script lang="ts">
export let title: string;
export let tooltip: string = "";
</script>
<div data-tooltip={tooltip} class="relative tooltip-opener cursor-help">
<img
src="/images/icons/info-mark.svg"
alt="?"
class="w-[30px] h-[30px] ml-2"
/>
<div class="tooltip">
<slot></slot>
<div id="arrow" class="invisible absolute h-3 w-6 bg-inherit before:visible before:absolute before:h-3 before:w-3 right-2 before:rotate-45 before:bg-inherit before:content-['']"></div>
</div>
</div>
<style lang="postcss">
.tooltip {
@apply absolute -right-4 w-[240px] break-words ring-2 ring-secondary/5 invisible bg-white rounded-lg p-2 shadow-lg top-0 translate-y-[calc(-100%-8px)] transition-all duration-300 opacity-0;
}
.tooltip-opener:hover .tooltip {
@apply visible opacity-100;
}
</style>

View File

@@ -1,736 +0,0 @@
<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 BereichLabel from "#components/BereichLabel.svelte";
import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
import ZipSearch from "#components/PlzSuche.svelte";
import moment from "moment";
import BilderZusatzsysteme from "#components/Ausweis/BilderZusatzsysteme.svelte";
import { RawNotificationWrapper, RawNotification, notifications } from "#components/Notifications/index.js";
import { auditHeizungGebaeudeBaujahr } from "#components/Verbrauchsausweis/audits/HeizungGebaeudeBaujahr.js";
import { auditHeizungJuengerDreiJahre } from "#components/Verbrauchsausweis/audits/HeizungJuengerDreiJahre.js";
import { auditZeitraumAktuell } from "#components/Verbrauchsausweis/audits/ZeitraumAktuell.js";
import { auditKlimaFaktoren } from "#components/Verbrauchsausweis/audits/KlimaFaktoren.js";
import { auditWohnFlaeche } from "#components/Verbrauchsausweis/audits/WohnFlaeche.js";
import { auditWarmWasser } from "#components/Verbrauchsausweis/audits/WarmWasser.js";
import { auditLeerStand } from "#components/Verbrauchsausweis/audits/LeerStand.js";
import { auditPlzNichtErkannt } from "#components/Verbrauchsausweis/audits/PlzNichtErkannt.js";
import { AuditType, hidden } from "#components/Verbrauchsausweis/audits/hidden.js";
import { auditBedarfsausweisBenoetigt } from "#components/Verbrauchsausweis/audits/BedarfsausweisBenoetigt.js";
import { auditVerbrauchAbweichung } from "#components/Verbrauchsausweis/audits/VerbrauchAbweichung.js";
import { auditEndEnergie } from "#components/Verbrauchsausweis/audits/EndEnergie.js";
import { auditWohnflaecheGroesserGesamtflaeche } from "#components/Verbrauchsausweis/audits/WohnflaecheGroesserGesamtflaeche.js";
import { Enums } from "@ibcornelsen/database/client"
import Overlay from "#components/Overlay.svelte";
import AusweisGespeichertModule from "./AusweisGespeichertModule.svelte";
import { VerbrauchsausweisWohnenClient, BenutzerClient, UploadedGebaeudeBild } from "#components/Ausweis/types.js";
import { verbrauchsausweisWohnenSpeichern } from "src/client/lib/verbrauchsausweisWohnenSpeichern.js";
// TODO: Vom Server sollte ein volles Objekt kommen, dass alle Subobjekte enthält, weil es sonst zu Problemen führen kann
// wenn gebaeude_aufnahme_allgemein oder gebaeude_stammdaten nicht existiert...
export let ausweis: VerbrauchsausweisWohnenClient;
export let user: BenutzerClient = {} as BenutzerClient;
let gebaeude_aufnahme_allgemein = ausweis.gebaeude_aufnahme_allgemein || {};
let gebaeude = ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten || {};
let images: (UploadedGebaeudeBild & { base64?: string })[] = ausweis.gebaeude_aufnahme_allgemein?.gebaeude_stammdaten?.gebaeude_bilder || [];
async function spaeterWeitermachen() {
const result = await verbrauchsausweisWohnenSpeichern(ausweis, gebaeude, gebaeude_aufnahme_allgemein, images, user);
if (result !== null) {
// Falls der Nutzer zurück navigiert, sollte er wieder auf seinen Vorgang kommen.
// Sonst müsste er alles neu eingeben...
ausweis.uid = result.uid
gebaeude.uid = result.gebaeude_uid
gebaeude_aufnahme_allgemein.uid = result.gebaeude_aufnahme_uid
window.history.pushState({}, "", `${location.pathname}?uid=${result.uid}`);
speichernOverlayHidden = false;
}
}
function automatischAusfüllen() {
gebaeude_aufnahme_allgemein.baujahr_gebaeude = [1962];
gebaeude_aufnahme_allgemein.baujahr_heizung = [1952];
gebaeude_aufnahme_allgemein.saniert = true;
gebaeude_aufnahme_allgemein.einheiten = 1;
ausweis.ausstellgrund = "Vermietung";
ausweis.verbrauch_1 = 15000;
ausweis.verbrauch_2 = 14000;
ausweis.verbrauch_3 = 16000;
gebaeude_aufnahme_allgemein.flaeche = 152;
gebaeude_aufnahme_allgemein.nutzflaeche = 172;
ausweis.keller_beheizt = true;
gebaeude_aufnahme_allgemein.brennstoff_1 = "Erdgas H";
ausweis.einheit_1 = "kWh";
ausweis.anteil_warmwasser_1 = 18;
ausweis.startdatum = moment("01.01.2019").toDate();
gebaeude_aufnahme_allgemein.plz = "21039";
gebaeude_aufnahme_allgemein.ort = "Hamburg";
gebaeude_aufnahme_allgemein.adresse = "Curslacker Deich 170";
gebaeude_aufnahme_allgemein.gebaeudeteil = "Gesamtgebäude";
gebaeude = gebaeude;
ausweis = ausweis;
}
async function ausweisAbschicken(e: SubmitEvent) {
if (e && e.preventDefault) e.preventDefault();
const result = await verbrauchsausweisWohnenSpeichern(ausweis, gebaeude, gebaeude_aufnahme_allgemein, images, user);
if (result !== null) {
// Falls der Nutzer zurück navigiert, sollte er wieder auf seinen Vorgang kommen.
// Sonst müsste er alles neu eingeben...
ausweis.uid = result.uid
gebaeude.uid = result.gebaeude_uid
gebaeude_aufnahme_allgemein.uid = result.gebaeude_aufnahme_uid
window.history.pushState({}, "", `${location.pathname}?uid=${result.uid}`);
window.location.href = `/kundendaten?uid=${result.uid}`;
}
}
let waitOverlayHidden = true;
let speichernOverlayHidden = true;
$: {
if (gebaeude_aufnahme_allgemein.saniert
&& gebaeude_aufnahme_allgemein.oberste_geschossdecke_gedaemmt === undefined
&& gebaeude_aufnahme_allgemein.dachgeschoss_gedaemmt === undefined) {
gebaeude_aufnahme_allgemein.oberste_geschossdecke_gedaemmt = true;
gebaeude_aufnahme_allgemein.dachgeschoss_gedaemmt = true;
}
}
</script>
<Overlay bind:hidden={speichernOverlayHidden}>
<div class="bg-white w-full max-w-screen-sm py-8 px-8">
<AusweisGespeichertModule uid={ausweis.uid}></AusweisGespeichertModule>
</div>
</Overlay>
<Overlay bind:hidden={waitOverlayHidden}>
<p class="text-white font-semibold text-4xl">
Bitte warten sie, ihr Ausweis wird nun erstellt.
</p>
</Overlay>
<!-- <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_aufnahme_allgemein
bind:gebaeude
/>
</div>-->
<form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
<div id="formular-box" class="formular-boxen ring-0">
<div class="w-full grid gap-x-4 gap-y-2
grid-cols-1
xs:grid-cols-2
">
<div class="md:justify-self-start"><button class="button" type="button" on:click={spaeterWeitermachen}>Später Weitermachen</button></div>
<div class="md:justify-self-end"><Hilfe /></div>
</div>
<div class="mt-2"><button class="button hidden" on:click={automatischAusfüllen} type="button" >Automatisch Ausfüllen</button></div>
<hr />
<BereichLabel bereich="A">Prüfung der Ausweisart</BereichLabel>
<div class="bereich-box">
<Ausweisart
bind:gebaeude
bind:gebaeude_aufnahme_allgemein
bind:ausweis
/>
</div>
<BereichLabel bereich="B">Eingabe der Gebäudeadresse -&nbsp;Angaben&nbsp;zu&nbsp;Wohnfläche, Keller&nbsp;und&nbsp;Dachgeschoss</BereichLabel>
<div class="bereich-box">
<div class="w-full grid
grid-cols-bereich-B gap-x-4
xl:grid-cols-bereich-B-xl xl:gap-x-8
2xl:grid-cols-bereich-B-2xl 2xl:gap-x-8
">
<div class="grid grid-cols-1 gap-x-4
md:grid-cols-2 md:gap-x-6 md:mb-6
xl:mb-0
2xl:grid-cols-3 2xl:gap-x-6
">
<!-- Strasse -->
<div class="md:col-span-2 2xl:col-span-1">
<HelpLabel title="* Straße, Hausnummer">
Bitte geben Sie hier die Straße und Hausnummer des Gebäudes
ein.
</HelpLabel>
<div>
<input
name="adresse"
data-test="adresse"
type="text"
autocomplete="off"
required
data-msg-minlength="min. 5 Zeichen"
data-msg-maxlength="max. 40 Zeichen"
bind:value={gebaeude_aufnahme_allgemein.adresse}
/>
</div>
</div>
<!-- PLZ -->
<div class="PLZ">
<Label>* PLZ</Label>
<ZipSearch
bind:zip={gebaeude_aufnahme_allgemein.plz}
bind:city={gebaeude_aufnahme_allgemein.ort}
name="plz"
/>
</div>
<!-- Ort -->
<div class="">
<HelpLabel title="* Ort">
Ort des Gebäudes wird automatisch ermittelt.
</HelpLabel>
<div>
<input
name="ort"
data-test="ort"
readonly={true}
bind:value={gebaeude_aufnahme_allgemein.ort}
type="text"
/>
</div>
</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
">
<!-- Wohnfläche -->
<div class="">
<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"
data-test="flaeche"
maxlength="4"
type="number"
required
autocomplete="off"
data-rule-minlength="2"
data-msg-minlength="min. 2 Zeichen"
bind:value={gebaeude_aufnahme_allgemein.flaeche}
/>
</div>
</div>
<!-- Gesamtfläche -->
<div class="">
<HelpLabel title="&nbsp;&nbsp;Gesamtfläche m²">
Bitte geben Sie hier die beheizte Gesamtfläche in m² ein
(wenn bekannt). Dabei handelt es sich um die Wohnfläche +
weiterer Flächen innerhalb des Gebäudes (z.B. Fläche des
beheizten Kellers). Diese Fläche wird dann im Energieausweis
als energetische Nutzfläche (An) ausgewiesen.
</HelpLabel>
<div>
<input
name="nutzflaeche"
data-test="nutzflaeche"
maxlength="4"
type="number"
required
autocomplete="off"
data-rule-minlength="2"
data-msg-minlength="min. 2 Zeichen"
bind:value={gebaeude_aufnahme_allgemein.nutzflaeche}
/>
</div>
</div>
<!-- Keller -->
<div class="">
<Label>* Keller</Label>
<div>
<select
name="keller"
data-test="keller"
required
bind:value={gebaeude_aufnahme_allgemein.keller}
>
<option disabled>Bitte auswählen</option>
<option value={Enums.Heizungsstatus.NICHT_VORHANDEN}
>nicht vorhanden</option
>
<option value={Enums.Heizungsstatus.UNBEHEIZT}
>unbeheizt</option
>
<option value={Enums.Heizungsstatus.BEHEIZT}
>beheizt</option
>
</select>
</div>
</div>
<!-- Dachgeschoss -->
<div class="">
<Label>* Dachgeschoss</Label>
<div>
<select
name="dachgeschoss"
data-test="dachgeschoss"
bind:value={gebaeude_aufnahme_allgemein.dachgeschoss}
required
>
<option disabled>Bitte auswählen</option>
<option value={Enums.Heizungsstatus.NICHT_VORHANDEN}
>nicht vorhanden</option
>
<option value={Enums.Heizungsstatus.UNBEHEIZT}
>unbeheizt</option
>
<option value={Enums.Heizungsstatus.BEHEIZT}
>beheizt</option
>
</select>
</div>
</div>
</div>
</div>
</div>
<BereichLabel bereich="C">Eingabe von 3 zusammenhängenden Verbrauchsjahren</BereichLabel>
<div class="bereich-box">
<div class="w-full grid
grid-cols-bereich-C gap-x-4 gap-y-8
xl:grid-cols-bereich-C-xl xl:gap-x-8 xl:gap-y-0
2xl:grid-cols-bereich-C-2xl 2xl:gap-x-8
">
<Verbrauch
bind:gebaeude
bind:gebaeude_aufnahme_allgemein
bind:ausweis
/>
</div>
</div>
<BereichLabel bereich="d">Eingabe Warmwasseranteil und Verwendung von alternativenEnergieversorgungssystemen</BereichLabel>
<div class="bereich-box">
<!-- Anteil WW enthalten -->
<div class="flex flex-col">
<div class="flex flex-row gap-4 items-center">
<input
type="checkbox"
class="checkbox"
name="warmwasser_enthalten"
data-test="warmwasser_enthalten"
bind:checked={ausweis.warmwasser_enthalten}
/>
<Label>Warmwasser im Verbrauch enthalten</Label>
</div>
<div class="flex flex-row gap-4 items-center">
<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>Anteil bekannt</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"
data-test="anteil_warmwasser_1"
maxlength="2"
type="number"
bind:value={ausweis.anteil_warmwasser_1}
disabled={!ausweis.warmwasser_anteil_bekannt ||
!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"
data-test="anteil_warmwasser_2"
maxlength="3"
type="number"
autocomplete="off"
bind:value={ausweis.anteil_warmwasser_2}
disabled={!ausweis.zusaetzliche_heizquelle ||
!ausweis.warmwasser_anteil_bekannt ||
!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"
data-test="alternative_heizung"
bind:checked={ausweis.alternative_heizung}
value="Heizung"
/>Heizung</label
>
<label class="checkbox-inline"
><input
type="checkbox"
name="alternative_warmwasser"
data-test="alternative_warmwasser"
bind:checked={ausweis.alternative_warmwasser}
value="Warmwasser"
/>Warmwasser</label
>
<label class="checkbox-inline"
><input
type="checkbox"
name="alternative_lueftung"
data-test="alternative_lueftung"
bind:checked={ausweis.alternative_lueftung}
value="Lüftung"
/>Lüftung</label
>
<label class="checkbox-inline"
><input
type="checkbox"
name="alternative_kuehlung"
data-test="alternative_kuehlung"
bind:checked={ausweis.alternative_kuehlung}
value="Kühlung"
/>Kühlung</label
>
</div>
</div>
</div>
<hr />
</div>
</form>
<RawNotificationWrapper>
{#each Object.entries($notifications) as [uid, notification] (uid)}
<RawNotification notification={{ ...notification, uid }}>
{@html notification.subtext}
</RawNotification>
{/each}
{#if auditBedarfsausweisBenoetigt(ausweis, gebaeude_aufnahme_allgemein)}
<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}
{#await auditPlzNichtErkannt(gebaeude_aufnahme_allgemein) then result}
{#if result}
<RawNotification
notification={{
message: "Plausibilitätsprüfung",
timeout: 0,
uid: "PLZ_NICHT_ERKANNT",
dismissable: false,
type: "warning",
}}
>
Die Postleitzahl konnte nicht zugeordnet werden. Bitte prüfen
Sie die Eingabe. Sollte die Postleitzahl korrekt eingegeben
sein, werden wir den Ort händisch zuordnen.
</RawNotification>
{/if}
{/await}
{#if auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)}
<RawNotification
notification={{
message: "Plausibilitätsprüfung",
timeout: 0,
uid: "HEIZUNG_GEBAEUDE_BAUJAHR",
dismissable: true,
onUserDismiss: () => {
hidden.add(AuditType.HEIZUNG_GEBAEUDE_BAUJAHR);
gebaeude_aufnahme_allgemein = gebaeude_aufnahme_allgemein;
},
type: "warning",
}}
>
Sie haben angegeben, dass ihre Heizung vor ihrem Gebäude konstruiert
wurde. Sind sie sich sicher, dass das stimmt?
</RawNotification>
{/if}
{#if auditHeizungJuengerDreiJahre(gebaeude_aufnahme_allgemein)}
<RawNotification
notification={{
message: "Plausibilitätsprüfung",
timeout: 0,
uid: "HEIZUNG_JUENGER_DREI_JAHRE",
dismissable: true,
onUserDismiss: () => {
hidden.add(AuditType.HEIZUNG_JUENGER_DREI_JAHRE);
gebaeude = gebaeude;
},
type: "warning",
}}
>
Ihre Heizungsanlage ist jünger als 3 Jahre. Für den
Verbrauchsausweis müssen Sie mindestens 3 Verbrauchsjahre eingeben
die den aktuellen Stand des Gebäudes abbilden. Ein Verbrauchsausweis
ist daher nicht möglich. Bitte klicken Sie
<a href="/bedarfsausweis">hier</a> um zum Eingabeformular für den Bedarfsausweis
zu gelangen.
</RawNotification>
{/if}
{#if auditZeitraumAktuell(ausweis, gebaeude)}
<RawNotification
notification={{
message: "Plausibilitätsprüfung",
timeout: 0,
uid: "ZEITRAUM_AKTUELL",
dismissable: true,
onUserDismiss: () => {
hidden.add(AuditType.ZEITRAUM_AKTUELL);
gebaeude = gebaeude;
},
type: "warning",
}}
>
Die Verbrauchszeiträume sind nicht aktuell genug. Das Ende des
letzten Verbrauchszeitraumes darf nicht mehr als 18 Monate
zurückliegen. Ein Verbrauchsausweis ist mit diesen Zeiträumen daher
nicht möglich. Bitte klicken Sie <a href="/bedarfsausweis">hier</a> um
zum Eingabeformular für den Bedarfsausweis zu gelangen.
</RawNotification>
{/if}
{#await auditKlimaFaktoren(ausweis, gebaeude) then result}
{#if result}
<RawNotification
notification={{
message: "Plausibilitätsprüfung",
timeout: 0,
uid: "KLIMA_FAKTOREN",
dismissable: true,
onUserDismiss: () => {
hidden.add(AuditType.KLIMA_FAKTOREN);
gebaeude = gebaeude;
},
type: "warning",
}}
>
Die Verbrauchszeiträume sind zu aktuell und es liegen noch keine
Klimafaktoren dazu vor. Bitte verschieben Sie die
Verbrauchszeiträume 1 Jahr nach hinten. Wenn das nicht möglich
ist, klicken Sie
<a href="/bedarfsausweis">hier</a> um zum Eingabeformular für den
Bedarfsausweis zu gelangen.
</RawNotification>
{/if}
{/await}
{#if auditWohnFlaeche(gebaeude_aufnahme_allgemein)}
<RawNotification
notification={{
message: "Plausibilitätsprüfung",
timeout: 0,
uid: "WOHN_FLAECHE",
dismissable: true,
onUserDismiss: () => {
hidden.add(AuditType.WOHN_FLAECHE);
gebaeude = gebaeude;
},
type: "warning",
}}
>
Die Wohnfläche ist viel zu klein. Bitte überprüfen Sie Ihre Eingabe
nochmal und stellen sicher, daß sich Ihre Angaben auf das gesamte
Gebäude beziehen.
</RawNotification>
{/if}
{#if auditWarmWasser(ausweis)}
<RawNotification
notification={{
message: "Plausibilitätsprüfung",
timeout: 0,
uid: "WARM_WASSER",
dismissable: true,
onUserDismiss: () => {
hidden.add(AuditType.WARM_WASSER);
gebaeude = gebaeude;
},
type: "warning",
}}
>
Bitte überprüfen Sie nochmal die Höhe des Warmwasseranteils. Dieser
scheint nicht ganz im Rahmen zu liegen.
</RawNotification>
{/if}
{#if auditLeerStand(gebaeude_aufnahme_allgemein)}
<RawNotification
notification={{
message: "Plausibilitätsprüfung",
timeout: 0,
uid: "LEER_STAND",
dismissable: true,
onUserDismiss: () => {
hidden.add(AuditType.LEER_STAND);
gebaeude = gebaeude;
},
type: "warning",
}}
>
Bei Leerstand größer als 30% darf kein Verbrauchsausweis ausgestellt
werden. Bitte klicken Sie <a href="/bedarfsausweis">hier</a> um zum Eingabeformular
für den Bedarfsausweis zu gelangen.
</RawNotification>
{/if}
{#if auditVerbrauchAbweichung(ausweis, gebaeude_aufnahme_allgemein).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_aufnahme_allgemein,
)[0]} und {auditVerbrauchAbweichung(ausweis, gebaeude_aufnahme_allgemein)[1]} beträgt mehr
als 30% und sie haben keinen Leerstand angegeben. Sind sie sich sicher,
dass das stimmt?
</RawNotification>
{/if}
{#await auditEndEnergie(ausweis, gebaeude, gebaeude_aufnahme_allgemein) then result}
{#if result}
<RawNotification
notification={{
message: "Plausibilitätsprüfung",
timeout: 0,
uid: "END_ENERGIE",
dismissable: true,
onUserDismiss: () => {
hidden.add(AuditType.END_ENERGIE);
gebaeude = gebaeude;
},
type: "warning",
}}
>
Die Endenergie liegt außerhalb des normalen Rahmens. Bitte
nochmal überprüfen. Bei Passivhäusern oder ganz alten
unsanierten Gebäuden ist so eine Abweichung durchaus möglich.
</RawNotification>
{/if}
{/await}
{#if auditWohnflaecheGroesserGesamtflaeche(gebaeude_aufnahme_allgemein)}
<RawNotification
notification={{
message: "Plausibilitätsprüfung",
timeout: 0,
uid: "WOHNFLAECHE_GROESSER_GESAMTFLAECHE",
dismissable: true,
onUserDismiss: () => {
hidden.add(AuditType.WOHNFLAECHE_GROESSER_GESAMTFLAECHE);
gebaeude = gebaeude;
},
type: "warning",
}}
>
Die Wohnfläche darf nicht größer als die Nutzfläche sein.
</RawNotification>
{/if}
</RawNotificationWrapper>
<style>
</style>

View File

@@ -1,7 +1,7 @@
---
import AusweisLayout from "#layouts/AusweisLayout.astro";
import BedarfsausweisContent from "#components/Bedarfsausweis/BedarfsausweisContent1.svelte";
import BedarfsausweisContent from "#components/Bedarfsausweis/BedarfsausweisContent2.svelte";
---