Merge remote-tracking branch 'origin/UMBE' into UMBE
This commit is contained in:
Moritz Utcke
@@ -35,5 +35,8 @@ export default defineConfig({
|
|||||||
}),
|
}),
|
||||||
server: {
|
server: {
|
||||||
port: 3000
|
port: 3000
|
||||||
|
},
|
||||||
|
devToolbar: {
|
||||||
|
enabled: false
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -45,6 +45,7 @@
|
|||||||
"i18next-http-backend": "^2.6.2",
|
"i18next-http-backend": "^2.6.2",
|
||||||
"js-cookie": "^3.0.5",
|
"js-cookie": "^3.0.5",
|
||||||
"js-interpolate": "^1.0.1",
|
"js-interpolate": "^1.0.1",
|
||||||
|
"jsonwebtoken": "^9.0.2",
|
||||||
"katex": "^0.16.11",
|
"katex": "^0.16.11",
|
||||||
"moment": "^2.30.1",
|
"moment": "^2.30.1",
|
||||||
"moment-timezone": "^0.5.46",
|
"moment-timezone": "^0.5.46",
|
||||||
|
|||||||
@@ -11,17 +11,21 @@
|
|||||||
.st1 {
|
.st1 {
|
||||||
fill: #445096;
|
fill: #445096;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.st2 {
|
||||||
|
fill: #c6c6c6;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</defs>
|
</defs>
|
||||||
<path class="st0" d="M387,57.9c0,3.8-1,6.9-3.1,9.2-2.1,2.3-4.9,3.4-8.5,3.4h-16c-3.8,0-6.8-1.3-8.8-3.9-1.8-2.2-2.7-5-2.7-8.5V21.2c0-3.6,1-6.6,3-8.9,2-2.3,4.8-3.5,8.3-3.5h16.1c3.7,0,6.6,1.2,8.6,3.5,2,2.3,3,5.4,3,9.2l-10.9,2.8c0-3-1.5-4.5-4.6-4.5h-8.5c-2.7,0-4.1,1.3-4.1,3.9v32.1c0,2.5,1.4,3.7,4.1,3.7h9c2.8,0,4.1-1.5,4.1-4.4l10.9,2.7Z"/>
|
<path class="st0" d="M387,57.9c0,3.8-1,6.9-3.1,9.2-2.1,2.3-4.9,3.4-8.5,3.4h-16c-3.8,0-6.8-1.3-8.8-3.9-1.8-2.2-2.7-5-2.7-8.5V21.2c0-3.6,1-6.6,3-8.9,2-2.3,4.8-3.5,8.3-3.5h16.1c3.7,0,6.6,1.2,8.6,3.5s3,5.4,3,9.2l-10.9,2.8c0-3-1.5-4.5-4.6-4.5h-8.5c-2.7,0-4.1,1.3-4.1,3.9v32.1c0,2.5,1.4,3.7,4.1,3.7h9c2.8,0,4.1-1.5,4.1-4.4l10.9,2.7h.1Z"/>
|
||||||
<g>
|
<g>
|
||||||
<path class="st1" d="M17.6,144.6H3.2V63.3h14.4v81.2Z"/>
|
<path class="st1" d="M17.6,144.6H3.2V63.3h14.4v81.2h0Z"/>
|
||||||
<path class="st1" d="M84.3,128c0,4.8-1.3,8.7-3.8,11.7-2.7,3.1-6.4,4.7-11.1,4.7h-36.5v-14.4h3.6v-52.4h-3.6v-14.4h36.5c4.7,0,8.4,1.6,11.1,4.7,2.5,3,3.8,6.9,3.8,11.7v11c0,6-1.8,10.3-5.4,13,3.6,3,5.4,7.4,5.4,13.2v11ZM70,92v-9.3c0-3.2-1.7-4.8-5.1-4.8h-13.9v19h14.1c3.3,0,4.9-1.6,4.9-4.8ZM70,125.4v-9.2c0-1.4-.5-2.6-1.4-3.5s-2.1-1.4-3.5-1.4h-14.1v19h13.9c3.4,0,5.1-1.6,5.1-4.8Z"/>
|
<path class="st1" d="M84.3,128c0,4.8-1.3,8.7-3.8,11.7-2.7,3.1-6.4,4.7-11.1,4.7h-36.5v-14.4h3.6v-52.4h-3.6v-14.4h36.5c4.7,0,8.4,1.6,11.1,4.7,2.5,3,3.8,6.9,3.8,11.7v11c0,6-1.8,10.3-5.4,13,3.6,3,5.4,7.4,5.4,13.2v11.2ZM70,92v-9.3c0-3.2-1.7-4.8-5.1-4.8h-13.9v19h14.1c3.3,0,4.9-1.6,4.9-4.8h0ZM70,125.4v-9.2c0-1.4-.5-2.6-1.4-3.5s-2.1-1.4-3.5-1.4h-14.1v19h13.9c3.4,0,5.1-1.6,5.1-4.8h0Z"/>
|
||||||
<path class="st1" d="M17.6,77.7v-14.4h3.7v14.4h-3.7Z"/>
|
<path class="st1" d="M17.6,77.7v-14.4h3.7v14.4h-3.7Z"/>
|
||||||
<path class="st1" d="M-.5,77.7v-14.4h3.7v14.4H-.5Z"/>
|
<path class="st1" d="M-.5,77.7v-14.4h3.7v14.4H-.5Z"/>
|
||||||
<path class="st1" d="M17.6,144.6v-14.4h3.7v14.4h-3.7Z"/>
|
<path class="st1" d="M17.6,144.6v-14.4h3.7v14.4h-3.7Z"/>
|
||||||
<path class="st1" d="M-.5,144.6v-14.4h3.7v14.4H-.5Z"/>
|
<path class="st1" d="M-.5,144.6v-14.4h3.7v14.4H-.5Z"/>
|
||||||
<path class="st1" d="M124.5,130.2h-11.8c-3.6,0-5.3-1.6-5.3-4.9v-43.1c0-3.3,1.8-4.9,5.3-4.9h11.8c3.6,0,5.4,1.9,5.4,5.7h13.1c0-7.4,0-12.7-2.7-15.7-2.7-3-6.4-4.5-11.1-4.5h-21.1c-5.1,0-8.9,1.7-11.6,5.1-2.3,2.9-3.5,6.6-3.5,11.2v49.1c0,4.6,1.2,8.3,3.5,11.2,2.7,3.4,6.5,5.1,11.6,5.1h21.1c4.7,0,8.4-1.5,11.1-4.5,2.7-3,2.7-8.3,2.7-15.7h-13.1c0,3.8-1.8,5.7-5.4,5.7Z"/>
|
<path class="st2" d="M124.5,130.2h-11.8c-3.6,0-5.3-1.6-5.3-4.9v-43.1c0-3.3,1.8-4.9,5.3-4.9h11.8c3.6,0,5.4,1.9,5.4,5.7h13.1c0-7.4,0-12.7-2.7-15.7s-6.4-4.5-11.1-4.5h-21.1c-5.1,0-8.9,1.7-11.6,5.1-2.3,2.9-3.5,6.6-3.5,11.2v49.1c0,4.6,1.2,8.3,3.5,11.2,2.7,3.4,6.5,5.1,11.6,5.1h21.1c4.7,0,8.4-1.5,11.1-4.5,2.7-3,2.7-8.3,2.7-15.7h-13.1c0,3.8-1.8,5.7-5.4,5.7v.2Z"/>
|
||||||
<polygon class="st1" points="90.4 14.4 71.3 .8 52.2 14.4 -.5 52.4 18.7 52.4 71.3 14.4 123.9 52.4 143 52.4 90.4 14.4"/>
|
<polygon class="st1" points="90.4 14.4 71.3 .8 52.2 14.4 -.5 52.4 18.7 52.4 71.3 14.4 123.9 52.4 143 52.4 90.4 14.4"/>
|
||||||
<path class="st1" d="M-.3,164.1v-9.3h143.4v9.3H-.3Z"/>
|
<path class="st1" d="M-.3,164.1v-9.3h143.4v9.3H-.3Z"/>
|
||||||
</g>
|
</g>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 2.0 KiB |
6607
public/images/icons/info-mark.ai
Normal file
6607
public/images/icons/info-mark.ai
Normal file
File diff suppressed because one or more lines are too long
49
public/images/icons/info-mark.svg
Normal file
49
public/images/icons/info-mark.svg
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 25 38">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.cls-1 {
|
||||||
|
fill: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cls-2 {
|
||||||
|
fill: #c6c6c6;
|
||||||
|
opacity: .7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cls-2, .cls-3 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cls-4 {
|
||||||
|
fill: #616160;
|
||||||
|
opacity: .2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cls-5 {
|
||||||
|
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_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>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
16
public/images/icons/toggle-icon.svg
Normal file
16
public/images/icons/toggle-icon.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 412 B |
@@ -1,5 +1,11 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import HelpLabel from "#components/HelpLabel.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 { auditHeizungGebaeudeBaujahr } from "../Verbrauchsausweis/audits/HeizungGebaeudeBaujahr";
|
||||||
import { addNotification, deleteNotification } from "@ibcornelsen/ui";
|
import { addNotification, deleteNotification } from "@ibcornelsen/ui";
|
||||||
import TagInput from "../TagInput.svelte";
|
import TagInput from "../TagInput.svelte";
|
||||||
@@ -16,145 +22,213 @@
|
|||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="GRB">
|
|
||||||
<!-- Anlass für Energieausweis -->
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<span>Anlass für Energieausweis * </span>
|
|
||||||
<div class="grid grid-cols-2 gap-x-2 items-center lg:grid-cols-3">
|
|
||||||
{#each Object.entries(Enums.Ausstellgrund) as [name, ausstellgrund]}
|
|
||||||
<label class="radio-inline">
|
|
||||||
<input
|
|
||||||
name="ausstellgrund"
|
|
||||||
type="radio"
|
|
||||||
class="radio radio-secondary"
|
|
||||||
value={ausstellgrund}
|
|
||||||
bind:group={ausweis.ausstellgrund}
|
|
||||||
/>{name}</label
|
|
||||||
>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Baujahr Heizung -->
|
|
||||||
<div class="form-group col-md-2">
|
|
||||||
<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 -->
|
<BereichLabel bereich="A">Prüfung der Ausweisart</BereichLabel>
|
||||||
<div class="form-group col-md-2">
|
|
||||||
<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="form-group col-md-2">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- Dachgeschoss -->
|
<div class="bereich-box grid
|
||||||
<div class="form-group col-md-2">
|
grid-cols-1 gap-x-4 gap-y-8
|
||||||
<HelpLabel title="Sanierungsstatus *">
|
|
||||||
Bitte geben Sie an ob das Gebäude energetisch saniert oder unsaniert
|
sm:grid-cols-2 sm:gap-x-4 sm:gap-y-8
|
||||||
ist. Wenn das Dach mindestens 12 cm gedämmt und Heizung sowie
|
xl:grid-cols-3 xl:gap-x-4 xl:gap-y-8
|
||||||
Fenster nicht älter als 30 Jahre sind, können Sie saniert auswählen.
|
">
|
||||||
</HelpLabel>
|
|
||||||
<div>
|
<!-- Anlass für Energieausweis -->
|
||||||
<select
|
|
||||||
name="saniert"
|
<div class="input-standard order-1 md:order-1 xl:order-1">
|
||||||
class=""
|
<Inputlabel title="Anlass *"></Inputlabel>
|
||||||
required
|
|
||||||
bind:value={gebaeude_aufnahme_allgemein.saniert}
|
<select id="ausstellgrund"
|
||||||
>
|
class="rounded-e-none"
|
||||||
<option disabled selected value={false}>Bitte auswählen</option>
|
name="ausstellgrund"
|
||||||
<option value={true}>saniert</option>
|
placeholder="Anlass"
|
||||||
<option value={false}>unsaniert</option>
|
required>
|
||||||
</select>
|
|
||||||
</div>
|
{#each Object.entries(Enums.Ausstellgrund) as [name, ausstellgrund]}
|
||||||
</div>
|
<option value={ausstellgrund}>{name}</option>
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<div class="help-label">
|
||||||
|
<HelpLabel>Bitte wählen Sie den Anlass.</HelpLabel>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
|
||||||
|
<!-- 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>
|
||||||
|
|
||||||
|
|
||||||
input[type="radio"] {
|
<!-- Sanierungsstatus -->
|
||||||
@apply w-5 h-5 rounded-full;
|
|
||||||
}
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.radio-inline {
|
|
||||||
@apply flex items-center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
184
src/components/Ausweis/Ausweisart_V01.svelte
Normal file
184
src/components/Ausweis/Ausweisart_V01.svelte
Normal 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>
|
||||||
@@ -3,7 +3,7 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<button type="button" class="button" on:click={() => (showHelp = !showHelp)}
|
<button class="button" type="button" on:click={() => (showHelp = !showHelp)}
|
||||||
>Hilfe anfordern</button
|
>Hilfe anfordern</button
|
||||||
>
|
>
|
||||||
|
|
||||||
|
|||||||
@@ -64,25 +64,158 @@
|
|||||||
$: abweichung = auditVerbrauchAbweichung(ausweis, gebaeude);
|
$: abweichung = auditVerbrauchAbweichung(ausweis, gebaeude);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="w-full flex flex-col gap-4">
|
|
||||||
<div class="w-full grid grid-cols-[1fr,1fr,1fr,1fr,1fr] gap-6">
|
|
||||||
<div>
|
<div>
|
||||||
|
<div class="grid grid-cols-[40px_1fr] mb-4 xl:mb-0">
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
class="checkbox w-[20px] h-[20px] self-center -mt-1"
|
||||||
|
name="zusaetzliche_heizquelle"
|
||||||
|
bind:checked={ausweis.zusaetzliche_heizquelle}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="w-[150px]">
|
||||||
<HelpLabel title="zusätzliche Heizquelle">
|
<HelpLabel title="zusätzliche Heizquelle">
|
||||||
Wenn eine zusätzliche Heizquelle vorhanden geben Sie hier drei
|
Wenn eine zusätzliche Heizquelle vorhanden geben Sie hier drei
|
||||||
zusammenhängende Verbrauchsjahre ein. Es sollen die gleichen
|
zusammenhängende Verbrauchsjahre ein. Es sollen die gleichen
|
||||||
Verbrauchszeiträume wie bei der primären Heizung verwendet
|
Verbrauchszeiträume wie bei der primären Heizung verwendet
|
||||||
werden.
|
werden.
|
||||||
</HelpLabel>
|
</HelpLabel>
|
||||||
<input
|
</div>
|
||||||
type="checkbox"
|
|
||||||
class="checkbox"
|
</div>
|
||||||
name="zusaetzliche_heizquelle"
|
<input class="hidden xl:invisible xl:block"/>
|
||||||
bind:checked={ausweis.zusaetzliche_heizquelle}
|
<div class="grid grid-cols-[40px_120px] gap-x-1 items-center">
|
||||||
/>
|
<div></div>
|
||||||
|
<span>Zeitraum:</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div class="grid grid-cols-[30px_1fr_1fr_30px_1fr] gap-x-2 items-center justify-items-center">
|
||||||
<HelpLabel title="Brennstoff *">
|
|
||||||
|
<span class="">von</span>
|
||||||
|
|
||||||
|
<select
|
||||||
|
name="energieverbrauch_zeitraum_monat"
|
||||||
|
class="rounded-tr-none rounded-br-none w-full m-0"
|
||||||
|
bind:value={month}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option>Monat</option>
|
||||||
|
{#if year !== null}
|
||||||
|
{#each availableDates.filter(date => date.year == year) as date}
|
||||||
|
<option value={date.month}>{monthNames[date.month]}</option>
|
||||||
|
{/each}
|
||||||
|
{:else}
|
||||||
|
{#each Array.from(availableDates.reduce((a,c) => {
|
||||||
|
a.add(c.month);
|
||||||
|
return a;
|
||||||
|
}, new Set())) as month}
|
||||||
|
<option value={month}>{monthNames[month]}</option>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select
|
||||||
|
name="energieverbrauch_zeitraum_jahr"
|
||||||
|
class="rounded-tl-none rounded-bl-none w-full m-0"
|
||||||
|
bind:value={year}
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option>Jahr</option>
|
||||||
|
{#each Array.from(availableDates.reduce((a,c) => {
|
||||||
|
a.add(c.year);
|
||||||
|
return a;
|
||||||
|
}, new Set())) as year}
|
||||||
|
<option value={year}>{year}</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
|
||||||
|
|
||||||
|
<span class="">bis</span>
|
||||||
|
|
||||||
|
<input
|
||||||
|
|
||||||
|
value={moment(ausweis.startdatum)
|
||||||
|
.add("1", "year")
|
||||||
|
.format("MM.Y")}
|
||||||
|
readonly
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="invisible">
|
||||||
|
<span>leer</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-[1fr_30px_1fr_30px_1fr] gap-x-2 items-center justify-items-center">
|
||||||
|
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
<span class="justify-self-center">von</span>
|
||||||
|
|
||||||
|
<input
|
||||||
|
class="klima text-right"
|
||||||
|
value={moment(ausweis.startdatum)
|
||||||
|
.add("1", "year")
|
||||||
|
.format("MM.Y")}
|
||||||
|
readonly
|
||||||
|
/>
|
||||||
|
|
||||||
|
<span class="justify-self-center">bis</span>
|
||||||
|
|
||||||
|
<input
|
||||||
|
value={moment(ausweis.startdatum)
|
||||||
|
.add("2", "years")
|
||||||
|
.format("MM.Y")}
|
||||||
|
readonly
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="invisible">
|
||||||
|
<span>leer</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-[1fr_30px_1fr_30px_1fr] gap-x-2 items-center justify-items-center">
|
||||||
|
|
||||||
|
<div></div>
|
||||||
|
|
||||||
|
<span class="justify-self-center">von</span>
|
||||||
|
|
||||||
|
<input
|
||||||
|
class="klima text-right"
|
||||||
|
value={moment(ausweis.startdatum)
|
||||||
|
.add("2", "years")
|
||||||
|
.format("MM.Y")}
|
||||||
|
readonly
|
||||||
|
/>
|
||||||
|
|
||||||
|
<span class="justify-self-center">bis</span>
|
||||||
|
|
||||||
|
<input
|
||||||
|
value={moment(ausweis.startdatum)
|
||||||
|
.add("3", "years")
|
||||||
|
.format("MM.Y")}
|
||||||
|
readonly
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 gap-x-6">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-[3fr_2fr] gap-x-2">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<HelpLabel title="* Brennstoff">
|
||||||
<b>Heizöl:</b> Flüssiger Brennstoff; Heizöl wird aus schwer
|
<b>Heizöl:</b> Flüssiger Brennstoff; Heizöl wird aus schwer
|
||||||
entflammbaren Anteilen des Erdöls hergestellt.<br /><br />
|
entflammbaren Anteilen des Erdöls hergestellt.<br /><br />
|
||||||
<b>Erdgas H, Erdgas L:</b> Brennbares Naturgas das in
|
<b>Erdgas H, Erdgas L:</b> Brennbares Naturgas das in
|
||||||
@@ -109,39 +242,92 @@
|
|||||||
<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br /><br />
|
<b>Koks:</b> Stark kohlenstoffhaltiger Brennstoff.<br /><br />
|
||||||
</HelpLabel>
|
</HelpLabel>
|
||||||
<div>
|
<div>
|
||||||
<select name="brennstoff_1" required bind:value={gebaeude_aufnahme_allgemein.brennstoff_1}>
|
<select
|
||||||
|
class="rounded-e-none"
|
||||||
|
name="brennstoff_1"
|
||||||
|
required bind:value={gebaeude_aufnahme_allgemein.brennstoff_1}
|
||||||
|
>
|
||||||
|
|
||||||
<option disabled>Bitte auswählen</option>
|
<option disabled>Bitte auswählen</option>
|
||||||
{#each Object.keys(fuelMap) as fuel}
|
{#each Object.keys(fuelMap) as fuel}
|
||||||
<option value={fuel}>{fuel}</option>
|
<option value={fuel}>{fuel}</option>
|
||||||
{/each}
|
{/each}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<HelpLabel title="Einheit *">
|
<HelpLabel title="* Einheit">
|
||||||
Bitte geben Sie die Einheit ein. Erdgas wird meist auf der
|
Bitte geben Sie die Einheit ein. Erdgas wird meist auf der
|
||||||
Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in Litern
|
Abrechnung in kWh ausgewiesen. Heizöl liegt meistens in Litern
|
||||||
vor. Pellets oder Brennholz in SRm (Schüttraummetern).
|
vor. Pellets oder Brennholz in SRm (Schüttraummetern).
|
||||||
</HelpLabel>
|
</HelpLabel>
|
||||||
<div>
|
|
||||||
<select
|
<select
|
||||||
|
class="rounded-s-none"
|
||||||
name="einheit_1"
|
name="einheit_1"
|
||||||
required
|
required
|
||||||
bind:value={ausweis.einheit_1}
|
bind:value={ausweis.einheit_1}
|
||||||
>
|
>
|
||||||
<option disabled>Bitte auswählen</option>
|
<option disabled>Bitte auswählen</option>
|
||||||
{#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_1) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_1] : []) as unit}
|
{#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_1) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_1] : []) as unit}
|
||||||
<option value={unit}>{unit}</option>
|
<option value={unit}>{unit}</option>
|
||||||
{/each}
|
{/each}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
</div>
|
||||||
<Label>Brennstoff *</Label>
|
|
||||||
<div>
|
|
||||||
|
<div>
|
||||||
|
|
||||||
|
|
||||||
|
<span>* Verbrauch</span>
|
||||||
|
<input
|
||||||
|
name="verbrauch_1"
|
||||||
|
type="number"
|
||||||
|
class:linked={abweichung.indexOf(1) > -1}
|
||||||
|
bind:value={ausweis.verbrauch_1}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
|
||||||
|
<span>* Verbrauch</span>
|
||||||
|
<input
|
||||||
|
name="verbrauch_2"
|
||||||
|
type="number"
|
||||||
|
class:linked={abweichung.indexOf(2) > -1}
|
||||||
|
bind:value={ausweis.verbrauch_2}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
<span>* Verbrauch</span>
|
||||||
|
<input
|
||||||
|
name="verbrauch_3"
|
||||||
|
type="number"
|
||||||
|
class:linked={abweichung.indexOf(3) > -1}
|
||||||
|
bind:value={ausweis.verbrauch_3}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-[3fr_2fr] gap-x-2">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<Label>* Brennstoff</Label>
|
||||||
|
|
||||||
<select
|
<select
|
||||||
|
class="rounded-e-none"
|
||||||
name="brennstoff_2"
|
name="brennstoff_2"
|
||||||
bind:value={gebaeude_aufnahme_allgemein.brennstoff_2}
|
bind:value={gebaeude_aufnahme_allgemein.brennstoff_2}
|
||||||
disabled={!ausweis.zusaetzliche_heizquelle}
|
disabled={!ausweis.zusaetzliche_heizquelle}
|
||||||
@@ -152,13 +338,14 @@
|
|||||||
<option value={fuel}>{fuel}</option>
|
<option value={fuel}>{fuel}</option>
|
||||||
{/each}
|
{/each}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<Label>* Einheit</Label>
|
||||||
|
|
||||||
<div>
|
|
||||||
<Label>Einheit *</Label>
|
|
||||||
<div>
|
|
||||||
<select
|
<select
|
||||||
|
class="rounded-s-none"
|
||||||
name="einheit_2"
|
name="einheit_2"
|
||||||
disabled={!ausweis.zusaetzliche_heizquelle}
|
disabled={!ausweis.zusaetzliche_heizquelle}
|
||||||
bind:value={ausweis.einheit_2}
|
bind:value={ausweis.einheit_2}
|
||||||
@@ -168,138 +355,14 @@
|
|||||||
{#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_2) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_2] : []) as unit}
|
{#each (fuelMap.hasOwnProperty(gebaeude_aufnahme_allgemein.brennstoff_2) ? fuelMap[gebaeude_aufnahme_allgemein.brennstoff_2] : []) as unit}
|
||||||
<option value={unit}>{unit}</option>
|
<option value={unit}>{unit}</option>
|
||||||
{/each}
|
{/each}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-[2fr_1fr_2fr_2fr] gap-6">
|
</div>
|
||||||
<div class="flex flex-col gap-2">
|
|
||||||
<div class="column">
|
|
||||||
<span>von</span>
|
<div>
|
||||||
<select
|
|
||||||
name="energieverbrauch_zeitraum_monat"
|
|
||||||
class="rounded-tr-none rounded-br-none w-full m-0"
|
|
||||||
bind:value={month}
|
|
||||||
required
|
|
||||||
>
|
|
||||||
<option>auswählen</option>
|
|
||||||
{#if year !== null}
|
|
||||||
{#each availableDates.filter(date => date.year == year) as date}
|
|
||||||
<option value={date.month}>{monthNames[date.month]}</option>
|
|
||||||
{/each}
|
|
||||||
{:else}
|
|
||||||
{#each Array.from(availableDates.reduce((a,c) => {
|
|
||||||
a.add(c.month);
|
|
||||||
return a;
|
|
||||||
}, new Set())) as month}
|
|
||||||
<option value={month}>{monthNames[month]}</option>
|
|
||||||
{/each}
|
|
||||||
{/if}
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<select
|
|
||||||
name="energieverbrauch_zeitraum_jahr"
|
|
||||||
class="rounded-tl-none rounded-bl-none w-full m-0"
|
|
||||||
bind:value={year}
|
|
||||||
required
|
|
||||||
>
|
|
||||||
<option>auswählen</option>
|
|
||||||
{#each Array.from(availableDates.reduce((a,c) => {
|
|
||||||
a.add(c.year);
|
|
||||||
return a;
|
|
||||||
}, new Set())) as year}
|
|
||||||
<option value={year}>{year}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="column">
|
|
||||||
<span>von</span>
|
|
||||||
<input
|
|
||||||
class="klima"
|
|
||||||
value={moment(ausweis.startdatum)
|
|
||||||
.add("1", "year")
|
|
||||||
.format("MM.Y")}
|
|
||||||
readonly
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="column">
|
|
||||||
<span>von</span>
|
|
||||||
<input
|
|
||||||
class="klima"
|
|
||||||
value={moment(ausweis.startdatum)
|
|
||||||
.add("2", "years")
|
|
||||||
.format("MM.Y")}
|
|
||||||
readonly
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col gap-2">
|
|
||||||
<div class="column">
|
|
||||||
<span>bis</span>
|
|
||||||
<input
|
|
||||||
|
|
||||||
value={moment(ausweis.startdatum)
|
|
||||||
.add("1", "year")
|
|
||||||
.format("MM.Y")}
|
|
||||||
readonly
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="column">
|
|
||||||
<span>bis</span>
|
|
||||||
<input
|
|
||||||
|
|
||||||
value={moment(ausweis.startdatum)
|
|
||||||
.add("2", "years")
|
|
||||||
.format("MM.Y")}
|
|
||||||
readonly
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="column">
|
|
||||||
<span>bis</span>
|
|
||||||
<input
|
|
||||||
|
|
||||||
value={moment(ausweis.startdatum)
|
|
||||||
.add("3", "years")
|
|
||||||
.format("MM.Y")}
|
|
||||||
readonly
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col gap-2">
|
|
||||||
<div class="column">
|
|
||||||
<span>Verbrauch *</span>
|
|
||||||
<input
|
|
||||||
name="verbrauch_1"
|
|
||||||
type="number"
|
|
||||||
class:linked={abweichung.indexOf(1) > -1}
|
|
||||||
bind:value={ausweis.verbrauch_1}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="column">
|
|
||||||
<span>Verbrauch *</span>
|
|
||||||
<input
|
|
||||||
name="verbrauch_2"
|
|
||||||
type="number"
|
|
||||||
class:linked={abweichung.indexOf(2) > -1}
|
|
||||||
bind:value={ausweis.verbrauch_2}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="column">
|
|
||||||
<span>Verbrauch *</span>
|
|
||||||
<input
|
|
||||||
name="verbrauch_3"
|
|
||||||
type="number"
|
|
||||||
class:linked={abweichung.indexOf(3) > -1}
|
|
||||||
bind:value={ausweis.verbrauch_3}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col gap-2">
|
|
||||||
<div class="column">
|
|
||||||
<span>Verbrauch</span>
|
<span>Verbrauch</span>
|
||||||
<input
|
<input
|
||||||
name="verbrauch_4"
|
name="verbrauch_4"
|
||||||
@@ -308,8 +371,7 @@
|
|||||||
class:linked={abweichung.indexOf(4) > -1}
|
class:linked={abweichung.indexOf(4) > -1}
|
||||||
disabled={!ausweis.zusaetzliche_heizquelle}
|
disabled={!ausweis.zusaetzliche_heizquelle}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
<div class="column">
|
|
||||||
<span>Verbrauch</span>
|
<span>Verbrauch</span>
|
||||||
<input
|
<input
|
||||||
name="verbrauch_5"
|
name="verbrauch_5"
|
||||||
@@ -318,8 +380,7 @@
|
|||||||
class:linked={abweichung.indexOf(5) > -1}
|
class:linked={abweichung.indexOf(5) > -1}
|
||||||
disabled={!ausweis.zusaetzliche_heizquelle}
|
disabled={!ausweis.zusaetzliche_heizquelle}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
<div class="column">
|
|
||||||
<span>Verbrauch</span>
|
<span>Verbrauch</span>
|
||||||
<input
|
<input
|
||||||
name="verbrauch_6"
|
name="verbrauch_6"
|
||||||
@@ -328,13 +389,18 @@
|
|||||||
class:linked={abweichung.indexOf(6) > -1}
|
class:linked={abweichung.indexOf(6) > -1}
|
||||||
disabled={!ausweis.zusaetzliche_heizquelle}
|
disabled={!ausweis.zusaetzliche_heizquelle}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
</div>
|
||||||
.column {
|
|
||||||
@apply flex flex-row items-center gap-4;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
<style lang="postcss">
|
||||||
|
|
||||||
|
input[type="checkbox"] {@apply accent-secondary}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
423
src/components/Bedarfsausweis/BedarfsausweisContent1.svelte
Normal file
423
src/components/Bedarfsausweis/BedarfsausweisContent1.svelte
Normal file
@@ -0,0 +1,423 @@
|
|||||||
|
<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 from "#components/HelpLabel.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>
|
||||||
|
|
||||||
|
<div class="mt-8 m-auto w-[95%] relative">
|
||||||
|
|
||||||
|
<div class="flex flex-row gap-8 items-center mb-8">
|
||||||
|
<div class="flex flex-col w-full">
|
||||||
|
<h1>Bedarfsausweis erstellen - 75€</h1>
|
||||||
|
<Progressbar progress={0} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<PerformanceScore {ausweis} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form action="FORM/transfer/VA_1to2" enctype="multipart/form-data">
|
||||||
|
|
||||||
|
<div class="form-section" onclick="toggleSection(this)">
|
||||||
|
<label id="headlinep" class="section-title">A - Prüfung der Ausweisart</label>
|
||||||
|
<span class="toggle-icon">▶</span>
|
||||||
|
</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">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- Baujahr Heizung -->
|
||||||
|
<div class="form-group">
|
||||||
|
<input id="baujahr_anlage" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Baujahr Heizung *" class="form-input">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Baujahr Gebäude -->
|
||||||
|
<div class="form-group">
|
||||||
|
<input id="baujahr_gebaeude" name="baujahr_gebaeude" type="text" maxlength="20" required autocomplete="off" placeholder="Baujahr Gebäude *" class="form-input">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Anzahl der Wohnungen -->
|
||||||
|
<div class="form-group">
|
||||||
|
<input id="anzahl_einheiten" name="anzahl_einheiten" type="text" maxlength="3" required autocomplete="off" placeholder="Anzahl Wohnungen *" class="form-input">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sanierungsstatus -->
|
||||||
|
<div class="form-group">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-section" onclick="toggleSection(this)">
|
||||||
|
<label id="headlinep" class="section-title">B - Eingabe der Gebäudeadresse</label>
|
||||||
|
<span class="toggle-icon">▶</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Collapsible Container -->
|
||||||
|
<div class="form-container">
|
||||||
|
<div class="form-grid">
|
||||||
|
<!-- Straße und Hausnummer -->
|
||||||
|
<div class="form-group">
|
||||||
|
<input
|
||||||
|
name="objekt_strasse"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
placeholder="Straße, Hausnummer *"
|
||||||
|
bind:value="{ausweis.objekt_strasse}"
|
||||||
|
class="form-input"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- PLZ und Ort -->
|
||||||
|
<div class="form-group">
|
||||||
|
<input
|
||||||
|
name="objekt_plz"
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
placeholder="PLZ *"
|
||||||
|
bind:value="{ausweis.objekt_plz}"
|
||||||
|
class="form-input"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Ort -->
|
||||||
|
<div class="form-group">
|
||||||
|
<input
|
||||||
|
name="objekt_ort"
|
||||||
|
type="text"
|
||||||
|
placeholder="Ort *"
|
||||||
|
bind:value="{ausweis.objekt_ort}"
|
||||||
|
class="form-input"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Wohnfläche -->
|
||||||
|
<div class="form-group">
|
||||||
|
<input
|
||||||
|
name="wohnflaeche"
|
||||||
|
type="number"
|
||||||
|
required
|
||||||
|
placeholder="Wohnfläche in m² *"
|
||||||
|
bind:value="{ausweis.wohnflaeche}"
|
||||||
|
class="form-input"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Gebäudetyp -->
|
||||||
|
<div class="form-group">
|
||||||
|
<select
|
||||||
|
name="objekt_typ"
|
||||||
|
required
|
||||||
|
bind:value="{ausweis.objekt_typ}"
|
||||||
|
class="form-input"
|
||||||
|
>
|
||||||
|
<option value="" disabled selected>Gebäudetyp *</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>
|
||||||
|
|
||||||
|
<!-- Gebäudeteil -->
|
||||||
|
<div class="form-group">
|
||||||
|
<select
|
||||||
|
name="objekt_gebaeudeteil"
|
||||||
|
required
|
||||||
|
bind:value="{ausweis.objekt_gebaeudeteil}"
|
||||||
|
class="form-input"
|
||||||
|
>
|
||||||
|
<option value="" disabled selected>Gebäudeteil *</option>
|
||||||
|
<option value="Gesamtgebäude">Gesamtgebäude</option>
|
||||||
|
<option value="Wohnen">Wohnen</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
|
||||||
|
.form-section {
|
||||||
|
margin-bottom: 0.8rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 1.125rem; // 18px
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container {
|
||||||
|
padding: 1rem;
|
||||||
|
background-color: #f3f4f6; // Tailwind's bg-gray-100
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
margin-bottom: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(12, 1fr);
|
||||||
|
gap: 1rem;
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
grid-column: span 4; // Equivalent to col-span-4 in Tailwind
|
||||||
|
|
||||||
|
&.full-width {
|
||||||
|
grid-column: span 12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-label {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.875rem; // 14px
|
||||||
|
font-weight: 500;
|
||||||
|
color: #374151; // Tailwind's text-gray-700
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input,
|
||||||
|
.form-select {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.5rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #111827; // Tailwind's text-gray-900
|
||||||
|
border: 1px solid #d1d5db; // Tailwind's border-gray-300
|
||||||
|
border-radius: 0.375rem; // Rounded-md
|
||||||
|
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); // Tailwind's shadow-sm
|
||||||
|
transition: border-color 0.2s, box-shadow 0.2s;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: #6366f1; // Tailwind's focus:border-indigo-500
|
||||||
|
box-shadow: 0 0 0 1px #6366f1; // Tailwind's focus:ring-indigo-500
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: #9ca3af; // Tailwind's text-gray-400
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
option {
|
||||||
|
color: #111827; // Tailwind's text-gray-900
|
||||||
|
}
|
||||||
|
|
||||||
|
option[disabled] {
|
||||||
|
color: #9ca3af; // Tailwind's text-gray-400
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-options {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
|
||||||
|
.radio-option {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
|
||||||
|
input {
|
||||||
|
accent-color: #6366f1; // Tailwind's text-indigo-600
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: #374151; // Tailwind's text-gray-700
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-section {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-icon {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsed .toggle-icon {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container {
|
||||||
|
overflow: hidden;
|
||||||
|
transition: max-height 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsed .form-container {
|
||||||
|
max-height: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container.expanded {
|
||||||
|
max-height: 500px; /* Adjust based on content size */
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
262
src/components/Bedarfsausweis/BedarfsausweisContent2.svelte
Normal file
262
src/components/Bedarfsausweis/BedarfsausweisContent2.svelte
Normal file
@@ -0,0 +1,262 @@
|
|||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<form action="" enctype="multipart/form-data">
|
||||||
|
|
||||||
|
<BereichLabel bereich="A">Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Keller und Dachgeschoss</BereichLabel>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-3 gap-4 px-12 py-6 bg-gray-500/25">
|
||||||
|
|
||||||
|
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
|
||||||
|
<div class="absolute text-[12px] right-[45px] top-[3px]">Anlass *</div>
|
||||||
|
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Anlass">
|
||||||
|
<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]">Baujahr Heizung *</div>
|
||||||
|
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Baujahr Heizung">
|
||||||
|
<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]">Baujahr Gebäude *</div>
|
||||||
|
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Baujahr Gebäude">
|
||||||
|
<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]">Anzahl Wohnungen *</div>
|
||||||
|
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Anzahl Wohnungen">
|
||||||
|
<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]">Sanierungsstatus *</div>
|
||||||
|
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Sanierungsstatus">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-3 gap-4 px-12 py-6 bg-gray-500/25">
|
||||||
|
|
||||||
|
<div class="w-full grid grid-cols-[1fr_25px] items-center relative">
|
||||||
|
<div class="absolute text-[12px] right-[45px] top-[3px]">Straße, Hausnummer *</div>
|
||||||
|
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Straße, Hausnummer *">
|
||||||
|
<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]">PLZ *</div>
|
||||||
|
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="PLZ *">
|
||||||
|
<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]">Ort *</div>
|
||||||
|
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Ort *">
|
||||||
|
<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]">Wohnfläche m² *</div>
|
||||||
|
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Wohnfläche m² *">
|
||||||
|
<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]">Keller *</div>
|
||||||
|
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Keller *">
|
||||||
|
<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]">Dachgeschoss *</div>
|
||||||
|
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Dachgeschoss *">
|
||||||
|
<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]">Gesamtfläche m²</div>
|
||||||
|
<input id="baujahr_anlage" class="pt-[18px] rounded-e-none" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Gesamtfläche m²">
|
||||||
|
<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><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>
|
||||||
@@ -3,9 +3,10 @@
|
|||||||
export let tooltip: string = "";
|
export let tooltip: string = "";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex flex-row justify-between mb-2">
|
<div class="grid grid-cols-2 mt-[5px]">
|
||||||
<label class="text-base-content">{title}</label>
|
|
||||||
<div data-tooltip={tooltip} class="relative tooltip-opener cursor-help">
|
<label>{title}</label>
|
||||||
|
<div data-tooltip={tooltip} class="relative tooltip-opener cursor-help justify-self-end">
|
||||||
<img
|
<img
|
||||||
src="/images/question-mark.png"
|
src="/images/question-mark.png"
|
||||||
alt="?"
|
alt="?"
|
||||||
@@ -13,18 +14,22 @@
|
|||||||
/>
|
/>
|
||||||
<div class="tooltip">
|
<div class="tooltip">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
<div id="arrow" class="invisible absolute h-3 w-3 bg-inherit before:visible before:absolute before:h-3 before:w-3 right-2 before:rotate-45 before:bg-inherit before:content-['']"></div>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style lang="postcss">
|
||||||
label {
|
label {
|
||||||
@apply text-base font-medium;
|
@apply text-base-content text-nowrap justify-self-start -ml-2 mb-1
|
||||||
|
[font-size:_clamp(15px,1rem,10px)]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.tooltip {
|
.tooltip {
|
||||||
@apply absolute -right-1 max-w-[350px] w-max break-words invisible bg-white rounded-lg p-2 shadow-lg top-0 translate-y-[calc(-100%-8px)] transition-all duration-300 opacity-0;
|
@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 {
|
.tooltip-opener:hover .tooltip {
|
||||||
|
|||||||
@@ -2,6 +2,13 @@
|
|||||||
export let name: string = "";
|
export let name: string = "";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="flex flex-row justify-between items-center gap-4 mb-2">
|
<div class="h-[26.5px] mt-[5px]">
|
||||||
<label class="text-base font-medium" for={name}><slot></slot></label>
|
<label for={name}><slot></slot></label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<style lang="postcss">
|
||||||
|
label {
|
||||||
|
@apply text-base-content text-nowrap justify-self-start -ml-2 mb-1
|
||||||
|
[font-size:_clamp(15px,1rem,10px)]
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -50,7 +50,7 @@
|
|||||||
<div class="relative" use:clickOutside={() => {
|
<div class="relative" use:clickOutside={() => {
|
||||||
hideZipDropdown = true;
|
hideZipDropdown = true;
|
||||||
}}>
|
}}>
|
||||||
<Label name={name}>PLZ *</Label>
|
|
||||||
<input
|
<input
|
||||||
name={name}
|
name={name}
|
||||||
id={name}
|
id={name}
|
||||||
|
|||||||
@@ -1,710 +1,222 @@
|
|||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
let gebaeudetyp: string = "";
|
|
||||||
let anlass: string = "";
|
|
||||||
let result: string = "";
|
|
||||||
let hasAushangpflicht: boolean = true;
|
|
||||||
|
|
||||||
$: result = gebaeudetyp + " " + anlass;
|
import VApromo from "#content/card-VA-widget.svelte";
|
||||||
|
import VAGpromo from "#content/card-VAG-widget.svelte";
|
||||||
|
import BApromo from "#content/card-BA-widget.svelte";
|
||||||
|
import BAGpromo from "#content/card-BAG-widget.svelte";
|
||||||
|
import { fade } from 'svelte/transition';
|
||||||
|
|
||||||
$: if (
|
let selectedType: string = "";
|
||||||
gebaeudetyp == "Einfamilienhaus" ||
|
let selectedReason: string = "";
|
||||||
gebaeudetyp == "Zweifamilienhaus" ||
|
let selectedUnits: string = "";
|
||||||
gebaeudetyp == "Mehrfamilienhaus"
|
let selectedStatus: string = "";
|
||||||
) {
|
let selectedYear: string = "";
|
||||||
hasAushangpflicht = false;
|
|
||||||
} else if (
|
let showBA: boolean = false;
|
||||||
gebaeudetyp == "Gewerbegebäude" ||
|
let showVAG: boolean = false;
|
||||||
gebaeudetyp == "Mischgebäude"
|
let showBAG: boolean = false;
|
||||||
) {
|
let showVA: boolean = false;
|
||||||
hasAushangpflicht = true;
|
|
||||||
}
|
function handleTypeChange(event: Event) {
|
||||||
|
selectedType = (event.target as HTMLSelectElement).value;
|
||||||
|
updateResultVisibility();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleReasonChange(event: Event) {
|
||||||
|
selectedReason = (event.target as HTMLSelectElement).value;
|
||||||
|
updateResultVisibility();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleUnitsChange(event: Event) {
|
||||||
|
selectedUnits = (event.target as HTMLSelectElement).value;
|
||||||
|
updateResultVisibility();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleStatusChange(event: Event) {
|
||||||
|
selectedStatus = (event.target as HTMLSelectElement).value;
|
||||||
|
updateResultVisibility();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleYearChange(event: Event) {
|
||||||
|
selectedYear = (event.target as HTMLSelectElement).value;
|
||||||
|
updateResultVisibility();
|
||||||
|
}
|
||||||
|
|
||||||
|
const allowedTypes = ["Einfamilienhaus", "Zweifamilienhaus", "Mehrfamilienhaus", "Mischgebäude"];
|
||||||
|
const allowedTypesGewerbe = ["Gewerbegebäude", "Mischgebäude"];
|
||||||
|
const allowedReason = ["Vermietung/Verkauf", "sonstiges", "Aushangpflicht"];
|
||||||
|
// const allowedReasonBau = ["Modernisierung", "Neubau", "Erweiterung"];
|
||||||
|
|
||||||
|
function updateResultVisibility() {
|
||||||
|
// Die Bedingung, um das Ergebnis anzuzeigen
|
||||||
|
|
||||||
|
// Zusätzliche Bedingung: Wenn "vor 1978" ausgewählt wurde
|
||||||
|
if (selectedYear === "vor 1978") {
|
||||||
|
showVA = (allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType)) && (selectedUnits === "mehr als 4 Wohneinheiten" || selectedStatus === "saniert");
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
showVA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
|
||||||
|
}
|
||||||
|
|
||||||
|
showBA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
|
||||||
|
showVAG = allowedReason.includes(selectedReason) && allowedTypesGewerbe.includes(selectedType);
|
||||||
|
showBAG = allowedReason.includes(selectedReason) && allowedTypesGewerbe.includes(selectedType);
|
||||||
|
}
|
||||||
|
|
||||||
var VA =
|
|
||||||
"https://online-energieausweis.org/energieausweis-erstellen/verbrauchsausweis-erstellen";
|
|
||||||
var VANW =
|
|
||||||
"https://online-energieausweis.org/energieausweis-erstellen/verbrauchsausweis-gewerbe-erstellen";
|
|
||||||
var BA =
|
|
||||||
"https://online-energieausweis.org/energieausweis-erstellen/bedarfsausweis-erstellen";
|
|
||||||
var BANW =
|
|
||||||
"https://online-energieausweis.org/energieausweis-erstellen/bedarfsausweis-gewerbe-anfragen";
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="border p-4 rounded-lg bg-base-200 border-base-300 my-4">
|
<div id="OEA_widget">
|
||||||
<div class="w-full grid grid-cols-2 gap-4">
|
<input id="recode" type="hidden" value="widgetvorlage">
|
||||||
<div>
|
|
||||||
<div>Gebäudetyp</div>
|
<div id="OEA_input">
|
||||||
<select
|
|
||||||
class="select select-bordered text-base-content text-lg px-4 py-2"
|
<div class="OEA_zeile1">
|
||||||
bind:value={gebaeudetyp}
|
<div class="OEA_item1">
|
||||||
>
|
<div class="OEA_title1">Gebäudetyp</div>
|
||||||
<option value="" selected disabled>Bitte Auswählen</option>
|
<select class="OEA_auswahl1" id="OEA_changeTyp" on:change={handleTypeChange}>
|
||||||
<option value="Einfamilienhaus">Einfamilienhaus</option>
|
<option value="" selected disabled>bitte auswählen</option>
|
||||||
<option value="Zweifamilienhaus">Zweifamilienhaus</option>
|
<option value="Einfamilienhaus">Einfamilienhaus</option>
|
||||||
<option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
|
<option value="Zweifamilienhaus">Zweifamilienhaus</option>
|
||||||
<option value="Gewerbegebäude">Gewerbegebäude</option>
|
<option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
|
||||||
<option value="Mischgebäude">Mischgebäude</option>
|
<option value="Gewerbegebäude">Gewerbegebäude</option>
|
||||||
</select>
|
<option value="Mischgebäude">Mischgebäude</option>
|
||||||
</div>
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="OEA_item2">
|
||||||
|
<div class="OEA_title1">Anlass</div>
|
||||||
|
<select class="OEA_auswahl1" id="OEA_changeAnlass" on:change={handleReasonChange}>
|
||||||
|
<option value="" selected disabled>bitte auswählen</option>
|
||||||
|
<option value="Vermietung/Verkauf">Vermietung/Verkauf</option>
|
||||||
|
<option value="Modernisierung">Modernisierung</option>
|
||||||
|
<option value="Neubau">Neubau</option>
|
||||||
|
<option value="Erweiterung">Erweiterung</option>
|
||||||
|
<option value="Aushangpflicht">Aushangpflicht</option>
|
||||||
|
<option value="sonstiges">sonstiges z.B. Bank</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="OEA_zeile2">
|
||||||
|
<div class="OEA_item3">
|
||||||
|
<div class="OEA_title2">Baujahr</div>
|
||||||
|
<select class="OEA_auswahl2" id="changeBaujahr" on:change={handleYearChange}>
|
||||||
|
<option value="" selected disabled>bitte auswählen</option>
|
||||||
|
<option value="vor 1978">vor 1978</option>
|
||||||
|
<option value="nach 1977">nach 1977</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="OEA_item4">
|
||||||
|
<div class="OEA_title2">Wohneinheiten</div>
|
||||||
|
<select class="OEA_auswahl2" id="changeEinheiten" on:change={handleUnitsChange}>
|
||||||
|
<option value="" selected disabled>bitte auswählen</option>
|
||||||
|
<option value="bis 4 Wohneinheiten">bis 4 Wohneinheiten</option>
|
||||||
|
<option value="mehr als 4 Wohneinheiten">mehr als 4 Wohneinheiten</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="OEA_item5">
|
||||||
|
<div class="OEA_title2">Sanierungsstatus</div>
|
||||||
|
<select class="OEA_auswahl2" id="changeStatus" on:change={handleStatusChange}>
|
||||||
|
<option value="" selected disabled>bitte auswählen</option>
|
||||||
|
<option value="saniert">saniert</option>
|
||||||
|
<option value="unsaniert">unsaniert</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="OEA_zeile3">
|
||||||
|
{#if showVA}
|
||||||
|
<div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
|
||||||
|
<VApromo client:load />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<div>
|
{#if showBA}
|
||||||
<div>Anlass</div>
|
<div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
|
||||||
<select
|
<BApromo client:load />
|
||||||
class="select select-bordered text-base-content text-lg px-4 py-2"
|
</div>
|
||||||
bind:value={anlass}
|
{/if}
|
||||||
>
|
|
||||||
<option value="" selected disabled>Bitte Auswählen</option>
|
|
||||||
<option value="Vermietung/Verkauf">Vermietung/Verkauf</option>
|
|
||||||
<option value="Modernisierung">Modernisierung</option>
|
|
||||||
<option value="Neubau">Neubau</option>
|
|
||||||
<option value="Erweiterung">Erweiterung</option>
|
|
||||||
{#if hasAushangpflicht}
|
|
||||||
<option value="Aushangpflicht" id="aP"
|
|
||||||
>Aushangpflicht</option
|
|
||||||
>
|
|
||||||
{/if}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<br />
|
{#if showVAG}
|
||||||
|
<div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
|
||||||
|
<VAGpromo client:load />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<div class="text-lg">
|
{#if showBAG}
|
||||||
{#if gebaeudetyp == "Einfamilienhaus" && anlass == "Vermietung/Verkauf"}
|
<div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
|
||||||
<p>
|
<BAGpromo client:load />
|
||||||
Wenn Sie Ihr Einfamilienhaus vermieten oder verkaufen wollen,
|
</div>
|
||||||
haben Sie die Wahl zwischen einem <span class="hilite"
|
{/if}
|
||||||
>Verbrauchsausweis</span
|
</div>
|
||||||
>
|
|
||||||
für
|
|
||||||
<span class="hilite">Wohngebäude</span> und einem
|
|
||||||
<span class="hilite">Bedarfsausweis</span>
|
|
||||||
für <span class="hilite">Wohngebäude</span>.<br /><br />In den
|
|
||||||
meisten Fällen können Sie bei Vermietung oder Verkauf Ihrer
|
|
||||||
Immobilie den einfacheren Energieausweis (Verbrauchsausweis)
|
|
||||||
erstellen lassen. Dieser Ausweis ist verbrauchsorientiert und
|
|
||||||
benötigt als Berechnungsgrundlage 3 zusammenhängende Jahre der
|
|
||||||
Heizenergieabrechnugen des Gebäudes. Wenn Ihnen also diese 3
|
|
||||||
Abrechnugsjahre vorliegen, und es gab dazwischen keine
|
|
||||||
grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch, dann
|
|
||||||
steht der Nutzung eines Verbrauchsausweises nichts im Weg.<br
|
|
||||||
/><br />Laut EnEV gibt es nur eine rechtliche Ausnahme, bei der
|
|
||||||
es nicht zulässig ist einen Verbrauchsausweis bei Vermietung
|
|
||||||
oder Verkauf zu verwenden. Dies ist dann der Fall, wenn Ihr
|
|
||||||
Gebäude gänzlich unsaniert ist, vor 1978 gebaut wurde und
|
|
||||||
weniger als 5 Wohneinheiten besitzt. In diesem Fall oder bei
|
|
||||||
unvollständigen Verbrauchsabrechnungen (z.B. bei Leerstand),
|
|
||||||
sollte ein Bedarfsausweis für Wohngebäude erstellt werden.
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg my-2" href={VA} target="_blank"
|
|
||||||
>Jetzt Verbrauchsausweis Wohngebäude online erstellen</a
|
|
||||||
>
|
|
||||||
(Empfehlung)<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={BA} target="_blank"
|
|
||||||
>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
|
|
||||||
>
|
|
||||||
{:else if gebaeudetyp == "Einfamilienhaus" && anlass == "Modernisierung"}
|
|
||||||
<p>
|
|
||||||
Wenn Sie bei Ihrem Einfamilienhaus eine Modernisierung planen,
|
|
||||||
benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
|
|
||||||
für <span class="hilite">Wohngebäude</span>.<br /><br />In der
|
|
||||||
aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
|
|
||||||
verfahren ist. In
|
|
||||||
<a
|
|
||||||
href="https://online-energieausweis.org/enev/"
|
|
||||||
title="§9 EnEV"
|
|
||||||
target="blank">§9 EnEV</a
|
|
||||||
> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
|
|
||||||
Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
|
|
||||||
beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
|
|
||||||
werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
|
|
||||||
wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
|
|
||||||
kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
|
|
||||||
Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
|
|
||||||
durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
|
|
||||||
nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
|
|
||||||
ein Bedarfsausweis erstellt werden.
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={BA} target="blank"
|
|
||||||
>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
|
|
||||||
>
|
|
||||||
{:else if gebaeudetyp == "Einfamilienhaus" && anlass == "Neubau"}
|
|
||||||
<p>
|
|
||||||
Wenn Sie ein Einfamilienhaus bauen wollen, benötigen Sie einen <span
|
|
||||||
class="hilite">Bedarfsausweis</span
|
|
||||||
>
|
|
||||||
für <span class="hilite">Wohngebäude</span>.<br /><br />Bei
|
|
||||||
genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
|
|
||||||
vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
|
|
||||||
zu erstellen. Aus der EnEV-Berechnung kann später, nach
|
|
||||||
Fertigstellung, der Bedarfsausweis erstellt werden. In
|
|
||||||
<a
|
|
||||||
href="https://online-energieausweis.org/enev/"
|
|
||||||
title="§3 EnEV"
|
|
||||||
target="blank">§3 EnEV</a
|
|
||||||
>
|
|
||||||
ist geregelt welche Anforderungen für Wohngebäude eingehalten werden
|
|
||||||
müssen.
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={BA} target="blank"
|
|
||||||
>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
|
|
||||||
>
|
|
||||||
{:else if gebaeudetyp == "Einfamilienhaus" && anlass == "Erweiterung"}
|
|
||||||
<p>
|
|
||||||
Wenn Sie bei Ihrem Einfamilienhaus eine Erweiterung planen,
|
|
||||||
benötigen Sie einen
|
|
||||||
<span class="hilite">Bedarfsausweis</span> für
|
|
||||||
<span class="hilite">Wohngebäude</span>.<br /><br />In der
|
|
||||||
aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
|
|
||||||
verfahren ist. In
|
|
||||||
<a
|
|
||||||
href="https://online-energieausweis.org/enev/"
|
|
||||||
title="§9 EnEV"
|
|
||||||
target="blank">§9 EnEV</a
|
|
||||||
> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
|
|
||||||
Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
|
|
||||||
beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
|
|
||||||
werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
|
|
||||||
wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
|
|
||||||
kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
|
|
||||||
Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
|
|
||||||
durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
|
|
||||||
nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
|
|
||||||
ein Bedarfsausweis erstellt werden.
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={BA} target="blank"
|
|
||||||
>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
|
|
||||||
>
|
|
||||||
{:else if gebaeudetyp == "Zweifamilienhaus" && anlass == "Vermietung/Verkauf"}
|
|
||||||
<p>
|
|
||||||
Wenn Sie Ihr Zweifamilienhaus vermieten oder verkaufen wollen,
|
|
||||||
haben Sie die Wahl zwischen einem <span class="hilite"
|
|
||||||
>Verbrauchsausweis</span
|
|
||||||
>
|
|
||||||
für <span class="hilite">Wohngebäude</span> und einem
|
|
||||||
<span class="hilite">Bedarfsausweis</span>
|
|
||||||
für <span class="hilite">Wohngebäude</span>.<br /><br />In den
|
|
||||||
meisten Fällen können Sie bei Vermietung oder Verkauf Ihrer
|
|
||||||
Immobilie den einfacheren Energieausweis (Verbrauchsausweis)
|
|
||||||
erstellen lassen. Dieser Ausweis ist verbrauchsorientiert und
|
|
||||||
benötigt als Berechnungsgrundlage 3 zusammenhängende Jahre der
|
|
||||||
Heizenergieabrechnugen des Gebäudes. Wenn Ihnen also diese 3
|
|
||||||
Abrechnugsjahre vorliegen, und es gab dazwischen keine
|
|
||||||
grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch, dann
|
|
||||||
steht der Nutzung eines Verbrauchsausweises nichts im Weg.<br
|
|
||||||
/><br />Laut EnEV gibt es nur eine rechtliche Ausnahme, bei der
|
|
||||||
es nicht zulässig ist einen Verbrauchsausweis bei Vermietung
|
|
||||||
oder Verkauf zu verwenden. Dies ist dann der Fall, wenn Ihr
|
|
||||||
Gebäude gänzlich unsaniert ist, vor 1978 gebaut wurde und
|
|
||||||
weniger als 5 Wohneinheiten besitzt. In diesem Fall oder bei
|
|
||||||
unvollständigen Verbrauchsabrechnungen (z.B. bei Leerstand),
|
|
||||||
sollte ein Bedarfsausweis für Wohngebäude erstellt werden.
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={VA} target="blank"
|
|
||||||
>Jetzt Verbrauchsausweis Wohngebäude online erstellen</a
|
|
||||||
>
|
|
||||||
(Empfehlung)<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={BA} target="blank"
|
|
||||||
>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
|
|
||||||
>
|
|
||||||
{:else if gebaeudetyp == "Zweifamilienhaus" && anlass == "Modernisierung"}
|
|
||||||
<p>
|
|
||||||
Wenn Sie bei Ihrem Zweifamilienhaus eine Modernisierung planen,
|
|
||||||
benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
|
|
||||||
für <span class="hilite">Wohngebäude</span>.<br /><br />In der
|
|
||||||
aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
|
|
||||||
verfahren ist. In
|
|
||||||
<a
|
|
||||||
href="https://online-energieausweis.org/enev/"
|
|
||||||
title="§9 EnEV"
|
|
||||||
target="blank">§9 EnEV</a
|
|
||||||
> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
|
|
||||||
Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
|
|
||||||
beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
|
|
||||||
werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
|
|
||||||
wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
|
|
||||||
kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
|
|
||||||
Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
|
|
||||||
durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
|
|
||||||
nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
|
|
||||||
ein Bedarfsausweis erstellt werden.
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={BA} target="blank"
|
|
||||||
>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
|
|
||||||
>
|
|
||||||
{:else if gebaeudetyp == "Zweifamilienhaus" && anlass == "Neubau"}
|
|
||||||
<p>
|
|
||||||
Wenn Sie ein Zweifamilienhaus bauen wollen, benötigen Sie einen <span
|
|
||||||
class="hilite">Bedarfsausweis</span
|
|
||||||
>
|
|
||||||
für <span class="hilite">Wohngebäude</span>.<br /><br />Bei
|
|
||||||
genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
|
|
||||||
vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
|
|
||||||
zu erstellen. Aus der EnEV-Berechnung kann später, nach
|
|
||||||
Fertigstellung, der Bedarfsausweis erstellt werden. In
|
|
||||||
<a
|
|
||||||
href="https://online-energieausweis.org/enev/"
|
|
||||||
title="§3 EnEV"
|
|
||||||
target="blank">§3 EnEV</a
|
|
||||||
> ist geregelt welche Anforderungen für Wohngebäude eingehalten werden
|
|
||||||
müssen.
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={BA} target="blank"
|
|
||||||
>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
|
|
||||||
>
|
|
||||||
{:else if gebaeudetyp == "Zweifamilienhaus" && anlass == "Erweiterung"}
|
|
||||||
<p>
|
|
||||||
Wenn Sie bei Ihrem Zweifamilienhaus eine Erweiterung planen,
|
|
||||||
benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
|
|
||||||
für <span class="hilite">Wohngebäude</span>.<br /><br />In der
|
|
||||||
aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
|
|
||||||
verfahren ist. In
|
|
||||||
<a
|
|
||||||
href="https://online-energieausweis.org/enev/"
|
|
||||||
title="§9 EnEV"
|
|
||||||
target="blank">§9 EnEV</a
|
|
||||||
> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
|
|
||||||
Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
|
|
||||||
beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
|
|
||||||
werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
|
|
||||||
wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
|
|
||||||
kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
|
|
||||||
Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
|
|
||||||
durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
|
|
||||||
nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
|
|
||||||
ein Bedarfsausweis erstellt werden.
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={BA} target="blank"
|
|
||||||
>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
|
|
||||||
>
|
|
||||||
{:else if gebaeudetyp == "Mehrfamilienhaus" && anlass == "Vermietung/Verkauf"}
|
|
||||||
<p>
|
|
||||||
Wenn Sie Ihr Mehrfamilienhaus vermieten oder verkaufen wollen,
|
|
||||||
haben Sie die Wahl zwischen einem <span class="hilite"
|
|
||||||
>Verbrauchsausweis</span
|
|
||||||
>
|
|
||||||
für <span class="hilite">Wohngebäude</span> und einem
|
|
||||||
<span class="hilite">Bedarfsausweis</span>
|
|
||||||
für <span class="hilite">Wohngebäude</span>.<br /><br />In den
|
|
||||||
meisten Fällen können Sie bei Vermietung oder Verkauf Ihrer
|
|
||||||
Immobilie den einfacheren Energieausweis (Verbrauchsausweis)
|
|
||||||
erstellen lassen. Dieser Ausweis ist verbrauchsorientiert und
|
|
||||||
benötigt als Berechnungsgrundlage 3 zusammenhängende Jahre der
|
|
||||||
Heizenergieabrechnugen des Gebäudes. Wenn Ihnen also diese 3
|
|
||||||
Abrechnugsjahre vorliegen, und es gab dazwischen keine
|
|
||||||
grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch, dann
|
|
||||||
steht der Nutzung eines Verbrauchsausweises nichts im Weg.<br
|
|
||||||
/><br />Laut EnEV gibt es nur eine rechtliche Ausnahme, bei der
|
|
||||||
es nicht zulässig ist einen Verbrauchsausweis bei Vermietung
|
|
||||||
oder Verkauf zu verwenden. Dies ist dann der Fall, wenn Ihr
|
|
||||||
Gebäude gänzlich unsaniert ist, vor 1978 gebaut wurde und
|
|
||||||
weniger als 5 Wohneinheiten besitzt. In diesem Fall oder bei
|
|
||||||
unvollständigen Verbrauchsabrechnungen (z.B. bei Leerstand),
|
|
||||||
sollte ein Bedarfsausweis für Wohngebäude erstellt werden.
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={VA} target="blank"
|
|
||||||
>Jetzt Verbrauchsausweis Wohngebäude online erstellen</a
|
|
||||||
>
|
|
||||||
(Empfehlung)<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={BA} target="blank"
|
|
||||||
>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
|
|
||||||
>
|
|
||||||
{:else if gebaeudetyp == "Mehrfamilienhaus" && anlass == "Modernisierung"}
|
|
||||||
<p>
|
|
||||||
Wenn Sie bei Ihrem Mehrfamilienhaus eine Modernisierung planen,
|
|
||||||
benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
|
|
||||||
für <span class="hilite">Wohngebäude</span>.<br /><br />In der
|
|
||||||
aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
|
|
||||||
verfahren ist. In
|
|
||||||
<a
|
|
||||||
href="https://online-energieausweis.org/enev/"
|
|
||||||
title="§9 EnEV"
|
|
||||||
target="blank">§9 EnEV</a
|
|
||||||
> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
|
|
||||||
Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
|
|
||||||
beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
|
|
||||||
werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
|
|
||||||
wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
|
|
||||||
kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
|
|
||||||
Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
|
|
||||||
durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
|
|
||||||
nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
|
|
||||||
ein Bedarfsausweis erstellt werden.
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={BA} target="blank"
|
|
||||||
>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
|
|
||||||
>
|
|
||||||
{:else if gebaeudetyp == "Mehrfamilienhaus" && anlass == "Neubau"}
|
|
||||||
Wenn
|
|
||||||
<p>
|
|
||||||
Sie ein Mehrfamilienhaus bauen wollen, benötigen Sie einen <span
|
|
||||||
class="hilite">Bedarfsausweis</span
|
|
||||||
>
|
|
||||||
für <span class="hilite">Wohngebäude</span>.<br /><br />Bei
|
|
||||||
genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
|
|
||||||
vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
|
|
||||||
zu erstellen. Aus der EnEV-Berechnung kann später, nach
|
|
||||||
Fertigstellung, der Bedarfsausweis erstellt werden. In
|
|
||||||
<a
|
|
||||||
href="https://online-energieausweis.org/enev/"
|
|
||||||
title="§3 EnEV"
|
|
||||||
target="blank">§3 EnEV</a
|
|
||||||
> ist geregelt welche Anforderungen für Wohngebäude eingehalten werden
|
|
||||||
müssen.
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={BA} target="blank"
|
|
||||||
>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
|
|
||||||
>
|
|
||||||
{:else if gebaeudetyp == "Mehrfamilienhaus" && anlass == "Erweiterung"}
|
|
||||||
<p>
|
|
||||||
Wenn Sie bei Ihrem Mehrfamilienhaus eine Erweiterung planen,
|
|
||||||
benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
|
|
||||||
für <span class="hilite">Wohngebäude</span>.<br /><br />In der
|
|
||||||
aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
|
|
||||||
verfahren ist. In
|
|
||||||
<a
|
|
||||||
href="https://online-energieausweis.org/enev/"
|
|
||||||
title="§9 EnEV"
|
|
||||||
target="blank">§9 EnEV</a
|
|
||||||
> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
|
|
||||||
Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
|
|
||||||
beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
|
|
||||||
werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
|
|
||||||
wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
|
|
||||||
kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
|
|
||||||
Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
|
|
||||||
durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
|
|
||||||
nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
|
|
||||||
ein Bedarfsausweis erstellt werden.
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={BA} target="blank"
|
|
||||||
>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
|
|
||||||
>
|
|
||||||
{:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Vermietung/Verkauf"}
|
|
||||||
<p>
|
|
||||||
Wenn Sie Ihr Gewerbegebäude vermieten oder verkaufen wollen,
|
|
||||||
haben Sie die Wahl zwischen einem <span class="hilite"
|
|
||||||
>Verbrauchsausweis</span
|
|
||||||
>
|
|
||||||
für <span class="hilite">Gewerbegebäude</span> und einem
|
|
||||||
<span class="hilite">Bedarfsausweis</span>
|
|
||||||
für <span class="hilite">Gewerbegebäude</span>.<br /><br />Bei
|
|
||||||
Vermietung oder Verkauf Ihrer Gewerbeimmobilie können Sie den
|
|
||||||
einfacheren Energieausweis (Verbrauchsausweis) erstellen lassen.
|
|
||||||
Der gewerbliche Verbrauchsausweis benötigt als
|
|
||||||
Berechnungsgrundlage den Stromverbrauch und den
|
|
||||||
Heizenergieverbrauch des Gebäudes. Es werden 3 zusammenhängende
|
|
||||||
Jahre der Heizenergieabrechnugen und der Stromabrechnung des
|
|
||||||
Gebäudes benötigt. Wenn Ihnen also diese 3 Abrechnugsjahre
|
|
||||||
vorliegen und die Verbräuche lassen sich eindeutig zuordnen,
|
|
||||||
dann steht der Dateneingabe nichts im Wege.<br /><br />Es dürfen
|
|
||||||
keine grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch
|
|
||||||
während dieses Zeitraums durchgeführt worden sein. Wenn diese
|
|
||||||
Voraussetzungen nicht vorliegen, oder keine vollständigen
|
|
||||||
Verbrauchsabrechnungen vorliegen (z.B. bei Leerstand), dann
|
|
||||||
sollte der Bedarfsausweis Nichtwohngebäude (Gewerbe) erstellt
|
|
||||||
werden.
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={VANW} target="blank"
|
|
||||||
>Jetzt Verbrauchsausweis Gewerbe online erstellen</a
|
|
||||||
>
|
|
||||||
(Empfehlung)<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={BANW} target="blank"
|
|
||||||
>Jetzt Bedarfsausweis Gewerbe online anfragen</a
|
|
||||||
>
|
|
||||||
{:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Modernisierung"}
|
|
||||||
<p>
|
|
||||||
Wenn Sie bei Ihrem Gewerbegebäude eine Modernisierung planen,
|
|
||||||
benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
|
|
||||||
für <span class="hilite">Gewerbegebäude</span>.<br /><br />In
|
|
||||||
der aktuellen EnEV ist geregelt, wie bei Änderungen im
|
|
||||||
Baubestand zu verfahren ist. In
|
|
||||||
<a
|
|
||||||
href="https://online-energieausweis.org/enev/"
|
|
||||||
title="§9 EnEV"
|
|
||||||
target="blank">§9 EnEV</a
|
|
||||||
> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
|
|
||||||
Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
|
|
||||||
beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
|
|
||||||
werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
|
|
||||||
wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
|
|
||||||
kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
|
|
||||||
Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
|
|
||||||
durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
|
|
||||||
nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
|
|
||||||
ein Bedarfsausweis erstellt werden.
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={BANW} target="blank"
|
|
||||||
>Jetzt Bedarfsausweis Gewerbe online anfragen</a
|
|
||||||
>
|
|
||||||
{:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Neubau"}
|
|
||||||
<p>
|
|
||||||
Wenn Sie ein Gewerbegebäude bauen wollen, benötigen Sie einen <span
|
|
||||||
class="hilite">Bedarfsausweis</span
|
|
||||||
>
|
|
||||||
für <span class="hilite">Gewerbe</span>.<br /><br />Bei
|
|
||||||
genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
|
|
||||||
vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
|
|
||||||
zu erstellen. Aus der EnEV-Berechnung kann später, nach
|
|
||||||
Fertigstellung, der Bedarfsausweis erstellt werden. In
|
|
||||||
<a
|
|
||||||
href="https://online-energieausweis.org/enev/"
|
|
||||||
title="§4 EnEV"
|
|
||||||
target="blank">§4 EnEV</a
|
|
||||||
> ist geregelt welche Anforderungen für Gewerbegebäude eingehalten
|
|
||||||
werden müssen.
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={BANW} target="blank"
|
|
||||||
>Jetzt Bedarfsausweis Gewerbe online anfragen</a
|
|
||||||
>
|
|
||||||
{:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Erweiterung"}
|
|
||||||
<p>
|
|
||||||
Wenn Sie bei Ihrem Gewerbegebäude eine Erweiterung planen,
|
|
||||||
benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
|
|
||||||
für <span class="hilite">Gewerbegebäude</span>.<br /><br />In
|
|
||||||
der aktuellen EnEV ist geregelt, wie bei Änderungen im
|
|
||||||
Baubestand zu verfahren ist. In
|
|
||||||
<a
|
|
||||||
href="https://online-energieausweis.org/enev/"
|
|
||||||
title="§9 EnEV"
|
|
||||||
target="blank">§9 EnEV</a
|
|
||||||
> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
|
|
||||||
Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
|
|
||||||
beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
|
|
||||||
werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
|
|
||||||
wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
|
|
||||||
kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
|
|
||||||
Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
|
|
||||||
durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
|
|
||||||
nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
|
|
||||||
ein Bedarfsausweis erstellt werden.
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={BANW} target="blank"
|
|
||||||
>Jetzt Bedarfsausweis Gewerbe online anfragen</a
|
|
||||||
>
|
|
||||||
{:else if gebaeudetyp == "Gewerbegebäude" && anlass == "Aushangpflicht"}
|
|
||||||
<p>
|
|
||||||
Bei starkem Publikumsverkehr in Ihrem Gewerbegebäude benötigen
|
|
||||||
Sie einen
|
|
||||||
<span class="hilite">Verbrauchsausweis</span> für
|
|
||||||
<span class="hilite">Gewerbegebäude</span> als öffentlichen Aushang.
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={VANW} target="blank"
|
|
||||||
>Jetzt Verbrauchsausweis Gewerbe online erstellen</a
|
|
||||||
> (Empfehlung)
|
|
||||||
{:else if gebaeudetyp == "Mischgebäude" && anlass == "Vermietung/Verkauf"}
|
|
||||||
<p>
|
|
||||||
Wenn Sie Ihr Mischgebäude vermieten oder verkaufen wollen, haben
|
|
||||||
Sie für den nichtgewerblichen Teil die Wahl zwischen einem
|
|
||||||
<span class="hilite">Verbrauchsausweis</span> für
|
|
||||||
<span class="hilite">Wohngebäude</span>
|
|
||||||
und einem <span class="hilite">Bedarfsausweis</span> für
|
|
||||||
<span class="hilite">Wohngebäude</span>
|
|
||||||
und für den gewerblichen Teil die Wahl zwischen einem
|
|
||||||
<span class="hilite">Verbrauchsausweis</span>
|
|
||||||
für <span class="hilite">Gewerbegebäude</span> und einem
|
|
||||||
<span class="hilite">Bedarfsausweis</span>
|
|
||||||
für <span class="hilite">Gewerbegebäude</span>.<br /><br /><span
|
|
||||||
class="red">Für den nichtgewerblichen Teil gilt:</span
|
|
||||||
><br />In den meisten Fällen können Sie bei Vermietung oder
|
|
||||||
Verkauf Ihrer Immobilie den einfacheren Energieausweis
|
|
||||||
(Verbrauchsausweis) erstellen lassen. Dieser Ausweis ist
|
|
||||||
verbrauchsorientiert und benötigt als Berechnungsgrundlage 3
|
|
||||||
zusammenhängende Jahre der Heizenergieabrechnugen des Gebäudes.
|
|
||||||
Wenn Ihnen also diese 3 Abrechnugsjahre vorliegen, und es gab
|
|
||||||
dazwischen keine grundlegenden Sanierungsmaßnahmen bzw.
|
|
||||||
Heizungsaustausch, dann steht der Nutzung eines
|
|
||||||
Verbrauchsausweises nichts im Weg.<br /><br />Laut EnEV gibt es
|
|
||||||
nur eine rechtliche Ausnahme, bei der es nicht zulässig ist
|
|
||||||
einen Verbrauchsausweis bei Vermietung oder Verkauf zu
|
|
||||||
verwenden. Dies ist dann der Fall, wenn Ihr Gebäude gänzlich
|
|
||||||
unsaniert ist, vor 1978 gebaut wurde und weniger als 5
|
|
||||||
Wohneinheiten besitzt. In diesem Fall oder bei unvollständigen
|
|
||||||
Verbrauchsabrechnungen (z.B. bei Leerstand), sollte ein
|
|
||||||
Bedarfsausweis für Wohngebäude erstellt werden.<br /><span
|
|
||||||
class="red">Für den gewerblichen Teil gilt:</span
|
|
||||||
><br />Bei Vermietung oder Verkauf Ihrer Gewerbeimmobilie können
|
|
||||||
Sie den einfacheren Energieausweis (Verbrauchsausweis) erstellen
|
|
||||||
lassen. Der gewerbliche Verbrauchsausweis benötigt als
|
|
||||||
Berechnungsgrundlage den Stromverbrauch und den
|
|
||||||
Heizenergieverbrauch des Gebäudes. Es werden 3 zusammenhängende
|
|
||||||
Jahre der Heizenergieabrechnugen und der Stromabrechnung des
|
|
||||||
Gebäudes benötigt. Wenn Ihnen also diese 3 Abrechnugsjahre
|
|
||||||
vorliegen und die Verbräuche lassen sich eindeutig zuordnen,
|
|
||||||
dann steht der Dateneingabe nichts im Wege.<br /><br />Es dürfen
|
|
||||||
keine grundlegenden Sanierungsmaßnahmen bzw. Heizungsaustausch
|
|
||||||
während dieses Zeitraums durchgeführt worden sein. Wenn diese
|
|
||||||
Voraussetzungen nicht vorliegen, oder keine vollständigen
|
|
||||||
Verbrauchsabrechnungen vorliegen (z.B. bei Leerstand), dann
|
|
||||||
sollte der Bedarfsausweis Nichtwohngebäude (Gewerbe) erstellt
|
|
||||||
werden.
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={VA} target="blank"
|
|
||||||
>Jetzt Verbrauchsausweis Wohngebäude online erstellen</a
|
|
||||||
>
|
|
||||||
(Empfehlung)
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={BA} target="blank"
|
|
||||||
>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
|
|
||||||
>
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={VANW} target="blank"
|
|
||||||
>Jetzt Verbrauchsausweis Gewerbe online erstellen</a
|
|
||||||
>
|
|
||||||
(Empfehlung)
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={BANW} target="blank"
|
|
||||||
>Jetzt Bedarfsausweis Gewerbe online anfragen</a
|
|
||||||
>
|
|
||||||
{:else if gebaeudetyp == "Mischgebäude" && anlass == "Modernisierung"}
|
|
||||||
<p>
|
|
||||||
Wenn Sie bei Ihrem Mischgebäude eine Modernisierung planen,
|
|
||||||
benötigen Sie einen <span class="hilite">Bedarfsausweis</span>
|
|
||||||
für <span class="hilite">Wohngebäude</span> und einen
|
|
||||||
<span class="hilite">Bedarfsausweis</span>
|
|
||||||
für <span class="hilite">Gewerbegebäude</span>.<br /><br />In
|
|
||||||
der aktuellen EnEV ist geregelt, wie bei Änderungen im
|
|
||||||
Baubestand zu verfahren ist. In
|
|
||||||
<a
|
|
||||||
href="https://online-energieausweis.org/enev/"
|
|
||||||
title="§9 EnEV"
|
|
||||||
target="blank">§9 EnEV</a
|
|
||||||
> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
|
|
||||||
Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
|
|
||||||
beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
|
|
||||||
werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
|
|
||||||
wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
|
|
||||||
kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
|
|
||||||
Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
|
|
||||||
durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
|
|
||||||
nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
|
|
||||||
ein Bedarfsausweis erstellt werden.
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={BA} target="blank"
|
|
||||||
>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
|
|
||||||
>
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={BANW} target="blank"
|
|
||||||
>Jetzt Bedarfsausweis Gewerbe online anfragen</a
|
|
||||||
>
|
|
||||||
{:else if gebaeudetyp == "Mischgebäude" && anlass == "Neubau"}
|
|
||||||
<p>
|
|
||||||
Wenn Sie ein Mischgebäude bauen wollen, benötigen Sie einen <span
|
|
||||||
class="hilite">Bedarfsausweis</span
|
|
||||||
>
|
|
||||||
für <span class="hilite">Wohngebäude</span> und einen
|
|
||||||
<span class="hilite">Bedarfsausweis</span>
|
|
||||||
für <span class="hilite">Gewerbegebäude</span>.<br /><br />Bei
|
|
||||||
genehmigungspflichtigen Neubaumaßnahmen ist es vorgeschrieben
|
|
||||||
vor Baubeginn einen EnEV-Nachweis (früher Wärmeschutznachweis)
|
|
||||||
zu erstellen. Aus der EnEV-Berechnung kann später, nach
|
|
||||||
Fertigstellung, der Bedarfsausweis erstellt werden. In
|
|
||||||
<a
|
|
||||||
href="https://online-energieausweis.org/enev/"
|
|
||||||
title="§3 EnEV"
|
|
||||||
target="blank">§3 EnEV</a
|
|
||||||
>
|
|
||||||
ist geregelt welche Anforderungen für Wohngebäude, und in
|
|
||||||
<a
|
|
||||||
href="https://online-energieausweis.org/enev/"
|
|
||||||
title="§4 EnEV"
|
|
||||||
target="blank">§4 EnEV</a
|
|
||||||
> welche Anforderungen für Gewerbegebäude eingehalten werden müssen.
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={BA} target="blank"
|
|
||||||
>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
|
|
||||||
>
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={BANW} target="blank"
|
|
||||||
>Jetzt Bedarfsausweis Gewerbe online anfragen</a
|
|
||||||
>
|
|
||||||
{:else if gebaeudetyp == "Mischgebäude" && anlass == "Erweiterung"}
|
|
||||||
<p>
|
|
||||||
Wenn Sie bei Ihrem Mischgebäude eine Erweiterung planen,
|
|
||||||
benötigen Sie einen
|
|
||||||
<span class="hilite">Bedarfsausweis</span> für
|
|
||||||
<span class="hilite">Wohngebäude</span>
|
|
||||||
und einen <span class="hilite">Bedarfsausweis</span> für
|
|
||||||
<span class="hilite">Gewerbegebäude</span>.<br /><br />In der
|
|
||||||
aktuellen EnEV ist geregelt, wie bei Änderungen im Baubestand zu
|
|
||||||
verfahren ist. In
|
|
||||||
<a
|
|
||||||
href="https://online-energieausweis.org/enev/"
|
|
||||||
title="§9 EnEV"
|
|
||||||
target="blank">§9 EnEV</a
|
|
||||||
> der EnEV ist festgelegt, welche Mindestanforderungen bei Änderungen,
|
|
||||||
Erweiterungen und Ausbau eingehalten werden müssen. Außerdem wird
|
|
||||||
beschrieben unter welchen Voraussetzungen ein Bedarfsausweis erstellt
|
|
||||||
werden muß. Dies ist z.B. nicht der Fall wenn nur einzelne Bauteile
|
|
||||||
wie Dach, Außenwand und Fenster erneuert werden oder die Erweiterung
|
|
||||||
kleiner 50 m² ist. Dann muß nur ein Bauteilnachweis geführt werden.
|
|
||||||
Es kann auch vorkommen, daß bei Einzelmaßnahmen eine komplette Bedarfsberechnung
|
|
||||||
durchgeführt werden muss wenn der Bauteilnachweis die EnEV-Anforderungen
|
|
||||||
nicht erfüllt. Bei Austausch der Heizungsanlage muß in jedem Fall
|
|
||||||
ein Bedarfsausweis erstellt werden.
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={BA} target="blank"
|
|
||||||
>Jetzt Bedarfsausweis Wohngebäude online erstellen</a
|
|
||||||
>
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={BANW} target="blank"
|
|
||||||
>Jetzt Bedarfsausweis Gewerbe online anfragen</a
|
|
||||||
>
|
|
||||||
{:else if gebaeudetyp == "Mischgebäude" && anlass == "Aushangpflicht"}
|
|
||||||
<p>
|
|
||||||
Bei starkem Publikumsverkehr in Ihrem Mischgebäude benötigen Sie
|
|
||||||
einen <span class="hilite">Verbrauchsausweis</span> für
|
|
||||||
<span class="hilite">Gewerbegebäude</span> als öffentlichen Aushang.
|
|
||||||
</p>
|
|
||||||
<br />
|
|
||||||
<a class="btn btn-primary text-lg" href={VANW} target="blank"
|
|
||||||
>Jetzt Verbrauchsausweis Gewerbe online erstellen</a
|
|
||||||
> (Empfehlung)
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
</div>
|
||||||
<hr />
|
</div>
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<a
|
<style lang="scss">
|
||||||
href="https://online-energieausweis.org?aa=LOGO&recode=online-energieausweis.org"
|
|
||||||
title="IB Cornelsen"
|
@tailwind base;
|
||||||
>
|
@tailwind components;
|
||||||
<img
|
@tailwind utilities;
|
||||||
src="/images/header/logo-big.svg"
|
|
||||||
alt=""
|
#OEA_widget {
|
||||||
width="100px"
|
@apply bg-gray-100 p-4 shadow-xl;
|
||||||
/></a
|
|
||||||
>
|
#OEA_input { @apply space-y-2;
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
.OEA_zeile1, .OEA_zeile2 {
|
||||||
</div>
|
@apply flex flex-row space-x-2;
|
||||||
|
|
||||||
|
.OEA_item1, .OEA_item2, .OEA_item3, .OEA_item4, .OEA_item5 {
|
||||||
|
@apply w-full;
|
||||||
|
|
||||||
|
.OEA_title1, .OEA_title2 {
|
||||||
|
@apply font-bold text-lg text-white p-1.5 pl-2 rounded w-full;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.OEA_title1 {
|
||||||
|
@apply bg-secondary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.OEA_title2 {
|
||||||
|
@apply bg-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.OEA_auswahl1, .OEA_auswahl2 {
|
||||||
|
@apply w-full p-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
#OEA_result {
|
||||||
|
@apply rounded-lg text-gray-700;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.OEA_zeile3 {
|
||||||
|
@apply flex flex-row space-x-4 pt-6 items-center justify-center;
|
||||||
|
}
|
||||||
|
|
||||||
<style>
|
.OEA_item6 {
|
||||||
.hilite {
|
|
||||||
@apply font-bold;
|
.result {
|
||||||
}
|
@apply opacity-0 transition-opacity duration-1000 ease-in-out;
|
||||||
</style>
|
}
|
||||||
|
|
||||||
|
.result[style*="opacity: 1"] {
|
||||||
|
@apply opacity-100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
@@ -40,7 +40,7 @@
|
|||||||
<div class="saeule">
|
<div class="saeule">
|
||||||
<div class="blue-top">
|
<div class="blue-top">
|
||||||
<img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/>
|
<img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/>
|
||||||
<div class="name">Bedarfssausweis<br>Gewerbe</div>
|
<div class="name">Bedarfssausweis<br>Wohngebäude</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="white box">
|
<div class="white box">
|
||||||
|
|||||||
56
src/components/design/content/card-BA-widget.svelte
Normal file
56
src/components/design/content/card-BA-widget.svelte
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
<script>
|
||||||
|
import { PRICES } from "#lib/constants";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div id ="card-BA-promo" class="box card bg-white px-6 py-4 mb-5">
|
||||||
|
<div class="">
|
||||||
|
|
||||||
|
<h2>Bedarfssausweis Wohngebäude</h2>
|
||||||
|
<hr class="mb-2">
|
||||||
|
|
||||||
|
<div class="flex flex-row mb-2 mt-2 w-full items-end">
|
||||||
|
<div>
|
||||||
|
<img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Bedarfsausweis"/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.BedarfsausweisWohnen[0]}</span>€</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="white">
|
||||||
|
<div class="variante">fundiert (empfohlen)</div>
|
||||||
|
<div class="services"><div>Erfassung der Gebäudegeometrie.</div><div class="check">✔</div></div>
|
||||||
|
<div class="services"><div>Für Vermietung, Verkauf und Finanzierung.</div><div class="check">✔</div></div>
|
||||||
|
<div class="services"><div>Zulässig auch für unsanierte Objekte.</div><div class="check">✔</div></div>
|
||||||
|
<div class="services"><div>Kann als Grundlage für den ISFP dienen.</div><div class="check">✔</div></div>
|
||||||
|
<div class="services"><div>Objektivere Berechnungsmethode nach DIN 18599.</div><div class="check">✔</div></div>
|
||||||
|
</div>
|
||||||
|
<a href="./energieausweis-erstellen/bedarfsausweis-wohngebaeude/" id="link-BA-promo"
|
||||||
|
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||||
|
hover:bg-primary
|
||||||
|
" >jetzt online erstellen</a>
|
||||||
|
|
||||||
|
<a href="./energieausweis-erstellen/bedarfsausweis-wohngebaeude/" id="link-BA-promo"
|
||||||
|
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||||
|
hover:bg-primary
|
||||||
|
" >zur Produktübersicht</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
#card-BA-promo{
|
||||||
|
|
||||||
|
|
||||||
|
.white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
|
||||||
|
|
||||||
|
.variante{@apply w-fit text-black justify-self-end mr-3}
|
||||||
|
.variante{@apply text-2xl}
|
||||||
|
|
||||||
|
.services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
|
||||||
|
.services:not(:last-child){@apply border-b-[1px] border-gray-200}
|
||||||
|
.check{@apply justify-self-end font-bold text-green-700}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
56
src/components/design/content/card-BAG-widget.svelte
Normal file
56
src/components/design/content/card-BAG-widget.svelte
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
<script>
|
||||||
|
import { PRICES } from "#lib/constants";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div id ="card-BAG-promo" class="box card bg-white px-6 py-4 mb-5">
|
||||||
|
<div class="">
|
||||||
|
|
||||||
|
<h2>Bedarfsausweis Gewerbe</h2>
|
||||||
|
<hr class="mb-2">
|
||||||
|
|
||||||
|
<div class="flex flex-row mb-2 mt-2 w-full items-end">
|
||||||
|
<div>
|
||||||
|
<img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Bedarfsausweis"/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.BedarfsausweisGewerbe[0]}</span>€</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="white">
|
||||||
|
<div class="variante">fundiert (empfohlen)</div>
|
||||||
|
<div class="services"><div>Mehrzonenmodell nach DIN 18599.</div><div class="check">✔</div></div>
|
||||||
|
<div class="services"><div>Zulässig bei Vermietung oder Verkauf.</div><div class="check">✔</div></div>
|
||||||
|
<div class="services"><div>Grundlage für Sanierungsvarianten.</div><div class="check-no">✔</div></div>
|
||||||
|
<div class="services"><div>Objektiveres, besser vergleichbares Ergebnis.</div><div class="check-no">✔</div></div>
|
||||||
|
</div>
|
||||||
|
<a href="./energieausweis-erstellen/bedarfsausweis-gewerbe/" id="link-VA-promo"
|
||||||
|
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||||
|
hover:bg-primary
|
||||||
|
" >jetzt online erstellen</a>
|
||||||
|
|
||||||
|
<a href="./energieausweis-erstellen/bedarfsausweis-gewerbe/" id="link-VA-promo"
|
||||||
|
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||||
|
hover:bg-primary
|
||||||
|
" >zur Produktübersicht</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
#card-BAG-promo{
|
||||||
|
|
||||||
|
|
||||||
|
.white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
|
||||||
|
|
||||||
|
.variante{@apply w-fit text-black justify-self-end mr-3}
|
||||||
|
.variante{@apply text-2xl}
|
||||||
|
|
||||||
|
.services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
|
||||||
|
.services:not(:last-child){@apply border-b-[1px] border-gray-200}
|
||||||
|
.check{@apply justify-self-end font-bold text-green-700}
|
||||||
|
.check-no{@apply justify-self-end font-bold text-red-700}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
57
src/components/design/content/card-VA-widget.svelte
Normal file
57
src/components/design/content/card-VA-widget.svelte
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
<script>
|
||||||
|
import { PRICES } from "#lib/constants";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div id ="card-VA-promo" class="box card bg-white px-6 py-4 mb-5">
|
||||||
|
<div class="">
|
||||||
|
|
||||||
|
<h2>Verbrauchsausweis Wohngebäude</h2>
|
||||||
|
<hr class="mb-2">
|
||||||
|
|
||||||
|
<div class="flex flex-row mb-2 mt-2 w-full items-end">
|
||||||
|
<div>
|
||||||
|
<img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisWohnen[0]}</span>€</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="white">
|
||||||
|
<div class="variante">einfach</div>
|
||||||
|
<div class="services"><div>3 Jahresverbräuche der Heizung benötigt.</div><div class="check">✔</div></div>
|
||||||
|
<div class="services"><div>Zulässig bei Vermietung oder Verkauf.</div><div class="check">✔</div></div>
|
||||||
|
<div class="services"><div>Unzulässig bei unsanierten Gebäuden vor 1978.</div><div class="check-no">✘</div></div>
|
||||||
|
<div class="services"><div>Ungenau durch individuelles Heizverhalten.</div><div class="check-no">✘</div></div>
|
||||||
|
<div class="services"><div>Wird nicht immer bei den Banken akzeptiert.</div><div class="check-no">✘</div></div>
|
||||||
|
</div>
|
||||||
|
<a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-VA-promo"
|
||||||
|
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||||
|
hover:bg-primary
|
||||||
|
" >jetzt online erstellen</a>
|
||||||
|
|
||||||
|
<a href="./energieausweis-erstellen/verbrauchsausweis-wohngebaeude/" id="link-VA-promo"
|
||||||
|
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||||
|
hover:bg-primary
|
||||||
|
" >zur Produktübersicht</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
#card-VA-promo{
|
||||||
|
|
||||||
|
|
||||||
|
.white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
|
||||||
|
|
||||||
|
.variante{@apply w-fit text-black justify-self-end mr-3}
|
||||||
|
.variante{@apply text-2xl}
|
||||||
|
|
||||||
|
.services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
|
||||||
|
.services:not(:last-child){@apply border-b-[1px] border-gray-200}
|
||||||
|
.check{@apply justify-self-end font-bold text-green-700}
|
||||||
|
.check-no{@apply justify-self-end font-bold text-red-700}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
56
src/components/design/content/card-VAG-widget.svelte
Normal file
56
src/components/design/content/card-VAG-widget.svelte
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
<script>
|
||||||
|
import { PRICES } from "#lib/constants";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div id ="card-VAG-promo" class="box card bg-white px-6 py-4 mb-5">
|
||||||
|
<div class="">
|
||||||
|
|
||||||
|
<h2>Verbrauchsausweis Gewerbe</h2>
|
||||||
|
<hr class="mb-2">
|
||||||
|
|
||||||
|
<div class="flex flex-row mb-2 mt-2 w-full items-end">
|
||||||
|
<div>
|
||||||
|
<img class="w-[100%] !min-w-[100px]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Verbrauchsausweis"/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="promo tracking-tighter text-2xl text-gray-700 pl-3">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisGewerbe[0]}</span>€</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="white">
|
||||||
|
<div class="variante">einfach</div>
|
||||||
|
<div class="services"><div>3 Jahresverbräuche von Heizung Gebäudestrom nötig.</div><div class="check">✔</div></div>
|
||||||
|
<div class="services"><div>Zulässig bei Vermietung oder Verkauf.</div><div class="check">✔</div></div>
|
||||||
|
<div class="services"><div>Für bauliche und energetische Maßnahmen ungeeignet.</div><div class="check-no">✘</div></div>
|
||||||
|
<div class="services"><div>Wird nicht immer bei den Banken akzeptiert.</div><div class="check-no">✘</div></div>
|
||||||
|
</div>
|
||||||
|
<a href="./energieausweis-erstellen/verbrauchsausweis-gewerbe/" id="link-VA-promo"
|
||||||
|
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-secondary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||||
|
hover:bg-primary
|
||||||
|
" >jetzt online erstellen</a>
|
||||||
|
|
||||||
|
<a href="./energieausweis-erstellen/verbrauchsausweis-gewerbe/" id="link-VA-promo"
|
||||||
|
class=" w-[90%] justify-self-center text-center text-white font-[700] bg-primary rounded-md px-3 py-1 mt-2 no-underline text-[1rem]
|
||||||
|
hover:bg-primary
|
||||||
|
" >zur Produktübersicht</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
#card-VAG-promo{
|
||||||
|
|
||||||
|
|
||||||
|
.white{@apply text-center text-black p-2 grid grid-rows-subgrid row-span-6}
|
||||||
|
|
||||||
|
.variante{@apply w-fit text-black justify-self-end mr-3}
|
||||||
|
.variante{@apply text-2xl}
|
||||||
|
|
||||||
|
.services{@apply text-start py-2 grid grid-cols-[1fr_minmax(10px,50px)]}
|
||||||
|
.services:not(:last-child){@apply border-b-[1px] border-gray-200}
|
||||||
|
.check{@apply justify-self-end font-bold text-green-700}
|
||||||
|
.check-no{@apply justify-self-end font-bold text-red-700}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
91
src/components/design/content/faq.svelte
Normal file
91
src/components/design/content/faq.svelte
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
|
||||||
|
<div class="mt-12 m-auto w-[90%] relative">
|
||||||
|
<div class="flex-row">
|
||||||
|
|
||||||
|
<!-- Allgemeines -->
|
||||||
|
<div class="mb-6 border-b-[1px] border-gray-200 pb-6">
|
||||||
|
<h2 class="text-2xl font-semibold text-gray-700 mb-4">1. Allgemeines zur Berechnungsmethode und Norm DIN 18599</h2>
|
||||||
|
<ul class="list-disc list-inside text-gray-600 text-xl space-y-2">
|
||||||
|
<li>Warum hat sich die Energieeffizienzklasse meines Gebäudes verschlechtert?</li>
|
||||||
|
<li>Was ist der Unterschied zwischen der alten und der neuen Berechnungsmethode?</li>
|
||||||
|
<li>Warum zeigt das Online-System einen anderen Wert als der zugesandte Energieausweis?</li>
|
||||||
|
<li>Seit wann gilt die neue Norm (DIN 18599)?</li>
|
||||||
|
<li>Werden alle Energieausweise durch die neue Norm schlechter?</li>
|
||||||
|
<li>Welche Berechnungsgrundlage wird für den Bedarfsausweis verwendet?</li>
|
||||||
|
<li>Warum wurden frühere Energieausweise schneller ausgestellt?</li>
|
||||||
|
<li>Was bedeutet DIN 18599, und warum ist sie wichtig?</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Erstellung und Bearbeitung -->
|
||||||
|
<div class="mb-6 border-b-[1px] border-gray-200 pb-6">
|
||||||
|
<h2 class="text-2xl font-semibold text-gray-700 mb-4">2. Erstellung und Bearbeitung von Energieausweisen</h2>
|
||||||
|
<ul class="list-disc list-inside text-gray-600 text-xl space-y-2">
|
||||||
|
<li>Warum dauert die Ausstellung meines Bedarfsausweises so lange?</li>
|
||||||
|
<li>Wie lange dauert die Erstellung eines Bedarfsausweises normalerweise?</li>
|
||||||
|
<li>Wie lange dauert die Überprüfung und Freigabe meines Energieausweises nach Datenkorrektur?</li>
|
||||||
|
<li>Was kann ich tun, wenn ich den Energieausweis dringend benötige?</li>
|
||||||
|
<li>Kann ich den Energieausweis beschleunigen lassen?</li>
|
||||||
|
<li>Wie werde ich über den Status meines Energieausweises informiert?</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Eingabefehler und Korrekturen -->
|
||||||
|
<div class="mb-6 border-b-[1px] border-gray-200 pb-6">
|
||||||
|
<h2 class="text-2xl font-semibold text-gray-700 mb-4">3. Eingabefehler und Korrekturen</h2>
|
||||||
|
<ul class="list-disc list-inside text-gray-600 text-xl space-y-2">
|
||||||
|
<li>Ich habe die Grundflächen korrigiert, aber der Energieausweis zeigt noch falsche Werte an. Was könnte das Problem sein?</li>
|
||||||
|
<li>Wie kann ich die Daten im System speichern?</li>
|
||||||
|
<li>Warum werden in der Berechnung einige Werte nicht berücksichtigt?</li>
|
||||||
|
<li>Was passiert, wenn ich versehentlich Daten von einem anderen Objekt eingebe?</li>
|
||||||
|
<li>Ich habe mehrere Objekte im System. Wie stelle ich sicher, dass ich das richtige bearbeite?</li>
|
||||||
|
<li>Was tun, wenn das Volumen oder die Geometrie nicht korrekt berechnet wird?</li>
|
||||||
|
<li>Kann ich die Daten nachträglich korrigieren?</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Anforderungen an Unterlagen und Fotos -->
|
||||||
|
<div class="mb-6 border-b-[1px] border-gray-200 pb-6">
|
||||||
|
<h2 class="text-2xl font-semibold text-gray-700 mb-4">4. Anforderungen an Unterlagen und Fotos</h2>
|
||||||
|
<ul class="list-disc list-inside text-gray-600 text-xl space-y-2">
|
||||||
|
<li>Welche Fotos werden für den Energieausweis benötigt?</li>
|
||||||
|
<li>Kann ich Fotos nachträglich hochladen?</li>
|
||||||
|
<li>In welchem Format sollen die Pläne bereitgestellt werden?</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Unterstützung und Kontakt -->
|
||||||
|
<div class="mb-6 border-b-[1px] border-gray-200 pb-6">
|
||||||
|
<h2 class="text-2xl font-semibold text-gray-700 mb-4">5. Unterstützung und Kontakt</h2>
|
||||||
|
<ul class="list-disc list-inside text-gray-600 text-xl space-y-2">
|
||||||
|
<li>Was muss ich tun, wenn ich die Berechnungen nicht verstehe?</li>
|
||||||
|
<li>Ich benötige Unterstützung bei der Eingabe. Wer kann mir helfen?</li>
|
||||||
|
<li>Was sollte ich tun, wenn ich regelmäßig Energieausweise benötige?</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Energieverbrauch und Wärmepumpen -->
|
||||||
|
<div class="mb-6 border-b-[1px] border-gray-200 pb-6">
|
||||||
|
<h2 class="text-2xl font-semibold text-gray-700 mb-4">6. Energieverbrauch und Wärmepumpen</h2>
|
||||||
|
<ul class="list-disc list-inside text-gray-600 text-xl space-y-2">
|
||||||
|
<li>Wie wird der Stromverbrauch bei einer Wärmepumpe im Energieausweis berücksichtigt?</li>
|
||||||
|
<li>Wie schätze ich den Haushaltsstromverbrauch?</li>
|
||||||
|
<li>Was, wenn mein Stromverbrauch höher ist?</li>
|
||||||
|
<li>Wie wirkt sich Warmwasser auf den Stromverbrauch aus?</li>
|
||||||
|
<li>Was tun, wenn ich keine separaten Zähler habe?</li>
|
||||||
|
<li>Kann ich diese Anpassungen selbst vornehmen?</li>
|
||||||
|
<li>Warum zeigt das System manchmal Warnhinweise an?</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Versand und Dokumentation -->
|
||||||
|
<div class="mb-6 border-b-[1px] border-gray-200 pb-6">
|
||||||
|
<h2 class="text-2xl font-semibold text-gray-700 mb-4">7. Versand und Dokumentation</h2>
|
||||||
|
<ul class="list-disc list-inside text-gray-600 text-xl space-y-2">
|
||||||
|
<li>Kann ich meinen Energieausweis erneut zugesandt bekommen?</li>
|
||||||
|
<li>Was passiert, wenn der Energieausweis nicht rechtzeitig fertiggestellt wird?</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -4,73 +4,64 @@ import Login from "#sidebarCards/card-login.svelte";
|
|||||||
|
|
||||||
<header>
|
<header>
|
||||||
|
|
||||||
<div class="max-w-[1920px] w-full grid relative bg-white
|
<div class="grid relative bg-white items-center gap-4 pt-4 px-0
|
||||||
|
|
||||||
sm:grid-cols-[minmax(320px,auto)] sm:pl-6 sm:pr-3 sm:py-2
|
grid-cols-1
|
||||||
md:grid-cols-[minmax(320px,auto)] md:pl-6 md:pr-3 md:py-2
|
sm:grid-cols-1
|
||||||
|
md:grid-cols-1
|
||||||
|
|
||||||
lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-3 lg:px-5 lg:py-4
|
lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-3 lg:px-4 lg:py-4
|
||||||
xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-4 xl:px-5 xl:py-4
|
xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-4 xl:px-6 xl:py-4
|
||||||
2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-5 2xl:px-5 2xl:py-4">
|
2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-5 2xl:px-6 2xl:py-4">
|
||||||
|
|
||||||
|
<div class="justify-self-center xs:justify-self-start">
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 px-2 gap-2 gap-y-1
|
||||||
|
xs:grid-cols-[max-content,1fr] xs:gap-x-2 xs:px-4
|
||||||
|
md:gap-y-4
|
||||||
|
lg:px-0 lg:gap-x-4">
|
||||||
|
|
||||||
<!---
|
<div class="self-start justify-self-start">
|
||||||
lg:bg-[url('/images/header/header-bg.jpg')] lg:bg-cover
|
<a href="/">
|
||||||
|
<img class="w-full
|
||||||
<h2 class="text-secondary font-normal absolute
|
xs:max-w-[64px]
|
||||||
top-1 right-2 text-[1.1rem]
|
sm:max-w-[64px]
|
||||||
xs:top-[1.5rem] xs:right-6 xs:text-[1.55rem]
|
md:max-w-[64px] md:ml-6
|
||||||
|
lg:max-w-[64px] lg:ml-0
|
||||||
md:top-[1.25rem] md:right-4 md:text-[1.1rem]
|
xl:max-w-[94px] xl:ml-0
|
||||||
xl:top-[1.5rem] xl:right-9 xl:text-[1.4rem]">
|
"
|
||||||
Energieausweis online erstellen
|
src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
|
||||||
</h2>
|
</a>
|
||||||
|
</div>
|
||||||
<h2 class="text-primary font-normal absolute
|
|
||||||
top-[1.6rem] right-2 text-[0.85rem]
|
|
||||||
xs:top-[3.3rem] xs:right-6 xs:text-[1.2rem]
|
|
||||||
|
|
||||||
md:top-[2.5rem] md:right-4 md:text-[0.9rem]
|
|
||||||
xl:top-[3.15rem] xl:right-9 xl:text-[1.1rem]">
|
|
||||||
Energieausweise nach aktuellem GEG
|
|
||||||
</h2> -->
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="self-center justify-self-center md:justify-self-start xs:mt-[20px] md:mt-[18px]">
|
||||||
|
<div class="text-secondary justify-self-center
|
||||||
|
xs:[font-size:_clamp(15px,5vw,36px)] xs:justify-self-start xs:leading-[36px]
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="w-full justify-self-center lg:w-fit lg:self-stretch lg:justify-self-start grid grid-cols-[auto_auto] gap-6 pt-[0px]">
|
|
||||||
|
|
||||||
<div class="self-start justify-self-start">
|
|
||||||
|
|
||||||
<a href="/index_1">
|
|
||||||
<img class="w-full max-w-[75px]"
|
|
||||||
src="/images/header/logo-IBC-big.svg" alt="IBCornelsen-Logo"/>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="self-stretch justify-self-start">
|
|
||||||
<div class="text-secondary
|
|
||||||
lg:[font-size:_clamp(15px,3vw,26px)]
|
lg:[font-size:_clamp(15px,3vw,26px)]
|
||||||
lg:leading-[2rem]
|
lg:leading-[2rem]
|
||||||
xl:[font-size:_clamp(15px,3vw,36px)]
|
xl:[font-size:_clamp(15px,3vw,36px)]
|
||||||
xl:leading-[4.5rem] pt-[0px]">
|
xl:leading-[4.5rem] pt-[0px]">
|
||||||
Energieausweis online erstellen</div>
|
Energieausweis online erstellen</div>
|
||||||
<div class="text-primary
|
<div class="text-primary justify-self-center
|
||||||
|
xs:[font-size:_clamp(15px,4vw,28px)] xs:justify-self-start xs:leading-[20px]
|
||||||
|
|
||||||
lg:[font-size:_clamp(15px,3vw,20px)]
|
lg:[font-size:_clamp(15px,3vw,20px)]
|
||||||
lg:leading-[2rem]
|
lg:leading-[2rem]
|
||||||
xl:[font-size:_clamp(15px,3vw,24px)]
|
xl:[font-size:_clamp(15px,3vw,24px)]
|
||||||
xl:leading-[0.5rem] pl-[1px]">
|
xl:leading-[0.5rem]">
|
||||||
Energieausweise nach aktuellem GEG</div>
|
Energieausweise nach aktuellem GEG</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="w-full justify-self-center">
|
||||||
|
<Login client:load />
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="w-[450px] self-stretch box ring-2 ring-gray-500/50 px-6 py-2">
|
|
||||||
<Login client:load />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
|
||||||
import { loginClient } from "#lib/login";
|
import { loginClient } from "#lib/login";
|
||||||
import CrossCircled from "radix-svelte-icons/src/lib/icons/CrossCircled.svelte";
|
import CrossCircled from "radix-svelte-icons/src/lib/icons/CrossCircled.svelte";
|
||||||
import { fade } from "svelte/transition";
|
import { fade } from "svelte/transition";
|
||||||
@@ -22,28 +23,26 @@
|
|||||||
let errorHidden = true;
|
let errorHidden = true;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div id="card-login" class="rounded-none lg:rounded-lg lg:card lg:box bg-black/10 md:bg-black/5 lg:ring-2 border-t-2 lg:border-none border-gray-500/50 ring-gray-500/50 xs:px-2 md:px-4 py-2" >
|
||||||
id="card-login">
|
|
||||||
|
|
||||||
<div>
|
|
||||||
|
|
||||||
|
|
||||||
<form on:submit={login}>
|
<form on:submit={login}>
|
||||||
<div class="grid grid-cols-[1fr_1fr] gap-2">
|
<div class="grid grid-cols-[1fr] xs:grid-cols-[2fr_2fr_1fr] gap-2">
|
||||||
<input
|
<input
|
||||||
class="my-1 rounded-md px-2 py-1 ring-1 w-full"
|
class="my-1 rounded-md px-2 py-1 w-full"
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="nutzer@email.com"
|
placeholder="nutzer@email.com"
|
||||||
|
autocomplete="off"
|
||||||
name="email"
|
name="email"
|
||||||
bind:value={email}
|
bind:value={email}
|
||||||
on:focus={() => (errorHidden = true)}
|
on:focus={() => (errorHidden = true)}
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
<input
|
<input
|
||||||
class="my-1 rounded-md px-2 py-1 ring-1 w-full"
|
class="my-1 rounded-md px-2 py-1 w-full"
|
||||||
type="password"
|
type="password"
|
||||||
minlength="8"
|
minlength="8"
|
||||||
placeholder="********"
|
placeholder="********"
|
||||||
|
autocomplete="off"
|
||||||
name="passwort"
|
name="passwort"
|
||||||
bind:value={passwort}
|
bind:value={passwort}
|
||||||
on:focus={() => (errorHidden = true)}
|
on:focus={() => (errorHidden = true)}
|
||||||
@@ -55,9 +54,15 @@
|
|||||||
<span class="font-semibold">Das hat leider nicht geklappt, haben sie ihr Passwort und ihre Email Adresse richtig eingegeben?</span>
|
<span class="font-semibold">Das hat leider nicht geklappt, haben sie ihr Passwort und ihre Email Adresse richtig eingegeben?</span>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
<button class="button self-center" type="submit">login</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-[3fr_2fr] gap-2">
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-[3fr_2fr] gap-2">
|
|
||||||
|
|
||||||
<div class="w-full text-left self-center">
|
<div class="w-full text-left self-center">
|
||||||
<a
|
<a
|
||||||
@@ -70,16 +75,11 @@
|
|||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button class="my-1 rounded-md px-2 py-1 ring-1 w-[50%] bg-secondary justify-self-end text-white font-bold hover:bg-primary" type="submit">Einloggen</button>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="postcss">
|
<style lang="postcss">
|
||||||
|
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
<script>
|
<script>
|
||||||
|
|
||||||
let innerWidth
|
let innerWidth
|
||||||
|
|
||||||
function dropdown(){
|
function dropdown(){
|
||||||
|
|
||||||
const innerWidth = window.innerWidth;
|
const innerWidth = window.innerWidth;
|
||||||
console.log(innerWidth);
|
|
||||||
if(innerWidth<1024){
|
if(innerWidth<1024){
|
||||||
|
|
||||||
const check_element = this.lastChild;
|
const check_element = this.lastChild;
|
||||||
@@ -12,8 +12,6 @@ if(innerWidth<1024){
|
|||||||
const rotate_list = document.querySelectorAll(".dd-symbol-clone");
|
const rotate_list = document.querySelectorAll(".dd-symbol-clone");
|
||||||
const rotate_element = this.childNodes[0].children[0];
|
const rotate_element = this.childNodes[0].children[0];
|
||||||
|
|
||||||
console.log(rotate_element);
|
|
||||||
|
|
||||||
var first_check = check_element.classList.contains("show-dropdown-content");
|
var first_check = check_element.classList.contains("show-dropdown-content");
|
||||||
const nodeList = document.querySelectorAll(".dropdown-content");
|
const nodeList = document.querySelectorAll(".dropdown-content");
|
||||||
|
|
||||||
@@ -41,20 +39,16 @@ if(innerWidth<1024){
|
|||||||
|
|
||||||
function hover(){
|
function hover(){
|
||||||
const innerWidth = window.innerWidth;
|
const innerWidth = window.innerWidth;
|
||||||
console.log(innerWidth);
|
|
||||||
if(innerWidth>1024){
|
if(innerWidth>1024){
|
||||||
const check_element = this.firstChild.lastChild;
|
const check_element = this.firstChild.lastChild;
|
||||||
console.log(check_element);
|
|
||||||
check_element.style.visibility = "visible";
|
check_element.style.visibility = "visible";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function hoverout(){
|
function hoverout(){
|
||||||
const innerWidth = window.innerWidth;
|
const innerWidth = window.innerWidth;
|
||||||
console.log(innerWidth);
|
|
||||||
if(innerWidth>1024){
|
if(innerWidth>1024){
|
||||||
const check_element = this.firstChild.lastChild;
|
const check_element = this.firstChild.lastChild;
|
||||||
console.log(check_element);
|
|
||||||
check_element.style.visibility = "hidden";
|
check_element.style.visibility = "hidden";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -85,7 +79,7 @@ if(innerWidth>1024){
|
|||||||
|
|
||||||
|
|
||||||
<div class="hamburger_menu py-1 px-2 bg-secondary
|
<div class="hamburger_menu py-1 px-2 bg-secondary
|
||||||
xs:px-6
|
xs:px-4
|
||||||
lg:hidden">
|
lg:hidden">
|
||||||
|
|
||||||
<div id="hamburger" on:click={hamburger} on:keydown={hamburger} class="cursor-pointer">
|
<div id="hamburger" on:click={hamburger} on:keydown={hamburger} class="cursor-pointer">
|
||||||
@@ -97,19 +91,19 @@ if(innerWidth>1024){
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<nav id="card-navigation" class="card-navigation hidden box ring-2 ring-primary/50 rounded-tr-none lg:block">
|
<nav id="card-navigation" class="card-navigation hidden box ring-0 md:ring-2 ring-primary/50 rounded-tr-none lg:block">
|
||||||
|
|
||||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||||
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
|
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
|
||||||
{#if innerWidth > 1023}
|
{#if innerWidth > 1023}
|
||||||
<a href="{'#'}" class="nav-element-child lg:rounded-t-lg xl:rounded-t-xl " >Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
|
<a href={undefined} class="nav-element-child lg:rounded-t-lg xl:rounded-t-xl " >Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
|
||||||
{:else}
|
{:else}
|
||||||
<a href={undefined} class="nav-element-child xl:rounded-t-[.75rem]">Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
|
<a href={undefined} class="nav-element-child xl:rounded-t-[.75rem]">Energieausweis erstellen<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<ul class="dropdown-content energieasusweis-erstellen">
|
<ul class="dropdown-content energieasusweis-erstellen">
|
||||||
{#if innerWidth < 1023}
|
{#if innerWidth < 1023}
|
||||||
<li><a href="{'#'}">Energieausweis erstellen</a></li>
|
<li><a href="/energieausweis-erstellen">Energieausweis erstellen</a></li>
|
||||||
{/if}
|
{/if}
|
||||||
<li><a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/">Verbrauchsausweis erstellen</a></li>
|
<li><a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/">Verbrauchsausweis erstellen</a></li>
|
||||||
<li><a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/">Bedarfsausweis erstellen</a></li>
|
<li><a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/">Bedarfsausweis erstellen</a></li>
|
||||||
@@ -165,12 +159,29 @@ if(innerWidth>1024){
|
|||||||
{#if innerWidth < 1023}
|
{#if innerWidth < 1023}
|
||||||
<li><a href="index">Energieausweis</a></li>
|
<li><a href="index">Energieausweis</a></li>
|
||||||
{/if}
|
{/if}
|
||||||
<li class=""><a href="index">Energieausweis Pflicht</a></li>
|
<li><a href="index">Energieausweis Pflicht</a></li>
|
||||||
<li class=""><a href="index">Energieausweis Kosten</a></li>
|
<li><a href="index">Energieausweis Kosten</a></li>
|
||||||
<li class=""><a href="index">Energieausweis Haus</a></li>
|
<li><a href="index">Energieausweis Haus</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||||
|
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
|
||||||
|
<a href="{'/faq'}" class="nav-element-child">FAQ Energieausweise<span class="dd-symbol-clone">❯</span><span class="dd-symbol">❯</span></a>
|
||||||
|
<ul class="dropdown-content faq">
|
||||||
|
{#if innerWidth < 1023}
|
||||||
|
<li><a href="/faq">FAQ Energieausweise</a></li>
|
||||||
|
{/if}
|
||||||
|
<li><a href="/faq/allgemeines-18599/">Allgemeines zur Berechnungsmethode und Norm DIN 18599</a></li>
|
||||||
|
<li><a href="/faq/erstellung-energieausweise/">Erstellung und Bearbeitung von Energieausweisen</a></li>
|
||||||
|
<li><a href="/faq/formulareingabe/">Eingabefehler und Korrekturen</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nav-element">
|
||||||
|
<a class="no-dropdown nav-element-child" href="/glossar">Glossar</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="nav-element">
|
<div class="nav-element">
|
||||||
<a class="no-dropdown nav-element-child" href="/enev-zusammenfassung">EnEV Zusammenfassung - Archiv</a>
|
<a class="no-dropdown nav-element-child" href="/enev-zusammenfassung">EnEV Zusammenfassung - Archiv</a>
|
||||||
</div>
|
</div>
|
||||||
@@ -180,9 +191,6 @@ if(innerWidth>1024){
|
|||||||
<div class="nav-element">
|
<div class="nav-element">
|
||||||
<a class="no-dropdown nav-element-child" href="/kundenbewertungen">Kundenbewertungen</a>
|
<a class="no-dropdown nav-element-child" href="/kundenbewertungen">Kundenbewertungen</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="nav-element">
|
|
||||||
<a class="no-dropdown nav-element-child" href="/faq">FAQ</a>
|
|
||||||
</div>
|
|
||||||
<div class="nav-element">
|
<div class="nav-element">
|
||||||
<a class="no-dropdown nav-element-child lg:!rounded-b-lg xl:!rounded-b-xl"href="/fuer-entwickler">Für Entwickler</a>
|
<a class="no-dropdown nav-element-child lg:!rounded-b-lg xl:!rounded-b-xl"href="/fuer-entwickler">Für Entwickler</a>
|
||||||
</div>
|
</div>
|
||||||
@@ -191,7 +199,9 @@ if(innerWidth>1024){
|
|||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
<style>
|
<style lang="scss">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.dd-symbol::before{
|
.dd-symbol::before{
|
||||||
content:'❯';
|
content:'❯';
|
||||||
|
|||||||
@@ -6,27 +6,27 @@
|
|||||||
class=" box card hidden bg-white px-6 py-4 mt-5
|
class=" box card hidden bg-white px-6 py-4 mt-5
|
||||||
lg:block">
|
lg:block">
|
||||||
|
|
||||||
<div class="grid grid-cols-[max-content]">
|
<div class="">
|
||||||
|
|
||||||
<h2>Was wird der Energieausweis kosten?</h2>
|
<h2>Was wird der Energieausweis kosten?</h2>
|
||||||
<hr class="mb-4 bg-primary h-[2px]">
|
<hr class="mb-4 bg-primary h-[2px]">
|
||||||
<p>Verbrauchsausweis Wohngebäude</p>
|
<p>Verbrauchsausweis Wohngebäude</p>
|
||||||
<p>ab {PRICES.VerbrauchsausweisWohnen[0]}€ inkl. MwSt.</p>
|
<p>ab {PRICES.VerbrauchsausweisWohnen[0]}€ inkl. MwSt.</p>
|
||||||
<hr>
|
<hr>
|
||||||
<p>Bedarfsausweis Wohngebäude</p>
|
<p>Bedarfsausweis Wohngebäude</p>
|
||||||
<p>ab {PRICES.BedarfsausweisWohnen[0]}€ inkl. MwSt.</p>
|
<p>ab {PRICES.BedarfsausweisWohnen[0]}€ inkl. MwSt.</p>
|
||||||
<hr>
|
<hr>
|
||||||
<p>Verbrauchsausweis Gewerbe</p>
|
<p>Verbrauchsausweis Gewerbe</p>
|
||||||
<p>ab {PRICES.VerbrauchsausweisGewerbe[0]}€ inkl. MwSt.</p>
|
<p>ab {PRICES.VerbrauchsausweisGewerbe[0]}€ inkl. MwSt.</p>
|
||||||
<hr>
|
<hr>
|
||||||
<p>Bedarfsausweis Gewerbe</p>
|
<p>Bedarfsausweis Gewerbe</p>
|
||||||
<p>ab 300€ inkl. MwSt.</p>
|
<p>ab 300€ inkl. MwSt.</p>
|
||||||
<hr>
|
<hr>
|
||||||
<p>GEG-Nachweis Wohngebäude</p>
|
<p>GEG-Nachweis Wohngebäude</p>
|
||||||
<p>ab 400€ inkl. MwSt.</p>
|
<p>ab 400€ inkl. MwSt.</p>
|
||||||
<hr>
|
<hr>
|
||||||
<p>GEG-Nachweis Gewerbe</p>
|
<p>GEG-Nachweis Gewerbe</p>
|
||||||
<p>ab 450€ inkl. MwSt.</p>
|
<p>ab 450€ inkl. MwSt.</p>
|
||||||
<hr class="mt-2">
|
<hr class="mt-2">
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import Preistabelle from "#sidebarCards/card-price-info.svelte";
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="flex flex-col grow">
|
<div class="">
|
||||||
|
|
||||||
|
|
||||||
<Navigation client:load />
|
<Navigation client:load />
|
||||||
|
|||||||
31
src/components/labels/BereichLabel.svelte
Normal file
31
src/components/labels/BereichLabel.svelte
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
|
||||||
|
export let title: string = "";
|
||||||
|
export let bereich: string;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="bereichs-label">
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="postcss">
|
||||||
|
|
||||||
|
.bereichs-label{ }
|
||||||
|
label{@apply [font-size:_clamp(15px,1vw,36px)]}
|
||||||
|
|
||||||
|
</style>
|
||||||
34
src/components/labels/HelpLabel.svelte
Normal file
34
src/components/labels/HelpLabel.svelte
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let tooltip: string = "";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
13
src/components/labels/InputLabel.svelte
Normal file
13
src/components/labels/InputLabel.svelte
Normal 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
5
src/components/labels/test.svelte
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<script>
|
||||||
|
|
||||||
|
console.log('JOMKIPUR')
|
||||||
|
|
||||||
|
</script>
|
||||||
@@ -61,36 +61,37 @@ const { title } = Astro.props;
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<container class="w-full max-w-[1920px]">
|
|
||||||
|
|
||||||
<Header />
|
<Header />
|
||||||
|
|
||||||
<main
|
<main
|
||||||
class="w-full p-0 grid
|
class="w-full p-0 grid
|
||||||
sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:p-1
|
xs:grid-cols-[minmax(1fr,1fr)] xs:gap-1 xs:p-0
|
||||||
md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:p-2
|
sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:p-0
|
||||||
lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-3
|
md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:p-0
|
||||||
xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-4
|
lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-4
|
||||||
2xl:grid-cols-[minmax(350px,350px)1fr] 2xl:gap-5 2xl:p-5
|
xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-6
|
||||||
|
2xl:grid-cols-[minmax(350px,350px)1fr] 2xl:gap-5 2xl:p-6
|
||||||
">
|
">
|
||||||
|
|
||||||
<SidebarLeft />
|
<SidebarLeft />
|
||||||
|
|
||||||
<article class="box grow rounded-tl-none">
|
<article class="box rounded-tl-none">
|
||||||
<slot />
|
<slot />
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
<NotificationWrapper client:load />
|
<NotificationWrapper client:load />
|
||||||
</container>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
<style is:global>
|
<style is:global lang="postcss">
|
||||||
body {
|
body {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
width:100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
article {
|
article {
|
||||||
@@ -125,21 +126,16 @@ article p {
|
|||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
article {
|
|
||||||
@apply relative w-full rounded-lg border shadow-md px-6 py-8 bg-white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
@apply px-8 py-2 bg-secondary rounded-lg text-white font-medium hover:shadow-lg transition-all hover:underline active:bg-blue-900 text-center;
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
@apply text-xl font-medium mt-6 mb-4;
|
@apply text-xl font-medium mt-6 mb-4;
|
||||||
}
|
}
|
||||||
|
|
||||||
input, select, textarea, .input {
|
input, select, textarea, .input {
|
||||||
@apply py-1.5 px-2.5 rounded-lg w-full outline-none text-base text-slate-800 border bg-white;
|
@apply py-1.5 px-2.5 w-full outline-none text-base text-slate-800 border bg-white;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:disabled, input:read-only, select:disabled {
|
input:disabled, input:read-only, select:disabled {
|
||||||
|
|||||||
@@ -31,22 +31,22 @@ const { title } = Astro.props;
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<container class="w-full max-w-[1920px]">
|
|
||||||
|
|
||||||
<Header />
|
<Header />
|
||||||
|
|
||||||
<main
|
<main
|
||||||
class="w-full p-0 grid
|
class="w-full p-0 grid
|
||||||
sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:px-0
|
xs:grid-cols-[minmax(1fr,1fr)] xs:gap-1 xs:p-0
|
||||||
md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:px-0
|
sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:p-0
|
||||||
lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-3
|
md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:p-0
|
||||||
xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-4
|
lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-4
|
||||||
2xl:grid-cols-[minmax(350px,350px)1fr_minmax(350px,350px)] 2xl:gap-5 2xl:p-5
|
xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-6
|
||||||
|
2xl:grid-cols-[minmax(350px,350px)1fr_minmax(350px,350px)] 2xl:gap-5 2xl:p-6
|
||||||
">
|
">
|
||||||
|
|
||||||
<SidebarLeft />
|
<SidebarLeft />
|
||||||
|
|
||||||
<article class="box grow rounded-tl-none">
|
<article class="box rounded-tl-none p-6">
|
||||||
<slot />
|
<slot />
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
@@ -56,7 +56,6 @@ const { title } = Astro.props;
|
|||||||
|
|
||||||
<Footer />
|
<Footer />
|
||||||
<NotificationWrapper client:load />
|
<NotificationWrapper client:load />
|
||||||
</container>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
83
src/layouts/cadLayout.astro
Normal file
83
src/layouts/cadLayout.astro
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
---
|
||||||
|
import "../style/global.css";
|
||||||
|
import "../../svelte-dialogs.config"
|
||||||
|
import Header from "#header/Header.astro";
|
||||||
|
import Footer from "#footer/Footer.astro";
|
||||||
|
import SidebarLeft from "#sidebarLeft/SidebarLeft.astro";
|
||||||
|
import SidebarRight from "#sidebarRight/SidebarRight.astro";
|
||||||
|
import { NotificationWrapper } from "@ibcornelsen/ui";
|
||||||
|
|
||||||
|
export interface Props {
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { title } = Astro.props;
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Simple CAD Program - Thick Black Lines</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
cursor: crosshair;
|
||||||
|
}
|
||||||
|
.controls {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
.controls button {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.log {
|
||||||
|
margin: 10px;
|
||||||
|
width: 800px;
|
||||||
|
max-height: 150px;
|
||||||
|
overflow-y: auto;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
padding: 10px;
|
||||||
|
background: #f9f9f9;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<container class="w-full max-w-[1920px]">
|
||||||
|
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
<main
|
||||||
|
class="w-full p-0 grid
|
||||||
|
sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:px-0
|
||||||
|
md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:px-0
|
||||||
|
lg:grid-cols-[minmax(250px,250px)1fr] lg:gap-3 lg:p-3
|
||||||
|
xl:grid-cols-[minmax(350px,350px)1fr] xl:gap-4 xl:p-4
|
||||||
|
2xl:grid-cols-[minmax(350px,350px)1fr_minmax(350px,350px)] 2xl:gap-5 2xl:p-5
|
||||||
|
">
|
||||||
|
|
||||||
|
<SidebarLeft />
|
||||||
|
|
||||||
|
<article class="box grow rounded-tl-none">
|
||||||
|
<slot />
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<SidebarRight />
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
<NotificationWrapper client:load />
|
||||||
|
</container>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -10,9 +10,9 @@ export const API_UID_COOKIE_NAME = "uid";
|
|||||||
export const PRICES: Record<Enums.Ausweisart, [number, number, number]> = {
|
export const PRICES: Record<Enums.Ausweisart, [number, number, number]> = {
|
||||||
// per E-Mail , inkl.Beratung, offline
|
// per E-Mail , inkl.Beratung, offline
|
||||||
BedarfsausweisWohnen: [135, 145, 290],
|
BedarfsausweisWohnen: [135, 145, 290],
|
||||||
VerbrauchsausweisWohnen: [55, 75, 180],
|
VerbrauchsausweisWohnen: [65, 75, 180],
|
||||||
VerbrauchsausweisGewerbe: [95, 115, 360],
|
VerbrauchsausweisGewerbe: [95, 115, 360],
|
||||||
BedarfsausweisGewerbe: [400, 0, 0]
|
BedarfsausweisGewerbe: [500, 0, 0]
|
||||||
};
|
};
|
||||||
|
|
||||||
export const SERVICES: Record<Enums.Ausweisart, Record<Enums.Service, number>> = {
|
export const SERVICES: Record<Enums.Ausweisart, Record<Enums.Service, number>> = {
|
||||||
@@ -34,4 +34,4 @@ export const SERVICES: Record<Enums.Ausweisart, Record<Enums.Service, number>> =
|
|||||||
SameDay: 29,
|
SameDay: 29,
|
||||||
Telefonberatung: 25,
|
Telefonberatung: 25,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,33 +1,34 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
|
// import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
|
||||||
import Progressbar from "#components/Ausweis/Progressbar.svelte";
|
// import Progressbar from "#components/Ausweis/Progressbar.svelte";
|
||||||
import Hilfe from "#components/Ausweis/Hilfe.svelte";
|
import Hilfe from "#components/Ausweis/Hilfe.svelte";
|
||||||
import HelpLabel from "#components/HelpLabel.svelte";
|
// import HelpLabel from "#labels/HelpLabel.svelte";
|
||||||
import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
|
// import Inputlabel from "#labels/InputLabel.svelte";
|
||||||
import Label from "#components/Label.svelte";
|
// import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
|
||||||
import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
|
// import Label from "#components/Label.svelte";
|
||||||
import ZipSearch from "#components/PlzSuche.svelte";
|
import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
|
||||||
import moment from "moment";
|
// import ZipSearch from "#components/PlzSuche.svelte";
|
||||||
import BilderZusatzsysteme from "#components/Ausweis/BilderZusatzsysteme.svelte";
|
// import moment from "moment";
|
||||||
import { RawNotificationWrapper, RawNotification, notifications } from "#components/Notifications/index.js";
|
// import BilderZusatzsysteme from "#components/Ausweis/BilderZusatzsysteme.svelte";
|
||||||
import { auditHeizungGebaeudeBaujahr } from "#components/Verbrauchsausweis/audits/HeizungGebaeudeBaujahr.js";
|
// import { RawNotificationWrapper, RawNotification, notifications } from "#components/Notifications/index.js";
|
||||||
import { auditHeizungJuengerDreiJahre } from "#components/Verbrauchsausweis/audits/HeizungJuengerDreiJahre.js";
|
// import { auditHeizungGebaeudeBaujahr } from "#components/Verbrauchsausweis/audits/HeizungGebaeudeBaujahr.js";
|
||||||
import { auditZeitraumAktuell } from "#components/Verbrauchsausweis/audits/ZeitraumAktuell.js";
|
// import { auditHeizungJuengerDreiJahre } from "#components/Verbrauchsausweis/audits/HeizungJuengerDreiJahre.js";
|
||||||
import { auditKlimaFaktoren } from "#components/Verbrauchsausweis/audits/KlimaFaktoren.js";
|
// import { auditZeitraumAktuell } from "#components/Verbrauchsausweis/audits/ZeitraumAktuell.js";
|
||||||
import { auditWohnFlaeche } from "#components/Verbrauchsausweis/audits/WohnFlaeche.js";
|
// import { auditKlimaFaktoren } from "#components/Verbrauchsausweis/audits/KlimaFaktoren.js";
|
||||||
import { auditWarmWasser } from "#components/Verbrauchsausweis/audits/WarmWasser.js";
|
// import { auditWohnFlaeche } from "#components/Verbrauchsausweis/audits/WohnFlaeche.js";
|
||||||
import { auditLeerStand } from "#components/Verbrauchsausweis/audits/LeerStand.js";
|
// import { auditWarmWasser } from "#components/Verbrauchsausweis/audits/WarmWasser.js";
|
||||||
import { auditPlzNichtErkannt } from "#components/Verbrauchsausweis/audits/PlzNichtErkannt.js";
|
// import { auditLeerStand } from "#components/Verbrauchsausweis/audits/LeerStand.js";
|
||||||
import { AuditType, hidden } from "#components/Verbrauchsausweis/audits/hidden.js";
|
// import { auditPlzNichtErkannt } from "#components/Verbrauchsausweis/audits/PlzNichtErkannt.js";
|
||||||
import { auditBedarfsausweisBenoetigt } from "#components/Verbrauchsausweis/audits/BedarfsausweisBenoetigt.js";
|
// import { AuditType, hidden } from "#components/Verbrauchsausweis/audits/hidden.js";
|
||||||
import { auditVerbrauchAbweichung } from "#components/Verbrauchsausweis/audits/VerbrauchAbweichung.js";
|
// import { auditBedarfsausweisBenoetigt } from "#components/Verbrauchsausweis/audits/BedarfsausweisBenoetigt.js";
|
||||||
import { auditEndEnergie } from "#components/Verbrauchsausweis/audits/EndEnergie.js";
|
// import { auditVerbrauchAbweichung } from "#components/Verbrauchsausweis/audits/VerbrauchAbweichung.js";
|
||||||
import { auditWohnflaecheGroesserGesamtflaeche } from "#components/Verbrauchsausweis/audits/WohnflaecheGroesserGesamtflaeche.js";
|
// import { auditEndEnergie } from "#components/Verbrauchsausweis/audits/EndEnergie.js";
|
||||||
import { Enums } from "@ibcornelsen/database/client"
|
// import { auditWohnflaecheGroesserGesamtflaeche } from "#components/Verbrauchsausweis/audits/WohnflaecheGroesserGesamtflaeche.js";
|
||||||
import Overlay from "#components/Overlay.svelte";
|
// import { Enums } from "@ibcornelsen/database/client"
|
||||||
import AusweisGespeichertModule from "./AusweisGespeichertModule.svelte";
|
import Overlay from "#components/Overlay.svelte";
|
||||||
import { VerbrauchsausweisWohnenClient, BenutzerClient, UploadedGebaeudeBild } from "#components/Ausweis/types.js";
|
import AusweisGespeichertModule from "./AusweisGespeichertModule.svelte";
|
||||||
import { verbrauchsausweisWohnenSpeichern } from "src/client/lib/verbrauchsausweisWohnenSpeichern.js";
|
// 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
|
// 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...
|
// wenn gebaeude_aufnahme_allgemein oder gebaeude_stammdaten nicht existiert...
|
||||||
@@ -105,6 +106,7 @@
|
|||||||
gebaeude_aufnahme_allgemein.dachgeschoss_gedaemmt = true;
|
gebaeude_aufnahme_allgemein.dachgeschoss_gedaemmt = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Overlay bind:hidden={speichernOverlayHidden}>
|
<Overlay bind:hidden={speichernOverlayHidden}>
|
||||||
@@ -119,463 +121,47 @@
|
|||||||
</p>
|
</p>
|
||||||
</Overlay>
|
</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">
|
<form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
|
||||||
|
|
||||||
<div id="formular-box">
|
<div id="formular-box" class="formular-boxen ring-0">
|
||||||
|
|
||||||
<div class="flex flex-row justify-between">
|
<div class="w-full grid gap-x-4 gap-y-2
|
||||||
<button class="button" type="button" on:click={spaeterWeitermachen}
|
grid-cols-1
|
||||||
>Später Weitermachen</button
|
xs:grid-cols-2
|
||||||
>
|
">
|
||||||
<div class="flex gap-4">
|
<div class="md:justify-self-start"><button class="button" type="button" on:click={spaeterWeitermachen}>Später Weitermachen</button></div>
|
||||||
<Hilfe />
|
<div class="md:justify-self-end"><Hilfe /></div>
|
||||||
<button
|
|
||||||
on:click={automatischAusfüllen}
|
</div>
|
||||||
type="button"
|
|
||||||
class="button">Automatisch Ausfüllen</button
|
<div class="mt-2"><button class="button hidden" on:click={automatischAusfüllen} type="button" >Automatisch Ausfüllen</button></div>
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
<Label>A - Prüfung der Ausweisart</Label>
|
|
||||||
|
|
||||||
<Ausweisart
|
|
||||||
bind:gebaeude
|
|
||||||
bind:gebaeude_aufnahme_allgemein
|
|
||||||
bind:ausweis
|
|
||||||
/>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
<Label
|
|
||||||
>B - Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Kellerund
|
|
||||||
Dachgeschoss</Label
|
|
||||||
>
|
|
||||||
|
|
||||||
<div class="GRB">
|
<Ausweisart
|
||||||
<!-- Strasse -->
|
bind:gebaeude
|
||||||
<div class="form-group col-md-4">
|
bind:gebaeude_aufnahme_allgemein
|
||||||
<HelpLabel title="Straße, Hausnummer *">
|
bind:ausweis
|
||||||
Bitte geben Sie hier die Straße und Hausnummer des Gebäudes
|
client:load
|
||||||
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>
|
||||||
<div class="form-group col-md-4 PLZ">
|
|
||||||
<ZipSearch
|
|
||||||
bind:zip={gebaeude_aufnahme_allgemein.plz}
|
|
||||||
bind:city={gebaeude_aufnahme_allgemein.ort}
|
|
||||||
name="plz"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group col-md-4">
|
|
||||||
<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>
|
|
||||||
<!-- Wohnfläche -->
|
|
||||||
<div class="form-group col-md-3">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- Keller -->
|
|
||||||
<div class="form-group col-md-3">
|
|
||||||
<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="form-group col-md-3">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<!-- Gesamtfläche -->
|
|
||||||
<div class="form-group col-md-3">
|
|
||||||
<HelpLabel title="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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</form>
|
</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)}
|
<style lang="scss">
|
||||||
<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>
|
|
||||||
: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;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.linked) {
|
|
||||||
@apply border-2 border-red-400;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
736
src/modules/Ausweise/VerbrauchsausweisWohnenModule_V01.svelte
Normal file
736
src/modules/Ausweise/VerbrauchsausweisWohnenModule_V01.svelte
Normal 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 - Angaben zu Wohnfläche, Keller und 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=" 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>
|
||||||
20
src/pages/energieausweis-erstellen/index.astro
Normal file
20
src/pages/energieausweis-erstellen/index.astro
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
---
|
||||||
|
|
||||||
|
import Layout from "#layouts/Layout.astro";
|
||||||
|
import Widget from "#components/Widget.svelte";
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
<Layout title="Welcher Energieausweis">
|
||||||
|
|
||||||
|
<h1 class="text-3xl">Welcher Energieausweis?</h1>
|
||||||
|
|
||||||
|
<div class="mt-12 m-auto w-[95%] relative">
|
||||||
|
<Widget client:load />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</Layout>
|
||||||
|
|
||||||
86
src/pages/faq/allgemeines-18599/index.astro
Normal file
86
src/pages/faq/allgemeines-18599/index.astro
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
---
|
||||||
|
|
||||||
|
import Layout from "#layouts/Layout.astro";
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout title="Allgemeines zur Berechnungsmethode und Norm DIN 18599">
|
||||||
|
|
||||||
|
<h1>Allgemeines zur Berechnungsmethode und Norm DIN 18599</h1>
|
||||||
|
|
||||||
|
<div class="mt-12 m-auto w-[90%] relative">
|
||||||
|
<div class="flex-row">
|
||||||
|
|
||||||
|
<!-- Frage 1 -->
|
||||||
|
<div class="mb-6 border-b-[1px] border-gray-200 pb-6">
|
||||||
|
<h2 class="text-lg font-semibold text-gray-700 text-xl">Warum hat sich die Energieeffizienzklasse meines Gebäudes verschlechtert?</h2>
|
||||||
|
<p class="text-gray-600 text-xl mt-2">
|
||||||
|
Die Energieeffizienzklasse kann sich durch die Umstellung auf die neue DIN 18599 verschlechtern. Diese Norm bewertet Randbedingungen wie die Qualität der Anlagentechnik und die Innentemperatur anders als die vorherige Norm. Dadurch können höhere Werte für den Endenergiebedarf entstehen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Frage 2 -->
|
||||||
|
<div class="mb-6 border-b-[1px] border-gray-200 pb-6">
|
||||||
|
<h2 class="text-lg font-semibold text-gray-700 text-xl">Was ist der Unterschied zwischen der alten und der neuen Berechnungsmethode?</h2>
|
||||||
|
<p class="text-gray-600 text-xl mt-2">
|
||||||
|
Die alte Methode (z. B. DIN V 4108) und die neue (DIN 18599) liefen eine Zeit lang parallel. Seit diesem Jahr ist die Berechnung nach der neuen DIN verpflichtend. Die neue Norm verwendet aktualisierte Berechnungsfaktoren und Randbedingungen, um eine einheitlichere Bewertung sicherzustellen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Frage 3 -->
|
||||||
|
<div class="mb-6 border-b-[1px] border-gray-200 pb-6">
|
||||||
|
<h2 class="text-lg font-semibold text-gray-700 text-xl">Warum zeigt das Online-System einen anderen Wert als der zugesandte Energieausweis?</h2>
|
||||||
|
<p class="text-gray-600 text-xl mt-2">
|
||||||
|
Das Online-System könnte noch mit der alten DIN arbeiten, während der Energieausweis, den Sie von uns erhalten haben, nach der neuen DIN berechnet wurde. Die Werte im Online-System werden derzeit aktualisiert.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Frage 4 -->
|
||||||
|
<div class="mb-6 border-b-[1px] border-gray-200 pb-6">
|
||||||
|
<h2 class="text-lg font-semibold text-gray-700 text-xl">Seit wann gilt die neue Norm (DIN 18599)?</h2>
|
||||||
|
<p class="text-gray-600 text-xl mt-2">
|
||||||
|
Die DIN 18599 ist seit diesem Jahr (2024) für Energieausweise verpflichtend. Frühere Berechnungen nach der alten Norm sind nicht mehr gültig.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Frage 5 -->
|
||||||
|
<div class="mb-6 border-b-[1px] border-gray-200 pb-6">
|
||||||
|
<h2 class="text-lg font-semibold text-gray-700 text-xl">Werden alle Energieausweise durch die neue Norm schlechter?</h2>
|
||||||
|
<p class="text-gray-600 text-xl mt-2">
|
||||||
|
Die meisten Gebäude werden durch die strengeren Bewertungsfaktoren der neuen Norm etwas schlechter eingestuft. Das betrifft insbesondere Gebäude mit älterer Heiztechnik oder weniger effizienter Anlagentechnik.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Frage 6 -->
|
||||||
|
<div class="mb-6 border-b-[1px] border-gray-200 pb-6">
|
||||||
|
<h2 class="text-lg font-semibold text-gray-700 text-xl">Welche Berechnungsgrundlage wird für den Bedarfsausweis verwendet?</h2>
|
||||||
|
<p class="text-gray-600 text-xl mt-2">
|
||||||
|
Der Bedarfsausweis wird nach der Norm DIN 18599 erstellt. Diese berücksichtigt unter anderem:
|
||||||
|
</p>
|
||||||
|
<ul class="list-disc list-inside text-gray-600 text-xl mt-2">
|
||||||
|
<li>Gebäudegeometrie.</li>
|
||||||
|
<li>Dämmstandard.</li>
|
||||||
|
<li>Heiz- und Anlagentechnik.</li>
|
||||||
|
<li>Die Umstellung auf diese Berechnungsmethode ist eine gesetzliche Vorgabe.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Frage 7 -->
|
||||||
|
<div class="mb-6 border-b-[1px] border-gray-200 pb-6">
|
||||||
|
<h2 class="text-lg font-semibold text-gray-700 text-xl">Warum wurden frühere Energieausweise schneller ausgestellt?</h2>
|
||||||
|
<p class="text-gray-600 text-xl mt-2">
|
||||||
|
Die früheren Berechnungsverfahren waren weniger komplex. Mit der Einführung der DIN 18599 wurde der Prozess anspruchsvoller, um präzisere und einheitlichere Ergebnisse zu gewährleisten.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Frage 8 -->
|
||||||
|
<div class="mb-6 border-b-[1px] border-gray-200 pb-6">
|
||||||
|
<h2 class="text-lg font-semibold text-gray-700 text-xl">Was bedeutet DIN 18599, und warum ist sie wichtig?</h2>
|
||||||
|
<p class="text-gray-600 text-xl mt-2">
|
||||||
|
Die DIN 18599 ist eine standardisierte Berechnungsvorschrift, die eine einheitliche Bewertung von Energieeffizienz und Anlagentechnik gewährleistet. Sie wurde eingeführt, um genauere und vergleichbare Ergebnisse zu erzielen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
174
src/pages/faq/erstellung-energieausweise/index.astro
Normal file
174
src/pages/faq/erstellung-energieausweise/index.astro
Normal file
@@ -0,0 +1,174 @@
|
|||||||
|
---
|
||||||
|
|
||||||
|
import Layout from "#layouts/cadLayout.astro";
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
<Layout title="CAD">
|
||||||
|
|
||||||
|
<h1 class="text-3xl">CAD</h1>
|
||||||
|
|
||||||
|
<div class="controls">
|
||||||
|
<button onclick="clearCanvas()">Clear</button>
|
||||||
|
</div>
|
||||||
|
<canvas id="cadCanvas" width="800" height="600"></canvas>
|
||||||
|
<div class="log">
|
||||||
|
<strong>Captured Lines:</strong>
|
||||||
|
<ul id="line-log"></ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const canvas = document.getElementById('cadCanvas');
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
const lineLog = document.getElementById('line-log');
|
||||||
|
const pixelToMeter = 0.025; // Conversion factor: 1 pixel = 0.025 meter
|
||||||
|
const gridSize = 20; // Size of each grid cell in pixels
|
||||||
|
let startX = null;
|
||||||
|
let startY = null;
|
||||||
|
let capturedLines = [];
|
||||||
|
|
||||||
|
// Snap a coordinate to the nearest grid point
|
||||||
|
function snapToGrid(value) {
|
||||||
|
return Math.round(value / gridSize) * gridSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw the grid
|
||||||
|
function drawGrid() {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.strokeStyle = "#e0e0e0"; // Light gray grid lines
|
||||||
|
ctx.lineWidth = 0.5;
|
||||||
|
|
||||||
|
// Draw vertical lines
|
||||||
|
for (let x = 0; x <= canvas.width; x += gridSize) {
|
||||||
|
ctx.moveTo(x, 0);
|
||||||
|
ctx.lineTo(x, canvas.height);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw horizontal lines
|
||||||
|
for (let y = 0; y <= canvas.height; y += gridSize) {
|
||||||
|
ctx.moveTo(0, y);
|
||||||
|
ctx.lineTo(canvas.width, y);
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clear the canvas and reset logs
|
||||||
|
function clearCanvas() {
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
capturedLines = [];
|
||||||
|
startX = null;
|
||||||
|
startY = null;
|
||||||
|
drawGrid(); // Redraw the grid after clearing
|
||||||
|
updateLineLog();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update the captured lines log
|
||||||
|
function updateLineLog() {
|
||||||
|
lineLog.innerHTML = capturedLines
|
||||||
|
.map((line, index) => {
|
||||||
|
const lengthInMeters = calculateLineLengthInMeters(line.startX, line.startY, line.endX, line.endY);
|
||||||
|
return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m</li>`;
|
||||||
|
})
|
||||||
|
.join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate the length of a line in meters
|
||||||
|
function calculateLineLengthInMeters(x1, y1, x2, y2) {
|
||||||
|
const dx = x2 - x1;
|
||||||
|
const dy = y2 - y1;
|
||||||
|
const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
|
||||||
|
return lengthInPixels * pixelToMeter;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mouse events
|
||||||
|
canvas.addEventListener('mousedown', (e) => {
|
||||||
|
const endX = snapToGrid(e.offsetX);
|
||||||
|
const endY = snapToGrid(e.offsetY);
|
||||||
|
|
||||||
|
if (startX !== null && startY !== null) {
|
||||||
|
// Draw the final line
|
||||||
|
drawLine(startX, startY, endX, endY);
|
||||||
|
|
||||||
|
// Capture the line details
|
||||||
|
capturedLines.push({ startX, startY, endX, endY });
|
||||||
|
updateLineLog();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update the start position for the next line
|
||||||
|
startX = endX;
|
||||||
|
startY = endY;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Drawing functions
|
||||||
|
function drawLine(x1, y1, x2, y2) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.strokeStyle = "#000000"; // Black color for lines
|
||||||
|
ctx.lineWidth = 2; // Thicker lines
|
||||||
|
ctx.moveTo(x1, y1);
|
||||||
|
ctx.lineTo(x2, y2);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Track whether we are actively drawing a temporary line
|
||||||
|
let isMouseOverCanvas = false;
|
||||||
|
|
||||||
|
// Event to draw a temporary line
|
||||||
|
canvas.addEventListener('mousemove', (e) => {
|
||||||
|
if (!lastEndPoint || !isMouseOverCanvas) return;
|
||||||
|
|
||||||
|
const cursorX = snapToGrid(e.offsetX);
|
||||||
|
const cursorY = snapToGrid(e.offsetY);
|
||||||
|
|
||||||
|
// Clear the canvas (excluding the captured drawings)
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
drawGrid();
|
||||||
|
|
||||||
|
// Redraw all captured lines
|
||||||
|
capturedLines.forEach(line => {
|
||||||
|
drawLine(line.startX, line.startY, line.endX, line.endY);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Draw the temporary line
|
||||||
|
drawTemporaryLine(lastEndPoint.x, lastEndPoint.y, cursorX, cursorY);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Mouse enters canvas
|
||||||
|
canvas.addEventListener('mouseenter', () => {
|
||||||
|
isMouseOverCanvas = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Mouse leaves canvas
|
||||||
|
canvas.addEventListener('mouseleave', () => {
|
||||||
|
isMouseOverCanvas = false;
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
drawGrid();
|
||||||
|
|
||||||
|
// Redraw all captured lines
|
||||||
|
capturedLines.forEach(line => {
|
||||||
|
drawLine(line.startX, line.startY, line.endX, line.endY);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Function to draw a temporary line
|
||||||
|
function drawTemporaryLine(x1, y1, x2, y2) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.strokeStyle = "#aaaaaa"; // Light gray for the temporary line
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
ctx.setLineDash([5, 5]); // Dashed line
|
||||||
|
ctx.moveTo(x1, y1);
|
||||||
|
ctx.lineTo(x2, y2);
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.setLineDash([]); // Reset to solid lines for permanent drawings
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Initialize canvas
|
||||||
|
drawGrid(); // Draw the grid when the page loads
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</Layout>
|
||||||
|
|
||||||
72
src/pages/faq/formulareingabe/index.astro
Normal file
72
src/pages/faq/formulareingabe/index.astro
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
---
|
||||||
|
|
||||||
|
import Layout from "#layouts/Layout.astro";
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout title="Eingabefehler und Korrekturen">
|
||||||
|
|
||||||
|
<h1>Eingabefehler und Korrekturen</h1>
|
||||||
|
|
||||||
|
<div class="mt-12 m-auto w-[90%] relative">
|
||||||
|
<div class="flex-row">
|
||||||
|
|
||||||
|
<!-- Frage 1 -->
|
||||||
|
<div class="mb-6 border-b-[1px] border-gray-200 pb-6">
|
||||||
|
<h2 class="font-semibold text-gray-700 text-xl">Ich habe die Grundflächen korrigiert, aber der Energieausweis zeigt noch falsche Werte an. Was könnte das Problem sein?</h2>
|
||||||
|
<p class="text-gray-600 text-xl mt-2">
|
||||||
|
Stellen Sie sicher, dass Sie die Änderungen abgespeichert haben. Überprüfen Sie auch, ob alle notwendigen Daten wie Flächen, Materialien und Anlagen vollständig eingegeben wurden.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Frage 2 -->
|
||||||
|
<div class="mb-6 border-b-[1px] border-gray-200 pb-6">
|
||||||
|
<h2 class="font-semibold text-gray-700 text-xl">Wie kann ich die Daten im System speichern?</h2>
|
||||||
|
<p class="text-gray-600 text-xl mt-2">
|
||||||
|
Im Bearbeitungsmodus gibt es oben und unten Speicher-Buttons. Bitte stellen Sie sicher, dass Sie nach der Eingabe auf „Speichern“ klicken, damit die Änderungen übernommen werden.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Frage 3 -->
|
||||||
|
<div class="mb-6 border-b-[1px] border-gray-200 pb-6">
|
||||||
|
<h2 class="font-semibold text-gray-700 text-xl">Warum werden in der Berechnung einige Werte nicht berücksichtigt?</h2>
|
||||||
|
<p class="text-gray-600 text-xl mt-2">
|
||||||
|
Möglicherweise fehlen noch Angaben oder es wurden falsche Daten eingegeben. Beispielsweise sind vollständige Angaben zu Fensterflächen, Heizungsanlagen und Raumvolumen erforderlich, um korrekte Ergebnisse zu erzielen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Frage 4 -->
|
||||||
|
<div class="mb-6 border-b-[1px] border-gray-200 pb-6">
|
||||||
|
<h2 class="font-semibold text-gray-700 text-xl">Was passiert, wenn ich versehentlich Daten von einem anderen Objekt eingebe?</h2>
|
||||||
|
<p class="text-gray-600 text-xl mt-2">
|
||||||
|
Bitte prüfen Sie vor der Eingabe, ob Sie die korrekte Objekt-ID verwenden. Sollte ein Fehler passiert sein, können Sie die Daten manuell korrigieren oder uns kontaktieren, um das Problem zu lösen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Frage 5 -->
|
||||||
|
<div class="mb-6 border-b-[1px] border-gray-200 pb-6">
|
||||||
|
<h2 class="font-semibold text-gray-700 text-xl">Ich habe mehrere Objekte im System. Wie stelle ich sicher, dass ich das richtige bearbeite?</h2>
|
||||||
|
<p class="text-gray-600 text-xl mt-2">
|
||||||
|
Überprüfen Sie die Objekt-ID und den Standort (Adresse), bevor Sie Änderungen vornehmen. Im Zweifel können Sie die Übersicht im System nutzen, um das richtige Objekt zu identifizieren.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Frage 6 -->
|
||||||
|
<div class="mb-6 border-b-[1px] border-gray-200 pb-6">
|
||||||
|
<h2 class="font-semibold text-gray-700 text-xl">Was tun, wenn das Volumen oder die Geometrie nicht korrekt berechnet wird?</h2>
|
||||||
|
<p class="text-gray-600 text-xl mt-2">
|
||||||
|
Das könnte an falschen Eingaben bei den Gebäudemaßen liegen. Überprüfen Sie die Außenmaße des Gebäudes und passen Sie sie gegebenenfalls an. Bei Unsicherheiten können Sie uns gerne kontaktieren.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Frage 7 -->
|
||||||
|
<div>
|
||||||
|
<h2 class="font-semibold text-gray-700 text-xl">Kann ich die Daten nachträglich korrigieren?</h2>
|
||||||
|
<p class="text-gray-600 text-xl mt-2">
|
||||||
|
Ja, Sie können Ihre Eingaben jederzeit überarbeiten. Änderungen, wie das Abziehen des Haushaltsstroms, können sowohl von Ihnen als auch von unserem Team vorgenommen werden.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
@@ -2,7 +2,433 @@
|
|||||||
|
|
||||||
import Layout from "#layouts/Layout.astro";
|
import Layout from "#layouts/Layout.astro";
|
||||||
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="FAQ - IBCornelsen"></Layout>
|
<Layout title="FAQ - Sammmlung">
|
||||||
|
|
||||||
|
<h1 class="text-3xl">FAQ – Sammlung</h1>
|
||||||
|
|
||||||
|
<div class="mt-12 m-auto w-[90%] relative">
|
||||||
|
|
||||||
|
<div class="faq">
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Was tun, wenn die Gebäudekonstruktion nicht in die Standard-Software passt?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Wenn die Geometrie Ihres Gebäudes nicht korrekt in die Online-Eingabe passt (z. B. wegen eines großen Anbaus oder einer untypischen Bauweise), müssen wir die Daten manuell im Büro bearbeiten. Dies verursacht zusätzliche Kosten, die in der Regel bei <span class="faq__section-highlight">290 Euro (inklusive MwSt.)</span> liegen.
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">Glossar: Gebäudekonstruktion, Standard-Software, manuelle Bearbeitung, Zusatzkosten</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Welche Unterlagen werden benötigt?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Grundrisspläne des Gebäudes, insbesondere:
|
||||||
|
</p>
|
||||||
|
<ul class="faq__section-list">
|
||||||
|
<li class="faq__section-list-item">Anbau</li>
|
||||||
|
<li class="faq__section-list-item">Altbau</li>
|
||||||
|
</ul>
|
||||||
|
<p class="faq__section-content">Baujahr der Gebäudeteile (z. B. Anbau von 1980).</p>
|
||||||
|
<p class="faq__section-keywords">Glossar: Unterlagen, Grundrisspläne, Baujahr, Anbau, Altbau</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Wie können die Pläne übermittelt werden?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Senden Sie die Pläne per E-Mail an:
|
||||||
|
<a href="mailto:info@online-energieausweis.org" class="faq__section-email">info@online-energieausweis.org</a>.
|
||||||
|
Bitte antworten Sie auf die letzte E-Mail, damit wir die <span class="faq__section-highlight">ID-Nummer</span> Ihres Falls direkt zuordnen können.
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">Glossar: Pläne, Übermittlung, E-Mail, ID-Nummer</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Was passiert mit der Rechnung?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Nach der Bearbeitung erhalten Sie eine <span class="faq__section-highlight">korrigierte Rechnung</span>, die den neuen Betrag (290 Euro) ausweist. Wenn Sie bereits eine Zahlung geleistet haben, wird lediglich der Differenzbetrag fällig.
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">Glossar: Rechnung, korrigierte Rechnung, Differenzbetrag</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Kann der Energieausweis nur für einen Gebäudeteil erstellt werden?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Ein Energieausweis, der nur auf einem Gebäudeteil basiert (z. B. Erdgeschoss ohne Anbau), ist in der Regel unvollständig und möglicherweise rechtlich nicht korrekt. Für eine korrekte Ausstellung müssen alle relevanten Gebäudeteile einbezogen werden.
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">Glossar: Energieausweis, Gebäudeteil, Mischgebäude, Wohngebäude, Nichtwohngebäude</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Wann erfolgt der Rückruf?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Wenn weitere Informationen oder Unterlagen fehlen, rufen wir Sie zurück (Montag - Freitag zwischen 9 - 12 Uhr), um diese abzustimmen.
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">Glossar: Rückruf, Informationen, Unterlagen, Kontaktzeiten</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Was passiert nach dem Versand der Pläne?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Nach Erhalt der Pläne wird die manuelle Berechnung durchgeführt. Sie erhalten anschließend den finalen Energieausweis und die aktualisierte Rechnung.
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">Glossar: Pläne, Versand, Berechnung, Energieausweis, Rechnung</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Was zählt zur beheizten Wohnfläche?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Beheizte Wohnfläche umfasst Flächen, die zu Wohnzwecken genutzt werden. Treppenhäuser gehören nicht zur Wohnfläche, können jedoch Teil der <span class="faq__section-highlight">energetischen Nutzfläche</span> sein.
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">Glossar: Wohnfläche, beheizte Flächen, energetische Nutzfläche, Treppenhaus</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Wie wird mit der energetischen Nutzfläche umgegangen?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Beheizte Flächen, die nicht direkt zur Wohnfläche gehören (z. B. Treppenhäuser), zählen zur energetischen Nutzfläche.
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">Glossar: energetische Nutzfläche, Energieverbrauch, Endenergieverbrauch, Treppenhaus</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Wie werden Flächen unter Dachschrägen im Dachgeschoss berechnet?</h2>
|
||||||
|
<ul class="faq__section-list">
|
||||||
|
<li class="faq__section-list-item">Flächen unter <span class="faq__section-highlight">1,50 m Deckenhöhe</span>: werden nicht gezählt.</li>
|
||||||
|
<li class="faq__section-list-item">Flächen zwischen <span class="faq__section-highlight">1,50 m und 2,00 m Deckenhöhe</span>: zählen zur Hälfte.</li>
|
||||||
|
<li class="faq__section-list-item">Flächen über <span class="faq__section-highlight">2,00 m Deckenhöhe</span>: zählen vollständig zur Wohnfläche.</li>
|
||||||
|
</ul>
|
||||||
|
<p class="faq__section-keywords">Glossar: Dachschrägen, Dachgeschoss, Wohnfläche, Berechnung, Flächen</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Was ist mit dem Dachinnenraum gemeint, und welche Unterlagen werden benötigt?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Der Dachinnenraum umfasst ausgebauten Spitzboden und Dachschrägen. Bitte stellen Sie Fotos bereit, insbesondere von Dachflächenfenstern und deren Laibungen sowie sichtbaren Dämmungen oder Isolierungen.
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">Glossar: Dachinnenraum, Spitzboden, Dämmung, Fotos</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Das Baujahr des Hauses ist unbekannt. Was soll ich tun?</h2>
|
||||||
|
<ul class="faq__section-list">
|
||||||
|
<li class="faq__section-list-item">Geben Sie ein geschätztes Baujahr an, z. B. <span class="faq__section-highlight">1900</span>.</li>
|
||||||
|
<li class="faq__section-list-item">Wenn das Gebäude kernsaniert wurde, nennen Sie auch das Sanierungsjahr (z. B. <span class="faq__section-highlight">„1900, kernsaniert 2012“</span>).</li>
|
||||||
|
<li class="faq__section-list-item">Falls das genaue Baujahr fehlt, können Nachbarn oft weiterhelfen, indem Sie das Baujahr benachbarter Häuser erfragen.</li>
|
||||||
|
</ul>
|
||||||
|
<p class="faq__section-keywords">Glossar: Baujahr, Sanierung, Schätzung, Nachbarn</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Welche Modernisierungsempfehlungen gibt es für ein ausgebautes Dachgeschoss?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Bei gut ausgebautem Dachgeschoss wird empfohlen, Dämmungen von außen im Rahmen einer Dachsanierung vorzunehmen. Eine vollständige Erneuerung von innen ist oft teuer und nicht nachhaltig.
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">Glossar: Dachgeschoss, Modernisierung, Dämmung, Sanierung</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Was passiert, wenn die Zahlung bei der Online-Bestellung nicht funktioniert?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Wenn die Online-Zahlung aus irgendeinem Grund fehlschlägt (z. B. Fehlermeldung bei Sofortüberweisung oder technische Probleme), wird der Vorgang automatisch so behandelt, als hätten Sie auf Rechnung bestellt.
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">Glossar: Zahlung, Fehlermeldung, Online-Bestellung, Rechnung</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Welche Zahlungsmethoden stehen zur Verfügung?</h2>
|
||||||
|
<ul class="faq__section-list">
|
||||||
|
<li class="faq__section-list-item"><strong>Sofortüberweisung:</strong></li>
|
||||||
|
<li class="faq__section-list-item"><strong>PayPal:</strong></li>
|
||||||
|
<li class="faq__section-list-item"><strong>Visa, Mastercard</strong></li>
|
||||||
|
<li class="faq__section-list-item"><strong>Rechnungskauf</strong></li>
|
||||||
|
</ul>
|
||||||
|
<p class="faq__section-keywords">Glossar: Zahlungsmethoden, Rechnugskauf, Sofortüberweisung, PayPal, Kreditkarte, Visa, Mastercard, Rechnung</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Wie erfahre ich, ob meine Bestellung erfolgreich war?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Nach Abschluss der Bestellung erhalten Sie automatisch eine <span class="faq__section-highlight">Bestätigungs-E-Mail</span>. Diese enthält Details zu Ihrer Bestellung.
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">Glossar: Bestellung, Bestätigungs-E-Mail, Details</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Was passiert nach der Bestellung, wenn ich auf Rechnung zahle?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Wenn Sie auf Rechnung zahlen (standardmäßig bei fehlgeschlagener Online-Zahlung):
|
||||||
|
</p>
|
||||||
|
<ul class="faq__section-list">
|
||||||
|
<li class="faq__section-list-item">Sie erhalten zunächst eine Bestätigungs-E-Mail.</li>
|
||||||
|
<li class="faq__section-list-item">Bei Lieferung bekommen Sie die Rechnung sowie eine Zahlungsaufforderung mit allen notwendigen Zahlungsdetails.</li>
|
||||||
|
</ul>
|
||||||
|
<p class="faq__section-keywords">Glossar: Rechnungskauf, Rechnung, Zahlungsaufforderung, Lieferung</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Kann ich den Betrag nachträglich überweisen?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Sie können nach Erhalt der Bestätigungs-Email den Betrag über die enthaltenen Links bezahlen.
|
||||||
|
Alternativ überweisen Sie den Betrag , sobald Sie die Rechnung zusammen mit dem Originalausweis erhalten haben. Die Überweisungsdetails finden Sie in der E-Mail oder in der Rechnung.
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">Glossar: Überweisung, Rechnungskauf, Rechnung, Zahlungsdetails</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Was sollte ich tun, wenn ich keine Bestätigungs-E-Mail erhalte?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Sollten Sie keine Bestätigungs-E-Mail erhalten, prüfen Sie bitte Ihren Spam-Ordner. Falls dort keine E-Mail zu finden ist, kontaktieren Sie unseren Kundenservice, um sicherzustellen, dass Ihre Bestellung korrekt verarbeitet wurde.
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">Glossar: Bestellung, Bestätigungs-E-Mail, Spam-Ordner, Kundenservice</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Wie kann ich sicherstellen, dass meine Bestellung erfolgreich durchgeführt wurde?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Sollte es bei einer der online Zahlungsmethoden (Sofortüberweisung, PayPal, Visa, Mastercard) zu einem technischen Fehler kommen, wird die Bestellung trotdem ausgelöst.
|
||||||
|
Diese wird dann als Rechnungskauf behandelt, und Sie können den Betrag nach Lieferung überweisen.
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">Glossar: Bestellung, Zahlung, Rechnungskauf, Zahlungsmethoden, Rechnung</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Welche gesetzlichen Vorgaben gelten für Verbrauchsdaten?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Verbrauchsdaten dürfen laut <span class="faq__section-highlight">GEG 2024</span> nicht älter als <span class="faq__section-highlight">18 Monate</span> sein. Ältere Daten werden nicht akzeptiert und müssen aktualisiert werden.
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">
|
||||||
|
Glossar: gesetzliche Vorgaben, Verbrauchszeiträume, Aktualisierung, Energieverbrauch, Ausweis-Erstellung
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Warum kam es zu Fehlermeldungen beim Weiterklicken?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Fehlermeldungen treten auf, wenn <span class="faq__section-highlight">Pflichtfelder</span> nicht komplett ausgefüllt wurden. Solche Felder werden rot markiert und müssen ausgefüllt werden.
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">
|
||||||
|
Glossar: Fehlermeldungen, Pflichtfelder, technische Probleme, Energieverbrauch, Ausweis-Erstellung
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Wie wird der Energieverbrauchsausweis geprüft?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Nach Abschluss der <span class="faq__section-keywords">Dateneingabe</span> und <span class="faq__section-keywords">Bezahlung</span> werden die Angaben manuell geprüft. Sind alle Daten schlüssig, wird der Energieverbrauchsausweis ausgestellt.
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">
|
||||||
|
Glossar: Prüfung, Energieverbrauchsausweis, manuelle Kontrolle, Energieverbrauch, Ausweis-Erstellung
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Welche Zahlungsmethoden stehen zur Verfügung?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Es kann entweder <span class="faq__section-highlight">online</span> (z. B. via PayPal, Kreditkarte, Sofort) oder nachträglich per <span class="faq__section-highlight">Rechnung</span> (Überweisung) bezahlt werden.
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">
|
||||||
|
Glossar: Bezahlung, Zahlungsmethoden, PayPal, Kreditkarte, Sofort, Rechnung, Energieverbrauch, Ausweis-Erstellung
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Wie erfolgt die Lieferung des Energieverbrauchsausweises?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Der Energieverbrauchsausweis wird nach erfolgreicher Prüfung an die angegebene <span class="faq__section-email">E-Mail-Adresse</span> versendet. Auf Wunsch erfolgt gegen eine Gebühr zusätzlich der Postversand.
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">
|
||||||
|
Glossar: Lieferung, E-Mail-Adresse, Versand, Postversand, Energieverbrauch, Ausweis-Erstellung
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Was tun, wenn bei klick auf "weiter" nichts passiert?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Bitte prüfen Sie, ob alle <span class="faq__section-highlight">Pflichtfelder</span> ausgefüllt sind.
|
||||||
|
Rot markierte Felder weisen auf fehlende Angaben hin. Wenn alle rot markierten Felder ausgefüllt sind kommen Sie nach klick auf "weiter" zu Schritt 2. (Kundendaten).
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">
|
||||||
|
Glossar: komme nicht weiter, Fehlermeldung, Pflichtfelder, Energieverbrauch, Ausweis-Erstellung
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section">
|
||||||
|
<h2 class="faq__section-title">Wie kann der Kundenservice kontaktiert werden?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Der Kundenservice ist über <span class="faq__section-highlight">E-Mail</span> oder telefonisch (Mo - FR von 9 - 12 Uhr) erreichbar und hilft bei Problemen oder offenen Fragen.
|
||||||
|
</p>
|
||||||
|
<ul class="faq__section-list">
|
||||||
|
<li class="faq__section-list-item">Telefon: 040-209 339 850</li>
|
||||||
|
<li class="faq__section-list-item">E-Mail: <span class="faq__section-email">info@online-energieausweis.org</span></li>
|
||||||
|
</ul>
|
||||||
|
<p class="faq__section-keywords">
|
||||||
|
Glossar: Kundenservice, Kontakt, Hilfe, E-Mail, Telefon, Energieverbrauch, Ausweis-Erstellung
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section" data-keywords="GEG, Gebäudeenergiegesetz, Energieeffizienz, GEG 2024, aktuelles GEG">
|
||||||
|
<h2 class="faq__section-title">Was ist das Gebäudeenergiegesetz (GEG)?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Das GEG ist ein Gesetz, das die energetischen Anforderungen an Gebäude regelt. Es vereint frühere Regelungen wie die
|
||||||
|
<span class="faq__section-highlight">Energieeinsparverordnung (EnEV)</span>, das <span class="faq__section-highlight">EEWärmeG</span> und das
|
||||||
|
<span class="faq__section-highlight">EnEG</span> in einem einheitlichen Gesetz. Ziel ist es, den Klimaschutz zu fördern und die Energieeffizienz von Gebäuden zu steigern.
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">Glossar: GEG, Gebäudeenergiegesetz, Energieeffizienz, GEG 2024, aktuelles GEG</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section" data-keywords="Betroffene, Neubauten, Bestandsgebäude, GEG 2024, aktuelles GEG">
|
||||||
|
<h2 class="faq__section-title">Wer ist vom GEG betroffen?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Das GEG gilt für Neubauten, Bestandsgebäude, gemischt genutzte Gebäude sowie Wohn- und Nichtwohngebäude. Es betrifft sowohl Bauherren als auch Eigentümer, die wesentliche Umbauten planen oder ihre Heizungsanlagen erneuern müssen.
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">Glossar: Betroffene, Neubauten, Bestandsgebäude, GEG 2024, aktuelles GEG</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section" data-keywords="Heizungen, 65%-Regel, Erneuerbare Energien, GEG 2024, aktuelles GEG">
|
||||||
|
<h2 class="faq__section-title">Was bedeutet die 65%-Regel für Heizungen?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Ab <span class="faq__section-highlight">2024</span> müssen neu installierte Heizungen mindestens <span class="faq__section-highlight">65 %</span> ihres Wärmebedarfs aus erneuerbaren Energien decken. Betroffen sind unter anderem:
|
||||||
|
</p>
|
||||||
|
<ul class="faq__section-list">
|
||||||
|
<li class="faq__section-list-item">Wärmepumpen</li>
|
||||||
|
<li class="faq__section-list-item">Biomasseheizungen</li>
|
||||||
|
<li class="faq__section-list-item">Solarthermieanlagen</li>
|
||||||
|
<li class="faq__section-list-item">Hybridheizungen</li>
|
||||||
|
</ul>
|
||||||
|
<p class="faq__section-keywords">Glossar: Heizungen, 65%-Regel, Erneuerbare Energien, GEG 2024, aktuelles GEG</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section" data-keywords="Heizkessel, Austauschpflicht, Ausnahmen, GEG 2024, aktuelles GEG">
|
||||||
|
<h2 class="faq__section-title">Gibt es eine Austauschpflicht für alte Heizungen?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Heizkessel, die älter als <span class="faq__section-highlight">30 Jahre</span> sind und nicht der Brennwert- oder Niedertemperaturtechnik entsprechen, dürfen nicht weiter betrieben werden. Ausnahmen gelten für:
|
||||||
|
</p>
|
||||||
|
<ul class="faq__section-list">
|
||||||
|
<li class="faq__section-list-item">Selbstbewohnte Gebäude von Eigentümern, die vor 2002 eingezogen sind</li>
|
||||||
|
<li class="faq__section-list-item">Technisch unzumutbare Fälle</li>
|
||||||
|
</ul>
|
||||||
|
<p class="faq__section-keywords">Glossar: Heizkessel, Austauschpflicht, Ausnahmen, GEG 2024, aktuelles GEG</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section" data-keywords="Neubauten, Effizienzhaus, EH55, GEG 2024, aktuelles GEG">
|
||||||
|
<h2 class="faq__section-title">Welche Anforderungen gelten für Neubauten?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Neubauten müssen ab 2024 mindestens den Standard eines <span class="faq__section-highlight">Effizienzhauses 55 (EH 55)</span> erfüllen. Dazu gehören:
|
||||||
|
</p>
|
||||||
|
<ul class="faq__section-list">
|
||||||
|
<li class="faq__section-list-item">Strengere Anforderungen an die Gebäudehülle</li>
|
||||||
|
<li class="faq__section-list-item">Verpflichtung zum Einsatz erneuerbarer Energien</li>
|
||||||
|
<li class="faq__section-list-item">Verbesserte Dämmung</li>
|
||||||
|
</ul>
|
||||||
|
<p class="faq__section-keywords">Glossar: Neubauten, Effizienzhaus, EH55, GEG 2024, aktuelles GEG</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section" data-keywords="Bestandsgebäude, Dämmung, Heizsysteme, GEG 2024, aktuelles GEG">
|
||||||
|
<h2 class="faq__section-title">Was sind die Anforderungen für Bestandsgebäude?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Bestandsgebäude unterliegen neuen Vorgaben wie der Dämmung ungedämmter Dachböden oder oberster Geschossdecken, dem hydraulischen Abgleich von Heizsystemen und Modernisierungspflichten bei größeren Umbauten.
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">Glossar: Bestandsgebäude, Dämmung, Heizsysteme, GEG 2024, aktuelles GEG</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section" data-keywords="Energieausweise, CO₂-Emissionen, Gültigkeit, GEG 2024, aktuelles GEG">
|
||||||
|
<h2 class="faq__section-title">Was ändert sich bei Energieausweisen?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Energieausweise müssen detailliertere Informationen enthalten, wie CO₂-Emissionen und Sanierungsempfehlungen. Sie bleiben weiterhin <span class="faq__section-highlight">10 Jahre</span> gültig und müssen bei Verkauf oder Vermietung vorgelegt werden.
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">Glossar: Energieausweise, CO₂-Emissionen, Gültigkeit, GEG 2024, aktuelles GEG</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section" data-keywords="Bußgelder, Verstöße, Energieeffizienz, GEG 2024, aktuelles GEG">
|
||||||
|
<h2 class="faq__section-title">Welche Strafen drohen bei Verstößen?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Verstöße können mit Bußgeldern von bis zu <span class="faq__section-highlight">50.000 Euro</span> geahndet werden. Dazu gehören:
|
||||||
|
</p>
|
||||||
|
<ul class="faq__section-list">
|
||||||
|
<li class="faq__section-list-item">Verstöße gegen die Austauschpflicht alter Heizungen</li>
|
||||||
|
<li class="faq__section-list-item">Fehlende Dämmungen</li>
|
||||||
|
<li class="faq__section-list-item">Falsche Angaben im Energieausweis</li>
|
||||||
|
</ul>
|
||||||
|
<p class="faq__section-keywords">Glossar: Bußgelder, Verstöße, Energieeffizienz, GEG 2024, aktuelles GEG</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section" data-keywords="Förderungen, KfW, BAFA, GEG 2024, aktuelles GEG">
|
||||||
|
<h2 class="faq__section-title">Welche Förderungen gibt es?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Förderprogramme der <span class="faq__section-highlight">KfW</span> und des <span class="faq__section-highlight">BAFA</span> unterstützen Maßnahmen wie den Austausch alter Heizungen, Dämmungen und die Nutzung erneuerbarer Energien. Förderungen stehen für Sanierungen und Neubauten zur Verfügung.
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">Glossar: Förderungen, KfW, BAFA, GEG 2024, aktuelles GEG</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section" data-keywords="Ausnahmen, Denkmalschutz, kleine Gebäude, GEG 2024, aktuelles GEG">
|
||||||
|
<h2 class="faq__section-title">Welche Ausnahmen gelten?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Das GEG sieht Ausnahmen vor, unter anderem für:
|
||||||
|
</p>
|
||||||
|
<ul class="faq__section-list">
|
||||||
|
<li class="faq__section-list-item">Denkmalschutzgebäude</li>
|
||||||
|
<li class="faq__section-list-item">Kleine Gebäude mit weniger als 50 m² Nutzfläche</li>
|
||||||
|
<li class="faq__section-list-item">Selbstbewohnte Gebäude, die vor 2002 bezogen wurden</li>
|
||||||
|
</ul>
|
||||||
|
<p class="faq__section-keywords">Glossar: Ausnahmen, Denkmalschutz, kleine Gebäude, GEG 2024, aktuelles GEG</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="faq__section" data-keywords="GEG, Volltext, Gesetzestext, GEG 2024, aktuelles GEG">
|
||||||
|
<h2 class="faq__section-title">Wo finde ich den Volltext des GEG?</h2>
|
||||||
|
<p class="faq__section-content">
|
||||||
|
Der vollständige Text ist verfügbar auf der Seite:
|
||||||
|
<a href="https://www.gesetze-im-internet.de/geg/GEG.pdf" class="faq__section-email">gesetze-im-internet.de</a>.
|
||||||
|
</p>
|
||||||
|
<p class="faq__section-keywords">Glossar: GEG, Volltext, Gesetzestext, GEG 2024, aktuelles GEG</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
.faq {
|
||||||
|
@apply space-y-6;
|
||||||
|
|
||||||
|
&__section {
|
||||||
|
@apply border-b pb-4;
|
||||||
|
|
||||||
|
&-title {
|
||||||
|
@apply text-2xl font-bold text-gray-800 mb-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-content {
|
||||||
|
@apply text-gray-600 text-xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-highlight {
|
||||||
|
@apply font-semibold text-gray-900;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-email {
|
||||||
|
@apply text-secondary underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-keywords {
|
||||||
|
@apply text-sm italic text-gray-500 mt-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-list {
|
||||||
|
@apply pl-2 mt-2 list-disc ml-5;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-list-item {
|
||||||
|
@apply text-xl text-gray-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</Layout>
|
||||||
223
src/pages/glossar/index.astro
Normal file
223
src/pages/glossar/index.astro
Normal file
@@ -0,0 +1,223 @@
|
|||||||
|
---
|
||||||
|
|
||||||
|
import Layout from "#layouts/Layout.astro";
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout title="Glossar">
|
||||||
|
|
||||||
|
<h1 class="text-3xl">Glossar</h1>
|
||||||
|
|
||||||
|
<div class="mt-12 m-auto w-[90%] relative">
|
||||||
|
|
||||||
|
<div class="glossar">
|
||||||
|
<div class="glossar__section">
|
||||||
|
<h2 class="glossar__section-title">A</h2>
|
||||||
|
<p class="glossar__section-content">
|
||||||
|
<span class="glossar__section-highlight">Altbau:</span> Älteres Gebäude vor 1978 gebaut.<br>
|
||||||
|
<span class="glossar__section-highlight">Anbau:</span> Erweiterung eines Gebäudes, häufig mit unterschiedlichem Baujahr und energetischen Eigenschaften.<br>
|
||||||
|
<span class="glossar__section-highlight">Ausnahmen:</span> Regelungen, die bestimmte Gebäude oder Eigentümer von gesetzlichen Anforderungen befreien.<br>
|
||||||
|
<span class="glossar__section-highlight">Ausweis-Erstellung:</span> Prozess zur Erstellung eines Energieausweises, basierend auf Verbrauchswerten oder bedarfsorientiert gem. DIN 18599 anhand standardisierter Randbedingungen.<br>
|
||||||
|
<span class="glossar__section-highlight">Aktualisierung von Verbrauchsdaten:</span> Verbrauchsdaten dürfen laut GEG nicht älter als 18 Monate sein.<br>
|
||||||
|
<span class="glossar__section-highlight">Austauschpflicht für alte Heizkessel:</span> Heizungen, die älter als 30 Jahre sind und nicht der Brennwert- oder Niedertemperaturtechnik entsprechen, müssen ausgetauscht werden.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glossar__section">
|
||||||
|
<h2 class="glossar__section-title">B</h2>
|
||||||
|
<p class="glossar__section-content">
|
||||||
|
<span class="glossar__section-highlight">Baujahr:</span> Jahr der Errichtung eines Gebäudes oder Gebäudeteils.<br>
|
||||||
|
<span class="glossar__section-highlight">Berechnung:</span> Manuelle oder automatische Ermittlung des Energieverbrauchs oder Energiebedarfs.<br>
|
||||||
|
<span class="glossar__section-highlight">Bestandsgebäude:</span> Bereits existierendes Gebäude, bei dem bei energetischen Sanierungsmaßnahmen andere Anforderungen (sanierter Altbau) gelten als bei Neubauten.<br>
|
||||||
|
<span class="glossar__section-highlight">Blower-Door-Test:</span> Verfahren zur Überprüfung der Luftdichtheit eines Gebäudes.<br>
|
||||||
|
<span class="glossar__section-highlight">Brennwertkessel:</span> Heizsystem, das die Wärme aus Abgasen effizienter nutzt.<br>
|
||||||
|
<span class="glossar__section-highlight">Bußgelder:</span> Finanzielle Strafen für Verstöße gegen gesetzliche Anforderungen, wie falsche Energieausweise oder fehlende Dämmungen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glossar__section">
|
||||||
|
<h2 class="glossar__section-title">D</h2>
|
||||||
|
<p class="glossar__section-content">
|
||||||
|
<span class="glossar__section-highlight">Dachgeschoss:</span> Oberste Etage eines Gebäudes mit Dachschrägen oder als Staffelgeschoß.<br>
|
||||||
|
<span class="glossar__section-highlight">Dachinnenraum:</span> Unausgebauter und unbeheizter Bereich unter dem Dach z.B. Spitzboden oder Ausbaureserve.<br>
|
||||||
|
<span class="glossar__section-highlight">Dachschrägen:</span> Schräg verlaufende Flächen im ausgebauten Dachgeschoss. Die Flävhen unter den Schrägen können nur zur Hälfte bei der Wohnflächenberechnung angesetzt werden.<br>
|
||||||
|
<span class="glossar__section-highlight">Dämmung:</span> Wärmeisolierung eines Gebäudes.<br>
|
||||||
|
<span class="glossar__section-highlight">Dämmstoffe:</span> Materialien zur Reduzierung von Wärmeverlusten, z. B. Mineralwolle, EPS oder Holzfaserplatten.<br>
|
||||||
|
<span class="glossar__section-highlight">Dämmungspflichten:</span> Verpflichtung zur Dämmung bestimmter Gebäudeteile, z. B. Dachböden oder oberste Geschossdecken.<br>
|
||||||
|
<span class="glossar__section-highlight">Denkmalschutz-Ausnahmen:</span> Gebäude unter Denkmalschutz können von bestimmten GEG-Vorgaben ausgenommen sein.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glossar__section">
|
||||||
|
<h2 class="glossar__section-title">E</h2>
|
||||||
|
<p class="glossar__section-content">
|
||||||
|
<span class="glossar__section-highlight">Effizienzhaus 55 (EH55):</span> Neubauten müssen ab 2024 diesen Standard erfüllen.<br>
|
||||||
|
<span class="glossar__section-highlight">E-Mail:</span> Elektronische Kommunikationsmethode zur alternativen Übermittlung von Daten oder Plänen.<br>
|
||||||
|
<span class="glossar__section-highlight">Energieausweis:</span> Dokument, das den energetischen Zustand eines Gebäudes beschreibt und anhand des Endenergiebedarfs oder Endenergieverbrauchs Gebäude vergleichbar machen soll.<br>
|
||||||
|
<span class="glossar__section-highlight">Endenergiebedarf:</span> Fiktonaler Energiebedarf ermittelt anhand standardisierter Randbedinghungen pro m² und Jahr.<br>
|
||||||
|
<span class="glossar__section-highlight">Energieverbrauch:</span> Der gemessene Verbrauch für Heizung und Warmwasser eines Gebäudes.<br>
|
||||||
|
<span class="glossar__section-highlight">Energiebedarf:</span> Theoretischer Energiebedarf eines Gebäudes, berechnet unter standardisierten Bedingungen.<br>
|
||||||
|
<span class="glossar__section-highlight">Energieeffizienzklasse:</span> Einstufung des Gebäudes in Effizienzklassen, z. B. A+ bis H.<br>
|
||||||
|
<span class="glossar__section-highlight">Energetische Nutzfläche:</span> Beheizte Fläche eines Gebäudes (Wohnfläche + beheizte Flächen die nicht zur Wohnfläche gehören).<br>
|
||||||
|
<span class="glossar__section-highlight">Endenergieverbrauch:</span>Klimabereinigter Mittelwert von 3 Verbrauchsjahren für Beheizung, Warmwasserbereitung und Kühlung (wenn vorhanden) pro m² und Jahr.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glossar__section">
|
||||||
|
<h2 class="glossar__section-title">F</h2>
|
||||||
|
<p class="glossar__section-content">
|
||||||
|
<span class="glossar__section-highlight">Förderungen:</span> Finanzielle Unterstützung für energetische Sanierungen oder Neubauten, häufig durch KfW oder BAFA. Z.B. Sanierungsfahrplan (ISFP) oder Bundesförderung für effiziente Gebäude.<br>
|
||||||
|
<span class="glossar__section-highlight">Fördermittel:</span> Zuschüsse oder günstige Kredite für energetische Maßnahmen.<br>
|
||||||
|
<span class="glossar__section-highlight">Falsche Angaben:</span> Fehlerhafte oder irreführende Angaben im Energieausweis, die zu Bußgeldern führen können.
|
||||||
|
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glossar__section">
|
||||||
|
<h2 class="glossar__section-title">G</h2>
|
||||||
|
<p class="glossar__section-content">
|
||||||
|
<span class="glossar__section-highlight">GEG:</span> Gebäudeenergiegesetz, regelt die energetischen Anforderungen an Gebäude.<br>
|
||||||
|
<span class="glossar__section-highlight">Gültigkeitsdauer:</span> Ein Energieausweis ist 10 Jahre gültig.<br>
|
||||||
|
<span class="glossar__section-highlight">Gebäudeteile:</span> Unterteilung von Wohn- und Gewerbeteil für Mischgebäude. Zwei Energieausweise müssen erstellt werden.<br>
|
||||||
|
<span class="glossar__section-highlight">Gebäudekonstruktion:</span> Die bauliche Struktur eines Gebäudes, z. B. Bauweise und Geometrie.<br>
|
||||||
|
<span class="glossar__section-highlight">Grundrisspläne:</span> Architektenzeichnungen die Wände, Räume, Fenster etc als Draufsicht zeigen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glossar__section">
|
||||||
|
<h2 class="glossar__section-title">H</h2>
|
||||||
|
<p class="glossar__section-content">
|
||||||
|
<span class="glossar__section-highlight">Hydraulischer Abgleich:</span> Optimierung der Heizungsanlage zur gleichmäßigen Wärmeverteilung im Gebäude.<br>
|
||||||
|
<span class="glossar__section-highlight">Heizkosten:</span> Kosten, die durch den Energieverbrauch für Heizung und Warmwasser entstehen.<br>
|
||||||
|
<span class="glossar__section-highlight">Heizkessel:</span> Gerät zur Erzeugung von Heizwärme, das bestimmten energetischen Standards entsprechen muss.<br>
|
||||||
|
<span class="glossar__section-highlight">Heizsysteme:</span> Systeme, die Wärme in einem Gebäude bereitstellen, z. B. Wärmepumpen oder Solarthermieanlagen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glossar__section">
|
||||||
|
<h2 class="glossar__section-title">K</h2>
|
||||||
|
<p class="glossar__section-content">
|
||||||
|
<span class="glossar__section-highlight">KfW-Förderung:</span> Unterstützung für energieeffiziente Neubauten oder Sanierungen.<br>
|
||||||
|
<span class="glossar__section-highlight">Kleine Gebäude unter 50 m²:</span> Gebäude mit weniger als 50 m² Nutzfläche fallen oft nicht unter die GEG-Vorgaben.<br>
|
||||||
|
<span class="glossar__section-highlight">Kundenservice:</span> Ansprechpartner für Fragen und Probleme rund um die Energieausweis-Erstellung.<br>
|
||||||
|
<span class="glossar__section-highlight">Kontaktzeiten:</span> Zeitfenster (Mo - Fr von 9 bis 12 Uhr), in denen der Kundenservice erreichbar ist.<br>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glossar__section">
|
||||||
|
<h2 class="glossar__section-title">L</h2>
|
||||||
|
<p class="glossar__section-content">
|
||||||
|
<span class="glossar__section-highlight">Luftdichtheit:</span> Maß für die Abdichtung eines Gebäudes zur Einschätzung der Lüftungswärmeverluste.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glossar__section">
|
||||||
|
<h2 class="glossar__section-title">M</h2>
|
||||||
|
<p class="glossar__section-content">
|
||||||
|
<span class="glossar__section-highlight">Manuelle Bearbeitung:</span> Anpassung der Gebäudedaten, wenn diese nicht in die Standard-Software passen.<br>
|
||||||
|
<span class="glossar__section-highlight">Modernisierung:</span> Maßnahmen zur Verbesserung der Energieeffizienz eines Gebäudes.<br>
|
||||||
|
<span class="glossar__section-highlight">Modernisierungsempfehlungen:</span> Vorschläge zur Verbesserung der Energieeffizienz eines Gebäudes.<br>
|
||||||
|
<span class="glossar__section-highlight">Mischgebäude:</span> Gebäude mit gemischter Nutzung, z. B. Wohn- und Geschäftshäuser.
|
||||||
|
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glossar__section">
|
||||||
|
<h2 class="glossar__section-title">O</h2>
|
||||||
|
<p class="glossar__section-content">
|
||||||
|
<span class="glossar__section-highlight">Online-Energieausweis:</span> Möglichkeit, den Energieausweis digital und effizient zu erstellen unter https://online-energieausweis.org/.<br>
|
||||||
|
<span class="glossar__section-highlight">Oberste Geschossdecke:</span> Decke, die den oberen beheizten Raum vom nicht beheizten Dachraum trennt.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glossar__section">
|
||||||
|
<h2 class="glossar__section-title">P</h2>
|
||||||
|
<p class="glossar__section-content">
|
||||||
|
<span class="glossar__section-highlight">Pflichtfelder:</span> Formularfelder, die zwingend ausgefüllt werden müssen, um den Vorgang abzuschließen. Gebäudebilder sind ebenfalls obligatorisch, können aber noch nach der Bestellung hochgeladen werden.<br>
|
||||||
|
<span class="glossar__section-highlight">Pläne:</span> Bauzeichnungen, die für die Erstellung eines Energieausweises erforderlich sind.<br>
|
||||||
|
<span class="glossar__section-highlight">Primärenergiebedarf:</span> Endenergiebedarf multipliziert mit dem Primärenergiefaktor. Dadurch wird die Nachhaltigkeit bzw. Co2-Effizienz des Gebäudes dokumentiert.
|
||||||
|
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glossar__section">
|
||||||
|
<h2 class="glossar__section-title">R</h2>
|
||||||
|
<p class="glossar__section-content">
|
||||||
|
<span class="glossar__section-highlight">Rechnung:</span> Finanzielle Abrechnung für die Erstellung eines Energieausweises. Wir zusammen mit dem Originalasweis verschickt.<br>
|
||||||
|
<span class="glossar__section-highlight">Rechnungskauf:</span> Zahlungsart, bei der die Bezahlung erst nach Erhalt der Rechnung erfolgt.<br>
|
||||||
|
<span class="glossar__section-highlight">Rückruf:</span> Telefonischer Kontakt durch den Anbieter zur Klärung offener Fragen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glossar__section">
|
||||||
|
<h2 class="glossar__section-title">S</h2>
|
||||||
|
<p class="glossar__section-content">
|
||||||
|
<span class="glossar__section-highlight">Sanierung:</span> Umfassende bauliche Maßnahmen zur Verbesserung der Energieeffizienz eines Gebäudes.<br>
|
||||||
|
<span class="glossar__section-highlight">Spam-Ordner:</span> Ordner in einem E-Mail-Postfach, in dem automatisch gefilterte vermeintlich ungewollte Nachrichten abgelegt werden.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glossar__section">
|
||||||
|
<h2 class="glossar__section-title">T</h2>
|
||||||
|
<p class="glossar__section-content">
|
||||||
|
<span class="glossar__section-highlight">Thermografie:</span> Verfahren, das Wärmeverluste eines Gebäudes mit einer Wärmebildkamera sichtbar macht.<br>
|
||||||
|
<span class="glossar__section-highlight">Treppenhäuser:</span> Gehören nicht zur Wohnfläche, können aber Teil der energetischen Nutzfläche sein.<br>
|
||||||
|
<span class="glossar__section-highlight">Transmissionswärmeverlust:</span> Wärmeverlust durch Bauteile wie Wände, Dächer oder Fenster.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="glossar__section">
|
||||||
|
<h2 class="glossar__section-title">W</h2>
|
||||||
|
<p class="glossar__section-content">
|
||||||
|
<span class="glossar__section-highlight">Wohngebäude:</span> Gebäude, die zu Wohnzwecken genutzt werden.<br>
|
||||||
|
<span class="glossar__section-highlight">Wärmebrücken:</span> Bauteile, die Wärme schneller nach außen leiten als die umliegenden Flächen.<br>
|
||||||
|
<span class="glossar__section-highlight">Wärmepumpen:</span> Heizsystem, das Umgebungswärme (z. B. aus Luft oder Erde) nutzt.<br>
|
||||||
|
<span class="glossar__section-highlight">Wohnfläche:</span> Fläche eines Gebäudes, die für Wohnzwecke genutzt wird.<br>
|
||||||
|
<span class="glossar__section-highlight">Weiterklicken:</span> Navigation zum nächsten Schritt im Formular, die nur funktioniert, wenn alle Pflichtfelder ausgefüllt sind.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
.glossar {
|
||||||
|
@apply space-y-6;
|
||||||
|
|
||||||
|
&__section {
|
||||||
|
@apply border-b pb-4;
|
||||||
|
|
||||||
|
&-title {
|
||||||
|
@apply text-2xl font-bold text-gray-800 mb-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-content {
|
||||||
|
@apply text-gray-600 text-xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-highlight {
|
||||||
|
@apply font-semibold text-gray-900;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-email {
|
||||||
|
@apply text-secondary underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-list {
|
||||||
|
@apply pl-2 mt-2 list-disc ml-5;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-list-item {
|
||||||
|
@apply text-xl text-gray-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</Layout>
|
||||||
@@ -8,7 +8,7 @@ import BannerPrice from "#content/banner-saeule.svelte";
|
|||||||
|
|
||||||
<h1>Unsere Ausweise im Detail:</h1>
|
<h1>Unsere Ausweise im Detail:</h1>
|
||||||
|
|
||||||
<BannerPrice client:load />
|
<!-- <BannerPrice client:load /> -->
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
6
src/pages/test.astro
Normal file
6
src/pages/test.astro
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
<div class="grid grid-cols-formbutton-line-4">
|
||||||
|
<div>1</div>
|
||||||
|
<div>2</div>
|
||||||
|
<div>3</div>
|
||||||
|
<div>4</div>
|
||||||
|
</div>
|
||||||
@@ -1,26 +1,39 @@
|
|||||||
|
|
||||||
|
#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}
|
||||||
|
|
||||||
|
|
||||||
.Phase_und_Skala{grid-area:phase_und_skala;}
|
.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;}
|
||||||
.Bereich_A{grid-area:a}
|
.formular-abschnitt2{@apply text-[1.25rem] pl-1;}
|
||||||
.Bereich_B{grid-area:b}
|
|
||||||
|
|
||||||
#formular-box{
|
.bereichs-label{@apply px-4 sm:px-0 mt-6 mb-3}
|
||||||
@apply border-2 border-[#ffcc03] p-4 rounded-lg bg-formular-box;
|
|
||||||
/* background: linear-gradient(
|
.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,
|
135deg,
|
||||||
rgba(252, 234, 187, 1) 0%,
|
rgba(252, 234, 187, 1) 0%,
|
||||||
rgba(253, 235, 189, 1) 52%,
|
rgba(253, 235, 189, 1) 50%,
|
||||||
rgba(251, 223, 147, 1) 100%
|
rgba(251, 223, 147, 1) 100%
|
||||||
|
|
||||||
); */
|
); */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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}
|
||||||
|
|
||||||
.GRB {
|
|
||||||
@apply border-2 border-[#ffcc03] p-4 flex flex-row rounded-lg justify-between w-full bg-[rgba(252,234,187,0.2)];
|
|
||||||
/* background: linear-gradient(
|
|
||||||
135deg,
|
/*
|
||||||
rgba(252, 234, 187, 1) 0%,
|
|
||||||
rgba(253, 235, 189, 1) 52%,
|
|
||||||
rgba(251, 223, 147, 1) 100%
|
:global(input[type="number"]:disabled) {
|
||||||
); */
|
@apply bg-gray-200 border border-gray-300;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:global(.linked) {
|
||||||
|
@apply border-2 border-red-400;
|
||||||
|
}
|
||||||
|
*/
|
||||||
@@ -48,14 +48,25 @@
|
|||||||
|
|
||||||
|
|
||||||
body{
|
body{
|
||||||
@apply bg-[url('/images/pattern.png')] bg-repeat bg-fixed max-w-[1920px] mx-auto border-gray-200 border-[1px] min-w-[320px]
|
@apply bg-[url('/images/pattern.png')] bg-repeat bg-fixed max-w-[1920px] mx-auto border-gray-200 border-[1px] min-w-[320px]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.button {
|
||||||
|
@apply w-full h-[38px] px-4 py-2 bg-secondary ring-2 ring-secondary/25 rounded-none xs:rounded-md text-white text-nowrap
|
||||||
|
hover:bg-gradient-to-br from-secondary to-secondary-grad hover:shadow-lg transition-all hover:no-underline hover:ring-2 hover:ring-primary
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"], input[type="number"], input[type="password"], select{
|
||||||
|
@apply min-h-[38px] ring-1 ring-black/15 rounded-sm}
|
||||||
|
input[type="checkbox"]{@apply inline-block}
|
||||||
|
radio{@apply accent-primary}
|
||||||
|
|
||||||
|
|
||||||
/*ARTICLE*/
|
/*ARTICLE*/
|
||||||
|
|
||||||
article {
|
article {
|
||||||
@apply px-6 py-6 w-full relative bg-white min-h-screen;
|
@apply w-full relative bg-white min-h-screen px-0 py-0;
|
||||||
|
|
||||||
hr {@apply mb-4 mt-4;}
|
hr {@apply mb-4 mt-4;}
|
||||||
|
|
||||||
@@ -71,8 +82,9 @@ article {
|
|||||||
|
|
||||||
/*BOXES*/
|
/*BOXES*/
|
||||||
.box{
|
.box{
|
||||||
@apply rounded-none
|
@apply rounded-lg
|
||||||
lg:rounded-lg lg:shadow-box lg:ring-1 lg:ring-gray-300
|
|
||||||
|
lg:shadow-box lg:ring-1 lg:ring-gray-300
|
||||||
xl:rounded-xl
|
xl:rounded-xl
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -103,6 +115,7 @@ article {
|
|||||||
@apply !bg-primary !text-white cursor-pointer
|
@apply !bg-primary !text-white cursor-pointer
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.nav-element:hover > .dropdown-content{
|
.nav-element:hover > .dropdown-content{
|
||||||
@apply lg:visible lg:opacity-100 lg:block lg:ml-[calc(100%+2px)]
|
@apply lg:visible lg:opacity-100 lg:block lg:ml-[calc(100%+2px)]
|
||||||
}
|
}
|
||||||
@@ -118,7 +131,7 @@ article {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nav-element-child{
|
.nav-element-child{
|
||||||
@apply px-6 py-3 w-full justify-start text-sm bg-white flex !no-underline text-black
|
@apply px-4 py-2 w-full justify-start text-sm bg-white flex !no-underline text-black
|
||||||
xl:text-lg
|
xl:text-lg
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -129,8 +142,8 @@ article {
|
|||||||
li {@apply text-sm bg-white flex
|
li {@apply text-sm bg-white flex
|
||||||
xl:text-lg}
|
xl:text-lg}
|
||||||
|
|
||||||
li a {@apply w-full text-sm px-6 py-3 rounded-none no-underline text-white hover:text-white bg-secondary
|
li a {@apply w-full text-sm px-4 py-2 rounded-none no-underline hover:text-white hover:bg-gradient-to-br from-secondary to-secondary-grad
|
||||||
lg:px-4 lg:bg-[#efefef] lg:text-black lg:hover:bg-secondary
|
lg:px-4 bg-[#efefef] text-black lg:hover:bg-secondary
|
||||||
xl:text-lg}
|
xl:text-lg}
|
||||||
|
|
||||||
li:not(:first-child) {@apply !border-gray-200 !border-t-[1px]}
|
li:not(:first-child) {@apply !border-gray-200 !border-t-[1px]}
|
||||||
|
|||||||
@@ -9,15 +9,22 @@ module.exports = {
|
|||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
screens: {
|
screens: {
|
||||||
xs: '480px'
|
'2xs': '320px',
|
||||||
|
xs: '480px',
|
||||||
},
|
},
|
||||||
|
|
||||||
|
content: {
|
||||||
|
'nav-disc': ' ',
|
||||||
|
},
|
||||||
|
|
||||||
colors: {
|
colors: {
|
||||||
'primary': '#ff7d26',
|
'primary': '#ff7d26',
|
||||||
|
'primary-grad': '#ff7d26',
|
||||||
'primary-focus': '#ec6a13',
|
'primary-focus': '#ec6a13',
|
||||||
'primary-content': '#ffffff',
|
'primary-content': '#ffffff',
|
||||||
|
|
||||||
'secondary': '#444f94',
|
'secondary': '#444f94',
|
||||||
|
'secondary-grad': '#546AB2',
|
||||||
'secondary-focus': '#2f397f',
|
'secondary-focus': '#2f397f',
|
||||||
'secondary-content': '#ffffff',
|
'secondary-content': '#ffffff',
|
||||||
|
|
||||||
@@ -25,7 +32,12 @@ module.exports = {
|
|||||||
'base-content': '#1e2734',
|
'base-content': '#1e2734',
|
||||||
'box-heading': '#3A4AB5',
|
'box-heading': '#3A4AB5',
|
||||||
|
|
||||||
|
|
||||||
"formular-box": "rgba(252,234,187,0.2)",
|
"formular-box": "rgba(252,234,187,0.2)",
|
||||||
|
"formular-rahmen": "rgba(255,204,6,1)",
|
||||||
|
|
||||||
|
"bereich-box": "rgba(252,234,187,0.2)",
|
||||||
|
|
||||||
|
|
||||||
"pdf-yellow-bright": "#f3cb00",
|
"pdf-yellow-bright": "#f3cb00",
|
||||||
"pdf-yellow-light": "#fff6ca",
|
"pdf-yellow-light": "#fff6ca",
|
||||||
@@ -37,7 +49,27 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
gridTemplateColumns: {
|
gridTemplateColumns: {
|
||||||
// Simple 16 column grid
|
'formbutton-line': 'minmax(150px, 1fr) 1fr minmax(150px, 1fr) minmax(160px, 160px)',
|
||||||
|
'formbutton-line-md': 'minmax(150px, 1fr) 1fr minmax(150px, 1fr) minmax(160px, 160px)',
|
||||||
|
'formbutton-line-xl': 'minmax(150px, 1fr) 1fr minmax(150px, 1fr) minmax(160px, 160px)',
|
||||||
|
'formbutton-line-2xl': 'minmax(150px, 1fr) 1fr minmax(150px, 1fr) minmax(160px, 160px)',
|
||||||
|
|
||||||
|
'bereich-A': '1fr',
|
||||||
|
'bereich-A-md': '2fr 2fr',
|
||||||
|
'bereich-A-xl': '2fr 2fr',
|
||||||
|
'bereich-A-2xl': '3fr 4fr',
|
||||||
|
|
||||||
|
'bereich-B': '1fr',
|
||||||
|
'bereich-B-lg': '2fr 2fr',
|
||||||
|
'bereich-B-xl': '2fr 2fr',
|
||||||
|
'bereich-B-2xl': '3fr 4fr',
|
||||||
|
|
||||||
|
'bereich-C': '1fr',
|
||||||
|
'bereich-C-lg': '2fr 2fr',
|
||||||
|
'bereich-C-xl': '2fr 2fr',
|
||||||
|
'bereich-C-2xl': '3fr 4fr',
|
||||||
|
|
||||||
|
|
||||||
//'standard-sm': 'minmax(350px, 2fr) 6fr minmax(350px, 2fr)',
|
//'standard-sm': 'minmax(350px, 2fr) 6fr minmax(350px, 2fr)',
|
||||||
//'standard-md': 'minmax(350px, 2fr) 6fr minmax(350px, 2fr)',
|
//'standard-md': 'minmax(350px, 2fr) 6fr minmax(350px, 2fr)',
|
||||||
//'standard-lg': 'minmax(350px, 2fr) 6fr minmax(350px, 2fr)',
|
//'standard-lg': 'minmax(350px, 2fr) 6fr minmax(350px, 2fr)',
|
||||||
|
|||||||
@@ -37,6 +37,7 @@
|
|||||||
"#sidebarRight/*": ["./src/components/design/sidebars/right/*"],
|
"#sidebarRight/*": ["./src/components/design/sidebars/right/*"],
|
||||||
|
|
||||||
"#ausweise/*": ["./src/pages/energieausweis-erstellen/*"],
|
"#ausweise/*": ["./src/pages/energieausweis-erstellen/*"],
|
||||||
|
"#labels/*": ["./src/components/labels/*"]
|
||||||
},
|
},
|
||||||
"types": ["cypress", "cypress-file-upload", "bun-types", "svelte"]
|
"types": ["cypress", "cypress-file-upload", "bun-types", "svelte"]
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user