Update dev-pipeline #28
28
public/images/header/logo-IBC-big.svg
Normal file
28
public/images/header/logo-IBC-big.svg
Normal file
@@ -0,0 +1,28 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 143 163.6">
|
||||
<!-- Generator: Adobe Illustrator 29.1.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 142) -->
|
||||
<defs>
|
||||
<style>
|
||||
.st0 {
|
||||
display: none;
|
||||
fill: #878787;
|
||||
}
|
||||
|
||||
.st1 {
|
||||
fill: #445096;
|
||||
}
|
||||
</style>
|
||||
</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"/>
|
||||
<g>
|
||||
<path class="st1" d="M17.6,144.6H3.2V63.3h14.4v81.2Z"/>
|
||||
<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="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="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="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"/>
|
||||
<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"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -2,6 +2,8 @@
|
||||
import { PRICES } from "#lib/constants";
|
||||
</script>
|
||||
|
||||
<div class="mt-12 m-auto w-[90%] relative">
|
||||
|
||||
<div id="saeulen">
|
||||
|
||||
<div class="saeule">
|
||||
@@ -9,23 +11,29 @@
|
||||
<img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Wohnhaus Verbrauchsausweis"/>
|
||||
<div class="name">Verbrauchsausweis<br>Wohngebäude</div>
|
||||
</div>
|
||||
|
||||
<div class="white box">
|
||||
<div class="variante">einfach</div>
|
||||
<div class="services"><div>Einfache Berechnung anhand von 3 Jahresverbräuchen der Heizung. Das Enddatum darf nicht älter als 18 Monate sein.</div><div class="check">✔</div></div>
|
||||
<div class="services"><div>Zulässig bei Vermietung oder Verkauf Ihres Immobilienobjektes.</div><div class="check">✔</div></div>
|
||||
<div class="services"><div>Unzulässig bei unsanierten Gebäuden vor 1978 gebaut mit weniger als 5 Wohnungen.</div><div class="check-no">✘</div></div>
|
||||
<div class="services"><div>Für bauliche und energetische Maßnahmen ungeeignet. Starke Abweichungen durch individuelles Heizverhalten.</div><div class="check-no">✘</div></div>
|
||||
<div class="services"><div>Wird nicht immer bei den Banken für die Kreditunterlagen akzeptiert.</div><div class="check-no">✘</div></div>
|
||||
</div>
|
||||
|
||||
<div class="orange">
|
||||
<div class="ab">ab:</div>
|
||||
<div class="price font-bold promo1">{PRICES.VerbrauchsausweisWohnen[0]}</div>
|
||||
<div class="mwst">inkl. 19% MwSt.</div>
|
||||
</div>
|
||||
<div class="white">
|
||||
<div class="services">Unsere Leistungen: </div>
|
||||
<div class="services">Prüfung durch Dipl.Ing.</div>
|
||||
<div class="services">Vorschau als PDF</div>
|
||||
<div class="services">PDF per E-Mail</div>
|
||||
<div class="services">Registrierung beim DiBt</div>
|
||||
<div class="services">Bearbeitung innhalb 24h</div>
|
||||
<div class="services">rechtssicher nach GEG</div>
|
||||
<div class="services">telefonische Beratung</div>
|
||||
<div class="price">
|
||||
ab <b> {PRICES.VerbrauchsausweisWohnen[0]} </b>€ inkl. 19% MwSt.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="blue-bottom">
|
||||
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
|
||||
<div class="cta">jetzt online erstellen</div>
|
||||
</div>
|
||||
|
||||
<div class="blue-bottom">
|
||||
<div class="cta">zur Produktübersicht</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -34,99 +42,75 @@
|
||||
<img class="" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Wohnhaus Bedarfsausweis"/>
|
||||
<div class="name">Verbrauchsausweis<br>Gewerbe</div>
|
||||
</div>
|
||||
|
||||
<div class="white box">
|
||||
<div class="variante">fundiert</div>
|
||||
<div class="services"><div>Berechnung mit Erfassung der Gebäudegeometrie, U-Werte der Außenbauteile sowie dem Wirkungsgrad der Heizung.</div><div class="check">✔</div></div>
|
||||
<div class="services"><div>Zulässig bei Vermietung, Verkauf, Modernisierung und Neubau.</div><div class="check">✔</div></div>
|
||||
<div class="services"><div>Zulässig für alle Gebäude, insbesondere alte und unsanierte Objekte.</div><div class="check">✔</div></div>
|
||||
<div class="services"><div>Kann als Grundlage für Sanierungsvarianten sowie weitere Maßnahmen (z.B. iSFP) herangezogen werden.</div><div class="check">✔</div></div>
|
||||
<div class="services"><div>Objektive Berechnung die für die Kreditunterlagen besser geeignet ist.</div><div class="check">✔</div></div>
|
||||
</div>
|
||||
|
||||
<div class="orange">
|
||||
<div class="ab">ab:</div>
|
||||
<div class="price font-bold promo1">{PRICES.VerbrauchsausweisGewerbe[0]}</div>
|
||||
<div class="mwst">inkl. 19% MwSt.</div>
|
||||
</div>
|
||||
<div class="white">
|
||||
<div class="services">Unsere Leistungen: </div>
|
||||
<div class="services">Prüfung durch Dipl.Ing.</div>
|
||||
<div class="services">Vorschau als PDF</div>
|
||||
<div class="services">PDF per E-Mail</div>
|
||||
<div class="services">Registrierung beim DiBt</div>
|
||||
<div class="services">Bearbeitung innhalb 24h</div>
|
||||
<div class="services">rechtssicher nach GEG</div>
|
||||
<div class="services">telefonische Beratung</div>
|
||||
<div class="price">
|
||||
ab <b>{PRICES.BedarfsausweisWohnen[0]} </b>€ inkl. 19% MwSt.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="blue-bottom">
|
||||
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
|
||||
<div class="cta">jetzt online erstellen</div>
|
||||
</div>
|
||||
|
||||
<div class="blue-bottom">
|
||||
<div class="cta">zur Produktübersicht</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="saeule">
|
||||
<div class="blue-top">
|
||||
<img class="" src="/images/right-sidebar/UMBE_wohngebaeude-weiss.svg" alt="Gewerbe Verbrauchsausweis"/>
|
||||
<div class="name">Bedarfsausweis<br>Wohngebäude</div>
|
||||
</div>
|
||||
<div class="orange">
|
||||
<div class="ab">ab:</div>
|
||||
<div class="price font-bold promo1">{PRICES.BedarfsausweisWohnen[0]}</div>
|
||||
<div class="mwst">inkl. 19% MwSt.</div>
|
||||
</div>
|
||||
<div class="white">
|
||||
<div class="services">Unsere Leistungen: </div>
|
||||
<div class="services">Prüfung durch Dipl.Ing.</div>
|
||||
<div class="services">Vorschau als PDF</div>
|
||||
<div class="services">PDF per E-Mail</div>
|
||||
<div class="services">Registrierung beim DiBt</div>
|
||||
<div class="services">Bearbeitung innhalb 24h</div>
|
||||
<div class="services">rechtssicher nach GEG</div>
|
||||
<div class="services">telefonische Beratung</div>
|
||||
</div>
|
||||
<div class="blue-bottom">
|
||||
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="saeule">
|
||||
<div class="blue-top">
|
||||
<img class="" src="/images/right-sidebar/UMBE_gewerbegebaeude-weiss.svg" alt="Gewerbe Bedarfsausweis"/>
|
||||
<div class="name">Bedarfsausweis<br>Gewerbe</div>
|
||||
</div>
|
||||
<div class="orange">
|
||||
<div class="ab">ab:</div>
|
||||
<div class="price font-bold promo1">{PRICES.BedarfsausweisGewerbe[0]}</div>
|
||||
<div class="mwst">inkl. 19% MwSt.</div>
|
||||
</div>
|
||||
<div class="white">
|
||||
<div class="services">Unsere Leistungen: </div>
|
||||
<div class="services">Prüfung durch Dipl.Ing.</div>
|
||||
<div class="services">Vorschau als PDF</div>
|
||||
<div class="services">PDF per E-Mail</div>
|
||||
<div class="services">Registrierung beim DiBt</div>
|
||||
<div class="services">Bearbeitung innhalb 24h</div>
|
||||
<div class="services">rechtssicher nach GEG</div>
|
||||
<div class="services">telefonische Beratung</div>
|
||||
</div>
|
||||
<div class="blue-bottom">
|
||||
<div class="cta">jetzt sofort Energieausweis<br>online erstellen</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
#saeulen{@apply grid grid-cols-[1fr] gap-4
|
||||
lg:grid-cols-[1fr,1fr,1fr]
|
||||
xl:grid-cols-[1fr,1fr,1fr,1fr];
|
||||
.saeule{@apply grid;
|
||||
img{@apply w-full justify-self-center mb-1 min-h-[50px] }
|
||||
.blue-top{@apply bg-secondary text-white text-center font-bold rounded-md mb-1 p-4}
|
||||
|
||||
|
||||
#saeulen{@apply
|
||||
grid grid-cols-[1fr] gap-y-3 gap-x-6
|
||||
lg:grid-cols-2
|
||||
xl:grid-cols-2;
|
||||
|
||||
|
||||
.saeule{@apply grid grid-rows-subgrid row-span-10;
|
||||
img{@apply justify-self-center mb-1 w-[50%] }
|
||||
|
||||
|
||||
.blue-top{@apply bg-secondary text-white text-center font-bold rounded-md mb-1 p-4 shadow-saeule ring-secondary ring-1}
|
||||
.name{@apply w-full}
|
||||
.name{font-size: clamp(15px, 2vh, 18px)}
|
||||
.orange{@apply bg-primary text-white text-center rounded-t-md p-2 relative}
|
||||
.ab{@apply leading-[1]}
|
||||
.mwst{@apply leading-[auto]}
|
||||
.price{font-size: clamp(15px, 5vh, 50px)}
|
||||
.price:before{@apply content-['€'] absolute font-sans font-normal text-[60%] left-[15%] top-[30%]}
|
||||
.white{@apply border-x-[1px] border-gray-500 text-center text-black p-4}
|
||||
.services{@apply py-2}
|
||||
.services:first-child{@apply font-bold}
|
||||
.services:nth-child(even){@apply bg-white}
|
||||
.services:not(:last-child){@apply border-b-[1px] border-gray-300}
|
||||
.blue-bottom{@apply bg-secondary text-white text-center font-bold rounded-b-md p-4}
|
||||
.name{font-size: clamp(15px, 3vh, 18px)}
|
||||
|
||||
.white{@apply text-center text-black p-4 grid grid-rows-subgrid row-span-6 shadow-saeule}
|
||||
|
||||
.variante{@apply w-fit text-black justify-self-end mr-4}
|
||||
.variante{font-size: clamp(15px, 4vh, 24px)}
|
||||
|
||||
.services{@apply text-base py-4 grid grid-cols-[1fr_minmax(10px,50px)]}
|
||||
.services:not(:last-child){@apply border-b-[1px] border-gray-200}
|
||||
.check{@apply self-center font-bold text-green-700}
|
||||
.check-no{@apply self-center font-bold text-red-700}
|
||||
|
||||
|
||||
|
||||
.orange{@apply bg-primary text-white text-center rounded-md p-4 relative shadow-saeule ring-primary ring-1}
|
||||
.price{font-size: clamp(15px, 3vh, 28px)}
|
||||
.blue-bottom, .check, .check-no{font-size: clamp(15px, 3vh, 24px)}
|
||||
|
||||
|
||||
|
||||
.blue-bottom{@apply bg-secondary text-white text-center font-bold rounded-md p-4 shadow-saeule ring-secondary ring-1}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,25 +1,22 @@
|
||||
<header class="max-w-[1920px] w-full relative bg-white
|
||||
md:bg-[url('/images/header/header-bg.jpg')]
|
||||
md:bg-cover md:grid md:grid-cols-2
|
||||
lg:grid lg:grid-cols-3">
|
||||
---
|
||||
import Login from "#sidebarCards/card-login.svelte";
|
||||
---
|
||||
|
||||
<header>
|
||||
|
||||
<div class="max-w-[1920px] w-full grid relative bg-white
|
||||
|
||||
sm:grid-cols-[minmax(320px,auto)] sm:pl-6 sm:pr-3 sm:py-2
|
||||
md:grid-cols-[minmax(320px,auto)] md:pl-6 md:pr-3 md:py-2
|
||||
|
||||
lg:grid-cols-[1fr_minmax(450px,450px)] lg:gap-3 lg:px-5 lg:py-4
|
||||
xl:grid-cols-[1fr_minmax(450px,450px)] xl:gap-4 xl:px-5 xl:py-4
|
||||
2xl:grid-cols-[1fr_minmax(450px,450px)] 2xl:gap-5 2xl:px-5 2xl:py-4">
|
||||
|
||||
|
||||
|
||||
<div class="
|
||||
justify-self-center px-2 py-2
|
||||
xs:px-6 xs:py-4
|
||||
md:px-4 md:py-4
|
||||
md:col-end-4 md:justify-self-end
|
||||
xl:my-4 xl:mr-9 xl:p-0">
|
||||
|
||||
|
||||
<a href="/">
|
||||
<img class="
|
||||
w-full
|
||||
md:w-[350px]
|
||||
lg:w-[420px]"
|
||||
src="/images/header/UMBE_IBC-logo.svg" alt="IBCornelsen-Logo"/>
|
||||
</a>
|
||||
<!---
|
||||
lg:bg-[url('/images/header/header-bg.jpg')] lg:bg-cover
|
||||
|
||||
<h2 class="text-secondary font-normal absolute
|
||||
top-1 right-2 text-[1.1rem]
|
||||
@@ -37,26 +34,52 @@ lg:grid lg:grid-cols-3">
|
||||
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>
|
||||
</h2> -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<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:leading-[2rem]
|
||||
xl:[font-size:_clamp(15px,3vw,36px)]
|
||||
xl:leading-[4.5rem] pt-[0px]">
|
||||
Energieausweis online erstellen</div>
|
||||
<div class="text-primary
|
||||
lg:[font-size:_clamp(15px,3vw,20px)]
|
||||
lg:leading-[2rem]
|
||||
xl:[font-size:_clamp(15px,3vw,24px)]
|
||||
xl:leading-[0.5rem] pl-[1px]">
|
||||
Energieausweise nach aktuellem GEG</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 class="col-start-1 col-span-3">
|
||||
<div class="px-2 flex flex-row w-full justify-end items-center bg-primary
|
||||
lg:h-[14px] xl:h-[18px]">
|
||||
|
||||
<!-- <a
|
||||
class="header-button hidden md:block"
|
||||
href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
|
||||
>Energieausweis erstellen</a
|
||||
>
|
||||
<a class="header-button hidden md:block" href="/kontakt"
|
||||
>Kontakt</a
|
||||
>
|
||||
<a class="header-button hidden md:block" href="/agb">AGB</a>
|
||||
-->
|
||||
|
||||
</div>
|
||||
lg:h-[12px] xl:h-[12px]"></div>
|
||||
<div class="px-2 flex flex-row w-full justify-end items-center bg-secondary
|
||||
lg:h-[0px] xl:h-[0px]"></div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
68
src/components/design/header/Header_1.astro
Normal file
68
src/components/design/header/Header_1.astro
Normal file
@@ -0,0 +1,68 @@
|
||||
<header class="max-w-[1920px] w-full relative bg-white
|
||||
md:bg-[url('/images/header/header-bg.jpg')]
|
||||
md:bg-cover md:grid md:grid-cols-2
|
||||
lg:grid lg:grid-cols-3">
|
||||
|
||||
|
||||
|
||||
<div class="
|
||||
justify-self-center px-2 py-2
|
||||
xs:px-6 xs:py-4
|
||||
md:px-4 md:py-4
|
||||
md:col-end-4 md:justify-self-end
|
||||
xl:my-4 xl:mr-9 xl:p-0">
|
||||
|
||||
|
||||
<a href="/">
|
||||
<img class="
|
||||
w-full
|
||||
md:w-[350px]
|
||||
lg:w-[420px]"
|
||||
src="/images/header/UMBE_IBC-logo.svg" alt="IBCornelsen-Logo"/>
|
||||
</a>
|
||||
|
||||
<h2 class="text-secondary font-normal absolute
|
||||
top-1 right-2 text-[1.1rem]
|
||||
xs:top-[1.5rem] xs:right-6 xs:text-[1.55rem]
|
||||
|
||||
md:top-[1.25rem] md:right-4 md:text-[1.1rem]
|
||||
xl:top-[1.5rem] xl:right-9 xl:text-[1.4rem]">
|
||||
Energieausweis online erstellen
|
||||
</h2>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="col-start-1 col-span-3">
|
||||
<div class="px-2 flex flex-row w-full justify-end items-center bg-primary
|
||||
lg:h-[14px] xl:h-[18px]">
|
||||
|
||||
<!-- <a
|
||||
class="header-button hidden md:block"
|
||||
href="/energieausweis-erstellen/verbrauchsausweis-erstellen"
|
||||
>Energieausweis erstellen</a
|
||||
>
|
||||
<a class="header-button hidden md:block" href="/kontakt"
|
||||
>Kontakt</a
|
||||
>
|
||||
<a class="header-button hidden md:block" href="/agb">AGB</a>
|
||||
-->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.header-button {
|
||||
@apply px-4 py-2 text-primary-content font-medium text-lg tracking-normal hover:bg-secondary h-full;
|
||||
}
|
||||
</style>
|
||||
@@ -10,16 +10,13 @@ class=" box card hidden bg-white px-6 py-4 mb-5
|
||||
|
||||
<h2>Bedarfssausweis Gewerbe</h2>
|
||||
<hr class="mb-4">
|
||||
<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
|
||||
|
||||
<img class="w-[70%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Bedarfsausweis"/>
|
||||
<p class="promo tracking-tighter text-[2rem] text-gray-700 pl-6">ab<span class="promo pl-[0.2rem]">{PRICES.BedarfsausweisGewerbe[0]}</span>€</p>
|
||||
<a href="./energieausweis-erstellen/bedarfsausweis-gewerbe/" 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 Bedarfssausweis erstellen</a>
|
||||
</div>
|
||||
|
||||
<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-[0.2rem]">300</span>€</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -3,23 +3,19 @@
|
||||
</script>
|
||||
|
||||
<div id ="card-BA-promo"
|
||||
class=" box card hidden bg-white px-6 py-4 mb-5
|
||||
lg:block">
|
||||
class=" box card bg-white px-6 py-4 mb-5">
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<h2>Bedarfssausweis Wohngebäude</h2>
|
||||
<hr class="mb-4">
|
||||
<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
|
||||
|
||||
<img class="w-[70%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
|
||||
<p class="promo tracking-tighter text-[2rem] text-gray-700 pl-6">ab<span class="promo pl-[0.2rem]">{PRICES.BedarfsausweisWohnen[0]}</span>€</p>
|
||||
<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 Bedarfssausweis erstellen</a>
|
||||
</div>
|
||||
|
||||
<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-[0.2rem]">{PRICES.BedarfsausweisWohnen[0]}</span>€</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -3,23 +3,19 @@
|
||||
</script>
|
||||
|
||||
<div id ="card-VA-G-promo"
|
||||
class=" box card hidden bg-white px-6 py-4 mb-5
|
||||
lg:block">
|
||||
class=" box card bg-white px-6 py-4 mb-5">
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<h2>Verbrauchsausweis Gewerbe</h2>
|
||||
<hr class="mb-4">
|
||||
<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Verbrauchsausweis"/>
|
||||
|
||||
<img class="w-[70%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_gewerbegebaeude.svg" alt="Gewerbe Verbrauchsausweis"/>
|
||||
<p class="promo tracking-tighter text-[2rem] text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisGewerbe[0]}</span>€</p>
|
||||
<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 Verbrauchsausweis erstellen</a>
|
||||
</div>
|
||||
|
||||
<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisGewerbe[0]}</span>€</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -3,23 +3,19 @@
|
||||
</script>
|
||||
|
||||
<div id ="card-VA-promo"
|
||||
class=" box card hidden bg-white px-6 py-4 mb-5
|
||||
lg:block">
|
||||
class=" box card bg-white px-6 py-4 mb-5">
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<h2>Verbrauchsausweis Wohngebäude</h2>
|
||||
<hr class="mb-4">
|
||||
<img class="w-[80%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
|
||||
|
||||
<img class="w-[70%] justify-self-center !min-w-[100px] mb-[1rem]" src="/images/right-sidebar/UMBE_wohngebaeude.svg" alt="Wohnhaus Verbrauchsausweis"/>
|
||||
<p class="promo tracking-tighter text-[2rem] text-gray-700 pl-6">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisWohnen[0]}</span>€</p>
|
||||
<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 Verbrauchsausweis erstellen</a>
|
||||
</div>
|
||||
|
||||
<p class="promo tracking-tighter absolute top-[9.7rem] left-[2.5rem] text-[2rem] text-gray-700">ab<span class="promo pl-2">{PRICES.VerbrauchsausweisWohnen[0]}</span>€</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
87
src/components/design/sidebars/cards/card-login.svelte
Normal file
87
src/components/design/sidebars/cards/card-login.svelte
Normal file
@@ -0,0 +1,87 @@
|
||||
<script lang="ts">
|
||||
import { loginClient } from "#lib/login";
|
||||
import CrossCircled from "radix-svelte-icons/src/lib/icons/CrossCircled.svelte";
|
||||
import { fade } from "svelte/transition";
|
||||
|
||||
let email: string;
|
||||
let passwort: string;
|
||||
|
||||
async function login(e: SubmitEvent) {
|
||||
console.log(e);
|
||||
|
||||
e.preventDefault();
|
||||
const response = await loginClient(email, passwort);
|
||||
|
||||
if (response === null) {
|
||||
errorHidden = false;
|
||||
} else {
|
||||
window.location.href = "/dashboard";
|
||||
}
|
||||
}
|
||||
|
||||
let errorHidden = true;
|
||||
</script>
|
||||
|
||||
<div
|
||||
id="card-login">
|
||||
|
||||
<div>
|
||||
|
||||
|
||||
<form on:submit={login}>
|
||||
<div class="grid grid-cols-[1fr_1fr] gap-2">
|
||||
<input
|
||||
class="my-1 rounded-md px-2 py-1 ring-1 w-full"
|
||||
type="text"
|
||||
placeholder="nutzer@email.com"
|
||||
name="email"
|
||||
bind:value={email}
|
||||
on:focus={() => (errorHidden = true)}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
class="my-1 rounded-md px-2 py-1 ring-1 w-full"
|
||||
type="password"
|
||||
minlength="8"
|
||||
placeholder="********"
|
||||
name="passwort"
|
||||
bind:value={passwort}
|
||||
on:focus={() => (errorHidden = true)}
|
||||
required
|
||||
/>
|
||||
{#if !errorHidden}
|
||||
<div role="alert" class="alert alert-error" in:fade out:fade={{delay: 400}}>
|
||||
<CrossCircled size={24} />
|
||||
<span class="font-semibold">Das hat leider nicht geklappt, haben sie ihr Passwort und ihre Email Adresse richtig eingegeben?</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
<div class="grid grid-cols-[3fr_2fr] gap-2">
|
||||
|
||||
<div class="w-full text-left self-center">
|
||||
<a
|
||||
class="justify-self-start text-sm font-bold no-underline hover:text-primary"
|
||||
href="/auth/signup">Registrieren</a
|
||||
> /
|
||||
<a
|
||||
class="justify-self-start text-sm font-bold no-underline hover:text-primary"
|
||||
href="/auth/passwort-vergessen">Passwort vergessen</a
|
||||
>
|
||||
</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>
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="postcss">
|
||||
|
||||
|
||||
</style>
|
||||
@@ -93,4 +93,4 @@
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
</style>
|
||||
@@ -97,7 +97,7 @@ if(innerWidth>1024){
|
||||
|
||||
|
||||
|
||||
<nav id="card-navigation" class="card-navigation hidden box ring-2 ring-primary/50 lg:block">
|
||||
<nav id="card-navigation" class="card-navigation hidden box ring-2 ring-primary/50 rounded-tr-none lg:block">
|
||||
|
||||
<div class="nav-element dropdown lg:dropdown-right" on:click={dropdown} on:keydown={dropdown} on:mouseover={hover} on:mouseleave={hoverout}>
|
||||
{#if innerWidth > 1023}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
---
|
||||
import Login from "#sidebarCards/SidebarWidgetLogin.svelte";
|
||||
import Contact from "#sidebarCards/card-contact.svelte";
|
||||
import Review from "#sidebarCards/card-review.svelte";
|
||||
import VApromo from "#sidebarCards/card-VA-promo.svelte";
|
||||
@@ -11,13 +10,13 @@ import BAGpromo from "#sidebarCards/card-BA-G-promo.svelte";
|
||||
<div class="hidden
|
||||
xl:flex xl:flex-col xl:grow
|
||||
">
|
||||
<Login client:load />
|
||||
|
||||
<Contact client:load />
|
||||
<Review client:load />
|
||||
<VApromo client:load />
|
||||
<VAGpromo client:load />
|
||||
<BApromo client:load />
|
||||
<BAGpromo client:load />
|
||||
<VApromo client:load />
|
||||
<BApromo client:load />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
25
src/components/design/sidebars/right/SidebarRight_1.astro
Normal file
25
src/components/design/sidebars/right/SidebarRight_1.astro
Normal file
@@ -0,0 +1,25 @@
|
||||
---
|
||||
import Login from "#sidebarCards/card-login_1.svelte";
|
||||
import Contact from "#sidebarCards/card-contact.svelte";
|
||||
import Review from "#sidebarCards/card-review.svelte";
|
||||
import VApromo from "#sidebarCards/card-VA-promo.svelte";
|
||||
import VAGpromo from "#sidebarCards/card-VA-G-promo.svelte";
|
||||
import BApromo from "#sidebarCards/card-BA-promo.svelte";
|
||||
import BAGpromo from "#sidebarCards/card-BA-G-promo.svelte";
|
||||
---
|
||||
|
||||
<div class="hidden
|
||||
xl:flex xl:flex-col xl:grow
|
||||
">
|
||||
|
||||
<Login client:load />
|
||||
<Contact client:load />
|
||||
<Review client:load />
|
||||
<VApromo client:load />
|
||||
<VAGpromo client:load />
|
||||
<BApromo client:load />
|
||||
<BAGpromo client:load />
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
import "../style/global.css";
|
||||
import "../style/formular.css";
|
||||
import "../../svelte-dialogs.config"
|
||||
import Header from "#header/Header.astro";
|
||||
import Footer from "#footer/Footer.astro";
|
||||
@@ -75,7 +76,7 @@ const { title } = Astro.props;
|
||||
|
||||
<SidebarLeft />
|
||||
|
||||
<article class="box grow">
|
||||
<article class="box grow rounded-tl-none">
|
||||
<slot />
|
||||
</article>
|
||||
|
||||
@@ -149,25 +150,9 @@ article {
|
||||
text-indent: -9999px;
|
||||
}
|
||||
|
||||
.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%
|
||||
); */
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
@apply border-2 border-[#ffcc03] p-4 rounded-lg 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%
|
||||
); */
|
||||
}
|
||||
|
||||
|
||||
|
||||
.GRB3 {
|
||||
@apply flex flex-col border-2 border-[#ffcc03] p-4 rounded-lg bg-base-200;
|
||||
|
||||
@@ -13,7 +13,6 @@ export interface Props {
|
||||
|
||||
const { title } = Astro.props;
|
||||
|
||||
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
@@ -38,8 +37,8 @@ const { title } = Astro.props;
|
||||
|
||||
<main
|
||||
class="w-full p-0 grid
|
||||
sm:grid-cols-[minmax(1fr,1fr)] sm:gap-1 sm:p-1
|
||||
md:grid-cols-[minmax(1fr,1fr)] md:gap-2 md:p-2
|
||||
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
|
||||
@@ -47,7 +46,7 @@ const { title } = Astro.props;
|
||||
|
||||
<SidebarLeft />
|
||||
|
||||
<article class="box grow">
|
||||
<article class="box grow rounded-tl-none">
|
||||
<slot />
|
||||
</article>
|
||||
|
||||
|
||||
63
src/layouts/Layout_1.astro
Normal file
63
src/layouts/Layout_1.astro
Normal file
@@ -0,0 +1,63 @@
|
||||
---
|
||||
import "../style/global.css";
|
||||
import "../../svelte-dialogs.config"
|
||||
import Header from "#header/Header_1.astro";
|
||||
import Footer from "#footer/Footer.astro";
|
||||
import SidebarLeft from "#sidebarLeft/SidebarLeft.astro";
|
||||
import SidebarRight from "#sidebarRight/SidebarRight_1.astro";
|
||||
import { NotificationWrapper } from "@ibcornelsen/ui";
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.jpg" />
|
||||
<meta
|
||||
name="description"
|
||||
content="✅ Jetzt Ihren Energieausweis online erstellen. Erhalten Sie Ihren online Energieausweis rechtssicher und nach aktueller GEG (vormals EnEV) vom Diplom Ingenieur geprüft."
|
||||
/>
|
||||
<title>
|
||||
{title || "Energieausweis online erstellen - Online Energieausweis"}
|
||||
</title>
|
||||
</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>
|
||||
|
||||
|
||||
@@ -0,0 +1,145 @@
|
||||
import { BedarfsausweisWohnenClient } from "#components/Ausweis/types";
|
||||
import { Enums } from "@ibcornelsen/database/client";
|
||||
import moment from "moment";
|
||||
|
||||
export function energetischeNutzflaecheBedarfsausweisWohnen_18599(
|
||||
ausweis: BedarfsausweisWohnenClient
|
||||
): number {
|
||||
if (!ausweis.gebaeude_aufnahme_allgemein.gebaeude_stammdaten) {
|
||||
return 0
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
export async function endEnergieBedarfBedarfsausweis_18599(
|
||||
ausweis: BedarfsausweisWohnenClient
|
||||
) {
|
||||
if (!ausweis.gebaeude_aufnahme_allgemein || !ausweis.gebaeude_aufnahme_allgemein.gebaeude_stammdaten) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
let endEnergieBedarfGesamt;
|
||||
let primaerEnergieBedarfGesamt;
|
||||
let co2EmissionenGesamt;
|
||||
|
||||
// Energieeffizienzklasse
|
||||
let energieEffizienzKlasse = "";
|
||||
if (endEnergieVerbrauchGesamt < 30) {
|
||||
energieEffizienzKlasse = 'A+';
|
||||
}else if (endEnergieVerbrauchGesamt < 50) {
|
||||
energieEffizienzKlasse = 'A';
|
||||
}else if (endEnergieVerbrauchGesamt < 75) {
|
||||
energieEffizienzKlasse = 'B';
|
||||
}else if (endEnergieVerbrauchGesamt < 100) {
|
||||
energieEffizienzKlasse = 'C';
|
||||
}else if (endEnergieVerbrauchGesamt < 130) {
|
||||
energieEffizienzKlasse = 'D';
|
||||
}else if (endEnergieVerbrauchGesamt < 160) {
|
||||
energieEffizienzKlasse = 'E';
|
||||
}else if (endEnergieVerbrauchGesamt < 200) {
|
||||
energieEffizienzKlasse = 'F';
|
||||
}else if (endEnergieVerbrauchGesamt < 250) {
|
||||
energieEffizienzKlasse = 'G';
|
||||
}else if (endEnergieVerbrauchGesamt >= 250) {
|
||||
energieEffizienzKlasse = 'H';
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
brennstoff_1: brennstoff_1,
|
||||
brennstoff_2: brennstoff_2,
|
||||
klimafaktoren: klimafaktoren,
|
||||
kuehlungsZuschlag: Math.round(kuehlungsZuschlag),
|
||||
durchschnittsKlimafaktor: Math.round(durchschnittsKlimafaktor),
|
||||
ausweis: ausweis,
|
||||
|
||||
anteil_heizung_1: 1 - (ausweis.anteil_warmwasser_1 || 0) / 100,
|
||||
anteil_heizung_2: 1 - (ausweis.anteil_warmwasser_2 || 0) / 100,
|
||||
|
||||
verbrauch_1_kwh: Math.round(
|
||||
(ausweis.verbrauch_1 || 0) * brennstoff_1.umrechnungsfaktor
|
||||
),
|
||||
verbrauch_2_kwh: Math.round(
|
||||
(ausweis.verbrauch_2 || 0) * brennstoff_1.umrechnungsfaktor
|
||||
),
|
||||
verbrauch_3_kwh: Math.round(
|
||||
(ausweis.verbrauch_3 || 0) * brennstoff_1.umrechnungsfaktor
|
||||
),
|
||||
verbrauch_4_kwh: Math.round(
|
||||
(ausweis.verbrauch_4 || 0) * brennstoff_2.umrechnungsfaktor
|
||||
),
|
||||
verbrauch_5_kwh: Math.round(
|
||||
(ausweis.verbrauch_5 || 0) * brennstoff_2.umrechnungsfaktor
|
||||
),
|
||||
verbrauch_6_kwh: Math.round(
|
||||
(ausweis.verbrauch_6 || 0) * brennstoff_2.umrechnungsfaktor
|
||||
),
|
||||
|
||||
energetischeNutzflaeche: energetischeNutzflaeche,
|
||||
leerstand: leerstand,
|
||||
leerstandsZuschlagHeizung: Math.round(leerstandsZuschlagHeizung),
|
||||
leerstandsZuschlagWarmwasser: Math.round(leerstandsZuschlagWarmwasser),
|
||||
endEnergieVerbrauchLeerstandsZuschlag: Math.round(
|
||||
endEnergieVerbrauchLeerstandsZuschlag
|
||||
),
|
||||
endEnergieVerbrauchKuehlungsZuschlag: Math.round(
|
||||
endEnergieVerbrauchKuehlungsZuschlag
|
||||
),
|
||||
coeeffkg: co2EmissionenGesamt,
|
||||
energieVerbrauchGesamt_1: Math.round(energieVerbrauchGesamt_1),
|
||||
energieVerbrauchGesamt_2: Math.round(energieVerbrauchGesamt_2),
|
||||
energieVerbrauchWarmwasser_1: Math.round(energieVerbrauchWarmwasser_1),
|
||||
energieVerbrauchWarmwasser_2: Math.round(energieVerbrauchWarmwasser_2),
|
||||
energieVerbrauchHeizung_1: energieVerbrauchHeizung_1,
|
||||
energieVerbrauchHeizung_2: energieVerbrauchHeizung_2,
|
||||
anteil_warmwasser_1: (ausweis.anteil_warmwasser_1 || 0) / 100,
|
||||
anteil_warmwasser_2: (ausweis.anteil_warmwasser_2 || 0) / 100,
|
||||
|
||||
energieVerbrauchHeizungBereinigt_1: Math.round(
|
||||
energieVerbrauchHeizungBereinigt_1
|
||||
),
|
||||
energieVerbrauchHeizungBereinigt_2: Math.round(
|
||||
energieVerbrauchHeizungBereinigt_2
|
||||
),
|
||||
durchschnittsEnergieVerbrauchHeizungBereingt: Math.round(
|
||||
durchschnittsEnergieVerbrauchHeizungBereingt
|
||||
),
|
||||
faktorDurchschnittsEnergieVerbrauchHeizungBereinigt: Math.round(
|
||||
faktorDurchschnittsEnergieVerbrauchHeizungBereinigt
|
||||
),
|
||||
|
||||
endEnergieVerbrauch_1: Math.round(endEnergieVerbrauch_1),
|
||||
endEnergieVerbrauch_2: Math.round(endEnergieVerbrauch_2),
|
||||
|
||||
primaerEnergieVerbrauch_1: Math.round(primaerEnergieVerbrauch_1),
|
||||
primaerEnergieVerbrauch_2: Math.round(primaerEnergieVerbrauch_2),
|
||||
|
||||
primaerEnergieVerbrauchLeerstandsZuschlag: Math.round(
|
||||
primaerEnergieVerbrauchLeerstandsZuschlag
|
||||
),
|
||||
primaerEnergieVerbrauchKuehlungsZuschlag: Math.round(
|
||||
primaerEnergieVerbrauchKuehlungsZuschlag
|
||||
),
|
||||
|
||||
primaerfaktorww,
|
||||
primaerfaktorww_1,
|
||||
|
||||
co2Emissionen_1: co2Emissionen_1,
|
||||
co2Emissionen_2: co2Emissionen_2,
|
||||
|
||||
co2EmissionenLeerstandsZuschlag: co2EmissionenLeerstandsZuschlag,
|
||||
co2EmissionenKuehlungsZuschlag: co2EmissionenKuehlungsZuschlag,
|
||||
|
||||
co2EmissionenGesamt: Math.round(co2EmissionenGesamt),
|
||||
|
||||
endEnergieVerbrauchGesamt: Math.round(endEnergieVerbrauchGesamt),
|
||||
primaerEnergieVerbrauchGesamt: Math.round(
|
||||
primaerEnergieVerbrauchGesamt
|
||||
),
|
||||
energieEffizienzKlasse
|
||||
};
|
||||
}
|
||||
@@ -32,7 +32,9 @@ export function getEmpfehlungen(ausweis: VerbrauchsausweisWohnenClient): {
|
||||
empfehlungen.push({
|
||||
"title" : "Erneuerung der Fenster",
|
||||
"description" : "Alte und undichte Fenster mit Wärmeschutzfenstern auswechseln.",
|
||||
"anlagenteil" : "Fenster"
|
||||
"anlagenteil" : "Fenster",
|
||||
"amortisationszeit" : "15 Jahre",
|
||||
"kosten" : "3 €"
|
||||
});
|
||||
}
|
||||
|
||||
@@ -40,13 +42,17 @@ export function getEmpfehlungen(ausweis: VerbrauchsausweisWohnenClient): {
|
||||
empfehlungen.push({
|
||||
"title" : "Zusätzliche Dämmung des Fußbodens des kalten Dachraumes",
|
||||
"description" : "Beim Einbringen sollten mindestens 16cm Dämmstoff verarbeitet werden. Das Einsparpotenzial ist für jeden zusätzlichen cm Dämmung sehr hoch.",
|
||||
"anlagenteil" : "Dach"
|
||||
"anlagenteil" : "Dach",
|
||||
"amortisationszeit" : "5 Jahre",
|
||||
"kosten" : "1 €"
|
||||
});
|
||||
} else if (Dachgeschoss == Enums.Heizungsstatus.BEHEIZT && !Dachgeschoss_gedaemmt) {
|
||||
empfehlungen.push({
|
||||
"title" : "Zusätzliche Dämmung des Daches bzw. Dachraumes",
|
||||
"description" : "Beim Einbringen sollten mindestens 16cm Dämmstoff, wenn möglich, verarbeitet werden. Das Einsparpotenzial ist für jeden zusätzlichen cm Dämmung sehr hoch.",
|
||||
"anlagenteil" : "Dach"
|
||||
"anlagenteil" : "Dach",
|
||||
"amortisationszeit" : "10 Jahre",
|
||||
"kosten" : "2 €"
|
||||
});
|
||||
}
|
||||
|
||||
@@ -54,7 +60,9 @@ export function getEmpfehlungen(ausweis: VerbrauchsausweisWohnenClient): {
|
||||
empfehlungen.push({
|
||||
"title" : "Außenwand zusätzl. dämmen (z.B. Wärmedämmverbundsystem, Einblasdämmung, Dämmputz)",
|
||||
"description" : "Beim WDVS sollte man mit Dämmstärken ab 12cm planen. Bei zweischaligem Mauerwerk Luftschicht mit Einblasdämmung füllen. Bei historischen Fassaden kommt u.U. eine Innendämmung in Betracht",
|
||||
"anlagenteil" : "Außenwand gg. Außenluft"
|
||||
"anlagenteil" : "Außenwand gg. Außenluft",
|
||||
"amortisationszeit" : "30 Jahre",
|
||||
"kosten" : "6 €"
|
||||
});
|
||||
}
|
||||
|
||||
@@ -64,7 +72,9 @@ export function getEmpfehlungen(ausweis: VerbrauchsausweisWohnenClient): {
|
||||
empfehlungen.push({
|
||||
"title" : "Anlagentechnik",
|
||||
"description" : "Prüfen Sie, ob Sie bei einer Umrüstung auf einen regenerativen Anteil von 65% kommen. Bei energetisch sanierten Gebäuden z.B. Wärmepumpe. Bei unsanieten Gebäuden Fernwärmeanschluss.",
|
||||
"anlagenteil" : "Wärmeerzeuger"
|
||||
"anlagenteil" : "Wärmeerzeuger",
|
||||
"amortisationszeit" : "10 Jahre",
|
||||
"kosten" : "2 €"
|
||||
});
|
||||
}
|
||||
|
||||
@@ -72,13 +82,17 @@ export function getEmpfehlungen(ausweis: VerbrauchsausweisWohnenClient): {
|
||||
empfehlungen.push({
|
||||
"title" : "Nachträgliche Dämmung der Kellerdecke",
|
||||
"description" : "Je nach Deckenhöhe, den vorhandenen Raum voll ausnutzen. Das Einsparpotenzial für jeden zusätzlichen cm Dämmung sehr hoch.",
|
||||
"anlagenteil" : "Kellerdecke"
|
||||
"anlagenteil" : "Kellerdecke",
|
||||
"amortisationszeit" : "5 Jahre",
|
||||
"kosten" : "1 €"
|
||||
});
|
||||
} else if (!Kellerwand_gedaemmt && Keller == Enums.Heizungsstatus.BEHEIZT) {
|
||||
empfehlungen.push({
|
||||
"title" : "Nachträgliche Dämmung der Kellerwände",
|
||||
"description" : "Man sollte mit Dämmstärken ab 12cm planen. Das Einsparpotenzial für jeden zusätzlichen cm Dämmung sehr hoch.",
|
||||
"anlagenteil" : "Außenwand gg. Erdreich"
|
||||
"anlagenteil" : "Außenwand gg. Erdreich",
|
||||
"amortisationszeit" : "30 Jahre",
|
||||
"kosten" : "6 €"
|
||||
});
|
||||
}
|
||||
|
||||
@@ -87,19 +101,25 @@ export function getEmpfehlungen(ausweis: VerbrauchsausweisWohnenClient): {
|
||||
empfehlungen.push({
|
||||
"title" : "Anlagentechnik",
|
||||
"description" : "Heizungsrohre und Warmwasserrohre dämmen",
|
||||
"anlagenteil" : "Wärmeverteilung / -abgabe"
|
||||
"anlagenteil" : "Wärmeverteilung / -abgabe",
|
||||
"amortisationszeit" : "5 Jahre",
|
||||
"kosten" : "1 €"
|
||||
});
|
||||
} else if (Warmwasserrohre_gedaemmt && !Heizungsrohre_gedaemmt) {
|
||||
empfehlungen.push({
|
||||
"title" : "Anlagentechnik",
|
||||
"description" : "Heizungsrohre dämmen",
|
||||
"anlagenteil" : "Wärmeverteilung / -abgabe"
|
||||
"anlagenteil" : "Wärmeverteilung / -abgabe",
|
||||
"amortisationszeit" : "5 Jahre",
|
||||
"kosten" : "1 €"
|
||||
});
|
||||
} else if (!Warmwasserrohre_gedaemmt && Heizungsrohre_gedaemmt) {
|
||||
empfehlungen.push({
|
||||
"title" : "Anlagentechnik",
|
||||
"description" : "Warmwasserrohre dämmen",
|
||||
"anlagenteil" : "Wärmeverteilung / -abgabe"
|
||||
"anlagenteil" : "Wärmeverteilung / -abgabe",
|
||||
"amortisationszeit" : "5 Jahre",
|
||||
"kosten" : "1 €"
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -109,7 +129,9 @@ export function getEmpfehlungen(ausweis: VerbrauchsausweisWohnenClient): {
|
||||
empfehlungen.push({
|
||||
"title" : "Wärmeerzeuger",
|
||||
"description" : "Prüfen Sie den zusätzlichen Einbau einer Luft-Wasser-Wärmepumpe. Mit einem Pufferspeicher und einer 75°C-Vorlauftemperatur-Wärmepumpe kann ein relevanter Anteil der Wärmeerzeugung abgedeckt werden.",
|
||||
"anlagenteil" : "Wärmeerzeuger"
|
||||
"anlagenteil" : "Wärmeerzeuger",
|
||||
"amortisationszeit" : "10 Jahre",
|
||||
"kosten" : "2 €"
|
||||
});
|
||||
}
|
||||
|
||||
@@ -118,7 +140,9 @@ export function getEmpfehlungen(ausweis: VerbrauchsausweisWohnenClient): {
|
||||
empfehlungen.push({
|
||||
"title" : "Wärmeerzeuger",
|
||||
"description" : "PV-Anlage auf das Dach (für Energieunterstützung)",
|
||||
"anlagenteil" : "Wärmeerzeuger"
|
||||
"anlagenteil" : "Wärmeerzeuger",
|
||||
"amortisationszeit" : "10 Jahre",
|
||||
"kosten" : "2 €"
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -10,9 +10,9 @@ export const API_UID_COOKIE_NAME = "uid";
|
||||
export const PRICES: Record<Enums.Ausweisart, [number, number, number]> = {
|
||||
// per E-Mail , inkl.Beratung, offline
|
||||
BedarfsausweisWohnen: [135, 145, 290],
|
||||
VerbrauchsausweisWohnen: [45, 55, 180],
|
||||
VerbrauchsausweisGewerbe: [85, 95, 360],
|
||||
BedarfsausweisGewerbe: [300, 0, 0]
|
||||
VerbrauchsausweisWohnen: [55, 75, 180],
|
||||
VerbrauchsausweisGewerbe: [95, 115, 360],
|
||||
BedarfsausweisGewerbe: [400, 0, 0]
|
||||
};
|
||||
|
||||
export const SERVICES: Record<Enums.Ausweisart, Record<Enums.Service, number>> = {
|
||||
|
||||
BIN
src/lib/pdf/templates/GEG24_Wohngebaeude_ohne_pfeile.pdf
Normal file
BIN
src/lib/pdf/templates/GEG24_Wohngebaeude_ohne_pfeile.pdf
Normal file
Binary file not shown.
858
src/modules/Ausweise/ORG_VerbrauchsausweisWohnenModule.svelte
Normal file
858
src/modules/Ausweise/ORG_VerbrauchsausweisWohnenModule.svelte
Normal file
@@ -0,0 +1,858 @@
|
||||
<script lang="ts">
|
||||
import PerformanceScore from "#components/Ausweis/PerformanceScore.svelte";
|
||||
import Progressbar from "#components/Ausweis/Progressbar.svelte";
|
||||
import Hilfe from "#components/Ausweis/Hilfe.svelte";
|
||||
import HelpLabel from "#components/HelpLabel.svelte";
|
||||
import Verbrauch from "#components/Ausweis/Verbrauch.svelte";
|
||||
import Label from "#components/Label.svelte";
|
||||
import Ausweisart from "#components/Ausweis/Ausweisart.svelte";
|
||||
import ZipSearch from "#components/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 class="yellow-box">
|
||||
<div class="flex flex-row justify-between">
|
||||
<button class="button" type="button" on:click={spaeterWeitermachen}
|
||||
>Später Weitermachen</button
|
||||
>
|
||||
<div class="flex gap-4">
|
||||
<Hilfe />
|
||||
<button
|
||||
on:click={automatischAusfüllen}
|
||||
type="button"
|
||||
class="button">Automatisch Ausfüllen</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<Label>A - Prüfung der Ausweisart</Label>
|
||||
|
||||
<Ausweisart
|
||||
bind:gebaeude
|
||||
bind:gebaeude_aufnahme_allgemein
|
||||
bind:ausweis
|
||||
/>
|
||||
|
||||
<hr />
|
||||
|
||||
<Label
|
||||
>B - Eingabe der Gebäudeadresse - Angaben zu Wohnfläche, Kellerund
|
||||
Dachgeschoss</Label
|
||||
>
|
||||
|
||||
<div class="GRB">
|
||||
<!-- Strasse -->
|
||||
<div class="form-group col-md-4">
|
||||
<HelpLabel title="Straße, Hausnummer *">
|
||||
Bitte geben Sie hier die Straße und Hausnummer des Gebäudes
|
||||
ein.
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<input
|
||||
name="adresse"
|
||||
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="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 />
|
||||
|
||||
<Label>C - Eingabe von 3 zusammenhängenden Verbrauchsjahren</Label>
|
||||
|
||||
<div class="GRB">
|
||||
<Verbrauch
|
||||
bind:gebaeude
|
||||
bind:gebaeude_aufnahme_allgemein
|
||||
bind:ausweis
|
||||
/>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<Label
|
||||
>D - Eingabe Warmwasseranteil und Verwendung von alternativen
|
||||
Energieversorgungssystemen</Label
|
||||
>
|
||||
|
||||
<div class="GRB">
|
||||
<!-- Anteil WW enthalten -->
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-row gap-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 />
|
||||
|
||||
<Label
|
||||
>E - Eingabe von Gebäudetyp, Gebäudeteil, Lüftung, Kühlung und
|
||||
Leerstand</Label
|
||||
>
|
||||
|
||||
<div class="GRB">
|
||||
<!-- Gebäudetyp -->
|
||||
<div class="form-group col-md-3">
|
||||
<HelpLabel title="Gebäudetyp *">
|
||||
Bitte wählen Sie hier den Gebäudetyp aus.
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<select
|
||||
name="gebaeudetyp"
|
||||
data-test="gebaeudetyp"
|
||||
bind:value={gebaeude_aufnahme_allgemein.gebaeudetyp}
|
||||
required
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Gebäudeteil -->
|
||||
<div class="form-group col-md-3">
|
||||
<HelpLabel title="Gebäudeteil *">
|
||||
Bitte geben Sie hier den Gebäudeteil ein. In den meisten
|
||||
Fällen handelt es sich um das Gesamtgebäude. Sollte es sich
|
||||
allerdings um ein Gebäude mit mehr als 10% Gewerbeanteil
|
||||
handeln, so sollten 2 Ausweise erstellt werden. In diesem
|
||||
Fall wählen Sie Gebäudeteil 'Wohnen' bzw. Gebäudeteil
|
||||
'Gewerbe'.
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<select
|
||||
name="gebaeudeteil"
|
||||
data-test="gebaeudeteil"
|
||||
bind:value={gebaeude_aufnahme_allgemein.gebaeudeteil}
|
||||
required
|
||||
>
|
||||
<option disabled>Bitte auswählen</option>
|
||||
<option value="Gesamtgebäude">Gesamtgebäude</option>
|
||||
<option value="Wohnen">Wohnen</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lüftung -->
|
||||
<div class="form-group col-md-2">
|
||||
<HelpLabel title="Lüftung durch *">
|
||||
Bitte geben Sie hier ein ob über die Fenster natürlich
|
||||
belüftet wird oder über eine Lüftungsanlage.
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<select
|
||||
name="lueftung"
|
||||
data-test="lueftung"
|
||||
required
|
||||
bind:value={gebaeude_aufnahme_allgemein.lueftung}
|
||||
>
|
||||
<option disabled>Bitte auswählen</option>
|
||||
<option value="Fensterlüftung">Fensterlüftung</option>
|
||||
<option value="Schachtlüftung">Schachtlüftung</option>
|
||||
<option value="Lüftungsanlage ohne Wärmerückgewinnung"
|
||||
>Lüftungsanlage ohne Wärmerückgewinnung</option
|
||||
>
|
||||
<option value="Lüftungsanlage mit Wärmerückgewinnung"
|
||||
>Lüftungsanlage mit Wärmerückgewinnung</option
|
||||
>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lüftung -->
|
||||
<div class="form-group col-md-2">
|
||||
<HelpLabel title="Anlage Kühlung *">
|
||||
Bitte geben Sie an ob das Gebäude im Sommer zusätzlich
|
||||
gekühlt wird.
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<select
|
||||
name="kuehlung"
|
||||
data-test="kuehlung"
|
||||
required
|
||||
bind:value={gebaeude_aufnahme_allgemein.kuehlung}
|
||||
>
|
||||
<option disabled>Bitte auswählen</option>
|
||||
<option value="1">vorhanden</option>
|
||||
<option value="0">nicht vorhanden</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Leerstand -->
|
||||
<div class="form-group col-md-2">
|
||||
<HelpLabel title="Leerstand in %">
|
||||
Bitte geben Sie hier den Leerstand in % des Gesamtzeitraumes
|
||||
(3 Jahre) ein. Zum Beispiel 4 Monate Leerstand in 36 Monaten
|
||||
wären dann ca. 11%.
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<input
|
||||
name="leerstand"
|
||||
data-test="leerstand"
|
||||
maxlength="2"
|
||||
type="number"
|
||||
bind:value={gebaeude_aufnahme_allgemein.leerstand}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<Label
|
||||
>F - Bitte prüfen Sie hier die Angaben zum Sanierungszustand des
|
||||
Gebäudes</Label
|
||||
>
|
||||
<BilderZusatzsysteme bind:images bind:gebaeude bind:gebaeude_aufnahme_allgemein bind:ausweis />
|
||||
<hr />
|
||||
<div class="flex flex-row justify-between">
|
||||
<Hilfe />
|
||||
<button type="submit" class="button">Weiter</button>
|
||||
</div>
|
||||
</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>
|
||||
: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>
|
||||
@@ -119,7 +119,7 @@
|
||||
</p>
|
||||
</Overlay>
|
||||
|
||||
<div class="flex flex-row gap-8 items-center mb-8">
|
||||
<!-- <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} />
|
||||
@@ -130,10 +130,12 @@
|
||||
bind:gebaeude_aufnahme_allgemein
|
||||
bind:gebaeude
|
||||
/>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
|
||||
<div class="yellow-box">
|
||||
|
||||
<div id="formular-box">
|
||||
|
||||
<div class="flex flex-row justify-between">
|
||||
<button class="button" type="button" on:click={spaeterWeitermachen}
|
||||
>Später Weitermachen</button
|
||||
@@ -307,285 +309,6 @@
|
||||
|
||||
<hr />
|
||||
|
||||
<Label>C - Eingabe von 3 zusammenhängenden Verbrauchsjahren</Label>
|
||||
|
||||
<div class="GRB">
|
||||
<Verbrauch
|
||||
bind:gebaeude
|
||||
bind:gebaeude_aufnahme_allgemein
|
||||
bind:ausweis
|
||||
/>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<Label
|
||||
>D - Eingabe Warmwasseranteil und Verwendung von alternativen
|
||||
Energieversorgungssystemen</Label
|
||||
>
|
||||
|
||||
<div class="GRB">
|
||||
<!-- Anteil WW enthalten -->
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-row gap-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 />
|
||||
|
||||
<Label
|
||||
>E - Eingabe von Gebäudetyp, Gebäudeteil, Lüftung, Kühlung und
|
||||
Leerstand</Label
|
||||
>
|
||||
|
||||
<div class="GRB">
|
||||
<!-- Gebäudetyp -->
|
||||
<div class="form-group col-md-3">
|
||||
<HelpLabel title="Gebäudetyp *">
|
||||
Bitte wählen Sie hier den Gebäudetyp aus.
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<select
|
||||
name="gebaeudetyp"
|
||||
data-test="gebaeudetyp"
|
||||
bind:value={gebaeude_aufnahme_allgemein.gebaeudetyp}
|
||||
required
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Gebäudeteil -->
|
||||
<div class="form-group col-md-3">
|
||||
<HelpLabel title="Gebäudeteil *">
|
||||
Bitte geben Sie hier den Gebäudeteil ein. In den meisten
|
||||
Fällen handelt es sich um das Gesamtgebäude. Sollte es sich
|
||||
allerdings um ein Gebäude mit mehr als 10% Gewerbeanteil
|
||||
handeln, so sollten 2 Ausweise erstellt werden. In diesem
|
||||
Fall wählen Sie Gebäudeteil 'Wohnen' bzw. Gebäudeteil
|
||||
'Gewerbe'.
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<select
|
||||
name="gebaeudeteil"
|
||||
data-test="gebaeudeteil"
|
||||
bind:value={gebaeude_aufnahme_allgemein.gebaeudeteil}
|
||||
required
|
||||
>
|
||||
<option disabled>Bitte auswählen</option>
|
||||
<option value="Gesamtgebäude">Gesamtgebäude</option>
|
||||
<option value="Wohnen">Wohnen</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lüftung -->
|
||||
<div class="form-group col-md-2">
|
||||
<HelpLabel title="Lüftung durch *">
|
||||
Bitte geben Sie hier ein ob über die Fenster natürlich
|
||||
belüftet wird oder über eine Lüftungsanlage.
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<select
|
||||
name="lueftung"
|
||||
data-test="lueftung"
|
||||
required
|
||||
bind:value={gebaeude_aufnahme_allgemein.lueftung}
|
||||
>
|
||||
<option disabled>Bitte auswählen</option>
|
||||
<option value="Fensterlüftung">Fensterlüftung</option>
|
||||
<option value="Schachtlüftung">Schachtlüftung</option>
|
||||
<option value="Lüftungsanlage ohne Wärmerückgewinnung"
|
||||
>Lüftungsanlage ohne Wärmerückgewinnung</option
|
||||
>
|
||||
<option value="Lüftungsanlage mit Wärmerückgewinnung"
|
||||
>Lüftungsanlage mit Wärmerückgewinnung</option
|
||||
>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lüftung -->
|
||||
<div class="form-group col-md-2">
|
||||
<HelpLabel title="Anlage Kühlung *">
|
||||
Bitte geben Sie an ob das Gebäude im Sommer zusätzlich
|
||||
gekühlt wird.
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<select
|
||||
name="kuehlung"
|
||||
data-test="kuehlung"
|
||||
required
|
||||
bind:value={gebaeude_aufnahme_allgemein.kuehlung}
|
||||
>
|
||||
<option disabled>Bitte auswählen</option>
|
||||
<option value="1">vorhanden</option>
|
||||
<option value="0">nicht vorhanden</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Leerstand -->
|
||||
<div class="form-group col-md-2">
|
||||
<HelpLabel title="Leerstand in %">
|
||||
Bitte geben Sie hier den Leerstand in % des Gesamtzeitraumes
|
||||
(3 Jahre) ein. Zum Beispiel 4 Monate Leerstand in 36 Monaten
|
||||
wären dann ca. 11%.
|
||||
</HelpLabel>
|
||||
<div>
|
||||
<input
|
||||
name="leerstand"
|
||||
data-test="leerstand"
|
||||
maxlength="2"
|
||||
type="number"
|
||||
bind:value={gebaeude_aufnahme_allgemein.leerstand}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<Label
|
||||
>F - Bitte prüfen Sie hier die Angaben zum Sanierungszustand des
|
||||
Gebäudes</Label
|
||||
>
|
||||
<BilderZusatzsysteme bind:images bind:gebaeude bind:gebaeude_aufnahme_allgemein bind:ausweis />
|
||||
<hr />
|
||||
<div class="flex flex-row justify-between">
|
||||
<Hilfe />
|
||||
<button type="submit" class="button">Weiter</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
@@ -5,8 +5,10 @@ import BannerPrice from "#content/banner-saeule.svelte";
|
||||
---
|
||||
|
||||
<Layout title="Energieausweis online erstellen - Online Energieausweis">
|
||||
<h1>Energieausweis online erstellen</h1>
|
||||
<BannerPrice client:load />
|
||||
|
||||
<h1>Unsere Ausweise im Detail:</h1>
|
||||
|
||||
<!-- <BannerPrice client:load /> -->
|
||||
</Layout>
|
||||
|
||||
|
||||
|
||||
14
src/pages/index_1.astro
Normal file
14
src/pages/index_1.astro
Normal file
@@ -0,0 +1,14 @@
|
||||
---
|
||||
import Layout from "#layouts/Layout_1.astro";
|
||||
import BannerPrice from "#content/banner-saeule.svelte";
|
||||
|
||||
---
|
||||
|
||||
<Layout title="Energieausweis online erstellen - Online Energieausweis">
|
||||
<h1>Energieausweis online erstellen</h1>
|
||||
<!-- <BannerPrice client:load /> -->
|
||||
</Layout>
|
||||
|
||||
|
||||
|
||||
|
||||
26
src/style/formular.css
Normal file
26
src/style/formular.css
Normal file
@@ -0,0 +1,26 @@
|
||||
|
||||
|
||||
.Phase_und_Skala{grid-area:phase_und_skala;}
|
||||
.Bereich_A{grid-area:a}
|
||||
.Bereich_B{grid-area:b}
|
||||
|
||||
#formular-box{
|
||||
@apply border-2 border-[#ffcc03] p-4 rounded-lg bg-formular-box;
|
||||
/* background: linear-gradient(
|
||||
135deg,
|
||||
rgba(252, 234, 187, 1) 0%,
|
||||
rgba(253, 235, 189, 1) 52%,
|
||||
rgba(251, 223, 147, 1) 100%
|
||||
); */
|
||||
}
|
||||
|
||||
|
||||
.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%
|
||||
); */
|
||||
}
|
||||
@@ -48,7 +48,7 @@
|
||||
|
||||
|
||||
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]
|
||||
}
|
||||
|
||||
|
||||
@@ -96,7 +96,7 @@ article {
|
||||
.no-dropdown, .no-dropdown:hover{@apply text-black no-underline}
|
||||
|
||||
.nav-element:hover > .nav-element-child{
|
||||
@apply !bg-primary !text-white cursor-pointer
|
||||
@apply !bg-primary !text-white cursor-pointer
|
||||
}
|
||||
|
||||
.nav-element:hover > .nav-element-child .no-dropdown{
|
||||
@@ -104,12 +104,12 @@ article {
|
||||
}
|
||||
|
||||
.nav-element:hover > .dropdown-content{
|
||||
@apply lg:visible lg:opacity-100 lg:block
|
||||
@apply lg:visible lg:opacity-100 lg:block lg:ml-[2px]
|
||||
}
|
||||
|
||||
.nav-element:hover:first-child > .nav-element-child{
|
||||
@apply !rounded-none
|
||||
xl:!rounded-tl-xl xl:!rounded-tr-none
|
||||
lg:!rounded-tl-xl lg:!rounded-tr-none
|
||||
}
|
||||
|
||||
.nav-element:hover:last-child > .nav-element-child{
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { vitePreprocess } from "@astrojs/svelte";
|
||||
import preprocess from "svelte-preprocess";
|
||||
|
||||
export default {
|
||||
preprocess: [vitePreprocess(), preprocess()],
|
||||
};
|
||||
|
||||
@@ -13,12 +13,14 @@ module.exports = {
|
||||
},
|
||||
|
||||
colors: {
|
||||
"formular-box": "rgba(252,234,187,0.2)",
|
||||
"pdf-yellow-bright": "#f3cb00",
|
||||
"pdf-yellow-light": "#fff6ca",
|
||||
"box-heading": 'var(--box-heading)'
|
||||
},
|
||||
boxShadow: {
|
||||
'box': '3px 3px 6px rgba(0, 0, 0, 0.1)',
|
||||
'box': '3px 3px 6px rgba(0, 0, 0, 0.1)',
|
||||
'saeule': '3px 3px 6px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
|
||||
gridTemplateColumns: {
|
||||
|
||||
Reference in New Issue
Block a user