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

Merge remote-tracking branch 'origin/main'

Browse Source
This commit is contained in:
Moritz Utcke
2025-03-10 20:12:02 -03:00
parent 4979a1d112 08a26cbc2d
commit 9b50053007
2 changed files with 114 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
src/components/widgets/immowelt/WelcherAusweisWidget_immowelt.svelte
View File

@@ -19,86 +19,49 @@
const twoBoxReason = ["Vermietung/Verkauf", "Aushangpflicht", "Sonstiges"];
const gewerbeHouse = ["Gewerbegebäude", "Mischgebäude"];
$: ausnahme =
leerStand === "mehr als 30" ||
heizungsAlter === "< 3" ||
(baujahr === "vor 1978" && einheiten === "bis 4 Wohneinheiten" && sanierungsstatus === "unsaniert");
$: {
$: isTwoBoxReason = twoBoxReason.includes(anlass);
ausnahme = ((leerStand === "mehr als 30") || (heizungsAlter === "< 3") || (baujahr === "vor 1978" && einheiten === "bis 4 Wohneinheiten" && sanierungsstatus === "unsaniert"))
? true
: false;
$: isGewerbe = gewerbeHouse.includes(gebaeudetyp);
oneBOX = ((ausnahme === true) && (gebaeudetyp !== "Gewerbegebäude") && (gebaeudetyp !== "Mischgebäude")) ||
(!twoBoxReason.includes(anlass) && (gebaeudetyp !== "Mischgebäude")) ||
((gebaeudetyp === "Gewerbegebäude") && (leerStand === "mehr als 30"))
? true
: false;
$: oneBOX =
(ausnahme && !isGewerbe) ||
(!isTwoBoxReason && gebaeudetyp !== "Mischgebäude") ||
(gebaeudetyp === "Gewerbegebäude" && leerStand === "mehr als 30");
threeBOX = ((ausnahme === true) && (gebaeudetyp === "Mischgebäude") && (twoBoxReason.includes(anlass) && (leerStand != "mehr als 30")))
? true
: false;
$: threeBOX =
(ausnahme && gebaeudetyp === "Mischgebäude" && isTwoBoxReason && leerStand !== "mehr als 30");
}
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');
}
//console.log(!twoBoxReason.includes(anlass)&& (gebaeudetyp != "Mischgebäude"));
}
</script>
<div id="IBC_app">
<div id="OEA_widget">
<input id="recode" type="hidden" value="widgetvorlage" />
<div id="OEA_input">
<div id="firstrow" class="firstrow">
<div id="firstrow" class="firstrow"
class:sm:grid-cols-3={isTwoBoxReason}
class:sm:grid-cols-2={!isTwoBoxReason}>
<div class="auswahl">
<div class="titel">Anlass</div>
<select
id="anlass"
class="selectfeld"
bind:value={anlass} on:change={getBoxes} on:change={getCount}
bind:value={anlass}>
>
<option selected disabled>bitte auswählen</option>
<option value="Vermietung/Verkauf"
>Vermietung/Verkauf</option
>
<option value="Vermietung/Verkauf">Vermietung/Verkauf</option>
<option value="Modernisierung">Modernisierung</option>
<option value="Neubau">Neubau</option>
<option value="Erweiterung">Erweiterung</option>
@@ -111,7 +74,7 @@ else{
<div class="titel">Gebäudetyp</div>
<select
class="selectfeld"
bind:value={gebaeudetyp} on:change={getBoxes} on:change={getCount}
bind:value={gebaeudetyp}>
>
<option selected disabled>bitte auswählen</option>
<option value="Einfamilienhaus">Einfamilienhaus</option>
@@ -122,12 +85,12 @@ else{
</select>
</div>
{#if twoBoxReason.includes(anlass)}
{#if isTwoBoxReason}
<div class="auswahl">
<div class="titel">Sanierungsstand</div>
<select
class="selectfeld"
bind:value={sanierungsstatus} on:change={getBoxes} on:change={getCount}
bind:value={sanierungsstatus}>
>
<option selected disabled>bitte auswählen</option>
@@ -139,14 +102,14 @@ else{
</div>
{#if twoBoxReason.includes(anlass)}
{#if isTwoBoxReason}
<div id="secondrow" class="secondrow">
<div class="auswahl">
<div class="titel">Baujahr</div>
<select
id="baujahr"
class="selectfeld"
bind:value={baujahr} on:change={getCount}
bind:value={baujahr}
>
<option selected disabled>bitte auswählen</option>
@@ -159,7 +122,7 @@ else{
<div class="titel">Heizungsalter</div>
<select
class="selectfeld"
bind:value={heizungsAlter} on:change={getCount}
bind:value={heizungsAlter}
>
<option selected disabled>bitte auswählen</option>
<option value="< 3">jünger als 3 Jahre</option>
@@ -171,7 +134,7 @@ else{
<div class="titel">Wohneinheiten</div>
<select
class="selectfeld"
bind:value={einheiten} on:change={getCount}
bind:value={einheiten}
>
<option selected disabled>bitte auswählen</option>
<option value="bis 4 Wohneinheiten"
@@ -187,7 +150,7 @@ else{
<div class="titel">Leerstand</div>
<select
class="selectfeld ausnahmen"
bind:value={leerStand} on:change={getCount}
bind:value={leerStand}
>
<option selected disabled>bitte auswählen</option>
<option value="bis 30">bis 30%</option>
@@ -197,17 +160,20 @@ else{
</div>
{/if}
<div id="thirdrow" class="thirdrow">
{#if twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude") && (ausnahme === false)}
<div
class="produktbox"
transition:fade={{ duration: 0 }}
<div id="thirdrow" class="thirdrow"
class:grid-cols-1={oneBOX}
class:md:grid-cols-6={threeBOX}
class:md:grid-cols-4={!oneBOX && !threeBOX}
>
{#if isTwoBoxReason && (gebaeudetyp != "Gewerbegebäude") && (ausnahme === false)}
<WidgetCardTemplate
name="Verbrauchsausweis Wohngebäude"
price={PRICES.VerbrauchsausweisWohnen[Enums.AusweisTyp.Standard]}
src="/images/immowelt/wohngebaeude_immowelt.svg"
src="https://online-energieausweis.org/images/immowelt/wohngebaeude_immowelt.svg"
alt="Wohnhaus Verbrauchsausweis"
variant="einfach"
empfehlung="nein"
@@ -219,21 +185,18 @@ else{
["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/"
href_buy="https://online-energieausweis.org/immowelt/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
href_overview="https://online-energieausweis.org/immowelt/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/produkt-uebersicht/"
></WidgetCardTemplate>
</div>
{/if}
{#if twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude")}
<div
class="produktbox"
transition:fade={{ duration: 0 }}
>
{#if isTwoBoxReason && (gebaeudetyp != "Gewerbegebäude")}
<WidgetCardTemplate
name="Bedarfsausweis Wohngebäude"
price={PRICES.BedarfsausweisWohnen[Enums.AusweisTyp.Standard]}
src="/images/immowelt/wohngebaeude_immowelt.svg"
src="https://online-energieausweis.org/images/immowelt/wohngebaeude_immowelt.svg"
alt="Wohnhaus Bedarfsausweis"
variant="fundiert"
empfehlung="ja"
@@ -245,21 +208,18 @@ else{
["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/"
href_buy="https://online-energieausweis.org/immowelt/energieausweis-erstellen/bedarfsausweis-wohngebaeude/"
href_overview="https://online-energieausweis.org/immowelt/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 }}
>
{#if isTwoBoxReason && isGewerbe && (leerStand != "mehr als 30")}
<WidgetCardTemplate
name="Verbrauchsausweis Gewerbegebäude"
price={PRICES.VerbrauchsausweisGewerbe[Enums.AusweisTyp.Standard]}
src="/images/immowelt/gewerbegebaeude_immowelt.svg"
src="https://online-energieausweis.org/images/immowelt/gewerbegebaeude_immowelt.svg"
alt="Gewerbe Verbrauchsausweis"
variant="einfach"
empfehlung="nein"
@@ -272,22 +232,18 @@ else{
["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/"
href_buy="https://online-energieausweis.org/immowelt/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
href_overview="https://online-energieausweis.org/immowelt/energieausweis-erstellen/verbrauchsausweis-gewerbe/produkt-uebersicht/"
></WidgetCardTemplate>
</div>
{/if}
{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
<div
class="produktbox"
transition:fade={{ duration: 0 }}
>
{#if isTwoBoxReason && isGewerbe}
<WidgetCardTemplate
name="Bedarfsausweis Gewerbegebäude"
price={PRICES.BedarfsausweisGewerbe[Enums.AusweisTyp.Standard]}
src="/images/immowelt/gewerbegebaeude_immowelt.svg"
src="https://online-energieausweis.org/images/immowelt/gewerbegebaeude_immowelt.svg"
alt="Gewerbe Bedarfsausweis"
variant="fundiert"
empfehlung="ja"
@@ -300,22 +256,19 @@ else{
["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/"
href_buy="https://online-energieausweis.org/immowelt/angebot-anfragen/bedarfsausweis-gewerbe-anfragen/"
href_overview="https://online-energieausweis.org/immowelt/angebot-anfragen/bedarfsausweis-gewerbe-anfragen/produkt-uebersicht/"
></WidgetCardTemplate>
</div>
{/if}
{#if (anlass != "bitte auswählen") && !twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude")}
<div
class="produktbox"
transition:fade={{ duration: 0 }}
>
{#if (anlass != "bitte auswählen") && !isTwoBoxReason && (gebaeudetyp != "Gewerbegebäude")}
<WidgetCardTemplate
name="GEG-Nachweis Wohngebäude"
price={PRICES.GEGNachweisWohnen[Enums.AusweisTyp.Standard]}
src="/images/immowelt/wohngebaeude_immowelt.svg"
alt="Gewerbe Bedarfsausweis"
src="https://online-energieausweis.org/images/immowelt/wohngebaeude_immowelt.svg"
alt="GEG-Nachweis-Wohnen"
variant="Bauvorlage"
empfehlung="ja"
cta="Angebot anfragen"
@@ -327,24 +280,20 @@ else{
["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/"
href_buy="https://online-energieausweis.org/immowelt/angebot-anfragen/geg-nachweis-wohnen-anfragen/"
href_overview="https://online-energieausweis.org/immowelt/angebot-anfragen/geg-nachweis-wohnen-anfragen/produkt-uebersicht/"
></WidgetCardTemplate>
</div>
{/if}
{#if (anlass != "bitte auswählen") && !twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
<div
class="produktbox"
transition:fade={{ duration: 0 }}
>
{#if (anlass != "bitte auswählen") && !isTwoBoxReason && isGewerbe}
<WidgetCardTemplate
name="GEG-Nachweis Gewerbegebäude"
price={PRICES.GEGNachweisGewerbe[Enums.AusweisTyp.Standard]}
src="/images/immowelt/gewerbegebaeude_immowelt.svg"
alt="Gewerbe Bedarfsausweis"
src="https://online-energieausweis.org/images/immowelt/gewerbegebaeude_immowelt.svg"
alt="GEG-Nachweis-Gewerbe"
variant="Bauvorlage"
empfehlung="ja"
cta="Angebot anfragen"
@@ -356,26 +305,21 @@ else{
["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/"
href_buy="https://online-energieausweis.org/immowelt/angebot-anfragen/geg-nachweis-gewerbe-anfragen/"
href_overview="https://online-energieausweis.org/immowelt/angebot-anfragen/geg-nachweis-gewerbe-anfragen/produkt-uebersicht/"
></WidgetCardTemplate>
</div>
{/if}
</div>
</div>
</div>
<style lang="postcss">
@font-face {
font-family: 'Antique Olive Compact bold';
font-weight: 700;
font-style: normal;
font-display:swap;
src: url("/fonts/Antique Olive Std Compact.woff2") format('woff2');
}
#IBC_app {
@font-face {
font-family: "immo Sans";
@@ -395,14 +339,21 @@ else{
font-weight: 700;
}
@font-face {
font-family: 'Antique Olive Compact bold';
font-weight: 700;
font-style: normal;
font-display:swap;
src: url("/fonts/Antique Olive Std Compact.woff2") format('woff2');
}
*{font-family: "immo Sans";}
select option{font-family: "immo Sans",sans-serif;}
#OEA_widget {
@apply min-w-[320px] max-w-[1920px] p-[4px]
sm:p-[10px];
font-family: "immo Sans";
select option{
font-family: "immo Sans",sans-serif;}
.firstrow{@apply grid grid-cols-1 gap-x-4 gap-y-2
sm:grid-cols-2 sm:gap-x-4 sm:gap-y-2;
@@ -426,16 +377,10 @@ select option{font-family: "immo Sans",sans-serif;}
.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>

38
src/components/widgets/immowelt/WidgetCardTemplate_immowelt.svelte
View File

@@ -1,4 +1,5 @@
<script lang="ts">
import { fade } from "svelte/transition";
export let price: number;
export let name: string;
export let variant: string;
@@ -11,9 +12,13 @@
export let cta: string;
</script>
<div
class="produktbox"
transition:fade={{ duration: 0 }}
>
{#if empfehlung=="ja"}
<div class="empfehlung">Empfehlung</div>
{#if empfehlung === "ja"}
<div class="empfehlung" aria-label="Empfohlenes Produkt">Empfehlung</div>
{/if}
<h2 class="titel sm:mb-2">{name}</h2>
@@ -35,13 +40,19 @@
<div class="sumCent buttoncols">
<a
href="{href_buy}"
class="buttoncol">{cta}</a
>
href={href_buy}
class="buttoncol"
aria-label="Jetzt {name} kaufen"
target="_blank"
>{cta}
</a>
<a
href="{href_overview}"
class="buttoncol">Produkt-Übersicht</a
href={href_overview}
class="buttoncol"
aria-label="{name} Produkt-Übersicht"
target="_blank"
>Produkt-Übersicht</a
>
</div>
@@ -51,16 +62,18 @@
{#each services as [service, check]}
<div class="services">
<span>{@html service}</span>
<div class:check={check} class:check-no={!check}>{check ? "✔" : "✘"}</div>
<span class={check ? "check" : "check-no"}>{check ? "✔" : "✘"}</span>
</div>
{/each}
</div>
</div>
<style lang="postcss">
.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);
.sumCent{@apply justify-self-center col-span-2}
.sumRows{@apply hidden sm:grid grid-rows-subgrid row-span-5 items-center}
@@ -75,12 +88,9 @@ md:grid-cols-2 md:w-[auto]}
.buttoncol{@apply mt-2 md:mt-0 text-center text-black bg-[#ffcc00] rounded-md px-3 py-1 no-underline
hover:bg-[#222222] hover:text-white}
.price{@apply tracking-tighter text-[2rem] text-[#222222] pl-12 m-0 -mt-7 text-nowrap text-left;
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 {
@@ -100,4 +110,6 @@ hover:bg-[#222222] hover:text-white}
@apply justify-self-end self-center font-bold text-red-700;
}
}
</style>