ImageCarousel self update

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",

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>