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

<script setup>
import { history, loadingFailed, classFilter } from "@/store";
import { getSubstitutionText } from "@/util";
import { computed } from "vue";
import dayjs from "dayjs";
import InfoCard from "@/components/info-card.vue";
import { ClockIcon, AlarmClockOffIcon, CloudOffIcon } from "lucide-vue-next";

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

const historyOfDate = computed(() => {
  return history.value[props.date.getTime()];
});

const chars = {
  change: "~",
  addition: "+",
  deletion: "-",
};
</script>

<template>
  <InfoCard
    v-show="typeof historyOfDate == 'undefined'"
    v-if="!loadingFailed"
    :icon="ClockIcon"
    :title="$t('infoCard.titles.loading')"
    :text="$t('infoCard.texts.loading')"
  />
  <InfoCard
    v-show="typeof historyOfDate == 'object' && historyOfDate.length == 0"
    v-if="!loadingFailed || historyOfDate"
    :icon="AlarmClockOffIcon"
    :title="$t('infoCard.titles.noHistory')"
    :text="$t('infoCard.texts.noHistory')"
  />
  <InfoCard
    class="card"
    v-if="loadingFailed && !historyOfDate"
    :icon="CloudOffIcon"
    :title="$t('infoCard.titles.loadingFailed')"
    :text="$t('infoCard.texts.loadingFailed')"
  />
  <template v-for="event in historyOfDate" :key="event">
    <div
      class="change"
      :style="`background-color: var(--substitution-background-${event.type}`"
    >
      <span class="hour">{{ event.lesson }}{{ chars[event.type] }}</span>
      <div class="infos">
        <!-- If the entry is a change show which values changed -->
        <span class="text" v-if="event.type == 'change'">
          <template v-for="(change, key) in event.change" :key="key">
            <p>
              {{ key }}:&nbsp;
              <s>{{ change.before }}</s>
              &nbsp;{{ change.after }}
            </p>
          </template>
        </span>
        <!-- If the entry is an addition or deletion generate a text -->
        <span class="text" v-else
          >{{
            $t(
              getSubstitutionText(
                event.change,
                !classFilter || classFilter == "none"
              ),
              {
                subject: event.change.change.subject,
                class: event.change.class.join(", "),
                teacher: event.change.teacher,
                new_teacher: event.change.change.teacher,
                room: event.change.change.room,
              }
            )
          }}<span class="notes" v-if="event.change.notes">
            {{ $t("timetable.notes") }} {{ event.change.notes }}
          </span>
        </span>
        <span class="notes">
          {{ dayjs(event.updatedAt).format("DD.MM.YYYY, HH:mm") }}
        </span>
      </div>
    </div>
  </template>
</template>

<style scoped>
.change {
  display: grid;
  min-height: 35px;
  border-radius: 11px;
  margin-bottom: 10px;
  padding: 10px 10px;
  grid-template-columns: min-content auto;
  gap: 5px;
}

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

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

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

p {
  margin: 0px;
}

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