BuildingEvaluation.vue

<script setup>
import { ref } from 'vue'

import ContentPanel from '@/components/ContentPanel.vue'
import DataItem from '@/components/DataItem.vue'
import DataPage from '@/components/DataPage.vue'
import EnergyPerformanceCertificate from '@/components/EnergyPerformanceCertificate.vue'
import ExpertList from '@/components/ExpertList.vue'
import MessageBox from '@/components/MessageBox.vue'
import ModalContainer from '@/components/ModalContainer.vue'
import NoData from '@/components/NoData.vue'
import SectionTitle from '@/components/SectionTitle.vue'
import WaitingForData from '@/components/WaitingForData.vue'
import { HEATING_INSTALLATION_OPTIONS } from '@/data/options'
import {
  REFERENCE_ENERGY_PERFORMANCE,
  REFERENCE_INSULATION_FACADE,
  REFERENCE_INSULATION_ROOF
} from '@/data/parameters'
import { useBuildingStore } from '@/stores/buildings'
import { numberOrText } from '../helpers'

const showModal = ref(false)

const buildings = useBuildingStore()

// DEVINFO Hier wird der Link zum CS-T erzeugt
function buildUrl(building = {}) {
  if (building) {
    const BASE_URI = import.meta.env.VITE_CST_URI
    const { heatedAttic, heatedBasement, numberOfFloors, yearOfConstruction } = building.data
    const addr = building.address ? building.address.split('::') : null
    const encodedAddr = encodeURIComponent(`${addr[0]} ${addr[1]}, ${addr[2]} ${addr[3]}`)

    return `${BASE_URI}?y=${yearOfConstruction}&ad=${encodedAddr}&s=${numberOfFloors}&a=${+heatedAttic}&b=${+heatedBasement}`
  }
}

// DEVINFO Hier kann der Bewertungstext (CO2) angepasst werden
function convertCO2EfficiencyMessage(value, item) {
  if (value) {
    const str = HEATING_INSTALLATION_OPTIONS.find(element => element.value === item)
    return `Im Vergleich zu Ihrer Heizung mit ${str.name} können Sie mit einer Pelletheizung ${numberOrText(value)} kg CO2 einsparen.`
  }
  else return `Sie sind auf einem guten Niveau.`
}

// DEVINFO Hier kann der Bewertungstext (Energieausweis) angepasst werden
function convertHeatingEfficiencyMessage(value, potential) {
  if (value < REFERENCE_ENERGY_PERFORMANCE) return `Sie sind auf einem guten Niveau.`
  else if (value === REFERENCE_ENERGY_PERFORMANCE) return `Sie sind im Mittel (Klasse E).`
  else if (value > REFERENCE_ENERGY_PERFORMANCE) return `Im Vergleich zu einem durchschnittlichen Wohngebäude in Deutschland, liegt das Verbesserungspotenzial Ihrer Energieeffizienz bei ${potential}%.`
  else return null
}

// DEVINFO Hier kann der Bewertungstext (Fassade - Wert) angepasst werden
function convertFacadeInsulationEfficiency(value) {
  if (value < 0.22) return `sehr gut (U-Wert: ${value})`
  else if (value <= 0.28) return `gut (U-Wert: ${value})`
  else if (value <= 0.35) return `akzeptabel (U-Wert: ${value})`
  else if (value > 0.35) return `schlecht (U-Wert: ${value})`
  else return null
}

// DEVINFO Hier kann der Bewertungstext (Fassade - Empfehlung) angepasst werden
function convertFacadeInsulationEfficiencyMessage(value, potential) {
  if (value <= REFERENCE_INSULATION_FACADE) return `Sie sind auf einem guten Niveau. Es besteht keine signifikantes Verbesserungspotential.`
  else if (value > REFERENCE_INSULATION_FACADE) {
    const range = potential < 40 ? ' ' : ' deutlich '
    return `Der Wärmeverlust Ihres Gebäudes ist${range}höher, als er mit einer guten Dämmung sein könnte – hier besteht Verbesserungspotenzial (ca. ${potential}%).`
  }
  else return null
}

