BuildingData.vue

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

import BuildingCapture from '@/components/BuildingCapture.vue'
import ContentPanel from '@/components/ContentPanel.vue'
import DataItem from '@/components/DataItem.vue'
import DataPage from '@/components/DataPage.vue'
import MessageBox from '@/components/MessageBox.vue'
import ModalContainer from '@/components/ModalContainer.vue'
import NoData from '@/components/NoData.vue'
import { useBuildingStore } from '@/stores/buildings'

const showModal = ref(false)

const buildings = useBuildingStore()

function onEdit() {
  showModal.value = true
}
</script>

<template>
  <ContentPanel label="Ihr Gebäude">
    <DataPage :stretch="true">
      <div class="content-wrapper">
        <div class="content stretched scroll" v-if="buildings.current">
          <span class="static-text">Id: {{ buildings.current?._id }}</span>
          <DataItem label="Baujahr" :data="buildings.current?.data.yearOfConstruction" :as-text="true" />
          <DataItem label="Stockwerke" :data="buildings.current?.data.numberOfFloors" />
          <DataItem label="Fläche" :data="buildings.current?.data.livingSpace" unit="m²" />
          <DataItem label="Denkmal geschützt" :data="buildings.current?.data.listedBuilding ? 'ja' : 'nein'" />
          <DataItem label="Energieklasse" :data="buildings.current?.data.energyPerformanceCertificate" unit="kWh/m²" />
          <MessageBox v-if="buildings.current?.data.characteristicsComment"
            :msg="buildings.current?.data.characteristicsComment" type="basic" />
          <DataItem v-if="buildings.current?.data.selfContainedCentralHeating" label="Etagenheizung"
            :data="buildings.current?.data.selfContainedCentralHeating ? 'ja' : 'nein'" />
          <DataItem v-if="!buildings.current?.data.selfContainedCentralHeating" label="Heizsystem"
            :data="buildings.heatingInstallationString" />
          <DataItem label="Wärmebedarf Gebäude Vorjahr" :data="buildings.consumption" unit="kWh" />
          <DataItem v-if="buildings.current?.data.pipeSystem" label="1-Rohrsystem"
            :data="buildings.current?.data.pipeSystem ? 'ja' : 'nein'" />
          <DataItem v-if="!buildings.current?.data.solarHeat" label="Solarthermie vorhanden" data="nein" />
          <DataItem v-else label="Größe Solarthermie" :data="buildings.current?.data.solarHeatArea" unit="m²" />
          <template v-if="buildings.current?.data.photovoltaic">
            <DataItem label="Größe PV" :data="buildings.current?.data.photovoltaicArea" unit="m²" />
            <DataItem label="Ertag PV" :data="buildings.current?.data.photovoltaicYield" unit="m²" />
          </template>
          <MessageBox v-if="buildings.current?.data.heatingInstallationComment"
            :msg="buildings.current?.data.heatingInstallationComment" type="basic" />
          <DataItem label="Fassadendämmung" :data="buildings.facadeInsulationString" />
          <DataItem label="Baustruktur" :data="buildings.buildingStructureString" />
          <DataItem label="Mauerdicke" :data="buildings.current?.data.buildingStructureThickness" unit="cm" />
          <DataItem label="Seiten (N/W/S/O)" :data="buildings.insulatedSides" />
          <MessageBox v-if="buildings.current?.data.facadeRefurbishmentComment"
            :msg="buildings.current?.data.facadeRefurbishmentComment" type="basic" />
          <DataItem v-if="buildings.current?.data.flatRoof" label="Flachdach" data="ja" />
          <DataItem v-if="buildings.current?.data.heatedAttic" label="Verschattung" data="ja" />
          <DataItem label="Verschattung" :data="buildings.current?.data.clouding" />
          <DataItem label="Dachdämmung" :data="buildings.roofInsulationString" />
          <MessageBox v-if="buildings.current?.data.roofRefurbishmentComment"
            :msg="buildings.current?.data.roofRefurbishmentComment" type="basic" />
          <DataItem label="Kellerdämmung" :data="buildings.basementInsulationString" />
          <DataItem v-if="buildings.current?.data.insulatedBasementCeiling" label="Kellerdecke gedämmt" data="ja" />
          <DataItem v-if="buildings.current?.data.insulatedBasementFloor" label="Kellerboden gedämmt" data="ja" />
          <DataItem v-if="buildings.current?.data.heatedBasement" label="Keller beheizt" data="ja" />
          <MessageBox v-if="buildings.current?.data.basementRefurbishmentComment"
            :msg="buildings.current?.data.basementRefurbishmentComment" type="basic" />
        </div>
        <NoData v-else />
        <div class="content">
          <button class="button primary" type="button" @click="onEdit" :disabled="buildings.active === null">
            <span>Daten eingeben</span>
          </button>
        </div>
      </div>
    </DataPage>
  </ContentPanel>
  <ModalContainer v-if="showModal" label="Gebäudedaten eingeben" @close-modal="() => showModal = false">
    <BuildingCapture />
  </ModalContainer>
</template>