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

ImageCarousel self update

Browse source
This commit is contained in:
Jörn-Michael Miehe 2022-09-24 16:29:55 +00:00
parent b6b71daa50
commit 27fd17200b
2 changed files with 34 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
ui/src/App.vue
View file

@ -6,14 +6,7 @@
<template slot="message"> <template slot="message">
<div class="d-flex flex-column fill-height"> <div class="d-flex flex-column fill-height">
<Message :html="message_html" /> <Message :html="message_html" />
<ImageCarousel <ImageCarousel class="mt-auto" />
class="mt-auto"
v-if="image_urls.length > 0"
:speed="image_speed"
:height="image_height"
:contain="image_contain"
:urls="image_urls"
/>
</div> </div>
</template> </template>
<template slot="calendars"> <template slot="calendars">
@ -57,10 +50,6 @@ import TickerBar from "./components/TickerBar.vue";
}) })
export default class App extends Vue { export default class App extends Vue {
// API data // API data
private image_urls: string[] = require("@/assets/image_testdata.json");
private image_height = 300;
private image_contain = false;
private image_speed = 10000;
private message_html = require("@/assets/message_testdata.json"); private message_html = require("@/assets/message_testdata.json");
private calendar_data: CalendarData[] = require("@/assets/calendar_testdata.json"); private calendar_data: CalendarData[] = require("@/assets/calendar_testdata.json");
@ -79,26 +68,6 @@ export default class App extends Vue {
} }
protected update(): void { protected update(): void {
// Update Images
this.$ovdashboard.api_get_list("image/list", (names) => {
this.image_urls = names.map((name: string) =>
this.$ovdashboard.api_url(`image/get/${name}`)
);
});
// Update Image Config
type ImageConfig = {
height: number;
contain: boolean;
speed: number;
};
this.$ovdashboard.api_get_object<ImageConfig>("image/config", (cfg) => {
this.image_height = cfg.height;
this.image_contain = cfg.contain;
this.image_speed = cfg.speed;
});
// Update Message // Update Message
this.$ovdashboard.api_get_string( this.$ovdashboard.api_get_string(
"text/get/html/message", "text/get/html/message",

42
ui/src/components/ImageCarousel.vue
View file

@ -1,6 +1,7 @@
<template> <template>
<v-carousel <v-carousel
cycle cycle
v-if="urls.length > 0"
:interval="speed" :interval="speed"
:height="height" :height="height"
:show-arrows="false" :show-arrows="false"
@ -17,21 +18,44 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Vue } from "@/ovd-vue";
@Component @Component
export default class ImageCarousel extends Vue { export default class ImageCarousel extends Vue {
@Prop({ default: 10000 }) private urls: string[] = require("@/assets/image_testdata.json");
private readonly speed!: number; private height = 300;
private contain = false;
private speed = 10000;
@Prop({ default: 300 }) public created(): void {
private readonly height!: number; super.created();
}
@Prop({ default: false }) public beforeDestroy(): void {
private readonly contain!: boolean; super.beforeDestroy();
}
@Prop({ required: true }) protected update(): void {
private readonly urls!: string[]; // Update Images
this.$ovdashboard.api_get_list("image/list", (names) => {
this.urls = names.map((name: string) =>
this.$ovdashboard.api_url(`image/get/${name}`)
);
});
// Update Image Config
type ImageConfig = {
height: number;
contain: boolean;
speed: number;
};
this.$ovdashboard.api_get_object<ImageConfig>("image/config", (cfg) => {
this.height = cfg.height;
this.contain = cfg.contain;
this.speed = cfg.speed;
});
}
} }
</script> </script>