134 lines
2.9 KiB
Vue
134 lines
2.9 KiB
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");
|
|
public 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 = 100;
|
|
|
|
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);
|
|
}
|
|
|
|
public get calendars(): CalendarModel[] {
|
|
const 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>
|