OEKZident.de/ovdashboard
2
0
Fork 0
Code Releases 1 Packages Activity

CalendarCarousel dynamic max-height

Browse source
This commit is contained in:
Jörn-Michael Miehe 2022-09-15 15:04:01 +00:00
parent 006afa10d0
commit 9d45ae0c39
3 changed files with 132 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
ui/src/App.vue
View file

@ -1,6 +1,6 @@
<template>
<v-app>
<v-main>
<v-layout column fill-height>
<TitleBar
:logo_above="logo_above"
:logo_below="logo_below"
@ -9,12 +9,12 @@
<Dashboard :message="message_html">
<CalendarCarousel />
</Dashboard>
</v-main>
<TickerBar
v-if="ticker_html !== ''"
:content="ticker_html"
color="primary"
/>
<TickerBar
v-if="ticker_html !== ''"
:content="ticker_html"
color="primary"
/>
</v-layout>
</v-app>
</template>

16
ui/src/components/Dashboard.vue
View file

@ -1,11 +1,13 @@
<template>
<v-container>
<v-row>
<v-col cols="5" v-html="message" />
<v-col cols="7">
<slot>CALENDARS</slot>
</v-col>
</v-row>
<v-container fill-height>
<v-layout>
<v-row>
<v-col cols="5" v-html="message" />
<v-col cols="7">
<slot>CALENDARS</slot>
</v-col>
</v-row>
</v-layout>
</v-container>
</template>

117
ui/src/components/calendar/CalendarCarousel.vue
View file

@ -1,5 +1,6 @@
<template>
<v-carousel
ref="main"
cycle
:interval="speed"
height="auto"
@ -14,7 +15,7 @@
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { Component, Prop, Ref, Vue } from "vue-property-decorator";
import Calendar from "./Calendar.vue";
import { CalendarData, CalendarModel } from "./CalendarModel";
@ -24,9 +25,42 @@ import { CalendarData, CalendarModel } from "./CalendarModel";
},
})
export default class CalendarCarousel extends Vue {
private interval?: number;
@Prop({ default: 10000 })
private readonly speed!: number;
@Ref("main")
private readonly _main?: Vue;
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);
}
public beforeDestroy(): void {
clearInterval(this.interval);
}
private readonly data: Array<CalendarData> = [
{
title: "Lorem Ipsum",
@ -76,6 +110,81 @@ export default class CalendarCarousel extends Vue {
},
],
},
{
title: "Vivamus elementum semper nisi",
events: [
{
summary: "Phasellus viverra nulla 1",
description:
"Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.",
dtstart: "2022-09-08T07:00:00+00:00",
dtend: "2022-09-08T16:00:00+00:00",
},
{
summary: "Phasellus viverra nulla 2",
description:
"Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.",
dtstart: "2022-09-08T07:00:00+00:00",
dtend: "2022-09-08T16:00:00+00:00",
},
{
summary: "Phasellus viverra nulla 3",
description:
"Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.",
dtstart: "2022-09-08T07:00:00+00:00",
dtend: "2022-09-08T16:00:00+00:00",
},
{
summary: "Phasellus viverra nulla 4",
description:
"Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.",
dtstart: "2022-09-08T07:00:00+00:00",
dtend: "2022-09-08T16:00:00+00:00",
},
{
summary: "Phasellus viverra nulla 5",
description:
"Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.",
dtstart: "2022-09-08T07:00:00+00:00",
dtend: "2022-09-08T16:00:00+00:00",
},
{
summary: "Phasellus viverra nulla 6",
description:
"Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.",
dtstart: "2022-09-08T07:00:00+00:00",
dtend: "2022-09-08T16:00:00+00:00",
},
{
summary: "Phasellus viverra nulla 7",
description:
"Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.",
dtstart: "2022-09-08T07:00:00+00:00",
dtend: "2022-09-08T16:00:00+00:00",
},
{
summary: "Phasellus viverra nulla 8",
description:
"Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.",
dtstart: "2022-09-08T07:00:00+00:00",
dtend: "2022-09-08T16:00:00+00:00",
},
{
summary: "Phasellus viverra nulla 9",
description:
"Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.",
dtstart: "2022-09-08T07:00:00+00:00",
dtend: "2022-09-08T16:00:00+00:00",
},
{
summary: "Phasellus viverra nulla 10",
description:
"Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.",
dtstart: "2022-09-08T07:00:00+00:00",
dtend: "2022-09-08T16:00:00+00:00",
},
],
},
];
private get calendars(): Array<CalendarModel> {
@ -88,3 +197,9 @@ export default class CalendarCarousel extends Vue {
}
}
</script>
<style lang="scss" scoped>
.v-carousel:deep() > div {
max-height: 500px;
}
</style>