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

FELDER DESIGN #206

Merged
UMBENOMENA merged 1 commits from UMBE into main 2024-12-11 03:37:42 +00:00
Conversation 0 Commits 1 Files Changed 17 +7855 -1228
17 changed files with 7855 additions and 1228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6762
public/images/icons/info-mark.ai
View File

File diff suppressed because one or more lines are too long

53
public/images/icons/info-mark.svg
View File

@@ -1,46 +1,49 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 10.9 23.8">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 25 38">
<defs>
<style>
.cls-1, .cls-2 {
.cls-1 {
fill: #fff;
}
.cls-3 {
fill: none;
stroke: #fff;
stroke-miterlimit: 10;
stroke-width: .5px;
.cls-2 {
fill: #c6c6c6;
opacity: .7;
}
.cls-2, .cls-3 {
display: none;
}
.cls-4 {
fill: #445095;
}
.cls-2 {
font-family: Elephant-Regular, Elephant;
font-size: 32px;
fill: #616160;
opacity: .2;
}
.cls-5 {
display: none;
fill: #445095;
stroke: #fff;
stroke-miterlimit: 10;
stroke-width: .8px;
}
</style>
</defs>
<!-- Generator: Adobe Illustrator 28.7.3, SVG Export Plug-In . SVG Version: 1.2.0 Build 164) -->
<g>
<g id="Ebene_1" class="cls-5">
<circle class="cls-4" cx="5.4" cy="12.8" r="19.2"/>
<circle class="cls-3" cx="5.4" cy="12.8" r="16.4"/>
<g class="cls-5">
<path class="cls-1" d="M2.3,22.8c-.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,.8ZM6.8,6.9c-.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 id="Ebene_4">
<rect class="cls-4" width="25" height="38"/>
</g>
<g id="Ebene_1">
<rect class="cls-2" width="25" height="38"/>
<g id="Ebene_2">
<circle class="cls-5" cx="12.5" cy="17.8" r="9.2"/>
</g>
<g class="cls-3">
<path class="cls-1" d="M13.8,19.8h-3.1v-.3c0-.5,0-.9.2-1.3.1-.3.3-.6.5-.9.2-.3.8-.7,1.6-1.4.4-.4.7-.7.7-1s0-.5-.3-.7c-.2-.2-.4-.2-.8-.2s-.7.1-.9.4c-.2.3-.4.7-.5,1.3l-3.1-.4c.1-1.1.5-2.1,1.3-2.8.7-.7,1.8-1.1,3.3-1.1s2.1.2,2.8.7c1,.7,1.5,1.5,1.5,2.6s-.1.9-.4,1.3-.8.9-1.5,1.6c-.5.4-.9.8-1,1-.1.3-.2.6-.2,1ZM10.6,21.2h3.3v2.9h-3.3v-2.9Z"/>
</g>
<g id="Ebene_3">
<path class="cls-1" d="M13.4,19.8h-1.7c0-.2,0-.4,0-.5,0-.6,0-1,.3-1.4.2-.4.6-.8,1.1-1.2.6-.4.9-.7,1-.9.2-.2.3-.5.3-.7s-.1-.7-.4-.9-.7-.4-1.2-.4-.9.1-1.2.4c-.3.3-.5.7-.7,1.3l-1.7-.2c0-.8.4-1.5,1-2.1.6-.6,1.5-.8,2.5-.8s2,.3,2.6.9c.6.6,1,1.2,1,2s-.1.8-.4,1.2-.7.9-1.5,1.5c-.4.3-.6.6-.7.8,0,.2-.1.6-.1,1.1ZM11.6,23.2v-1.9h1.9v1.9h-1.9Z"/>
</g>
</g>
<g id="Ebene_3">
<rect class="cls-4" x=".1" width="10.7" height="23.8"/>
</g>
<g id="Ebene_2">
<text class="cls-2" transform="translate(0 23.7)"><tspan x="0" y="0">i</tspan></text>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

16
public/images/icons/toggle-icon.svg Normal file
View File

@@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 25 50">
<defs>
<style>
.cls-1 {
fill: #445095;
}
</style>
</defs>
<!-- Generator: Adobe Illustrator 28.7.3, SVG Export Plug-In . SVG Version: 1.2.0 Build 164) -->
<g>
<g id="Ebene_1">
<polygon class="cls-1" points="0 0 0 50 25 25 0 0"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 412 B

