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

widget

Browse Source
This commit is contained in:
Robert Jagtiani
2025-02-08 02:37:39 +01:00
parent 01469e7d3f
commit efde2a9422
7 changed files with 448 additions and 429 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/design/content/WidgetCardTemplate.svelte
View File

@@ -42,7 +42,7 @@
<!--<div class="sumCent variante justify-self-end">{variant}</div>-->
<div class="sumCent sumRows">
<div class="sumCent sumRows forServices">
{#each services as [service, check]}
<div class="services">
@@ -76,23 +76,34 @@
<style lang="postcss">
.sumCent{@apply justify-self-center col-span-2 mb-6}
.sumRows{@apply grid grid-rows-subgrid row-span-5}
.image{@apply w-[75%] pl-12}
.buttoncols{@apply grid grid-cols-2 gap-x-10}
.buttoncol{@apply w-full justify-self-center text-center text-white bg-secondary rounded-md px-3 py-1 no-underline
hover:bg-primary}
.promo{@apply tracking-tighter text-[1.75rem] text-gray-700 pl-0 m-0 -mt-4;
.sumCent{@apply justify-self-center col-span-2 md:mb-6}
.sumRows{@apply hidden md:grid grid-rows-subgrid row-span-5}
.forServices{@apply w-full md:w-auto}
.image{@apply w-[75%] justify-self-center
md:w-[75%] md:pl-12}
.buttoncols{@apply grid grid-cols-1 gap-x-10 w-full
md:grid-cols-2 md:w-[auto]}
.buttoncol{@apply mt-[0.5rem] text-center text-white bg-secondary rounded-md px-3 py-1 no-underline
hover:bg-primary}
.promo{@apply tracking-tighter text-[1.75rem] text-gray-700 pl-0 m-0 -mt-4;
font-family: "Antique Olive Compact bold";}
.titel {@apply col-span-2 text-center [font-size:_clamp(14px,2.5vw,28px)]}
.titel {@apply col-span-2 text-center [font-size:_clamp(20px,2.5vw,28px)]}
.empfehlung{@apply bg-red-700 text-[0.75rem] text-white px-2 py-1 rounded-sm rotate-[5deg]}
.variante {
@apply col-span-2 -mt-2 text-xl w-fit text-black justify-self-end;
}
.services {
@apply text-start py-1 grid grid-cols-[1fr_minmax(10px,50px)] items-center;
@apply hidden w-full text-start py-1 md:grid grid-cols-[1fr_minmax(25px,50px)] items-center;
}
.services:not(:last-child) {
@apply border-b-[1px] border-gray-200;

250
src/components/widgets/WelcherAusweisWidget_1.svelte
View File

@@ -3,86 +3,46 @@
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");
}
}
function row3col(){
var x = document.getElementById('anlass').value;
if(allowedReason.includes(x)){
document.getElementById('firstrow').style.gridTemplateColumns = "repeat(3, minmax(0, 1fr))";
}else{
document.getElementById('firstrow').style.gridTemplateColumns = "repeat(2, minmax(0, 1fr))";
}
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"];
function getBoxes(){
if(twoBoxReason.includes(anlass)){
document.getElementById('firstrow')?.classList.remove('md:grid-cols-2');
document.getElementById('firstrow')?.classList.add('md:grid-cols-3');
}else{
document.getElementById('firstrow')?.classList.remove('md:grid-cols-3');
document.getElementById('firstrow')?.classList.add('md:grid-cols-2');
}
}
let ausnahme: boolean = false
function getDivs(){
let anzahl;
if(showVerbrauchsausweis){console.log('1');anzahl=2;}
if(allowedReason.includes(anlass) && allowedTypes.includes(gebaeudetyp)){console.log('2');anzahl=2;}
if(allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)){console.log('3');anzahl=2;}
if(allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)){console.log('4');anzahl=4;}
var cols = 'grid-cols-'+anzahl
if(anzahl==1){
}else if(anzahl==2) {
var x = document.getElementById('thirdrow')?.children;
console.log(x);
// for (let i = 0; i < x.length; i++) {
// x[i].classList.remove('col-span-1');
// x[i].classList.add('col-span-2');
//}
}else if(anzahl==4) {
var x = document.getElementById('thirdrow')?.children;
console.log(x);
// for (let i = 0; i < x.length; i++) {
// x[i].classList.remove('col-span-2');
// x[i].classList.add('col-span-1');
//}
}
$: {
ausnahme = ((leerStand === "mehr als 30") || (heizungsAlter === "< 3") || (baujahr === "vor 1978" && einheiten === "bis 4 Wohneinheiten" && sanierungsstatus === "unsaniert"))
? true
: false;
}
</script>
<div id="OEA_widget">
<input id="recode" type="hidden" value="widgetvorlage" />
@@ -96,7 +56,7 @@ if(anzahl==1){
<select
id="anlass"
class="selectfeld"
bind:value={anlass} on:change={getDivs} on:change={row3col}
bind:value={anlass} on:change={getBoxes}
>
<option selected disabled>bitte auswählen</option>
<option value="Vermietung/Verkauf"
@@ -106,7 +66,7 @@ if(anzahl==1){
<option value="Neubau">Neubau</option>
<option value="Erweiterung">Erweiterung</option>
<option value="Aushangpflicht">Aushangpflicht</option>
<option value="sonstiges">sonstiges z.B. Bank</option>
<option value="Sonstiges">Sonstiges z.B. Bank</option>
</select>
</div>
@@ -114,7 +74,7 @@ if(anzahl==1){
<div class="titel">Gebäudetyp</div>
<select
class="selectfeld"
bind:value={gebaeudetyp} on:change={getDivs}
bind:value={gebaeudetyp} on:change={getBoxes}
>
<option selected disabled>bitte auswählen</option>
<option value="Einfamilienhaus">Einfamilienhaus</option>
@@ -125,13 +85,13 @@ if(anzahl==1){
</select>
</div>
{#if allowedReason.includes(anlass)}
{#if twoBoxReason.includes(anlass)}
<div class="auswahl">
<div class="titel">Sanierungsstand</div>
<select
on:change={getDivs}
class="selectfeld"
bind:value={sanierungsstatus}
class="selectfeld"
bind:value={sanierungsstatus} on:change={getBoxes}
>
<option selected disabled>bitte auswählen</option>
<option value="saniert">saniert</option>
@@ -142,13 +102,15 @@ if(anzahl==1){
</div>
{#if allowedReason.includes(anlass)}
{#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}
>
<option selected disabled>bitte auswählen</option>
<option value="vor 1978">vor 1978</option>
@@ -162,7 +124,7 @@ if(anzahl==1){
class="selectfeld"
bind:value={heizungsAlter}
>
<option value=">= 3" selected disabled>bitte auswählen</option>
<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>
@@ -187,27 +149,23 @@ if(anzahl==1){
<div class="OEA_item4">
<div class="titel">Leerstand</div>
<select
class="selectfeld"
class="selectfeld ausnahmen"
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
>
<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 showVerbrauchsausweis}
{#if twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude") && (ausnahme === false)}
<div
class="produktbox"
transition:fade={{ duration: 1000 }}
transition:fade={{ duration: 200 }}
>
<WidgetCardTemplate
name="Verbrauchsausweis Wohngebäude"
@@ -223,16 +181,15 @@ if(anzahl==1){
["Wird nicht immer bei den Banken akzeptiert.", false]
]}
href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude/"
empfehlung="nein"
></WidgetCardTemplate>
</div>
{/if}
{#if allowedReason.includes(anlass) && allowedTypes.includes(gebaeudetyp)}
{#if twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude")}
<div
class="produktbox"
transition:fade={{ duration: 1000 }}
transition:fade={{ duration: 200 }}
>
<WidgetCardTemplate
name="Bedarfsausweis Wohngebäude"
@@ -253,10 +210,10 @@ if(anzahl==1){
</div>
{/if}
{#if allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)}
{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp) && (ausnahme === false)}
<div
class="produktbox"
transition:fade={{ duration: 1000 }}
transition:fade={{ duration: 200 }}
>
<WidgetCardTemplate
name="Verbrauchsausweis Gewerbegebäude"
@@ -273,40 +230,16 @@ if(anzahl==1){
["xxx", false],
]}
href="/energieausweis-erstellen/verbrauchsausweis-gewerbe/"
empfehlung="nein"
></WidgetCardTemplate>
</div>
{/if}
{#if allowedReason.includes(anlass) == false && allowedTypesGewerbe.includes(gebaeudetyp)}
{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
<div
class="produktbox"
transition:fade={{ duration: 1000 }}
>
<WidgetCardTemplate
name="GEG-Nachweis Gewerbegebäude"
price={PRICES.BedarfsausweisGewerbe[0]}
src="/images/right-sidebar/gewerbegebaeude.svg"
alt="Gewerbe Bedarfsausweis"
variant="Bauvorlage"
services={[
["xxx", true],
["xxx", true],
["xxx", false],
["xxx", false],
["xxx", false],
]}
href="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
></WidgetCardTemplate>
</div>
{/if}
{#if allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)}
<div
class="produktbox"
transition:fade={{ duration: 1000 }}
transition:fade={{ duration: 200 }}
>
<WidgetCardTemplate
name="Bedarfsausweis Gewerbegebäude"
@@ -319,14 +252,67 @@ if(anzahl==1){
["Mehrzonenmodell nach DIN 18599.", true],
["Zulässig bei Vermietung oder Verkauf.", true],
["Grundlage für Sanierung-Varianten.", false],
["Objektiveres, besser vergleichbares Ergebnis.", false],
["Grundlage für Sanierung-Varianten.", true],
["Objektiveres, besser vergleichbares Ergebnis.", true],
["xxx", false],
]}
href="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
></WidgetCardTemplate>
</div>
{/if}
{#if (anlass != "bitte auswählen") && !twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude")}
<div
class="produktbox"
transition:fade={{ duration: 200 }}
>
<WidgetCardTemplate
name="GEG-Nachweis Wohngebäude"
price={PRICES.BedarfsausweisGewerbe[0]}
src="/images/right-sidebar/gewerbegebaeude.svg"
alt="Gewerbe Bedarfsausweis"
variant="Bauvorlage"
services={[
["xxx", true],
["xxx", true],
["xxx", false],
["xxx", false],
["xxx", false],
]}
href="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
empfehlung="nein"
></WidgetCardTemplate>
</div>
{/if}
{#if (anlass != "bitte auswählen") && !twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
<div
class="produktbox"
transition:fade={{ duration: 200 }}
>
<WidgetCardTemplate
name="GEG-Nachweis Gewerbegebäude"
price={PRICES.BedarfsausweisGewerbe[0]}
src="/images/right-sidebar/gewerbegebaeude.svg"
alt="Gewerbe Bedarfsausweis"
variant="Bauvorlage"
services={[
["xxx", true],
["xxx", true],
["xxx", false],
["xxx", false],
["xxx", false],
]}
href="/energieausweis-erstellen/bedarfsausweis-gewerbe/"
empfehlung="nein"
></WidgetCardTemplate>
</div>
{/if}
</div>
</div>
</div>
@@ -353,9 +339,11 @@ if(anzahl==1){
*{font-family: "Heron";}
#OEA_widget {
@apply min-w-[640px] max-w-[1920px] p-[10px];
@apply min-w-[320px] max-w-[1920px] p-[4px]
sm:p-[10px];
.firstrow{@apply grid grid-cols-2 gap-x-4 gap-y-2;
.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-sans font-bold bg-[#444f94] px-2 py-1 rounded-[0.25rem];}
@@ -363,7 +351,8 @@ if(anzahl==1){
}
.secondrow{@apply grid grid-cols-4 gap-x-4 gap-y-2 mt-4;
.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-sans font-bold bg-[#cccccc] px-2 py-1 rounded-[0.25rem];}
@@ -371,9 +360,10 @@ if(anzahl==1){
}
.thirdrow{@apply grid grid-cols-4 gap-x-4 gap-y-2;
.thirdrow{@apply grid grid-cols-2 gap-x-4 gap-y-2
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-12 bg-black/5 rounded-lg
.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)