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

. #329

Merged
IB-Cornelsen merged 1 commits from Jens into main 2025-02-11 22:04:45 +00:00
Conversation 0 Commits 1 Files Changed 1 -218
1 changed files with 0 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
src/components/widgets/welcherAusweisWidget.svelte
View File

@@ -1,218 +0,0 @@
<script lang="ts">
import CardVerbrauchsausweisWidget from "#content/CardVerbrauchsausweisWidget.svelte";
import CardVerbrauchsausweisGewerbeWidget from "#content/CardVerbrauchsausweisGewerbeWidget.svelte";
import CardBedarfsausweisWidget from "#content/CardBedarfsausweisWidget.svelte";
import CardBedarfsausweisGewerbeWidget from "#content/CardBedarfsausweisGewerbeWidget.svelte";
import { fade } from "svelte/transition";
let gebaeudetyp: string;
let anlass: string;
let einheiten: string;
let sanierungsstatus: string;
let baujahr: 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");
} else {
showVerbrauchsausweis =
allowedReason.includes(anlass) &&
allowedTypes.includes(gebaeudetyp);
}
}
</script>
<div id="OEA_widget">
<input id="recode" type="hidden" value="widgetvorlage" />
<div id="OEA_input">
<div class="OEA_zeile1">
<div class="OEA_item1">
<div class="OEA_title1">Gebäudetyp</div>
<select
class="OEA_auswahl1"
bind:value={gebaeudetyp}
>
<option value="" 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">Anlass</div>
<select
class="OEA_auswahl1"
bind:value={anlass}
>
<option value="" 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>
<div class="OEA_zeile2">
<div class="OEA_item3">
<div class="OEA_title2">Baujahr</div>
<select
class="OEA_auswahl2"
bind:value={baujahr}
>
<option value="" 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_item4">
<div class="OEA_title2">Wohneinheiten</div>
<select
class="OEA_auswahl2"
bind:value={einheiten}
>
<option value="" 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_item5">
<div class="OEA_title2">Sanierungsstatus</div>
<select
class="OEA_auswahl2"
bind:value={sanierungsstatus}
>
<option selected disabled>bitte auswählen</option>
<option value="saniert">saniert</option>
<option value="unsaniert">unsaniert</option>
</select>
</div>
</div>
<div class="OEA_zeile3">
{#if showVerbrauchsausweis}
<div
class="OEA_item6 result"
transition:fade={{ duration: 1000 }}
>
<CardVerbrauchsausweisWidget client:load />
</div>
{/if}
{#if allowedReason.includes(anlass) && allowedTypes.includes(gebaeudetyp)}
<div
class="OEA_item6 result"
transition:fade={{ duration: 1000 }}
>
<CardBedarfsausweisWidget client:load />
</div>
{/if}
{#if allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)}
<div
class="OEA_item6 result"
transition:fade={{ duration: 1000 }}
>
<CardVerbrauchsausweisGewerbeWidget client:load />
</div>
{/if}
{#if allowedReason.includes(anlass) && allowedTypesGewerbe.includes(gebaeudetyp)}
<div
class="OEA_item6 result"
transition:fade={{ duration: 1000 }}
>
<CardBedarfsausweisGewerbeWidget client:load />
</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 pt-6 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>