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

Merge pull request #338 from IBCornelsen/UMBE

Browse Source 
widget Einbau
This commit is contained in:
UMBENOMENA
2025-02-14 18:49:25 +01:00
committed by GitHub
parent e86c4d94b8 0381a6f473
commit 2acd91f270
11 changed files with 636 additions and 452 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
public/images/widget/gewerbegebaeude.svg Normal file
View File

@@ -0,0 +1,35 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 271 111.86">
<defs>
<style>
.cls-1 {
fill: #ff7d26;
}
.cls-2 {
fill: #445096;
}
</style>
</defs>
<g id="Wellen">
<path class="cls-1" d="M271,66.01c-1.29,5.97-4.05,11.58-7.44,16.72-3.45,5.11-7.71,9.7-12.58,13.54-4.84,3.88-10.32,6.93-16.02,9.32-5.73,2.35-11.73,3.94-17.8,4.98-12.17,1.95-24.54,1.59-36.56-.24-12.04-1.81-23.79-5.03-35.08-9.32,11.79,2.6,23.6,4.87,35.49,6.03,5.94.54,11.89.93,17.82.81,5.93-.06,11.84-.48,17.66-1.48,11.62-1.85,22.92-5.93,32.54-12.75,4.79-3.42,9.17-7.47,12.89-12.12,3.73-4.64,6.91-9.81,9.09-15.48Z"/>
<path class="cls-1" d="M0,87.93c5.04-3.14,10.5-5.58,16.05-7.75,5.56-2.17,11.29-3.9,17.08-5.42,11.63-2.86,23.59-4.58,35.64-5,12.04-.44,24.14.34,36.07,2.2,5.97.92,11.88,2.16,17.74,3.6,2.92.72,5.86,1.55,8.71,2.38,2.85.83,5.61,1.64,8.41,2.4,5.59,1.59,11.21,3.07,16.84,4.41,5.62,1.39,11.28,2.59,16.93,3.66,11.31,2.11,22.72,3.52,34.02,3.34,11.25-.23,22.53-2.12,32.47-7.4,2.49-1.29,4.9-2.77,7.2-4.44,2.3-1.67,4.45-3.55,6.55-5.53,4.16-3.99,7.81-8.6,11.16-13.48-2.24,5.48-5.15,10.75-8.81,15.56-3.65,4.83-8.15,9.1-13.22,12.64-5.12,3.47-10.81,6.13-16.72,8.01-5.91,1.89-12.03,2.97-18.13,3.53-12.24,1.1-24.42.14-36.31-1.64-11.9-1.82-23.57-4.56-35.04-7.76-2.87-.81-5.75-1.67-8.55-2.51-2.79-.85-5.52-1.61-8.31-2.36-5.54-1.51-11.15-2.75-16.78-3.85-11.27-2.16-22.72-3.47-34.23-3.89-11.51-.39-23.1.02-34.61,1.56-5.77.69-11.5,1.73-17.22,2.97-2.86.62-5.7,1.32-8.52,2.12-2.84.76-5.65,1.64-8.43,2.64Z"/>
</g>
<g id="Gewerbegebaeude">
<path class="cls-2" d="M102.42,67.26V.5l-34.28,10.84v54.01c11.44-.32,22.93.35,34.28,1.92Z"/>
<path class="cls-2" d="M254.81,65.15c-.02-6.59,0-45.44,0-45.44l-24.88-6.69v66.43s11.96-.84,24.22-12.71c.42-.41.66-.99.65-1.6Z"/>
<g>
<polygon class="cls-2" points="106.6 9.32 106.6 1.15 226.66 21.84 226.66 28.55 106.6 9.32"/>
<polygon class="cls-2" points="107.23 23.77 107.23 14.97 226.66 32.2 226.66 38.05 107.23 23.77"/>
<polygon class="cls-2" points="107.23 37.83 107.23 29.04 226.66 40.86 226.66 46.71 107.23 37.83"/>
<polygon class="cls-2" points="107.23 51.97 107.23 43.18 226.66 50.12 226.66 55.97 107.23 51.97"/>
<polygon class="cls-2" points="107.23 65.17 107.23 56.38 226.66 59.01 226.66 64.86 107.23 65.17"/>
<path class="cls-2" d="M122.76,70.93c3.1.69,6.21,1.48,9.24,2.28,1.2.32,2.39.63,3.57.94l91.08.55v-5.86l-119.43-.7h-.09c5.22.81,10.49,1.66,15.63,2.79Z"/>
</g>
<g>
<polygon class="cls-2" points="9.35 50.25 9.23 44.5 65.3 21.2 65.3 40.63 9.35 50.25"/>
<polygon class="cls-2" points="65.3 55.68 9.61 61.46 9.44 53.85 65.3 44.92 65.3 55.68"/>
<path class="cls-2" d="M43.86,67.57c7.08-1.11,14.25-1.82,21.44-2.12v-5.15l-55.63,4.35.17,7.82,34.02-4.9Z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

65
public/images/widget/wohngebaeude.svg Normal file
View File

