ApartmentCard.vue

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

import { calculateHeaterEfficiency, calculateWindowEfficiency } from '@/helpers'
import { useApartmentStore } from '@/stores/apartments'

const props = defineProps(['data'])

const router = useRouter()

const apartments = useApartmentStore()

function onSelect() {
  apartments.setActiveApartment(props.data._id)
  router.push({ name: 'buildings.dashboard.apartment' })
}

function convertHeaterEfficiencyColor(apartment) {
  if (apartment) {
    const { largeHeatingElements, mediumHeatingElements, smallHeatingElements, workingHeatingInstallations } = apartment.data
    let sum = largeHeatingElements + mediumHeatingElements + smallHeatingElements

    if (sum === 0) return '--icon-color: var(--clr-basic)'

    const [performance] = calculateHeaterEfficiency(sum, workingHeatingInstallations)

    if (performance < 0.75) return '--icon-color: var(--clr-critical)'
    else if (performance < 0.80) return '--icon-color: var(--clr-danger)'
    else if (performance < 0.95) return '--icon-color: var(--clr-warning)'
    else if (performance <= 1) return '--icon-color: var(--clr-success)'
  }

  return '--icon-color: var(--clr-basic)'
}

function convertWindowEfficiencyColor(apartment) {
  if (apartment) {
    const { averageWindowAge, averageWindowCondition, windowGlazing } = apartment.data
    const [performance] = calculateWindowEfficiency(averageWindowAge, averageWindowCondition, windowGlazing)

    if (performance < 1.5) return '--icon-color: var(--clr-critical)'
    else if (performance < 2.5) return '--icon-color: var(--clr-danger)'
    else if (performance < 3.5) return '--icon-color: var(--clr-warning)'
    else if (performance >= 3.5) return '--icon-color: var(--clr-success)'
  }

  return '--icon-color: var(--clr-basic)'
}

onMounted(async () => {
  await apartments.fetchFile(props.data._id)
})
</script>

<template>
  <div class="apartment-card" @click="onSelect">
    <div class="apartment-card__wrapper">
      <div class="apartment-card__headline">
        <span class="static-text">Id: {{ props.data._id }}</span>
      </div>
      <div class="apartment-card__content">
        <span>{{ props.data.name }}</span>
        <span class="text"><i class="apartment-card__icon"
            :style="convertWindowEfficiencyColor(props.data)"></i>Fenster</span>
        <span class="text"><i class="apartment-card__icon"
            :style="convertHeaterEfficiencyColor(props.data)"></i>Heizkörper</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.apartment-card {
  position: relative;
  background-color: hsl(var(--clr-primary));
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  color: var(--clr-white);
  cursor: pointer;
}

.apartment-card:hover {
  background-color: hsl(var(--clr-primary-shade));
  box-shadow: var(--shadow);
  transition: background-color ease-in 150ms;
}

.apartment-card__wrapper {
  padding: var(--spacing-s);
  display: flex;
  flex-direction: column;
}

.apartment-card__content {
  display: flex;
  flex-direction: column;
}

.apartment-card__content>span:first-of-type {
  font-weight: bold;
}

.apartment-card__content>span:not(:first-of-type) {
  display: flex;
  align-items: center;
  font-size: var(--text-s);
}

.apartment-card__headline {
  display: flex;
}

.apartment-card__icon {
  background-color: hsl(var(--icon-color));
  margin-right: var(--spacing);
  width: 2em;
  height: 1em;
  display: flex;
  border-radius: var(--radius);
  border: var(--border) solid hsl(var(--clr-content))
}
</style>