342
src/components/Ausweis/Ausweisart.svelte
View File

@@ -1,6 +1,11 @@
<script lang="ts">
import HelpLabel from "#components/HelpLabel.svelte";
import Label from "#components/Label.svelte";
import BereichLabel from "#labels/BereichLabel.svelte";
import HelpLabel from "#labels/HelpLabel.svelte";
import Inputlabel from "#labels/InputLabel.svelte";
//import Label from "#components/Label.svelte";
import { auditHeizungGebaeudeBaujahr } from "../Verbrauchsausweis/audits/HeizungGebaeudeBaujahr";
import { addNotification, deleteNotification } from "@ibcornelsen/ui";
import TagInput from "../TagInput.svelte";
@@ -17,168 +22,213 @@
</script>
<div class="w-full grid
grid-cols-bereich-A gap-x-4
xl:grid-cols-bereich-A-xl xl:gap-x-6
2xl:grid-cols-bereich-A-2xl 2xl:gap-x-6
<BereichLabel bereich="A">Prüfung der Ausweisart</BereichLabel>
<div class="bereich-box grid
grid-cols-1 gap-x-4 gap-y-8
sm:grid-cols-2 sm:gap-x-4 sm:gap-y-8
xl:grid-cols-3 xl:gap-x-4 xl:gap-y-8
">
<!-- Anlass für Energieausweis -->
<div class="">
<Label>* Anlass für den Energieausweis</Label>
<div class="grid gap-x-6 mb-8
grid-cols-[minmax(min-content,_130px)]
xs:grid-cols-[minmax(min-content,_130px)_minmax(min-content,_130px)]
sm:grid-cols-[minmax(min-content,_130px)_minmax(min-content,_130px)_minmax(min-content,_130px)]
xl:grid-cols-[1fr_1fr] xl:gap-x-6 xl:mb-0
2xl:grid-cols-[1fr_1fr_1fr]
">
{#each Object.entries(Enums.Ausstellgrund) as [name, ausstellgrund]}
<label class="radio-inline">
<input
name="ausstellgrund"
type="radio"
value={ausstellgrund}
bind:group={ausweis.ausstellgrund}
/>{name}</label
>
{/each}
<div class="input-standard order-1 md:order-1 xl:order-1">
<Inputlabel title="Anlass *"></Inputlabel>
<select id="ausstellgrund"
class="rounded-e-none"
name="ausstellgrund"
placeholder="Anlass"
required>
{#each Object.entries(Enums.Ausstellgrund) as [name, ausstellgrund]}
<option value={ausstellgrund}>{name}</option>
{/each}
</select>
<div class="help-label">
<HelpLabel>Bitte wählen Sie den Anlass.</HelpLabel>
</div>
</div>
<!-- Gebäudetyp -->
<div class="input-standard order-2 md:order-3 xl:order-2">
<Inputlabel title="Gebäudetyp *"></Inputlabel>
<select
name="gebaeudetyp"
data-test="gebaeudetyp"
required
bind:value={gebaeude_aufnahme_allgemein.gebaeudetyp}
>
<option disabled>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 class="help-label">
<HelpLabel>
Bitte wählen Sie hier den Gebäudetyp aus.
</HelpLabel>
</div>
</div>
<!-- Anzahl der Wohnungen -->
<div class="input-standard order-3 md:order-5 xl:order-3">
<Inputlabel title="Anzahl Wohnungen *"></Inputlabel>
<input id="einheiten"
class="rounded-e-none"
name="einheiten"
type="number"
required
autocomplete="off"
data-msg="Pflichtfeld"
maxlength="3"
bind:value={gebaeude_aufnahme_allgemein.einheiten}
>
<div class="help-label">
<HelpLabel>
Bitte geben Sie hier die Anzahl der Wohnungen ein, die sich im
Gebäude befinden.
</HelpLabel>
</div>
</div>
<!-- Sanierungsstatus -->
<div class="input-standard order-4 md:order-2 xl:order-4">
<Inputlabel title="Sanierungsstatus *"></Inputlabel>
<select
name="saniert"
class=""
required
bind:value={gebaeude_aufnahme_allgemein.saniert}
>
<option disabled selected value={false}>Bitte auswählen</option>
<option value={true}>saniert</option>
<option value={false}>unsaniert</option>
</select>
<div class="help-label">
<HelpLabel>
Bitte geben Sie an ob das Gebäude energetisch saniert oder unsaniert
ist. Wenn das Dach mindestens 12 cm gedämmt und Heizung sowie
Fenster nicht älter als 30 Jahre sind, können Sie saniert auswählen.
</HelpLabel>
</div>
</div>
<!-- Baujahr -->
<div class="input-standard order-5 md:order-4 xl:order-5">
<Inputlabel title="Baujahr *"></Inputlabel>
<TagInput
name="baujahr_gebaeude"
type="number"
onlyUnique={true}
minChars={4}
onFocusIn={() => {
addNotification({
message: "Info",
subtext:
"Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrem Gebäude durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
dismissable: true,
uid: "GEBAEUDE_BAUJAHR",
timeout: 0,
type: "info",
});
}}
onFocusOut={() => {
deleteNotification("GEBAEUDE_BAUJAHR");
}}
className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)
? "linked"
: ""}
bind:tags={gebaeude_aufnahme_allgemein.baujahr_gebaeude}
/>
<div class="help-label">
<HelpLabel>
Bitte geben Sie hier das Baujahr des Gebäudes ein. Sollte eine eine
grundlegende Sanierung von Dach, Fenster und Heizung stattgefunden
haben, dann berücksichtigen Sie das in dem Sie bei Sanierungsstatus
-saniert- angeben.
</HelpLabel>
</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
">
<!-- Baujahr Heizung -->
<div class="">
<HelpLabel title="* Baujahr Heizung">
<div class="input-standard order-6 md:order-6 xl:order-6">
<Inputlabel title="Baujahr Heizung *"></Inputlabel>
<TagInput
name="baujahr_heizung"
type="number"
onlyUnique={true}
minChars={4}
onFocusIn={() => {
addNotification({
message: "Info",
subtext:
"Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrer Heizung durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
dismissable: true,
uid: "HEIZUNG_BAUJAHR",
timeout: 0,
type: "info",
});
}}
onFocusOut={() => {
deleteNotification("HEIZUNG_BAUJAHR");
}}
className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)
? "linked"
: ""}
bind:tags={gebaeude_aufnahme_allgemein.baujahr_heizung}
/>
<div class="help-label">
<HelpLabel>
Bitte geben Sie hier das Baujahr der Heizungsanlage ein. Sollten
unterschiedliche Baujahre vorliegen, dann geben Sie einen
Zeitbereich ein <br />z.B. 1994-2001.
</HelpLabel>
<div>
<TagInput
name="baujahr_heizung"
type="number"
onlyUnique={true}
minChars={4}
onFocusIn={() => {
addNotification({
message: "Info",
subtext:
"Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrer Heizung durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
dismissable: true,
uid: "HEIZUNG_BAUJAHR",
timeout: 0,
type: "info",
});
}}
onFocusOut={() => {
deleteNotification("HEIZUNG_BAUJAHR");
}}
className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)
? "linked"
: ""}
bind:tags={gebaeude_aufnahme_allgemein.baujahr_heizung}
/>
</div>
</div>
<!-- Baujahr -->
<div class="">
<HelpLabel title="* Baujahr Gebäude">
Bitte geben Sie hier das Baujahr des Gebäudes ein. Sollte eine eine
grundlegende Sanierung von Dach, Fenster und Heizung stattgefunden
haben, dann berücksichtigen Sie das in dem Sie bei Sanierungsstatus
-saniert- angeben.
</HelpLabel>
<div>
<TagInput
name="baujahr_gebaeude"
type="number"
onlyUnique={true}
minChars={4}
onFocusIn={() => {
addNotification({
message: "Info",
subtext:
"Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrem Gebäude durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
dismissable: true,
uid: "GEBAEUDE_BAUJAHR",
timeout: 0,
type: "info",
});
}}
onFocusOut={() => {
deleteNotification("GEBAEUDE_BAUJAHR");
}}
className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)
? "linked"
: ""}
bind:tags={gebaeude_aufnahme_allgemein.baujahr_gebaeude}
/>
</div>
</div>
<!-- Anzahl der Wohnungen -->
<div class="">
<HelpLabel title="* Anzahl Wohnungen">
Bitte geben Sie hier die Anzahl der Wohnungen ein, die sich im
Gebäude befinden.
</HelpLabel>
<div>
<input
name="einheiten"
type="number"
required
autocomplete="off"
data-msg="Pflichtfeld"
bind:value={gebaeude_aufnahme_allgemein.einheiten}
maxlength="3"
/>
</div>
</div>
<!-- Sanierungsstatus -->
<div class="">
<HelpLabel title="* Sanierungsstatus">
Bitte geben Sie an ob das Gebäude energetisch saniert oder unsaniert
ist. Wenn das Dach mindestens 12 cm gedämmt und Heizung sowie
Fenster nicht älter als 30 Jahre sind, können Sie saniert auswählen.
</HelpLabel>
<div>
<select
name="saniert"
class=""
required
bind:value={gebaeude_aufnahme_allgemein.saniert}
>
<option disabled selected value={false}>Bitte auswählen</option>
<option value={true}>saniert</option>
<option value={false}>unsaniert</option>
</select>
</div>
</div>
</div>
</div>
</div>
<style lang="postcss">
input[type="radio"] {
@apply w-5 h-5 accent-secondary
}
.radio-inline {
@apply flex items-center;
}
</style>

