Widget

src/components/Widget2.svelte

@@ -1,5 +1,29 @@
 
-<script lang="ts">import BannerPrice from "#content/banner-saeule.svelte";</script>
+<script lang="ts">
+
+import BannerPrice from "#content/banner-saeule.svelte";
+
+
+  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">
@@ -9,7 +33,7 @@
      <div class="OEA_zeile1">
         <div class="OEA_item1">
         <div class="OEA_title1">Gebäudetyp</div>
-          <select class="OEA_auswahl1" id="OEA_changeTyp">
+        <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>
@@ -21,7 +45,7 @@
     
         <div class="OEA_item2">
           <div class="OEA_title1">Anlass</div>
-          <select class="OEA_auswahl1" id="OEA_changeAnlass">
+          <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>
@@ -61,11 +85,14 @@
         </div>
        </div> 
     
+        {#if showResult}
         <div class="OEA_item6 result">
           <div id="OEA_result">
             <BannerPrice client:load />
           </div>
         </div>
+      {/if}
+
       
     </div>
     </div>