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

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

@@ -11,11 +11,8 @@
</script>
<h2 class="titel">{name}</h2>
<h2 class="titel sm:mb-2">{name}</h2>
{#if empfehlung=="ja"}
<!--<div class="empfehlung">Empfehlung</div>-->
@@ -30,18 +27,29 @@
{alt}
/>
<div class="justify-self-start">
<p class="promo">
<p class="price">
ab {price} €
</p>
</div>
</div>
<div class="sumCent buttoncols">
<a
href="{href_buy}"
class="buttoncol">jetzt&nbsp;online erstellen</a
>
<a
href="{href_overview}"
class="buttoncol">Produkt-Übersicht</a
>
</div>
<!--<div class="sumCent variante justify-self-end">{variant}</div>-->
<div class="sumCent sumRows forServices">
<div class="sumRows forServices">
{#each services as [service, check]}
<div class="services">
@@ -54,18 +62,7 @@
<div class="sumCent buttoncols">
<a
href="{href_buy}"
class="buttoncol">jetzt&nbsp;online erstellen</a
>
<a
href="{href_overview}"
class="buttoncol">Produktübersicht</a
>
</div>
@@ -76,21 +73,21 @@
.sumCent{@apply justify-self-center col-span-2 md:mb-6}
.sumRows{@apply hidden md:grid grid-rows-subgrid row-span-5}
.forServices{@apply block}
.sumCent{@apply justify-self-center col-span-2}
.sumRows{@apply hidden sm:grid grid-rows-subgrid row-span-5 items-center}
.forServices{@apply grid-rows-subgrid row-span-5 items-center col-span-2 justify-center px-6}
.image{@apply w-[75%] justify-self-center
md:w-[75%] md:pl-12}
.buttoncols{@apply grid grid-cols-1 gap-x-10 w-full
.buttoncols{@apply grid grid-cols-1 gap-x-4 w-full mb-4
md:grid-cols-2 md:w-[auto]}
.buttoncol{@apply mt-[0.5rem] text-center text-black bg-[#ffcc00] rounded-md px-3 py-1 no-underline
.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}
.promo{@apply tracking-tighter text-[2rem] text-gray-700 pl-12 m-0 -mt-4;
.price{@apply tracking-tighter text-[2rem] text-[#222222] pl-12 m-0 -mt-4;
font-family: "Antique Olive Compact bold";}
@@ -102,7 +99,7 @@ hover:bg-[#222222] hover:text-white}
}
.services {
@apply hidden w-full text-start py-1 md:grid md:grid-cols-[1fr_50px]
@apply hidden text-start py-1 md:grid grid-rows-subgrid row-span-1 items-center md:grid-cols-[1fr_50px]
}
.services:not(:last-child) {
@apply border-b-[1px] border-gray-200;

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)