ApartmentData.vue

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

import ApartmentCapture from '@/components/ApartmentCapture.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 ImageBanner from '@/components/ImageBanner.vue'
import MessageBox from '@/components/MessageBox.vue'
import ModalContainer from '@/components/ModalContainer.vue'
import SectionTitle from '@/components/SectionTitle.vue'
import WaitingForData from '@/components/WaitingForData.vue'
import { REFERENCE_ENERGY_PERFORMANCE } from '@/data/parameters'
import { 
  convertHeaterEfficiency,
  convertWindowEfficiency
 } from '@/helpers'
import { useApartmentStore } from '@/stores/apartments'
import { useBuildingStore } from '@/stores/buildings'

const showModal = ref(false)

const apartments = useApartmentStore()
const buildings = useBuildingStore()

function onEdit() {
  showModal.value = true
}

// 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 `Das Verbesserungspotential Ihrer Energieeffizienz liegt bei ${potential}%.`
  else return null
}

// DEVINFO Hier kann der Bewertungstext (Verglasung) angepasst werden
function convertWindowGlazingMessage(value) {
  if (value === 'SIMPLE_GLAZING') return `Schlechte Verglasung (U-Wert ca. 4,7 W/(m²K)). Einsparung von 491 kWh sind möglich (Einsparung je ausgetauschtes Fenster ca. 158€ jährlich ). Gebäude-Energie-Gesetz (GEG) schreibt bei Austausch einen Wert von 1,3 W/(m²K) vor.`
  else if (value === 'DOUBLE_GLAZING') return `Mittelmäßige Verglasung (U-Wert 1,4 bis 3 W/m²K). Empfehlung: Fenster mit zweifacher, unbeschichteter Isolierverglasung (vor 1995 verbaut) gegen dreifach verglaste, wärmegedämmte Fenster austauschen. Der Austausch von zweifachem, unbeschichtetem Isolierglas spart 216 kWh. (Einsparung je ausgetauschtes Fenster ca. 70€ jährlich). Bei neueren Fenstern ist individuell zu entscheiden. Gebäude-Energie-Gesetz (GEG) schreibt bei Austausch einen Wert von 1,3 W/(m²K) vor.`
  else if (value === 'TRIPLE_GLAZING') return `3-fach Verglasung vorhanden und damit keine wesentlich Verbesserung möglich. Austausch wirtschaftlich nicht sinnvoll.`
  else return null
}
</script>