184
src/components/Ausweis/Ausweisart_V01.svelte Normal file
View File

@@ -0,0 +1,184 @@
<script lang="ts">
import HelpLabel from "#components/HelpLabel.svelte";
import Label from "#components/Label.svelte";
import { auditHeizungGebaeudeBaujahr } from "../Verbrauchsausweis/audits/HeizungGebaeudeBaujahr";
import { addNotification, deleteNotification } from "@ibcornelsen/ui";
import TagInput from "../TagInput.svelte";
import type {
BedarfsausweisWohnen,
VerbrauchsausweisGewerbe,
} from "@ibcornelsen/database/client";
import { Enums } from "@ibcornelsen/database/client"
import { GebaeudeAufnahmeClient, GebaeudeClient, VerbrauchsausweisWohnenClient } from "./types";
export let gebaeude: GebaeudeClient;
export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
export let gebaeude_aufnahme_allgemein: GebaeudeAufnahmeClient;
</script>
<div class="w-full grid
grid-cols-bereich-A gap-x-4
xl:grid-cols-bereich-A-xl xl:gap-x-6
2xl:grid-cols-bereich-A-2xl 2xl:gap-x-6
">
<!-- Anlass für Energieausweis -->
<div class="">
<Label>* Anlass für den Energieausweis</Label>
<div class="grid gap-x-6 mb-8
grid-cols-[minmax(min-content,_130px)]
xs:grid-cols-[minmax(min-content,_130px)_minmax(min-content,_130px)]
sm:grid-cols-[minmax(min-content,_130px)_minmax(min-content,_130px)_minmax(min-content,_130px)]
xl:grid-cols-[1fr_1fr] xl:gap-x-6 xl:mb-0
2xl:grid-cols-[1fr_1fr_1fr]
">
{#each Object.entries(Enums.Ausstellgrund) as [name, ausstellgrund]}
<label class="radio-inline">
<input
name="ausstellgrund"
type="radio"
value={ausstellgrund}
bind:group={ausweis.ausstellgrund}
/>{name}</label
>
{/each}
</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
">
<!-- Baujahr Heizung -->
<div class="">
<HelpLabel title="* Baujahr Heizung">
Bitte geben Sie hier das Baujahr der Heizungsanlage ein. Sollten
unterschiedliche Baujahre vorliegen, dann geben Sie einen
Zeitbereich ein <br />z.B. 1994-2001.
</HelpLabel>
<div>
<TagInput
name="baujahr_heizung"
type="number"
onlyUnique={true}
minChars={4}
onFocusIn={() => {
addNotification({
message: "Info",
subtext:
"Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrer Heizung durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
dismissable: true,
uid: "HEIZUNG_BAUJAHR",
timeout: 0,
type: "info",
});
}}
onFocusOut={() => {
deleteNotification("HEIZUNG_BAUJAHR");
}}
className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)
? "linked"
: ""}
bind:tags={gebaeude_aufnahme_allgemein.baujahr_heizung}
/>
</div>
</div>
<!-- Baujahr -->
<div class="">
<HelpLabel title="* Baujahr Gebäude">
Bitte geben Sie hier das Baujahr des Gebäudes ein. Sollte eine eine
grundlegende Sanierung von Dach, Fenster und Heizung stattgefunden
haben, dann berücksichtigen Sie das in dem Sie bei Sanierungsstatus
-saniert- angeben.
</HelpLabel>
<div>
<TagInput
name="baujahr_gebaeude"
type="number"
onlyUnique={true}
minChars={4}
onFocusIn={() => {
addNotification({
message: "Info",
subtext:
"Wussten sie, dass sie mehrere Jahre angeben können in denen z.B. Renovierungen an ihrem Gebäude durchgeführt wurden. Drücken sie dafür einfach <kbd>Enter</kbd> oder <kbd>Space</kbd> nach jedem Jahr.",
dismissable: true,
uid: "GEBAEUDE_BAUJAHR",
timeout: 0,
type: "info",
});
}}
onFocusOut={() => {
deleteNotification("GEBAEUDE_BAUJAHR");
}}
className={auditHeizungGebaeudeBaujahr(gebaeude_aufnahme_allgemein)
? "linked"
: ""}
bind:tags={gebaeude_aufnahme_allgemein.baujahr_gebaeude}
/>
</div>
</div>
<!-- Anzahl der Wohnungen -->
<div class="">
<HelpLabel title="* Anzahl Wohnungen">
Bitte geben Sie hier die Anzahl der Wohnungen ein, die sich im
Gebäude befinden.
</HelpLabel>
<div>
<input
name="einheiten"
type="number"
required
autocomplete="off"
data-msg="Pflichtfeld"
bind:value={gebaeude_aufnahme_allgemein.einheiten}
maxlength="3"
/>
</div>
</div>
<!-- Sanierungsstatus -->
<div class="">
<HelpLabel title="* Sanierungsstatus">
Bitte geben Sie an ob das Gebäude energetisch saniert oder unsaniert
ist. Wenn das Dach mindestens 12 cm gedämmt und Heizung sowie
Fenster nicht älter als 30 Jahre sind, können Sie saniert auswählen.
</HelpLabel>
<div>
<select
name="saniert"
class=""
required
bind:value={gebaeude_aufnahme_allgemein.saniert}
>
<option disabled selected value={false}>Bitte auswählen</option>
<option value={true}>saniert</option>
<option value={false}>unsaniert</option>
</select>
</div>
</div>
</div>
</div>
<style lang="postcss">
input[type="radio"] {
@apply w-5 h-5 accent-secondary
}
.radio-inline {
@apply flex items-center;
}
</style>

