Timetable-V2/src/components/substitution-list.vue

<script setup>
import { substitutions } from "../store";
import { getSubstitutionText, getSubstitutionColor } from "../util";
import { computed } from "vue";
import InfoCard from "./info-card.vue";
import BellOffIcon from "./icons/bell-off-icon.vue";
import ClockIconBig from "./icons/clock-icon-big.vue";

const props = defineProps({
  date: {
    required: true,
  },
});

const substitutionsForDate = computed(() => {
  return substitutions.value[props.date.getTime()];
});
</script>

<template>
  <InfoCard
    v-show="typeof substitutionsForDate == 'undefined'"
    :icon="ClockIconBig"
    :title="$t('infoCard.titles.loading')"
    :text="$t('infoCard.texts.loading')"
  />
  <InfoCard
    v-show="
      typeof substitutionsForDate == 'object' &&
      substitutionsForDate.length == 0
    "
    :icon="BellOffIcon"
    :title="$t('infoCard.titles.noEntries')"
    :text="$t('infoCard.texts.noEntries')"
  />
  <template v-for="substitution in substitutionsForDate" :key="substitution">
    <div class="substitution" :style="getSubstitutionColor(substitution)">
      <span class="hour">{{ substitution.lesson }}</span>
      <div class="infos">
        <span class="text">{{
          $t(getSubstitutionText(substitution), {
            subject: substitution.change.subject,
            class: substitution.class.join(", "),
            teacher: substitution.teacher,
            new_teacher: substitution.change.teacher,
            room: substitution.change.room,
          })
        }}</span>
        <span class="notes" v-if="substitution.notes">
          {{ $t("timetable.notes") }} {{ substitution.notes }}
        </span>
      </div>
    </div>
  </template>
</template>

<style scoped>
.substitution {
  display: grid;
  min-height: 50px;
  border-radius: 11px;
  margin-bottom: 10px;
  padding: 10px 15px;
  grid-template-columns: max-content auto;
  gap: 15px;
}

.hour {
  font-size: 30px;
  display: flex;
  align-items: center;
}

.infos {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.text {
  font-size: 18px;
  display: flex;
  align-items: center;
  word-wrap: break-word;
}

.notes {
  font-size: 13px;
  font-weight: 100;
}
</style>