From 27fd17200b6a9de11fca1dc0de84a9306695f82c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?=
 <40151420+ldericher@users.noreply.github.com>
Date: Sat, 24 Sep 2022 16:29:55 +0000
Subject: [PATCH] ImageCarousel self update

---
 ui/src/App.vue                      | 33 +----------------------
 ui/src/components/ImageCarousel.vue | 42 ++++++++++++++++++++++-------
 2 files changed, 34 insertions(+), 41 deletions(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 2413334..dce5edd 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -6,14 +6,7 @@
         <template slot="message">
           <div class="d-flex flex-column fill-height">
             <Message :html="message_html" />
-            <ImageCarousel
-              class="mt-auto"
-              v-if="image_urls.length > 0"
-              :speed="image_speed"
-              :height="image_height"
-              :contain="image_contain"
-              :urls="image_urls"
-            />
+            <ImageCarousel class="mt-auto" />
           </div>
         </template>
         <template slot="calendars">
@@ -57,10 +50,6 @@ import TickerBar from "./components/TickerBar.vue";
 })
 export default class App extends Vue {
   // 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 calendar_data: CalendarData[] = require("@/assets/calendar_testdata.json");
@@ -79,26 +68,6 @@ export default class App extends Vue {
   }
 
   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
     this.$ovdashboard.api_get_string(
       "text/get/html/message",
diff --git a/ui/src/components/ImageCarousel.vue b/ui/src/components/ImageCarousel.vue
index 727e611..dc5c3de 100644
--- a/ui/src/components/ImageCarousel.vue
+++ b/ui/src/components/ImageCarousel.vue
@@ -1,6 +1,7 @@
 <template>
   <v-carousel
     cycle
+    v-if="urls.length > 0"
     :interval="speed"
     :height="height"
     :show-arrows="false"
@@ -17,21 +18,44 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { Component, Vue } from "@/ovd-vue";
 
 @Component
 export default class ImageCarousel extends Vue {
-  @Prop({ default: 10000 })
-  private readonly speed!: number;
+  private urls: string[] = require("@/assets/image_testdata.json");
+  private height = 300;
+  private contain = false;
+  private speed = 10000;
 
-  @Prop({ default: 300 })
-  private readonly height!: number;
+  public created(): void {
+    super.created();
+  }
 
-  @Prop({ default: false })
-  private readonly contain!: boolean;
+  public beforeDestroy(): void {
+    super.beforeDestroy();
+  }
 
-  @Prop({ required: true })
-  private readonly urls!: string[];
+  protected update(): void {
+    // 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>