TickerBar self update

ui/src/App.vue

@@ -26,11 +26,7 @@
           />
         </template>
       </Dashboard>
-      <TickerBar
+      <TickerBar />
-        v-if="ticker_html !== ''"
-        :content="ticker_html"
-        :color="ticker_color"
-      />
     </v-layout>
   </v-app>
 </template>
@@ -74,9 +70,6 @@ export default class App extends Vue {
   private dashboard_version = "0.0.1";
   private dashboard_ip = "0.0.0.0";
 
-  private ticker_html = "<p>changeme</p>";
-  private ticker_color = "primary";
-
   public created(): void {
     super.created();
   }
@@ -164,20 +157,6 @@ export default class App extends Vue {
     this.$ovdashboard.api_get_string("misc/lanip", (data) => {
       this.dashboard_ip = data;
     });
-
-    // Update Ticker
-    this.$ovdashboard.api_get_string("ticker/html", (data) => {
-      this.ticker_html = data;
-    });
-
-    // Update Ticker Config
-    type TickerConfig = {
-      color: string;
-    };
-
-    this.$ovdashboard.api_get_object<TickerConfig>("ticker/config", (data) => {
-      this.ticker_color = data.color;
-    });
   }
 }
 </script>

ui/src/components/TickerBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="content !== ''">
     <v-footer :color="color" :dark="is_dark" fixed>
       <span ref="marquee" class="text-h6" v-html="content" />
     </v-footer>
@@ -10,16 +10,14 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Ref, Vue, Watch } from "vue-property-decorator";
+import { Component, Ref, Vue, Watch } from "@/ovd-vue";
 import Color from "color";
 
 @Component
 export default class TickerBar extends Vue {
-  @Prop({ required: true })
+  private content = "<p>changeme</p>";
-  private readonly content!: string;
 
-  @Prop({ default: "primary" })
+  private color = "primary";
-  private readonly color!: string;
 
   @Ref("content")
   private readonly _content!: HTMLDivElement;
@@ -59,6 +57,30 @@ export default class TickerBar extends Vue {
       this._marquee.style.setProperty("animation-duration", `${duration}s`);
     });
   }
+
+  public created(): void {
+    super.created();
+  }
+
+  public beforeDestroy(): void {
+    super.beforeDestroy();
+  }
+
+  protected update(): void {
+    // Update Ticker
+    this.$ovdashboard.api_get_string("ticker/html", (data) => {
+      this.content = data;
+    });
+
+    // Update Ticker Config
+    type TickerConfig = {
+      color: string;
+    };
+
+    this.$ovdashboard.api_get_object<TickerConfig>("ticker/config", (data) => {
+      this.color = data.color;
+    });
+  }
 }
 </script>