419 lines
15 KiB
Svelte
419 lines
15 KiB
Svelte
<script lang="ts">
|
|
import { fade } from "svelte/transition";
|
|
import WidgetCardTemplate from "#components/widgets/immowelt/WidgetCardTemplate.svelte";
|
|
import { PRICES } from "#lib/constants.js";
|
|
import { Enums } from "#lib/client/prisma";
|
|
|
|
|
|
let ausnahme: boolean = false;
|
|
let oneBOX: boolean = false;
|
|
let threeBOX: boolean = false;
|
|
|
|
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 partner:string = "immowelt";
|
|
|
|
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);
|
|
|
|
$: isGewerbe = gewerbeHouse.includes(gebaeudetyp);
|
|
|
|
$: oneBOX =
|
|
(ausnahme && !isGewerbe) ||
|
|
(!isTwoBoxReason && gebaeudetyp !== "Mischgebäude") ||
|
|
(gebaeudetyp === "Gewerbegebäude" && leerStand === "mehr als 30");
|
|
|
|
$: threeBOX =
|
|
(ausnahme && gebaeudetyp === "Mischgebäude" && isTwoBoxReason && leerStand !== "mehr als 30");
|
|
|
|
$: standardXL =
|
|
(einheiten === "mehr als 4 Wohneinheiten")
|
|
|
|
</script>
|
|
|
|
|
|
<div id="IBC_app">
|
|
|
|
<input id="recode" type="hidden" value="widgetvorlage" />
|
|
|
|
<div id="OEA_input">
|
|
|
|
|
|
<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}>
|
|
>
|
|
<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}>
|
|
>
|
|
<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 isTwoBoxReason}
|
|
<div class="auswahl">
|
|
<div class="titel">Sanierungsstand</div>
|
|
<select
|
|
class="selectfeld"
|
|
bind:value={sanierungsstatus}>
|
|
|
|
>
|
|
<option selected disabled>bitte auswählen</option>
|
|
<option value="saniert">saniert</option>
|
|
<option value="unsaniert">unsaniert</option>
|
|
</select>
|
|
</div>
|
|
{/if}
|
|
|
|
</div>
|
|
|
|
{#if isTwoBoxReason}
|
|
<div id="secondrow" class="secondrow">
|
|
<div class="auswahl">
|
|
<div class="titel">Baujahr</div>
|
|
<select
|
|
id="baujahr"
|
|
class="selectfeld"
|
|
bind:value={baujahr}
|
|
|
|
>
|
|
<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}
|
|
>
|
|
<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}
|
|
>
|
|
<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}
|
|
>
|
|
<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"
|
|
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[standardXL ? Enums.AusweisTyp.standardXL : Enums.AusweisTyp.Standard]}
|
|
price1 = {PRICES.VerbrauchsausweisWohnen[standardXL ? Enums.AusweisTyp.BeratungXL : Enums.AusweisTyp.Beratung]}
|
|
price2 = {PRICES.VerbrauchsausweisWohnen[standardXL ? Enums.AusweisTyp.OfflineXL : Enums.AusweisTyp.Offline]}
|
|
|
|
src={'https://online-energieausweis.org/images/partner/'+partner+'/wohngebaeude.svg'}
|
|
alt="Wohnhaus Verbrauchsausweis"
|
|
variant="einfach"
|
|
empfehlung="nein"
|
|
cta="jetzt online erstellen"
|
|
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_buy1={`https://online-energieausweis.org/${partner}/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/${standardXL ? '?ausweistyp=standardXL' : ''}`}
|
|
href_buy2={`https://online-energieausweis.org/${partner}/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/${standardXL ? '?ausweistyp=BeratungXL' : '?ausweistyp=Beratung'}`}
|
|
href_buy3={`https://online-energieausweis.org/${partner}/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/${standardXL ? '?ausweistyp=OfflineXL' : '?ausweistyp=Offline'}`}
|
|
|
|
></WidgetCardTemplate>
|
|
|
|
{/if}
|
|
|
|
{#if isTwoBoxReason && (gebaeudetyp != "Gewerbegebäude")}
|
|
|
|
<WidgetCardTemplate
|
|
name="Bedarfsausweis Wohngebäude"
|
|
price = {PRICES.BedarfsausweisWohnen[standardXL ? Enums.AusweisTyp.standardXL : Enums.AusweisTyp.Standard]}
|
|
price1 = {PRICES.BedarfsausweisWohnen[standardXL ? Enums.AusweisTyp.BeratungXL : Enums.AusweisTyp.Beratung]}
|
|
price2 = {PRICES.BedarfsausweisWohnen[standardXL ? Enums.AusweisTyp.OfflineXL : Enums.AusweisTyp.Offline]}
|
|
src={'https://online-energieausweis.org/images/partner/'+partner+'/wohngebaeude.svg'}
|
|
alt="Wohnhaus Bedarfsausweis"
|
|
variant="fundiert"
|
|
empfehlung="ja"
|
|
cta="jetzt 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_buy1={`https://online-energieausweis.org/${partner}/energieausweis-erstellen/bedarfsausweis-wohngebaeude/${standardXL ? '?ausweistyp=standardXL' : ''}`}
|
|
href_buy2={`https://online-energieausweis.org/${partner}/energieausweis-erstellen/bedarfsausweis-wohngebaeude/${standardXL ? '?ausweistyp=BeratungXL' : '?ausweistyp=Beratung'}`}
|
|
href_buy3={`https://online-energieausweis.org/${partner}/energieausweis-erstellen/bedarfsausweis-wohngebaeude/${standardXL ? '?ausweistyp=OfflineXL' : '?ausweistyp=Offline'}`}
|
|
|
|
></WidgetCardTemplate>
|
|
|
|
{/if}
|
|
|
|
{#if isTwoBoxReason && isGewerbe && (leerStand != "mehr als 30")}
|
|
|
|
<WidgetCardTemplate
|
|
name="Verbrauchsausweis Gewerbegebäude"
|
|
price = {PRICES.VerbrauchsausweisGewerbe[standardXL ? Enums.AusweisTyp.standardXL : Enums.AusweisTyp.Standard]}
|
|
price1 = {PRICES.VerbrauchsausweisGewerbe[standardXL ? Enums.AusweisTyp.BeratungXL : Enums.AusweisTyp.Beratung]}
|
|
price2 = {PRICES.VerbrauchsausweisGewerbe[standardXL ? Enums.AusweisTyp.OfflineXL : Enums.AusweisTyp.Offline]}
|
|
src={'https://online-energieausweis.org/images/partner/'+partner+'/gewerbegebaeude.svg'}
|
|
alt="Gewerbe Verbrauchsausweis"
|
|
variant="einfach"
|
|
empfehlung="nein"
|
|
cta="jetzt online erstellen"
|
|
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],
|
|
["Ungenau durch individuelles Heizverhalten", false],
|
|
]}
|
|
|
|
href_buy1={`https://online-energieausweis.org/${partner}/energieausweis-erstellen/verbrauchsausweis-gewerbe/${standardXL ? '?ausweistyp=standardXL' : ''}`}
|
|
href_buy2={`https://online-energieausweis.org/${partner}/energieausweis-erstellen/verbrauchsausweis-gewerbe/${standardXL ? '?ausweistyp=BeratungXL' : '?ausweistyp=Beratung'}`}
|
|
href_buy3={`https://online-energieausweis.org/${partner}/energieausweis-erstellen/verbrauchsausweis-gewerbe/${standardXL ? '?ausweistyp=OfflineXL' : '?ausweistyp=Offline'}`}
|
|
></WidgetCardTemplate>
|
|
|
|
{/if}
|
|
|
|
{#if isTwoBoxReason && isGewerbe}
|
|
|
|
<WidgetCardTemplate
|
|
name="Bedarfsausweis Gewerbegebäude"
|
|
price = {PRICES.BedarfsausweisGewerbe[standardXL ? Enums.AusweisTyp.standardXL : Enums.AusweisTyp.Standard]}
|
|
price1 = {PRICES.BedarfsausweisGewerbe[standardXL ? Enums.AusweisTyp.BeratungXL : Enums.AusweisTyp.Beratung]}
|
|
price2 = {PRICES.BedarfsausweisGewerbe[standardXL ? Enums.AusweisTyp.OfflineXL : Enums.AusweisTyp.Offline]}
|
|
src={'https://online-energieausweis.org/images/partner/'+partner+'/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_buy1={`https://online-energieausweis.org/${partner}/angebot-anfragen/bedarfsausweis-gewerbe-anfragen/${standardXL ? '?ausweistyp=standardXL' : ''}`}
|
|
href_buy2={`https://online-energieausweis.org/${partner}/angebot-anfragen/bedarfsausweis-gewerbe-anfragen/${standardXL ? '?ausweistyp=BeratungXL' : '?ausweistyp=Beratung'}`}
|
|
|
|
></WidgetCardTemplate>
|
|
|
|
{/if}
|
|
|
|
{#if (anlass != "bitte auswählen") && !isTwoBoxReason && (gebaeudetyp != "Gewerbegebäude")}
|
|
|
|
<WidgetCardTemplate
|
|
name="GEG-Nachweis Wohngebäude"
|
|
price = {PRICES.GEGNachweisWohnen[standardXL ? Enums.AusweisTyp.standardXL : Enums.AusweisTyp.Standard]}
|
|
price1 = {PRICES.GEGNachweisWohnen[standardXL ? Enums.AusweisTyp.BeratungXL : Enums.AusweisTyp.Beratung]}
|
|
price2 = {PRICES.GEGNachweisWohnen[standardXL ? Enums.AusweisTyp.OfflineXL : Enums.AusweisTyp.Offline]}
|
|
src={'https://online-energieausweis.org/images/partner/'+partner+'/wohngebaeude.svg'}
|
|
alt="GEG-Nachweis-Wohnen"
|
|
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_buy1={`https://online-energieausweis.org/${partner}/angebot-anfragen/geg-nachweis-wohnen-anfragen/${standardXL ? '?ausweistyp=standardXL' : ''}`}
|
|
href_buy2={`https://online-energieausweis.org/${partner}/angebot-anfragen/geg-nachweis-wohnen-anfragen/${standardXL ? '?ausweistyp=BeratungXL' : '?ausweistyp=Beratung'}`}
|
|
|
|
|
|
></WidgetCardTemplate>
|
|
|
|
{/if}
|
|
|
|
{#if (anlass != "bitte auswählen") && !isTwoBoxReason && isGewerbe}
|
|
|
|
<WidgetCardTemplate
|
|
name="GEG-Nachweis Gewerbegebäude"
|
|
price = {PRICES.GEGNachweisGewerbe[standardXL ? Enums.AusweisTyp.standardXL : Enums.AusweisTyp.Standard]}
|
|
price1 = {PRICES.GEGNachweisGewerbe[standardXL ? Enums.AusweisTyp.BeratungXL : Enums.AusweisTyp.Beratung]}
|
|
price2 = {PRICES.GEGNachweisGewerbe[standardXL ? Enums.AusweisTyp.OfflineXL : Enums.AusweisTyp.Offline]}
|
|
src={'https://online-energieausweis.org/images/partner/'+partner+'/gewerbegebaeude.svg'}
|
|
alt="GEG-Nachweis-Gewerbe"
|
|
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_buy1={`https://online-energieausweis.org/${partner}/angebot-anfragen/geg-nachweis-gewerbe-anfragen/${standardXL ? '?ausweistyp=standardXL' : ''}`}
|
|
href_buy2={`https://online-energieausweis.org/${partner}/angebot-anfragen/geg-nachweis-gewerbe-anfragen/${standardXL ? '?ausweistyp=BeratungXL' : '?ausweistyp=Beratung'}`}
|
|
|
|
></WidgetCardTemplate>
|
|
|
|
{/if}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<style lang="postcss">
|
|
|
|
#IBC_app {
|
|
|
|
@font-face {
|
|
font-family: "immo Sans";
|
|
src: url('/fonts/Immo-Sans/immoSans-Regular.eot');
|
|
src: url('/fonts/Immo-Sans/immoSans-Regular.eot?#iefix') format('embedded-opentype'),
|
|
url('/fonts/Immo-Sans/immoSans-Regular.woff2') format('woff2'),
|
|
url('/fonts/Immo-Sans/immoSans-Regular.woff') format('woff');
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "immo Sans Bold";
|
|
src: url('/fonts/Immo-Sans/immoSans-Bold.eot');
|
|
src: url('/fonts/Immo-Sans/immoSans-Bold.eot?#iefix') format('embedded-opentype'), url('../../Fonts/Immo-Sans/immoSans-Bold.woff2') format('woff2'), url('../../Fonts/Immo-Sans/immoSans-Bold.woff') format('woff');
|
|
font-style: normal;
|
|
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');
|
|
}
|
|
|
|
@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;
|
|
|
|
.titel{@apply text-black font-bold bg-[#ffcc00] 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;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|