// DEVINFO Hier kann der Bewertungstext (Dach - Wert) angepasst werden
function convertRoofInsulationEfficiency(value) {
  if (value < 0.18) return `sehr gut (U-Wert: ${value})`
  else if (value <= 0.24) return `gut (U-Wert: ${value})`
  else if (value <= 0.31) return `akzeptabel (U-Wert: ${value})`
  else if (value > 0.31) return `schlecht (U-Wert: ${value})`
  else return null
}

// DEVINFO Hier kann der Bewertungstext (Dach - Empfehlung) angepasst werden
function convertRoofInsulationEfficiencyMessage(value, potential) {
  if (value <= REFERENCE_INSULATION_ROOF) return `Sie sind auf einem guten Niveau. Es besteht keine signifikantes Verbesserungspotential.`
  else if (value > REFERENCE_INSULATION_ROOF) {
    const range = potential < 40 ? ' ' : ' deutlich '
    return `Der Wärmeverlust von Ihrem Dach ist${range}höher, als er mit einer guten Dämmung sein könnte – hier besteht Verbesserungspotenzial (ca. ${potential}%).`
  }
  else return null
}

function handleModal() {
  showModal.value = !showModal.value
}
</script>

<template>
  <ContentPanel label="Ihre Effizienz">
    <DataPage :stretch="true">
      <div class="content-wrapper" v-if="buildings.current && buildings.active">
        <div class="content stretched scroll">
          <SectionTitle value="Wärmebedarf" />
          <div class="info-box" v-if="buildings.heatingEfficiency">
            <DataItem label="Effizienzklasse" :data="`${buildings.heatingEfficiency.performance} kWh/m²`" />
            <MessageBox
              :msg="convertHeatingEfficiencyMessage(buildings.heatingEfficiency.performance, buildings.heatingEfficiency.potential)"
              type="basic" />
            <EnergyPerformanceCertificate :data="buildings.heatingEfficiency.performance" />
          </div>
          <WaitingForData v-else />
          <SectionTitle value="Fassadendämmung" />
          <div class="info-box" v-if="buildings.facadeInsulationEfficiency">
            <DataItem label="Niveau"
              :data="convertFacadeInsulationEfficiency(buildings.facadeInsulationEfficiency.performance)" />
            <MessageBox
              :msg="convertFacadeInsulationEfficiencyMessage(buildings.facadeInsulationEfficiency.performance, buildings.facadeInsulationEfficiency.potential)"
              type="basic" />
          </div>
          <WaitingForData v-else />
          <SectionTitle value="Dachdämmung" />
          <div class="info-box" v-if="buildings.roofInsulationEfficiency">
            <DataItem label="Niveau"
              :data="convertRoofInsulationEfficiency(buildings.roofInsulationEfficiency.performance)" />
            <MessageBox
              :msg="convertRoofInsulationEfficiencyMessage(buildings.roofInsulationEfficiency.performance, buildings.roofInsulationEfficiency.potential)"
              type="basic" />
          </div>
          <WaitingForData v-else />
          <SectionTitle value="Emissionen Heizung" />
          <div class="info-box" v-if="buildings.co2Efficiency">
            <DataItem label="CO2 Emissionen" :data="buildings.co2Efficiency.performance" unit="kg" />
            <DataItem label="Entspricht Fahrstrecke" :data="buildings.co2Efficiency.proportion" unit="km" />
            <MessageBox
              :msg="convertCO2EfficiencyMessage(buildings.co2Efficiency.potential, buildings.current?.data.heatingInstallation)"
              type="basic" />
          </div>
          <WaitingForData v-else />
        </div>
        <div class="content">
          <a class="button primary" :href="buildUrl(buildings.current)">CS-T Simulation (extern)</a>
          <button class="button primary" type="button" @click="handleModal()">DEN-Expertensuche (extern)</button>
        </div>
      </div>
      <NoData v-else />
    </DataPage>
  </ContentPanel>
  <ModalContainer v-if="showModal" label="DEN e.V. Expertensuche" @close-modal="handleModal()">
    <ExpertList />
  </ModalContainer>
</template>