BuildingApartmentDetails.vue

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

import ContentPanel from '@/components/ContentPanel.vue'
import DataItem from '@/components/DataItem.vue'
import DataPage from '@/components/DataPage.vue'
import FileUpload from '@/components/FileUpload.vue'
import ImageBanner from '@/components/ImageBanner.vue'
import ModalContainer from '@/components/ModalContainer.vue'
import SectionTitle from '@/components/SectionTitle.vue'
import UserBox from '@/components/UserBox.vue'
import ChangePasswordForm from '@/components/forms/ChangePasswordForm.vue'
import {
  convertHeaterEfficiency,
  convertWindowEfficiency
} from '@/helpers'
import { useApartmentStore } from '@/stores/apartments'

const showModal = ref(false)

const router = useRouter()

const apartments = useApartmentStore()

function handleClose() {
  router.push({ name: 'buildings.dashboard.home' })
}
</script>

<template>
  <ContentPanel label="Wohneinheit">
    <DataPage :stretch="true">
      <div class="content-wrapper">
        <div class="content stretched scroll">
          <ImageBanner v-if="apartments.files[apartments.active]" :url="apartments.files[apartments.active]" />
          <span class="static-text">Id: {{ apartments.active }}</span>
          <SectionTitle value="Energieeffizienz" />
          <div class="info-box" v-if="apartments.windowEfficiency">
            <DataItem label="Energetische Berwertung Fenster"
              :data="convertWindowEfficiency(apartments.windowEfficiency.performance)" />
          </div>
          <div class="info-box" v-if="apartments.heaterEfficiency">
            <DataItem label="Bewertung Heizkörper" :data="convertHeaterEfficiency(apartments.heaterEfficiency.delta)" />
          </div>
          <SectionTitle value="Wohnungsdaten" />
          <DataItem label="Wohnfläche" :data="apartments.current?.data.area" unit="m²" />
          <DataItem label="Deckenhöhe" :data="apartments.current?.data.ceilingHeight" unit="m" />
          <SectionTitle value="Fenster" />
          <DataItem label="Klein (bis 1 m²)" :data="apartments.current?.data.smallWindows" />
          <DataItem label="Normal (1-2 m²)" :data="apartments.current?.data.mediumWindows" />
          <DataItem label="Groß (ab 2 m²)" :data="apartments.current?.data.largeWindows" />
          <DataItem label="Dachfenster" :data="apartments.current?.data.roofWindows" />
          <DataItem label="Zustand (Durchschnitt)" :data="apartments.windowConditionString" />
          <DataItem label="Alter (Durchschnitt)" :data="apartments.current?.data.averageWindowAge" />
          <DataItem label="Rahmen" :data="apartments.windowFrameString" />
          <DataItem label="Verglasung" :data="apartments.windowGlazingString" />
          <SectionTitle value="Heizkörper" />
          <DataItem label="Klein" :data="apartments.current?.data.smallHeatingElements" />
          <DataItem label="Normal" :data="apartments.current?.data.mediumHeatingElements" />
          <DataItem label="Groß" :data="apartments.current?.data.largeHeatingElements" />
          <DataItem label="Flächenheizung" :data="apartments.current?.data.panelHeating" unit="m²" />
          <DataItem v-if="apartments.current?.data.centralHeating" label="Zentralheizung"
            :data="apartments.current?.data.centralHeating" />
          <DataItem v-if="!apartments.current?.data.centralHeating" label="Wärmebedarf"
            :data="apartments.current?.data.heatDemand" unit="kWh" />
          <DataItem label="Strombedarf Vorjahr" :data="apartments.current?.data.powerDemand" unit="kWh" />
        </div>
        <div class="content">
          <FileUpload label="Grundriss hochladen" />
          <UserBox @on-change-password="() => showModal = true" />
        </div>
        <div class="content">
          <button class="button primary" type="button" @click="handleClose">
            <span>Zurück</span>
          </button>
        </div>
      </div>
    </DataPage>
  </ContentPanel>
  <ModalContainer v-if="showModal" label="Zugangsdaten - Wohneinheit" @close-modal="() => showModal = false">
    <ChangePasswordForm @close-modal="() => showModal = false" />
  </ModalContainer>
</template>