"Vue" implementation with interval

ui/src/App.vue

@@ -1,11 +1,7 @@
 <template>
   <v-app>
     <v-layout column fill-height>
-      <TitleBar
+      <TitleBar />
-        :logo_above="logo_above"
-        :logo_below="logo_below"
-        :title="title_html"
-      />
       <Dashboard>
         <template slot="message">
           <div class="d-flex flex-column fill-height pb-sm-12">
@@ -41,7 +37,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component, Vue } from "@/ovd-vue";
 import { EventData } from "./components/calendar/EventModel";
 import { CalendarData } from "./components/calendar/CalendarModel";
 
@@ -65,13 +61,7 @@ import TickerBar from "./components/TickerBar.vue";
   },
 })
 export default class App extends Vue {
-  private interval?: number;
-
   // API data
-  private logo_above = "Technisches Hilfswerk";
-  private logo_below = "OV Musterstadt";
-  private title_html = "<h1>changeme</h1>";
-
   private image_urls: string[] = require("@/assets/image_testdata.json");
   private image_height = 300;
   private image_contain = false;
@@ -88,23 +78,15 @@ export default class App extends Vue {
   private ticker_html = "<p>changeme</p>";
   private ticker_color = "primary";
 
-  private update(): void {
+  public created(): void {
-    // Update Logo Config
+    super.created();
-    type LogoConfig = {
+  }
-      above: string;
-      below: string;
-    };
 
-    this.$ovdashboard.api_get_object<LogoConfig>("misc/config/logo", (cfg) => {
+  public beforeDestroy(): void {
-      this.logo_above = cfg.above;
+    super.beforeDestroy();
-      this.logo_below = cfg.below;
+  }
-    });
-
-    // Update Title
-    this.$ovdashboard.api_get_string("text/get/html/title", (title) => {
-      this.title_html = title;
-    });
 
+  protected update(): void {
     // Update Images
     this.$ovdashboard.api_get_list("image/list", (names) => {
       this.image_urls = names.map((name: string) =>
@@ -198,15 +180,6 @@ export default class App extends Vue {
       this.ticker_color = data.color;
     });
   }
-
-  public created(): void {
-    this.update();
-    this.interval = setInterval(this.update, 30000);
-  }
-
-  public beforeDestroy(): void {
-    clearInterval(this.interval);
-  }
 }
 </script>
 

ui/src/components/title/THWLogo.vue

@@ -14,19 +14,37 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { Component, Vue } from "@/ovd-vue";
 
 @Component
 export default class THWLogo extends Vue {
-  @Prop({ required: true })
+  private above = "Technisches Hilfswerk";
-  private readonly above!: string;
+  private below = "OV Musterstadt";
-
-  @Prop({ required: true })
-  private readonly below!: string;
 
   private get logo_url(): string {
     return this.$ovdashboard.api_url("file/get/logo");
   }
+
+  public created(): void {
+    super.created();
+  }
+
+  public beforeDestroy(): void {
+    super.beforeDestroy();
+  }
+
+  protected update(): void {
+    // Update Logo Config
+    type LogoConfig = {
+      above: string;
+      below: string;
+    };
+
+    this.$ovdashboard.api_get_object<LogoConfig>("misc/config/logo", (cfg) => {
+      this.above = cfg.above;
+      this.below = cfg.below;
+    });
+  }
 }
 </script>
 

ui/src/components/title/TitleBar.vue

@@ -2,7 +2,7 @@
   <v-toolbar color="primary" prominent dark>
     <v-container class="d-flex pa-0" fluid fill-height>
       <div class="d-flex justify-start text-left text-no-wrap">
-        <THWLogo :above="logo_above" :below="logo_below" />
+        <THWLogo />
       </div>
 
       <div
@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { Component, Vue } from "@/ovd-vue";
 import Clock from "./Clock.vue";
 import THWLogo from "./THWLogo.vue";
 
@@ -38,14 +38,22 @@ import THWLogo from "./THWLogo.vue";
   },
 })
 export default class TitleBar extends Vue {
-  @Prop({ default: "Technisches Hilfswerk" })
+  private title = "<h1>TITLE</h1>";
-  private readonly logo_above!: string;
 
-  @Prop({ default: "OV Musterstadt" })
+  public created(): void {
-  private readonly logo_below!: string;
+    super.created();
+  }
 
-  @Prop({ default: "TITLE" })
+  public beforeDestroy(): void {
-  private readonly title!: string;
+    super.beforeDestroy();
+  }
+
+  protected update(): void {
+    // Update Title
+    this.$ovdashboard.api_get_string("text/get/html/title", (title) => {
+      this.title = title;
+    });
+  }
 }
 </script>
 

ui/src/ovd-vue.ts

@@ -0,0 +1,17 @@
+import { Vue as _Vue } from "vue-property-decorator";
+export * from "vue-property-decorator";
+
+export abstract class Vue extends _Vue {
+  private interval?: number;
+
+  protected abstract update(): void;
+
+  public created(): void {
+    this.update();
+    this.interval = setInterval(this.update, 30000);
+  }
+
+  public beforeDestroy(): void {
+    clearInterval(this.interval);
+  }
+}