157 lines
4.6 KiB
Svelte
157 lines
4.6 KiB
Svelte
|
|
<script lang="ts">
|
|
|
|
import BannerPrice from "#content/banner-saeule.svelte";
|
|
import { fade } from 'svelte/transition';
|
|
|
|
let selectedType: string = "";
|
|
let selectedReason: string = "";
|
|
let showResult: boolean = false;
|
|
|
|
function handleTypeChange(event: Event) {
|
|
selectedType = (event.target as HTMLSelectElement).value;
|
|
updateResultVisibility();
|
|
}
|
|
|
|
function handleReasonChange(event: Event) {
|
|
selectedReason = (event.target as HTMLSelectElement).value;
|
|
updateResultVisibility();
|
|
}
|
|
|
|
function updateResultVisibility() {
|
|
// Die Bedingung, um das Ergebnis anzuzeigen
|
|
showResult = selectedType === "Einfamilienhaus" && selectedReason === "Vermietung/Verkauf";
|
|
}
|
|
|
|
</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" id="OEA_changeTyp" on:change={handleTypeChange}>
|
|
<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" id="OEA_changeAnlass" on:change={handleReasonChange}>
|
|
<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>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="OEA_zeile2">
|
|
<div class="OEA_item3">
|
|
<div class="OEA_title2">Baujahr</div>
|
|
<select class="OEA_auswahl2" id="changeBaujahr">
|
|
<option value="" selected disabled>bitte auswählen</option>
|
|
<option value="1">vor 1978</option>
|
|
<option value="0">nach 1977</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="OEA_item4">
|
|
<div class="OEA_title2">Wohneinheiten</div>
|
|
<select class="OEA_auswahl2" id="changeEinheiten">
|
|
<option value="" selected disabled>bitte auswählen</option>
|
|
<option value="1">bis 4 Wohneinheiten</option>
|
|
<option value="0">mehr als 4 Wohneinheiten</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="OEA_item5">
|
|
<div class="OEA_title2">Sanierungsstatus</div>
|
|
<select class="OEA_auswahl2" id="changeStatus">
|
|
<option value="" selected disabled>bitte auswählen</option>
|
|
<option value="0">saniert</option>
|
|
<option value="1">unsaniert</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{#if showResult}
|
|
<div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
|
|
<div id="OEA_result" class="bg-white p-4 shadow-md rounded">
|
|
<BannerPrice client:load />
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
#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;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.empfehlungen a {
|
|
@apply text-blue-600 underline hover:text-blue-800 font-semibold;
|
|
}
|
|
|
|
.result {
|
|
@apply opacity-0 transition-opacity duration-1000 ease-in-out;
|
|
}
|
|
|
|
.result[style*="opacity: 1"] {
|
|
@apply opacity-100;
|
|
}
|
|
|
|
</style>
|
|
|