ovdashboard/ui/src/components/calendar/CalendarCarousel.vue

<template>
  <v-carousel
    ref="main"
    cycle
    :interval="speed"
    height="auto"
    :show-arrows="false"
    touchless
    hide-delimiters
  >
    <v-carousel-item v-for="calendar in calendars" :key="calendar.hash">
      <Calendar :title="calendar.title" :events="calendar.events" />
    </v-carousel-item>
  </v-carousel>
</template>

<script lang="ts">
import { Component, Ref, Vue } from "@/ovd-vue";
import Calendar from "./Calendar.vue";
import { CalendarData, CalendarModel } from "./CalendarModel";
import { EventData } from "./EventModel";

@Component({
  components: {
    Calendar,
  },
})
export default class CalendarCarousel extends Vue {
  private interval?: number;

  private data: CalendarData[] = require("@/assets/calendar_testdata.json");
  private speed = 10000;

  @Ref("main")
  private readonly _main?: Vue;

  public created(): void {
    super.created();
  }

  public beforeDestroy(): void {
    super.beforeDestroy();
    clearInterval(this.interval);
  }

  protected update(): void {
    // Update Calendar Aggregates
    this.$ovdashboard.api_get_list("aggregate/list", (names) => {
      this.$ovdashboard.api_get_object_multi<EventData[]>(
        names.map((name) => `aggregate/get/${name}`),
        (calendars) => {
          this.data = [];

          for (let i = 0; i < names.length; i++) {
            this.data.push({
              title: names[i],
              events: calendars[i],
            });
          }
        }
      );
    });

    // Update Calendar Config
    type CalendarConfig = {
      speed: number;
    };

    this.$ovdashboard.api_get_object<CalendarConfig>(
      "calendar/config",
      (data) => {
        this.speed = data.speed;
      }
    );
  }

  private update_height(): void {
    const diff = 150;

    if (this._main === undefined) return;

    const parentElement = this._main.$el.parentElement;
    if (parentElement === null) return;

    const divElement = this._main.$el.querySelector("div");
    if (divElement === null) return;

    const divHeightPX = window
      .getComputedStyle(parentElement)
      .getPropertyValue("height");
    const maxHeight = parseFloat(divHeightPX) - diff;

    divElement.style.setProperty("max-height", `${maxHeight}px`);
  }

  public mounted(): void {
    this.update_height();
    this.interval = setInterval(this.update_height, 10000);
  }

  private get calendars(): CalendarModel[] {
    let arr = [];

    for (const json_data of this.data) {
      arr.push(new CalendarModel(json_data));
    }
    return arr;
  }
}
</script>

<style lang="scss" scoped>
@import "~vuetify/src/styles/settings/_variables";

.v-carousel:deep() > div {
  max-height: 500px;

  @media #{map-get($display-breakpoints, "sm-and-down")} {
    min-height: 500px;
  }
}

.v-window {
  &-x-transition,
  &-x-reverse-transition,
  &-y-transition,
  &-y-reverse-transition {
    &-enter-active,
    &-leave-active {
      transition: 1.5s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
    }
  }
}
</style>