Message self update

ui/src/App.vue

@@ -5,7 +5,7 @@
       <Dashboard>
         <template slot="message">
           <div class="d-flex flex-column fill-height">
-            <Message :html="message_html" />
+            <Message />
             <ImageCarousel class="mt-auto" />
           </div>
         </template>
@@ -50,8 +50,6 @@ import TickerBar from "./components/TickerBar.vue";
 })
 export default class App extends Vue {
   // API data
-  private message_html = require("@/assets/message_testdata.json");
-
   private calendar_data: CalendarData[] = require("@/assets/calendar_testdata.json");
   private calendar_speed = 10000;
   private server_host = "https://oekzident.de";
@@ -68,12 +66,6 @@ export default class App extends Vue {
   }
 
   protected update(): void {
-    // Update Message
-    this.$ovdashboard.api_get_string(
-      "text/get/html/message",
-      (data) => (this.message_html = data)
-    );
-
     // Update Calendar Aggregates
     this.$ovdashboard.api_get_list("aggregate/list", (names) => {
       this.$ovdashboard.api_get_object_multi<EventData[]>(

ui/src/components/Message.vue

@@ -3,12 +3,27 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { Component, Vue } from "@/ovd-vue";
 
 @Component
 export default class Message extends Vue {
-  @Prop({ required: true })
-  private readonly html!: string;
+  private html = require("@/assets/message_testdata.json");
+
+  public created(): void {
+    super.created();
+  }
+
+  public beforeDestroy(): void {
+    super.beforeDestroy();
+  }
+
+  protected update(): void {
+    // Update Message
+    this.$ovdashboard.api_get_string(
+      "text/get/html/message",
+      (data) => (this.html = data)
+    );
+  }
 }
 </script>