@@ -0,0 +1,65 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 272 112">
<defs>
<style>
.cls-1 {
fill: #445096;
}
.cls-1, .cls-2, .cls-3 {
stroke-width: 0px;
}
.cls-2 {
fill: #c6c6c6;
}
.cls-4 {
display: none;
}
.cls-3 {
fill: #ff7d26;
}
</style>
</defs>
<g id="Ebene_4" data-name="Ebene 4">
<path class="cls-3" d="M272,66c-1.3,6-4,11.6-7.4,16.7-3.4,5.1-7.7,9.7-12.6,13.5-4.8,3.9-10.3,6.9-16,9.3-5.7,2.3-11.7,3.9-17.8,5-12.2,2-24.5,1.6-36.6-.2-12-1.8-23.8-5-35.1-9.3,11.8,2.6,23.6,4.9,35.5,6,5.9.5,11.9.9,17.8.8,5.9,0,11.8-.5,17.7-1.5,11.6-1.9,22.9-5.9,32.5-12.8,4.8-3.4,9.2-7.5,12.9-12.1,3.7-4.6,6.9-9.8,9.1-15.5Z"/>
<path class="cls-3" d="M1,87.9c5-3.1,10.5-5.6,16-7.8,5.6-2.2,11.3-3.9,17.1-5.4,11.6-2.9,23.6-4.6,35.6-5,12-.4,24.1.3,36.1,2.2,6,.9,11.9,2.2,17.7,3.6,2.9.7,5.9,1.5,8.7,2.4,2.8.8,5.6,1.6,8.4,2.4,5.6,1.6,11.2,3.1,16.8,4.4,5.6,1.4,11.3,2.6,16.9,3.7,11.3,2.1,22.7,3.5,34,3.3,11.3-.2,22.5-2.1,32.5-7.4,2.5-1.3,4.9-2.8,7.2-4.4,2.3-1.7,4.4-3.6,6.6-5.5,4.2-4,7.8-8.6,11.2-13.5-2.2,5.5-5.1,10.7-8.8,15.6-3.6,4.8-8.1,9.1-13.2,12.6-5.1,3.5-10.8,6.1-16.7,8-5.9,1.9-12,3-18.1,3.5-12.2,1.1-24.4.1-36.3-1.6-11.9-1.8-23.6-4.6-35-7.8-2.9-.8-5.8-1.7-8.6-2.5-2.8-.9-5.5-1.6-8.3-2.4-5.5-1.5-11.1-2.8-16.8-3.8-11.3-2.2-22.7-3.5-34.2-3.9-11.5-.4-23.1,0-34.6,1.6-5.8.7-11.5,1.7-17.2,3-2.9.6-5.7,1.3-8.5,2.1-2.8.8-5.6,1.6-8.4,2.6Z"/>
</g>
<g id="Ebene_1" data-name="Ebene 1">
<g>
<path class="cls-1" d="M63.1,66L104.8,11.6l52.2,63.6s72.2,24.3,98.8-11.4l-26.6-38.8-27.2-4.4V0h-19.8v39.7h-7.1v-22.8L102.5,4l-39.4,62Z"/>
<polygon class="cls-1" points="73.5 39.1 92.7 14.2 48.4 14.2 11.1 72.9 50 19.2 73.5 39.1"/>
<g>
<rect class="cls-2" x="91.5" y="35.3" width="11.3" height="12.7"/>
<rect class="cls-2" x="104.3" y="35.3" width="11.3" height="12.7"/>
<rect class="cls-2" x="91.5" y="49.5" width="11.3" height="12.7"/>
<rect class="cls-2" x="104.3" y="49.5" width="11.3" height="12.7"/>
</g>
<g>
<rect class="cls-2" x="41.9" y="35.4" width="5.7" height="8.5"/>
<rect class="cls-2" x="49" y="35.4" width="5.7" height="8.5"/>
<rect class="cls-2" x="41.9" y="45.3" width="5.7" height="8.5"/>
<rect class="cls-2" x="49" y="45.3" width="5.7" height="8.5"/>
</g>
</g>
</g>
<g id="Ebene_3" data-name="Ebene 3" class="cls-4">
<path class="cls-1" d="M103.4,67.3V.5l-34.3,10.8v54c11.4-.3,22.9.4,34.3,1.9Z"/>
<path class="cls-1" d="M255.8,65.2c0-6.6,0-45.4,0-45.4l-24.9-6.7v66.4s12-.8,24.2-12.7c.4-.4.7-1,.7-1.6Z"/>
<g>
<polygon class="cls-1" points="107.6 9.3 107.6 1.2 227.7 21.8 227.7 28.5 107.6 9.3"/>
<polygon class="cls-1" points="108.2 23.8 108.2 15 227.7 32.2 227.7 38 108.2 23.8"/>
<polygon class="cls-1" points="108.2 37.8 108.2 29 227.7 40.9 227.7 46.7 108.2 37.8"/>
<polygon class="cls-1" points="108.2 52 108.2 43.2 227.7 50.1 227.7 56 108.2 52"/>
<polygon class="cls-1" points="108.2 65.2 108.2 56.4 227.7 59 227.7 64.9 108.2 65.2"/>
<path class="cls-1" d="M123.8,70.9c3.1.7,6.2,1.5,9.2,2.3,1.2.3,2.4.6,3.6.9l91.1.5v-5.9l-119.4-.7h0c5.2.8,10.5,1.7,15.6,2.8Z"/>
</g>
<g>
<polygon class="cls-1" points="10.3 50.2 10.2 44.5 66.3 21.2 66.3 40.6 10.3 50.2"/>
<polygon class="cls-1" points="66.3 55.7 10.6 61.5 10.4 53.8 66.3 44.9 66.3 55.7"/>
<path class="cls-1" d="M44.9,67.6c7.1-1.1,14.2-1.8,21.4-2.1v-5.2l-55.6,4.3.2,7.8,34-4.9Z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