227
src/components/Bedarfsausweis/BedarfsausweisContent2.svelte
View File

@@ -2,146 +2,129 @@
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 HelpLabel from "#components/HelpLabel.svelte";
import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
import Label from "#components/Label.svelte";
import HelpLabel_new from "#components/HelpLabel_new.svelte";
import BereichLabel from "#components/labels/BereichLabel.svelte";
import Ausweisart from "#components/Ausweis/Ausweisart.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";
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 ausweis: BedarfsausweisWohnen = {} as BedarfsausweisWohnen;
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 || [];
let daemmungsBreiten = [0, 0.02, 0.05, 0.08, 0.12, 0.16, 0.2, 0.3, 0.4];
async function spaeterWeitermachen() {
const result = await verbrauchsausweisWohnenSpeichern(ausweis, gebaeude, gebaeude_aufnahme_allgemein, images, user);
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
);
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() {
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;
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;
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;
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;
}
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;
}
async function ausweisAbschicken(e: SubmitEvent) {
if (e && e.preventDefault) e.preventDefault();
const result = await verbrauchsausweisWohnenSpeichern(ausweis, gebaeude, gebaeude_aufnahme_allgemein, images, user);
// Toggle classes for expanded and collapsed states
formContainer.classList.toggle('expanded');
section.classList.toggle('collapsed');
}
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>
<form action="" enctype="multipart/form-data">
<BereichLabel bereich="A">Eingabe der Gebäudeadresse -&nbsp;Angaben&nbsp;zu&nbsp;Wohnfläche, Keller&nbsp;und&nbsp;Dachgeschoss</BereichLabel>
<div class="grid grid-cols-3 gap-4 px-12 py-6 bg-gray-500/25">
@@ -175,6 +158,12 @@
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
</div>
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
<div class="absolute text-[12px] right-[45px] top-[3px]">Gebäudetyp *</div>
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Gebäudetyp">
<div class="bg-secondary py-[16px] rounded-e-md ring-1 ring-secondary"><HelpLabel_new >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum facilis harum doloribus.</HelpLabel_new></div>
</div>
</div>
<br>

