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-10 18:14:05 +01:00
parent 3f0d1f6906
commit cfa9115af8
3 changed files with 124 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,6 @@
import { fade } from "svelte/transition";
import WidgetCardTemplate from "#components/design/content/WidgetCardTemplate.svelte";
import { PRICES } from "#lib/constants.js";
let gebaeudetyp: string = "bitte auswählen";
let anlass: string = "bitte auswählen";
@@ -16,29 +15,67 @@
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('md:grid-cols-2');
document.getElementById('firstrow')?.classList.add('md:grid-cols-3');
document.getElementById('firstrow')?.classList.remove('sm:grid-cols-2');
document.getElementById('firstrow')?.classList.add('sm:grid-cols-3');
}else{
document.getElementById('firstrow')?.classList.remove('md:grid-cols-3');
document.getElementById('firstrow')?.classList.add('md:grid-cols-2');
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('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('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('grid-cols-4');
}
}
let ausnahme: boolean = false
$: {
ausnahme = ((leerStand === "mehr als 30") || (heizungsAlter === "< 3") || (baujahr === "vor 1978" && einheiten === "bis 4 Wohneinheiten" && sanierungsstatus === "unsaniert"))
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"))
? true
: false;
threeBOX = ((ausnahme === true) && (gebaeudetyp === "Mischgebäude") && (twoBoxReason.includes(anlass)))
? true
: false;
}
</script>
@@ -56,7 +93,7 @@ $: {
<select
id="anlass"
class="selectfeld"
bind:value={anlass} on:change={getBoxes}
bind:value={anlass} on:change={getBoxes} on:change={getCount}
>
<option selected disabled>bitte auswählen</option>
<option value="Vermietung/Verkauf"
@@ -74,7 +111,7 @@ $: {
<div class="titel">Gebäudetyp</div>
<select
class="selectfeld"
bind:value={gebaeudetyp} on:change={getBoxes}
bind:value={gebaeudetyp} on:change={getBoxes} on:change={getCount}
>
<option selected disabled>bitte auswählen</option>
<option value="Einfamilienhaus">Einfamilienhaus</option>
@@ -90,7 +127,7 @@ $: {
<div class="titel">Sanierungsstand</div>
<select
class="selectfeld"
bind:value={sanierungsstatus} on:change={getBoxes}
bind:value={sanierungsstatus} on:change={getBoxes} on:change={getCount}
>
<option selected disabled>bitte auswählen</option>
@@ -109,7 +146,7 @@ $: {
<select
id="baujahr"
class="selectfeld"
bind:value={baujahr}
bind:value={baujahr} on:change={getCount}
>
<option selected disabled>bitte auswählen</option>
@@ -122,7 +159,7 @@ $: {
<div class="titel">Heizungsalter</div>
<select
class="selectfeld"
bind:value={heizungsAlter}
bind:value={heizungsAlter} on:change={getCount}
>
<option selected disabled>bitte auswählen</option>
<option value="< 3">jünger als 3 Jahre</option>
@@ -134,7 +171,7 @@ $: {
<div class="titel">Wohneinheiten</div>
<select
class="selectfeld"
bind:value={einheiten}
bind:value={einheiten} on:change={getCount}
>
<option selected disabled>bitte auswählen</option>
<option value="bis 4 Wohneinheiten"
@@ -150,7 +187,7 @@ $: {
<div class="titel">Leerstand</div>
<select
class="selectfeld ausnahmen"
bind:value={leerStand}
bind:value={leerStand} on:change={getCount}
>
<option selected disabled>bitte auswählen</option>
<option value="bis 30">bis 30%</option>
@@ -165,7 +202,7 @@ $: {
<div
class="produktbox"
transition:fade={{ duration: 200 }}
transition:fade={{ duration: 0 }}
>
<WidgetCardTemplate
name="Verbrauchsausweis Wohngebäude"
@@ -190,7 +227,7 @@ $: {
{#if twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude")}
<div
class="produktbox"
transition:fade={{ duration: 200 }}
transition:fade={{ duration: 0 }}
>
<WidgetCardTemplate
name="Bedarfsausweis Wohngebäude"
@@ -215,7 +252,7 @@ $: {
{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
<div
class="produktbox"
transition:fade={{ duration: 200 }}
transition:fade={{ duration: 0 }}
>
<WidgetCardTemplate
name="Verbrauchsausweis Gewerbegebäude"
@@ -242,7 +279,7 @@ $: {
{#if twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
<div
class="produktbox"
transition:fade={{ duration: 200 }}
transition:fade={{ duration: 0 }}
>
<WidgetCardTemplate
name="Bedarfsausweis Gewerbegebäude"
@@ -268,7 +305,7 @@ $: {
{#if (anlass != "bitte auswählen") && !twoBoxReason.includes(anlass) && (gebaeudetyp != "Gewerbegebäude")}
<div
class="produktbox"
transition:fade={{ duration: 200 }}
transition:fade={{ duration: 0 }}
>
<WidgetCardTemplate
name="GEG-Nachweis Wohngebäude"
@@ -295,7 +332,7 @@ $: {
{#if (anlass != "bitte auswählen") && !twoBoxReason.includes(anlass) && gewerbeHouse.includes(gebaeudetyp)}
<div
class="produktbox"
transition:fade={{ duration: 200 }}
transition:fade={{ duration: 0 }}
>
<WidgetCardTemplate
name="GEG-Nachweis Gewerbegebäude"
@@ -324,14 +361,6 @@ $: {
<style lang="postcss">
@font-face {
font-family: 'Heron';
font-weight: 700;
font-style: normal;
font-display:swap;
src: url("/fonts/HeronSans-Regular.woff2") format('woff2');
}
@font-face {
font-family: 'Antique Olive Compact bold';
font-weight: 700;
@@ -383,10 +412,12 @@ $: {
}
.thirdrow{@apply grid grid-cols-2 gap-x-4 gap-y-2
#OEA_input{@apply grid}
.thirdrow{@apply grid grid-cols-2 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
.produktbox{@apply grid grid-cols-subgrid col-span-2 grid-rows-subgrid row-span-3 sm: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)