99
src/components/design/content/WidgetCardTemplate_ORG.svelte
View File

@@ -1,99 +0,0 @@
<script lang="ts">
export let price: number;
export let name: string;
export let variant: string;
export let services: [string, boolean][];
export let href: string;
export let src: string;
export let alt: string;
export let empfehlung: string;
</script>
<h2 class="titel">{name}</h2>
{#if empfehlung=="ja"}
<!--<div class="empfehlung">Empfehlung</div>-->
{/if}
<div class="titelPic grid grid-cols-2 items-center mb-0 mt-0 w-full">
<div style="">
<img
{src}
{alt}
/>
</div>
<div class="justify-self-start">
<p class="tracking-tighter text-[1.75rem] text-gray-700 pl-3">
<span class="[font-family:Antique_Olive_Compact_bold]">
ab {price} €
</span>
</p>
</div>
</div>
<div class="variante justify-self-end">{variant}</div>
<div class="white grid grid-rows-subgrid row-span-6 relative">
{#each services as [service, check]}
<div class="services grid grid-cols-[content-fit_1fr] items-center">
<span>{@html service}</span>
<div class:check={check} class:check-no={!check}>{check ? "✔" : "✘"}</div>
</div>
{/each}
</div>
<div class="w-full grid grid-cols-2 gap-2">
<a
{href}
class="w-full justify-self-center text-center text-white bg-secondary rounded-md px-3 py-1 mt-2 no-underline
hover:bg-primary
">jetzt online erstellen</a
>
<a
{href}
class="w-full justify-self-center text-center text-secondary ring-1 ring-secondary/50 bg-white rounded-md px-3 py-1 mt-2 no-underline
hover:bg-secondary/15
">zur Produktübersicht</a
>
</div>
<style lang="postcss">
.titel {@apply [font-size:_clamp(14px,1.5vw,18px)]
pr-12 text-left
}
.empfehlung{@apply bg-red-700 text-[0.75rem] text-white px-2 py-1 rounded-sm rotate-[5deg]}
.variante {
@apply -mt-2 text-xl w-fit text-black justify-self-end;
}
.services {
@apply text-start py-1 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>

347
src/components/widgets/WelcherAusweisWidget.svelte
View File

@@ -1,347 +0,0 @@
<script lang="ts">
import { fade } from "svelte/transition";
import WidgetCardTemplate from "#components/design/content/WidgetCardTemplate.svelte";
import { PRICES } from "#lib/constants.js";
let gebaeudetyp: string;
let anlass: string;
let einheiten: string;
let sanierungsstatus: string;
let baujahr: string;
let heizungsAlter: string;
let leerStand: string;
const allowedTypes = [
"Einfamilienhaus",
"Zweifamilienhaus",
"Mehrfamilienhaus",
"Mischgebäude",
];
const allowedTypesGewerbe = ["Gewerbegebäude", "Mischgebäude"];
const allowedReason = ["Vermietung/Verkauf", "sonstiges", "Aushangpflicht"];
let showVerbrauchsausweis: boolean = false
function postHeight() {
window.parent.postMessage(document.querySelector("html")?.offsetHeight, "*")
}
$: {
if (baujahr === "vor 1978") {
showVerbrauchsausweis =
allowedReason.includes(anlass) &&
allowedTypes.includes(gebaeudetyp) &&
(einheiten === "mehr als 4 Wohneinheiten" ||
sanierungsstatus === "saniert") && (leerStand === "bis 30") && (heizungsAlter === ">= 3");
} else {
showVerbrauchsausweis =
allowedReason.includes(anlass) &&
allowedTypes.includes(gebaeudetyp) && (leerStand === "bis 30") && (heizungsAlter === ">= 3");
}
}
</script>
<div id="OEA_widget">
<input id="recode" type="hidden" value="widgetvorlage" />
<div id="OEA_input">
<div class="OEA_zeile1">
<div class="OEA_item2">
<div class="OEA_title1">Anlass</div>
<select
class="OEA_auswahl1"
bind:value={anlass}
on:change={postHeight}
>
<option 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 class="OEA_item1">
<div class="OEA_title1">Gebäudetyp</div>
<select
class="OEA_auswahl1"
bind:value={gebaeudetyp}
on:change={postHeight}
>
<option selected disabled>bitte auswählen</option>
<option value="Einfamilienhaus">Einfamilienhaus</option>
<option value="Zweifamilienhaus">Zweifamilienhaus</option>
<option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
<option value="Gewerbegebäude">Gewerbegebäude</option>
<option value="Mischgebäude">Mischgebäude</option>
</select>
</div>
{#if allowedReason.includes(anlass)}
<div class="OEA_item2">
<div class="OEA_title1">Sanierungsstand</div>
<select
class="OEA_auswahl2"
bind:value={sanierungsstatus}
on:change={postHeight}
>
<option selected disabled>bitte auswählen</option>
<option value="saniert">saniert</option>
<option value="unsaniert">unsaniert</option>
</select>
</div>
{/if}
</div>
{#if allowedReason.includes(anlass)}
<div class="OEA_zeile2">
<div class="OEA_item3">
<div class="OEA_title2">Baujahr</div>
<select
class="OEA_auswahl2"
bind:value={baujahr}
on:change={postHeight}
>
<option 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_item3">
<div class="OEA_title2">Heizungsalter</div>
<select
class="OEA_auswahl2"
bind:value={heizungsAlter}
on:change={postHeight}
>
<option value=">= 3" selected disabled>bitte auswählen</option>
<option value="< 3">jünger als 3 Jahre</option>
<option value=">= 3">3 Jahre oder älter</option>
</select>
</div>
<div class="OEA_item4">
<div class="OEA_title2">Wohneinheiten</div>
<select
class="OEA_auswahl2"
bind:value={einheiten}
on:change={postHeight}
>
<option 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_item4">
<div class="OEA_title2">Leerstand</div>
<select
class="OEA_auswahl2"
bind:value={leerStand}
on:change={postHeight}
>
<option value="bis 30" selected disabled>bitte auswählen</option>
<option value="bis 30"
>bis 30%</option
>
<option value="mehr als 30"
>mehr als 30%</option
>
</select>
</div>
</div>
{/if}
<div class="OEA_zeile3">
{#if showVerbrauchsausweis}
<div
class="OEA_item6 result"
>
<WidgetCardTemplate
name="Verbrauchsausweis Wohngebäude"
price={PRICES.VerbrauchsausweisWohnen[0]}
src="/images/right-sidebar/wohngebaeude.svg"
alt="Wohnhaus Verbrauchsausweis"
variant="einfach"
services={[
["3 Jahresverbräuche der Heizung benötigt.", true],
["Zulässig bei Vermietung oder Verkauf.", true],
["Unzulässig bei unsanierten Gebäuden vor 1978.", false],
["Ungenau durch individuelles Heizverhalten.", false],
["Wird nicht immer bei den Banken akzeptiert.", false]
]}
href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
></WidgetCardTemplate>
</div>
{/if}
{#if allowedReason.includes(anlass) && allowedTypes.includes(gebaeudetyp)}
<div
class="OEA_item6 result"
>
<WidgetCardTemplate
name="Bedarfsausweis Wohngebäude"
price={PRICES.BedarfsausweisWohnen[0]}
src="/images/right-sidebar/wohngebaeude.svg"
alt="Wohnhaus Bedarfsausweis"
variant="fundiert (empfohlen)"
services={[
["Erfassung der Gebäudegeometrie.", true],
["Für Vermietung, Verkauf und Finanzierung.", true],
["Zulässig auch für unsanierte Objekte.", true],
["Kann als Grundlage für den ISFP dienen.", true],
["Objektivere Berechnungsmethode nach DIN 18599.", true],
]}
href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
></WidgetCardTemplate>
</div>
{/if}
{#if allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)}
<div
class="OEA_item6 result"
>
<WidgetCardTemplate
name="Verbrauchsausweis Gewerbe"
price={PRICES.VerbrauchsausweisGewerbe[0]}
src="/images/right-sidebar/gewerbegebaeude.svg"
alt="Gewerbe Verbrauchsausweis"
variant="einfach"
services={[
["3 Jahresverbräuche von Heizung Gebäudestrom nötig.", true],
["Zulässig bei Vermietung oder Verkauf.", true],
["Für bauliche und energetische Maßnahmen ungeeignet.", false],
["Wird nicht immer bei den Banken akzeptiert.", false],
]}
href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
></WidgetCardTemplate>
</div>
{/if}
{#if allowedReason.includes(anlass) == false && allowedTypesGewerbe.includes(gebaeudetyp)}
<div
class="OEA_item6 result"
>
<WidgetCardTemplate
name="GEG-Nachweis Gewerbe"
price={PRICES.BedarfsausweisGewerbe[0]}
src="/images/right-sidebar/gewerbegebaeude.svg"
alt="Gewerbe Bedarfsausweis"
variant="Bauvorlage"
services={[
["xxx", true],
["xxx", true],
["xxx", false],
["xxx", false],
]}
href="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
></WidgetCardTemplate>
</div>
{/if}
{#if allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)}
<div
class="OEA_item6 result"
>
<WidgetCardTemplate
name="Bedarfsausweis Gewerbe"
price={PRICES.BedarfsausweisGewerbe[0]}
src="/images/right-sidebar/gewerbegebaeude.svg"
alt="Gewerbe Bedarfsausweis"
variant="fundiert (empfohlen)"
services={[
["Mehrzonenmodell nach DIN 18599.", true],
["Zulässig bei Vermietung oder Verkauf.", true],
["Grundlage für Sanierungsvarianten.", false],
["Objektiveres, besser vergleichbares Ergebnis.", false],
]}
href="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
></WidgetCardTemplate>
</div>
{/if}
</div>
</div>
</div>
<style lang="scss">
#OEA_widget {
@apply bg-gray-200 p-4 shadow-xl rounded-xl mb-6;
#OEA_input {
@apply space-y-2;
.OEA_zeile1,
.OEA_zeile2 {
@apply flex flex-row space-x-2;
.OEA_item1,
.OEA_item2,
.OEA_item3,
.OEA_item4,
.OEA_item5 {
@apply w-full;
.OEA_title2 {
@apply font-bold text-lg text-gray-700 p-1.5 pl-2 rounded w-full;
}
.OEA_title1 {
@apply font-bold text-lg text-white p-1.5 pl-2 rounded w-full;
}
}
}
.OEA_title1 {
@apply bg-secondary;
}
.OEA_title2 {
@apply bg-gray-400;
}
.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 items-start justify-center;
}
.OEA_item6 {
.result {
@apply opacity-0 transition-opacity duration-1000 ease-in-out;
}
.result[style*="opacity: 1"] {
@apply opacity-100;
}
}
}
}
</style>

425
src/components/widgets/WelcherAusweisWidget_IBC.svelte Normal file
View File

@@ -0,0 +1,425 @@
<script lang="ts">
import { fade } from "svelte/transition";
import WidgetCardTemplate from "#components/widgets/WidgetCardTemplate_IBC.svelte";
import { PRICES } from "#lib/constants.js";
let gebaeudetyp: string = "bitte auswählen";
let anlass: string = "bitte auswählen";
let einheiten: string = "bitte auswählen";
let sanierungsstatus: string = "bitte auswählen";
let baujahr: string = "bitte auswählen";
let heizungsAlter: string = "bitte auswählen";
let leerStand: string = "bitte auswählen";
const twoBoxReason = ["Vermietung/Verkauf", "Aushangpflicht", "Sonstiges"];
const gewerbeHouse = ["Gewerbegebäude", "Mischgebäude"];
let ausnahme: boolean = false;
let oneBOX: boolean = false;
let threeBOX: boolean = false;
function getBoxes(){
if(twoBoxReason.includes(anlass)){
document.getElementById('firstrow')?.classList.remove('sm:grid-cols-2');
document.getElementById('firstrow')?.classList.add('sm:grid-cols-3');
}else{
document.getElementById('firstrow')?.classList.remove('sm:grid-cols-3');
document.getElementById('firstrow')?.classList.add('sm:grid-cols-2');
}
}
function getCount(){
if(oneBOX===true){
console.log('ONE');
document.getElementById('thirdrow')?.classList.remove('md:grid-cols-6');
document.getElementById('thirdrow')?.classList.remove('md:grid-cols-4');
document.getElementById('thirdrow')?.classList.add('grid-cols-1');
}else if(threeBOX===true){
console.log('THREE');
document.getElementById('thirdrow')?.classList.remove('grid-cols-1');
document.getElementById('thirdrow')?.classList.remove('md:grid-cols-4');
document.getElementById('thirdrow')?.classList.add('md:grid-cols-6');
}
else{
console.log('FOUR');
document.getElementById('thirdrow')?.classList.remove('grid-cols-1');
document.getElementById('thirdrow')?.classList.remove('md:grid-cols-6');
document.getElementById('thirdrow')?.classList.add('md:grid-cols-4');
}
}
$: {
ausnahme = ((leerStand === "mehr als 30") || (heizungsAlter === "< 3") || (baujahr === "vor 1978" && einheiten === "bis 4 Wohneinheiten" && sanierungsstatus === "unsaniert"))
? true
: false;
oneBOX = ((ausnahme === true) && (gebaeudetyp != "Gewerbegebäude")) && (gebaeudetyp != "Mischgebäude") ||
((!twoBoxReason.includes(anlass)) && (gebaeudetyp != "Mischgebäude")) ||
((gebaeudetyp === "Gewerbegebäude") && (leerStand === "mehr als 30"))
? true
: false;
threeBOX = ((ausnahme === true) && (gebaeudetyp === "Mischgebäude") && (twoBoxReason.includes(anlass) && (leerStand != "mehr als 30")))
? true
: false;
}
</script>
<div id="OEA_widget">
<input id="recode" type="hidden" value="widgetvorlage" />
<div id="OEA_input">
<div id="firstrow" class="firstrow">
<div class="auswahl">
<div class="titel">Anlass</div>
<select
id="anlass"
class="selectfeld"
bind:value={anlass} on:change={getBoxes} on:change={getCount}
>
<option 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 class="auswahl">
<div class="titel">Gebäudetyp</div>
<select
class="selectfeld"
bind:value={gebaeudetyp} on:change={getBoxes} on:change={getCount}
>
<option selected disabled>bitte auswählen</option>
<option value="Einfamilienhaus">Einfamilienhaus</option>
<option value="Zweifamilienhaus">Zweifamilienhaus</option>
<option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
<option value="Gewerbegebäude">Gewerbegebäude</option>
<option value="Mischgebäude">Mischgebäude</option>
</select>
</div>
{#if twoBoxReason.includes(anlass)}
<div class="auswahl">
<div class="titel">Sanierungsstand</div>
<select
class="selectfeld"
bind:value={sanierungsstatus} on:change={getBoxes} on:change={getCount}
>
<option selected disabled>bitte auswählen</option>
<option value="saniert">saniert</option>
<option value="unsaniert">unsaniert</option>
</select>
</div>
{/if}
</div>
{#if twoBoxReason.includes(anlass)}
<div id="secondrow" class="secondrow">
<div class="auswahl">
<div class="titel">Baujahr</div>
<select
id="baujahr"
class="selectfeld"
bind:value={baujahr} on:change={getCount}
>
<option selected disabled>bitte auswählen</option>
<option value="vor 1978">vor 1978</option>
<option value="nach 1977">nach 1977</option>
</select>
</div>
<div class="auswahl">
<div class="titel">Heizungsalter</div>
<select
class="selectfeld"
bind:value={heizungsAlter} on:change={getCount}
>
<option selected disabled>bitte auswählen</option>
<option value="< 3">jünger als 3 Jahre</option>
<option value=">= 3">3 Jahre oder älter</option>
</select>
</div>
<div class="auswahl">
<div class="titel">Wohneinheiten</div>
<select
class="selectfeld"
bind:value={einheiten} on:change={getCount}
>
<option 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_item4">
<div class="titel">Leerstand</div>
<select
class="selectfeld ausnahmen"
bind:value={leerStand} on:change={getCount}
>
<option selected disabled>bitte auswählen</option>
<option value="bis 30">bis 30%</option>
<option value="mehr als 30">mehr als 30%</option>
</select>
</div>
</div>
{/if}
<div id="thirdrow" class="thirdrow">
{#if twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude") && (ausnahme === false)}
<div
class="produktbox"
transition:fade={{ duration: 0 }}
>
<WidgetCardTemplate
name="Verbrauchsausweis Wohngebäude"
price={PRICES.VerbrauchsausweisWohnen[0]}
src="/images/widget/wohngebaeude.svg"
alt="Wohnhaus Verbrauchsausweis"
variant="einfach"
empfehlung="nein"
cta="jetzt&nbsp;online erstellen"
services={[
["3&nbsp;Jahresverbräuche der Heizung benötigt.", true],
["Zulässig bei Vermietung oder Verkauf.", true],
["Unzulässig bei unsanierten Gebäuden vor 1978.", false],
["Ungenau durch individuelles Heizverhalten.", false],
["Wird nicht immer bei den Banken akzeptiert.", false]
]}
href_buy="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
href_overview="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/produkt-uebersicht/"
></WidgetCardTemplate>
</div>
{/if}
{#if twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude")}
<div
class="produktbox"
transition:fade={{ duration: 0 }}
>
<WidgetCardTemplate
name="Bedarfsausweis Wohngebäude"
price={PRICES.BedarfsausweisWohnen[0]}
src="/images/widget/wohngebaeude.svg"
alt="Wohnhaus Bedarfsausweis"
variant="fundiert"
empfehlung="ja"
cta="jetzt&nbsp;online erstellen"
services={[
["Erfassung der Gebäudegeometrie.", true],
["Für Vermietung, Verkauf und Finanzierung.", true],
["Zulässig auch für unsanierte Objekte.", true],
["Kann als Grundlage für den ISFP dienen.", true],
["Objektivere Berechnungsmethode nach DIN 18599.", true],
]}
href_buy="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
href_overview="/energieausweis-erstellen/bedarfsausweis-wohngebaeude/produkt-uebersicht/"
></WidgetCardTemplate>
</div>
{/if}
{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp) && (leerStand != "mehr als 30")}
<div
class="produktbox"
transition:fade={{ duration: 0 }}
>
<WidgetCardTemplate
name="Verbrauchsausweis Gewerbegebäude"
price={PRICES.VerbrauchsausweisGewerbe[0]}
src="/images/widget/gewerbegebaeude.svg"
alt="Gewerbe Verbrauchsausweis"
variant="einfach"
empfehlung="nein"
cta="jetzt&nbsp;online erstellen"
services={[
["3&nbsp;Jahresverbräuche von Heizung Gebäudestrom&nbsp;nötig.", true],
["Zulässig bei Vermietung oder Verkauf.", true],
["Für bauliche und energetische Maßnahmen ungeeignet.", false],
["Wird nicht immer bei den Banken akzeptiert.", false],
["Ungenau durch individuelles Heizverhalten", false],
]}
href_buy="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
href_overview="/energieausweis-erstellen/verbrauchsausweis-gewerbe/produkt-uebersicht/"
></WidgetCardTemplate>
</div>
{/if}
{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
<div
class="produktbox"
transition:fade={{ duration: 0 }}
>
<WidgetCardTemplate
name="Bedarfsausweis Gewerbegebäude"
price={PRICES.BedarfsausweisGewerbe[0]}
src="/images/widget/gewerbegebaeude.svg"
alt="Gewerbe Bedarfsausweis"
variant="fundiert"
empfehlung="ja"
cta="Angebot anfragen"
services={[
["Mehrzonenmodell nach DIN 18599.", true],
["Zulässig bei Vermietung oder Verkauf.", true],
["Grundlage für Sanierung-Varianten.", true],
["Objektiveres, besser vergleichbares Ergebnis.", true],
["Zulässig bei Leerstand oder fehlenden Verbräuchen", true],
]}
href_buy="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
href_overview="/energieausweis-erstellen/bedarfsausweis-gewerbe/produkt-uebersicht/"
></WidgetCardTemplate>
</div>
{/if}
{#if (anlass != "bitte auswählen") && !twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude")}
<div
class="produktbox"
transition:fade={{ duration: 0 }}
>
<WidgetCardTemplate
name="GEG-Nachweis Wohngebäude"
price=500
src="/images/widget/wohngebaeude.svg"
alt="Gewerbe Bedarfsausweis"
variant="Bauvorlage"
empfehlung="ja"
cta="Angebot anfragen"
services={[
["Nachweis fürs Bauamt bei Neubau oder Modernisierung.", true],
["Beinhaltet die Effizienz der Bauteile und Anlagentechnik.", true],
["Erstellung des Energieausweises nach Abschluss inklusive.", true],
["Berechnung und Bilanzierung nach aktueller DIN 18599.", true],
["Zonierung und Erstellung eines 3D Gebäudemodells.", true],
]}
href_buy="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
href_overview="/energieausweis-erstellen/bedarfsausweis-gewerbe/produkt-uebersicht/"
></WidgetCardTemplate>
</div>
{/if}
{#if (anlass != "bitte auswählen") && !twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
<div
class="produktbox"
transition:fade={{ duration: 0 }}
>
<WidgetCardTemplate
name="GEG-Nachweis Gewerbegebäude"
price=800
src="/images/widget/gewerbegebaeude.svg"
alt="Gewerbe Bedarfsausweis"
variant="Bauvorlage"
empfehlung="ja"
cta="Angebot anfragen"
services={[
["Nachweis fürs Bauamt bei Neubau oder Modernisierung.", true],
["Beinhaltet die Effizienz der Bauteile und Anlagentechnik.", true],
["Erstellung des Energieausweises nach Abschluss inklusive.", true],
["Berechnung und Bilanzierung nach aktueller DIN 18599.", true],
["Mehrzonenmodell inkl. Erstellung eines 3D Gebäudemodells.", true],
]}
href_buy="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
href_overview="/energieausweis-erstellen/bedarfsausweis-gewerbe/produkt-uebersicht/"
></WidgetCardTemplate>
</div>
{/if}
</div>
</div>
</div>
<style lang="postcss">
*{font-family: "Heron";}
#OEA_widget {
@apply min-w-[320px] max-w-[1920px] p-[0px]
sm:p-[0px];
.firstrow{@apply grid grid-cols-1 gap-x-4 gap-y-2
sm:grid-cols-2 sm:gap-x-4 sm:gap-y-2;
.titel{@apply text-white font-bold bg-secondary px-2 py-1 rounded-[0.25rem];}
.selectfeld{@apply w-full px-2 py-1 min-h-[38px] ring-1 ring-black/15}
}
.secondrow{@apply grid grid-cols-2 gap-x-4 gap-y-2 mt-4
sm:grid-cols-4 sm:gap-x-4 sm:gap-y-2;
.titel{@apply text-black font-bold bg-[#cccccc] px-2 py-1 rounded-[0.25rem];}
.selectfeld{@apply w-full px-2 py-1 min-h-[38px] ring-1 ring-black/15}
}
#OEA_input{@apply grid}
.thirdrow{@apply grid grid-cols-1 gap-x-4 gap-y-2 col-start-1
md:grid-cols-4 md:gap-x-4 md:gap-y-2;
.produktbox{@apply grid grid-cols-subgrid col-span-2 grid-rows-subgrid row-span-3 md:row-span-12 bg-black/5 rounded-lg
px-2 py-2 mt-5;
box-shadow:2px 2px 8px rgba(0,0,0,0.25)
}
}
}
</style>

103
src/components/widgets/WidgetCardTemplate_IBC.svelte Normal file
View File

@@ -0,0 +1,103 @@
<script lang="ts">
export let price: number;
export let name: string;
export let variant: string;
export let services: [string, boolean][];
export let href_buy: string;
export let href_overview: string;
export let src: string;
export let alt: string;
export let empfehlung: string;
export let cta: string;
</script>
{#if empfehlung=="ja"}
<div class="empfehlung">Empfehlung</div>
{/if}
<h2 class="titel sm:mb-2">{name}</h2>
<div class="sumCent">
<div class="variante">{variant}</div>
<img
class="image"
{src}
{alt}
/>
<div class="justify-self-start">
<p class="price">
ab {price} €
</p>
</div>
</div>
<div class="sumCent buttoncols">
<a
href="{href_buy}"
class="buttoncol">{cta}</a
>
<a
href="{href_overview}"
class="buttoncol">Produkt-Übersicht</a
>
</div>
<div class="sumRows forServices">
{#each services as [service, check]}
<div class="services">
<span>{@html service}</span>
<div class:check={check} class:check-no={!check}>{check ? "✔" : "✘"}</div>
</div>
{/each}
</div>
<style lang="postcss">
.sumCent{@apply justify-self-center col-span-2}
.sumRows{@apply hidden sm:grid grid-rows-subgrid row-span-5 items-center}
.forServices{@apply grid-rows-subgrid row-span-5 items-center col-span-2 justify-center px-6}
.image{@apply w-[75%] justify-self-center
md:w-[75%] md:pl-12}
.buttoncols{@apply grid grid-cols-1 gap-x-4 w-full mb-4
md:grid-cols-2 md:w-[auto]}
.buttoncol{@apply mt-2 md:mt-0 text-center text-white bg-secondary rounded-md px-3 py-1 no-underline
hover:bg-primary hover:text-white}
.price{@apply tracking-tighter text-[2rem] text-[#222222] pl-12 m-0 -mt-4 text-nowrap;
font-family: "Antique Olive Compact bold";}
.titel {@apply col-span-2 text-center [font-size:_clamp(20px,2.5vw,28px)]}
.empfehlung{@apply -mt-4 absolute justify-self-end rounded-md bg-red-700 text-white w-fit h-fit px-2 py-1 rotate-1 text-[0.65rem] ring-4 ring-white mr-6}
.variante {
@apply italic col-span-2 -mt-2 -mb-4 text-[1rem] text-[#222222] justify-self-start ring-2 ring-primary rounded-md pl-[4px] pr-[6px] py-[0px];
}
.services {
@apply hidden text-start py-1 md:grid grid-rows-subgrid row-span-1 items-center md:grid-cols-[1fr_50px]
}
.services:not(:last-child) {
@apply border-b-[1px] border-gray-200;
}
.check {
@apply justify-self-end self-center font-bold text-green-700;
}
.check-no {
@apply justify-self-end self-center font-bold text-red-700;
}
</style>

2
src/components/widgets/WelcherAusweisWidget_1.svelte → src/components/widgets/immowelt/WelcherAusweisWidget_immowelt.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { fade } from "svelte/transition";
import WidgetCardTemplate from "#components/design/content/WidgetCardTemplate.svelte";
import WidgetCardTemplate from "#components/widgets/immowelt/WidgetCardTemplate_immowelt.svelte";
import { PRICES } from "#lib/constants.js";
let gebaeudetyp: string = "bitte auswählen";

0
src/components/design/content/WidgetCardTemplate.svelte → src/components/widgets/immowelt/WidgetCardTemplate_immowelt.svelte
View File

6
src/pages/index.astro
View File

@@ -2,7 +2,7 @@
import Layout from "#layouts/Layout.astro";
import ProduktVergleich from "#components/design/content/ProduktVergleich.svelte";
import ProduktVergleichGewerbe from "#components/design/content/ProduktVergleichGewerbe.svelte";
import WelcherAusweisWidget from "#components/widgets/WelcherAusweisWidget.svelte";
import WelcherAusweisWidget from "#components/widgets/WelcherAusweisWidget_IBC.svelte";
import TextboxCardTemplate from "#components/design/content/TextboxCardTemplate.svelte";
---
@@ -17,9 +17,9 @@ import TextboxCardTemplate from "#components/design/content/TextboxCardTemplate.
<h2>Machen Sie hier den <span>online Check</span> welcher Energieausweis der Richtige für Sie ist:</h2>
<div class="mt-4 mb-6">
<WelcherAusweisWidget client:load></WelcherAusweisWidget>
</div>
<h2>Erfüllen Sie die gesetzlichen Vorgaben des <span>GEG 2024</span>. Mit uns profitieren Sie von:</h2>
<p>

4
src/pages/welcher-energieausweis/index.astro
View File

@@ -1,6 +1,6 @@
---
import Layout from "#layouts/Layout.astro";
import WelcherAusweisWidget from "#components/widgets/WelcherAusweisWidget.svelte";
import WelcherAusweisWidget from "#components/widgets/WelcherAusweisWidget_IBC.svelte";
import TextboxCardTemplate from "#components/design/content/TextboxCardTemplate.svelte";
---
@@ -11,7 +11,9 @@ import TextboxCardTemplate from "#components/design/content/TextboxCardTemplate.
<p>Falls Sie nicht wissen sollten welchen Energieausweis Sie benötigen, können Sie hier ganz einfach den Gebäudetyp
und Anlass bzw. Grund angeben. Als Ergebnis bekommen Sie den für Sie passenden Energieausweis angezeigt.</p>
<h2>Machen Sie hier den Online Check, welcher Energieausweis der richtige ist:</h2>
<div class="mt-4 mb-6">
<WelcherAusweisWidget client:load/>
</Layout>
<h2>Verbrauchsausweis für Wohngebäude: Einfacher Energieausweis bei Vermietung und Verkauf</h2>
<p>
In den meisten Fällen können Sie bei der Vermietung oder dem Verkauf Ihrer Immobilie den

2
src/pages/widgets/[vermittler].astro
View File

@@ -1,5 +1,5 @@
---
import WelcherAusweisWidget from "#components/widgets/WelcherAusweisWidget_1.svelte";
import WelcherAusweisWidget from "#components/widgets/immowelt/WelcherAusweisWidget_immowelt.svelte";
const { vermittler } = Astro.params;
---