4584ddfb1f
Widget erweitert mit Leerstand und Heizungsalter. Produktsäulen angepasst. Text auf Startseite fertiggestellt
333 lines
8.9 KiB
Svelte
333 lines
8.9 KiB
Svelte
<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
|
|
|
|
$: {
|
|
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}
|
|
>
|
|
<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}
|
|
>
|
|
<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>
|
|
|
|
<div class="OEA_item2">
|
|
<div class="OEA_title1">Sanierungsstand</div>
|
|
<select
|
|
class="OEA_auswahl2"
|
|
bind:value={sanierungsstatus}
|
|
>
|
|
<option selected disabled>bitte auswählen</option>
|
|
<option value="saniert">saniert</option>
|
|
<option value="neubau">Neubau</option>
|
|
<option value="unsaniert">unsaniert</option>
|
|
</select>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="OEA_zeile2">
|
|
<div class="OEA_item3">
|
|
<div class="OEA_title2">Baujahr</div>
|
|
<select
|
|
class="OEA_auswahl2"
|
|
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="OEA_item3">
|
|
<div class="OEA_title2">Heizungsalter</div>
|
|
<select
|
|
class="OEA_auswahl2"
|
|
bind:value={heizungsAlter}
|
|
>
|
|
<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}
|
|
>
|
|
<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}
|
|
>
|
|
<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>
|
|
|
|
<div class="OEA_zeile3">
|
|
{#if showVerbrauchsausweis}
|
|
<div
|
|
class="OEA_item6 result"
|
|
transition:fade={{ duration: 1000 }}
|
|
>
|
|
<WidgetCardTemplate
|
|
name="Verbrauchsausweis Wohngebäude"
|
|
price={PRICES.VerbrauchsausweisWohnen[0]}
|
|
src="/images/right-sidebar/UMBE_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"
|
|
transition:fade={{ duration: 1000 }}
|
|
>
|
|
<WidgetCardTemplate
|
|
name="Bedarfsausweis Wohngebäude"
|
|
price={PRICES.BedarfsausweisWohnen[0]}
|
|
src="/images/right-sidebar/UMBE_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"
|
|
transition:fade={{ duration: 1000 }}
|
|
>
|
|
<WidgetCardTemplate
|
|
name="Verbrauchsausweis Gewerbe"
|
|
price={PRICES.VerbrauchsausweisGewerbe[0]}
|
|
src="/images/right-sidebar/UMBE_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"
|
|
transition:fade={{ duration: 1000 }}
|
|
>
|
|
<WidgetCardTemplate
|
|
name="GEG-Nachweis Gewerbe"
|
|
price={PRICES.BedarfsausweisGewerbe[0]}
|
|
src="/images/right-sidebar/UMBE_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"
|
|
transition:fade={{ duration: 1000 }}
|
|
>
|
|
<WidgetCardTemplate
|
|
name="Bedarfsausweis Gewerbe"
|
|
price={PRICES.BedarfsausweisGewerbe[0]}
|
|
src="/images/right-sidebar/UMBE_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-100 p-4 shadow-xl;
|
|
|
|
#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_title1,
|
|
.OEA_title2 {
|
|
@apply font-bold text-lg text-white p-1.5 pl-2 rounded w-full;
|
|
}
|
|
}
|
|
}
|
|
|
|
.OEA_title1 {
|
|
@apply bg-secondary;
|
|
}
|
|
|
|
.OEA_title2 {
|
|
@apply bg-primary;
|
|
}
|
|
|
|
.OEA_auswahl1,
|
|
.OEA_auswahl2 {
|
|
@apply w-full p-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500;
|
|
}
|
|
|
|
#OEA_result {
|
|
@apply rounded-lg text-gray-700;
|
|
}
|
|
|
|
.OEA_zeile3 {
|
|
@apply flex flex-row space-x-4 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>
|