<template>
  <ContentPanel label="Ihre Wohneinheit">
    <DataPage :stretch="true">
      <div class="content-wrapper">
        <div class="content stretched scroll">
          <span class="static-text">Id: {{ apartments.active }}</span>
          <SectionTitle value="Energieeffizienz" />
          <div class="info-box" v-if="apartments.heatingEfficiency">
            <DataItem :label="`Effizienzklasse (${apartments.heatingEfficiency.distict ? 'Wohnung' : 'Gebäude'})`"
              :data="`${apartments.heatingEfficiency.performance} kWh/m²`" />
            <MessageBox
              :msg="convertHeatingEfficiencyMessage(apartments.heatingEfficiency.performance, apartments.heatingEfficiency.potential)"
              type="basic" />
            <EnergyPerformanceCertificate :data="apartments.heatingEfficiency.performance" />
          </div>
          <WaitingForData v-else />
          <SectionTitle value="Energieeffizienz - Fenster" />
          <div class="info-box" v-if="apartments.windowEfficiency">
            <DataItem label="Energetische Berwertung Fenster"
              :data="convertWindowEfficiency(apartments.windowEfficiency.performance)" />
            <MessageBox :msg="convertWindowGlazingMessage(apartments.current?.data.windowGlazing)" type="basic" />
          </div>
          <WaitingForData v-else />
          <SectionTitle value="Energieeffizienz - Heizkörper" />
          <div class="info-box" v-if="apartments.heaterEfficiency">
            <DataItem label="Bewertung Heizkörper" :data="convertHeaterEfficiency(apartments.heaterEfficiency.delta)" />
            <MessageBox
              msg="Durch regelmäßiges Warten und Entlüften können Sie die Effizienz Ihrer Heizkörper steigern."
              type="basic" />
          </div>
          <WaitingForData v-else />
          <SectionTitle value="Emissionen Heizung" />
          <div class="info-box"
            v-if="apartments.current?.data.centralHeating ? buildings.co2Efficiency : apartments.co2Efficiency">
            <DataItem label="CO2 Emissionen"
              :data="apartments.current?.data.centralHeating ? buildings.co2Efficiency.performance : apartments.co2Efficiency.performance"
              unit="kg" />
            <DataItem label="Entspricht Fahrstrecke"
              :data="apartments.current?.data.centralHeating ? buildings.co2Efficiency.proportion : apartments.co2Efficiency.proportion"
              unit="km" />
          </div>
          <WaitingForData v-else />
          <SectionTitle value="Gebäudedaten" />
          <ImageBanner v-if="apartments.files[apartments.active]" :url="apartments.files[apartments.active]" />
          <DataItem label="Baujahr" :data="buildings.single?.data.yearOfConstruction" :as-text="true" />
          <DataItem label="Stockwerke" :data="buildings.single?.data.numberOfFloors" />
          <DataItem label="Energieklasse" :data="buildings.single?.data.energyPerformanceCertificate" unit="kWh/m²" />
          <DataItem v-if="!buildings.single?.data.selfContainedCentralHeating" label="Heizung"
            :data="buildings.heatingInstallationString" />
          <DataItem v-if="!buildings.single?.data.selfContainedCentralHeating" label="Wärmebedarf Gebäude Vorjahr"
            :data="buildings.consumption" unit="kWh" />
          <DataItem v-if="!buildings.single?.data.photovoltaic" label="PV Ertrag"
            :data="buildings.single?.data.photovoltaicYield" unit="kWh/m²" />
          <SectionTitle value="Fenster" />
          <DataItem label="Klein" :data="apartments.current?.data.smallWindows" />
          <DataItem label="Normal" :data="apartments.current?.data.mediumWindows" />
          <DataItem label="Groß" :data="apartments.current?.data.largeWindows" />
          <DataItem label="Dach" :data="apartments.current?.data.roofWindows" />
          <DataItem label="Rahmen" :data="apartments.windowFrameString" />
          <DataItem label="Verglasung" :data="apartments.windowGlazingString" />
          <DataItem label="Zustand (Durchschnitt)" :data="apartments.windowConditionString" />
          <DataItem label="Alter (Durchschnitt)" :data="apartments.current?.data.averageWindowAge" />
          <MessageBox v-if="apartments.current?.data.windowComment" :msg="apartments.current?.data.windowComment"
            type="basic" />
          <SectionTitle value="Heizung" />
          <DataItem label="Wohnfläche" :data="apartments.current?.data.area" unit="m²" />
          <DataItem label="Deckenhöhe" :data="apartments.current?.data.ceilingHeight" unit="m" />
          <DataItem label="Heizkörper (klein)" :data="apartments.current?.data.smallHeatingElements" />
          <DataItem label="Heizkörper (normal)" :data="apartments.current?.data.mediumHeatingElements" />
          <DataItem label="Heizkörper (groß)" :data="apartments.current?.data.largeHeatingElements" />
          <DataItem v-if="apartments.current?.data.panelHeating" label="Flächenheizung"
            :data="apartments.current?.data.panelHeating" unit="m²" />
          <DataItem v-if="apartments.current?.data.centralHeating" label="Zentralheizung"
            :data="apartments.current?.data.centralHeating ? 'ja' : 'nein'" />
          <DataItem v-if="!apartments.current?.data.centralHeating" label="Wärmebedarf"
            :data="apartments.current?.data.heatDemand" unit="kWh" />
          <DataItem label="Strombedarf" :data="apartments.current?.data.powerDemand" unit="kWh" />
          <MessageBox v-if="apartments.current?.data.apartmentComment" :msg="apartments.current?.data.apartmentComment"
            type="basic" />
        </div>
        <div class="content">
          <button class="button primary" type="button" @click="onEdit">
            <span>Daten eingeben</span>
          </button>
        </div>
      </div>
    </DataPage>
  </ContentPanel>
  <ModalContainer v-if="showModal" label="Wohnungsdaten eingeben" @close-modal="() => showModal = false">
    <ApartmentCapture />
  </ModalContainer>
</template>