online-energieausweis/src/components/Widget2.svelte

<script lang="ts">

import VApromo from  "#content/card-VA-widget.svelte";
import VAGpromo from "#content/card-VAG-widget.svelte";
import BApromo from  "#content/card-BA-widget.svelte";
import BAGpromo from  "#content/card-BAG-widget.svelte";
import { fade } from 'svelte/transition';

  let selectedType: string = "";
  let selectedReason: string = "";
  let selectedUnits: string = "";
  let selectedStatus: string = "";
  let selectedYear: string = "";

  let showBA: boolean = false;
  let showVAG: boolean = false;
  let showBAG: boolean = false;
  let showVA: 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 handleUnitsChange(event: Event) {
    selectedUnits = (event.target as HTMLSelectElement).value;
    updateResultVisibility();
  }

  function handleStatusChange(event: Event) {
    selectedStatus = (event.target as HTMLSelectElement).value;
    updateResultVisibility();
  }

  function handleYearChange(event: Event) {
    selectedYear = (event.target as HTMLSelectElement).value;
    updateResultVisibility();
  }

  const allowedTypes = ["Einfamilienhaus", "Zweifamilienhaus", "Mehrfamilienhaus", "Mischgebäude"];
  const allowedTypesGewerbe = ["Gewerbegebäude", "Mischgebäude"];
  const allowedReason = ["Vermietung/Verkauf", "sonstiges", "Aushangpflicht"];
  // const allowedReasonBau = ["Modernisierung", "Neubau", "Erweiterung"];
  
  function updateResultVisibility() {
    // Die Bedingung, um das Ergebnis anzuzeigen
     
    // Zusätzliche Bedingung: Wenn "vor 1978" ausgewählt wurde
     if (selectedYear  === "vor 1978") {
      showVA = (allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType)) && (selectedUnits === "mehr als 4 Wohneinheiten" || selectedStatus === "saniert");
    }
    else
    {
      showVA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
    }

    showBA = allowedReason.includes(selectedReason) && allowedTypes.includes(selectedType);
    showVAG = allowedReason.includes(selectedReason) && allowedTypesGewerbe.includes(selectedType);
    showBAG = allowedReason.includes(selectedReason) && allowedTypesGewerbe.includes(selectedType);
  }

</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>
            <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" id="changeBaujahr" on:change={handleYearChange}>
            <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" id="changeEinheiten" on:change={handleUnitsChange}>
            <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" id="changeStatus" on:change={handleStatusChange}>
            <option value="" selected disabled>bitte auswählen</option>
            <option value="saniert">saniert</option>
            <option value="unsaniert">unsaniert</option>
          </select>
        </div>
       </div> 
    
       <div class="OEA_zeile3">
       {#if showVA}
       <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
        <VApromo client:load /> 
       </div>
       {/if}

       {#if showBA}
       <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
        <BApromo client:load />
       </div>
       {/if}

       {#if showVAG}
       <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
        <VAGpromo client:load />
       </div>
       {/if}

       {#if showBAG}
       <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
        <BAGpromo client:load />
       </div>
       {/if}
      </div>

    </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;
        }
    

        .OEA_zeile3  {
          @apply flex flex-row space-x-4 pt-6 items-center justify-center;
        }

        .OEA_item6 {
        
        .result {
         @apply opacity-0 transition-opacity duration-1000 ease-in-out;
        }

        .result[style*="opacity: 1"] {
        @apply opacity-100;
        }
        }

      }
    }
    

    </style>