3
src/components/design/sidebars/cards/card-login.svelte
View File

@@ -1,4 +1,5 @@
<script lang="ts">
import { loginClient } from "#lib/login";
import CrossCircled from "radix-svelte-icons/src/lib/icons/CrossCircled.svelte";
import { fade } from "svelte/transition";
@@ -30,6 +31,7 @@
class="my-1 rounded-md px-2 py-1 w-full"
type="text"
placeholder="nutzer@email.com"
autocomplete="off"
name="email"
bind:value={email}
on:focus={() => (errorHidden = true)}
@@ -40,6 +42,7 @@
type="password"
minlength="8"
placeholder="********"
autocomplete="off"
name="passwort"
bind:value={passwort}
on:focus={() => (errorHidden = true)}

8
src/components/design/sidebars/cards/card-navigation.svelte
View File

@@ -1,10 +1,10 @@
<script>
let innerWidth
function dropdown(){
const innerWidth = window.innerWidth;
console.log(innerWidth);
if(innerWidth<1024){
const check_element = this.lastChild;
@@ -12,8 +12,6 @@ if(innerWidth<1024){
const rotate_list = document.querySelectorAll(".dd-symbol-clone");
const rotate_element = this.childNodes[0].children[0];
console.log(rotate_element);
var first_check = check_element.classList.contains("show-dropdown-content");
const nodeList = document.querySelectorAll(".dropdown-content");
@@ -41,20 +39,16 @@ if(innerWidth<1024){
function hover(){
const innerWidth = window.innerWidth;
console.log(innerWidth);
if(innerWidth>1024){
const check_element = this.firstChild.lastChild;
console.log(check_element);
check_element.style.visibility = "visible";
}
}
function hoverout(){
const innerWidth = window.innerWidth;
console.log(innerWidth);
if(innerWidth>1024){
const check_element = this.firstChild.lastChild;
console.log(check_element);
check_element.style.visibility = "hidden";
}
}

16
src/components/BereichLabel.svelte → src/components/labels/BereichLabel.svelte
View File

@@ -1,18 +1,28 @@
<script lang="ts">
export let title: string = "";
export let bereich: string;
</script>
<div class="bereichs-label">
<label class="text-base-content" for={title}>
<div class="grid grid-cols-[max-content_1fr] items-center justify-items-start gap-2">
<div>
<div class="grid grid-cols-[max-content_max-content_50px] items-center justify-items-start gap-2">
<div class="formular-abschnitt1">{bereich}</div>
<div class="formular-abschnitt2"><slot></slot></div>
<!--<div class="justify-self-end"><img src="/images/icons/toggle-icon.svg" alt="toggle-icon" class="w-[25px] rotate-[90deg]"/></div>-->
</div>
</label>
</div>
</div>
<style lang="postcss">
.bereichs-label{ }

16
src/components/HelpLabel_new.svelte → src/components/labels/HelpLabel.svelte
View File

@@ -1,17 +1,19 @@
<script lang="ts">
export let title: string;
export let tooltip: string = "";
</script>
<div data-tooltip={tooltip} class="relative tooltip-opener cursor-help justify-self-center">
<img
src="/images/icons/info-mark.svg"
alt="info"
class="w-[10px] h-[18px]"
/>
<div data-tooltip={tooltip} class="relative tooltip-opener cursor-help">
<div class="w-full">
<img
src="/images/icons/info-mark.svg"
alt="info"
class="w-full"
/>
</div>
<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>

13
src/components/labels/InputLabel.svelte Normal file
View File

@@ -0,0 +1,13 @@
<script lang="ts">
export let title: string;
</script>
<div class="absolute border-x-[1px] border-t-[1px] border-black/25 bg-white/15 px-3 top-[-1.275rem] left-[0rem] text-[0.8rem] rounded-t-sm font-sans">{title}</div>
<style lang="postcss">
</style>

5
src/components/labels/test.svelte Normal file
View File

@@ -0,0 +1,5 @@
<script>
console.log('JOMKIPUR')
</script>

673
src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte
View File

@@ -1,34 +1,34 @@
<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";
// import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
// import Progressbar from "#components/Ausweis/Progressbar.svelte";
import Hilfe from "#components/Ausweis/Hilfe.svelte";
// import HelpLabel from "#labels/HelpLabel.svelte";
// import Inputlabel from "#labels/InputLabel.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/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...
@@ -106,6 +106,7 @@
gebaeude_aufnahme_allgemein.dachgeschoss_gedaemmt = true;
}
}
</script>
<Overlay bind:hidden={speichernOverlayHidden}>
@@ -120,617 +121,47 @@
</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>
<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
/>
<Ausweisart
bind:gebaeude
bind:gebaeude_aufnahme_allgemein
bind:ausweis
client:load
/>
</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}
<style lang="scss">
{#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>

736
src/modules/Ausweise/VerbrauchsausweisWohnenModule_V01.svelte Normal file
View File

@@ -0,0 +1,736 @@
<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/labels/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>

26
src/style/formular.css
View File

@@ -1,21 +1,15 @@
#formular-box{@apply bg-formular-box;}
.formular-boxen{@apply w-full ring-2 ring-formular-rahmen py-4 px-0 sm:px-2 md:px-4 rounded-lg}
#formular-box{@apply bg-formular-box;}
.formular-abschnitt1{@apply text-[1.25rem] py-[1px] px-[8px] ring-2 ring-formular-rahmen rounded-md font-bold;}
.formular-abschnitt1{@apply text-[1.25rem] py-[1px] px-[10px] text-secondary/80 bg-black/15 ring-2 ring-black/30 rounded-sm font-bold;}
.formular-abschnitt2{@apply text-[1.25rem] pl-1;}
.bereichs-label{@apply px-4 sm:px-0 mt-6 mb-3}
.bereich-box {@apply w-full ring-0 ring-formular-rahmen py-4 px-4
border-y-2 border-formular-rahmen
sm:ring-2 sm:px-2 sm:rounded-lg sm:border-none
md:px-4
;
background:linear-gradient(
135deg,
rgba(252, 234, 187, 1) 0%,
rgba(253, 235, 189, 1) 52%,
rgba(251, 223, 147, 1) 100%);
.bereich-box {@apply w-full bg-gray-500/15 ring-1 rounded-sm ring-gray-500/35 pt-6 pb-8 px-4;
/*background: linear-gradient(
135deg,
@@ -26,14 +20,14 @@
); */
}
.input-standard{@apply w-full grid grid-cols-[1fr_25px] items-center relative mt-2}
.help-label{@apply rounded-e-sm ring-1 ring-black/15}
/*
:global(input[type="number"]),
:global(input[type="text"]) {
@apply input input-bordered py-1.5 px-2 h-auto;
}
:global(input[type="number"]:disabled) {
@apply bg-gray-200 border border-gray-300;

2
src/style/global.css
View File

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

1
tsconfig.json
View File

@@ -37,6 +37,7 @@
"#sidebarRight/*": ["./src/components/design/sidebars/right/*"],
"#ausweise/*": ["./src/pages/energieausweis-erstellen/*"],
"#labels/*": ["./src/components/labels/*"]
},
"types": ["cypress", "cypress-file-upload", "bun-types", "svelte"]
}