From 7f46c1761bf065a9a0063d0f11b26719faa4793b 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:39:03 +0000
Subject: [PATCH] CalendarCarousel self update

---
 ui/src/App.vue                                | 35 +-----------
 .../components/calendar/CalendarCarousel.vue  | 54 +++++++++++++++----
 ui/src/ovd-vue.ts                             |  6 +--
 3 files changed, 48 insertions(+), 47 deletions(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 93f1d43..538d7da 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -10,7 +10,7 @@
           </div>
         </template>
         <template slot="calendars">
-          <CalendarCarousel :speed="calendar_speed" :data="calendar_data" />
+          <CalendarCarousel />
           <DashboardInfo
             :server_host="server_host"
             :server_name="server_name"
@@ -26,8 +26,6 @@
 
 <script lang="ts">
 import { Component, Vue } from "@/ovd-vue";
-import { EventData } from "./components/calendar/EventModel";
-import { CalendarData } from "./components/calendar/CalendarModel";
 
 import TitleBar from "./components/title/TitleBar.vue";
 import Dashboard from "./components/Dashboard.vue";
@@ -50,8 +48,6 @@ import TickerBar from "./components/TickerBar.vue";
 })
 export default class App extends Vue {
   // API data
-  private calendar_data: CalendarData[] = require("@/assets/calendar_testdata.json");
-  private calendar_speed = 10000;
   private server_host = "https://oekzident.de";
   private server_name = "OEKZident";
   private dashboard_version = "0.0.1";
@@ -66,35 +62,6 @@ export default class App extends Vue {
   }
 
   protected update(): void {
-    // Update Calendar Aggregates
-    this.$ovdashboard.api_get_list("aggregate/list", (names) => {
-      this.$ovdashboard.api_get_object_multi<EventData[]>(
-        names.map((name) => `aggregate/get/${name}`),
-        (calendars) => {
-          this.calendar_data = [];
-
-          for (let i = 0; i < names.length; i++) {
-            this.calendar_data.push({
-              title: names[i],
-              events: calendars[i],
-            });
-          }
-        }
-      );
-    });
-
-    // Update Calendar Config
-    type CalendarConfig = {
-      speed: number;
-    };
-
-    this.$ovdashboard.api_get_object<CalendarConfig>(
-      "calendar/config",
-      (data) => {
-        this.calendar_speed = data.speed;
-      }
-    );
-
     // Update Server Config
     type ServerConfig = {
       host: string;
diff --git a/ui/src/components/calendar/CalendarCarousel.vue b/ui/src/components/calendar/CalendarCarousel.vue
index ec1c0c0..532c58f 100644
--- a/ui/src/components/calendar/CalendarCarousel.vue
+++ b/ui/src/components/calendar/CalendarCarousel.vue
@@ -15,9 +15,10 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Ref, Vue } from "vue-property-decorator";
+import { Component, Ref, Vue } from "@/ovd-vue";
 import Calendar from "./Calendar.vue";
 import { CalendarData, CalendarModel } from "./CalendarModel";
+import { EventData } from "./EventModel";
 
 @Component({
   components: {
@@ -27,15 +28,52 @@ import { CalendarData, CalendarModel } from "./CalendarModel";
 export default class CalendarCarousel extends Vue {
   private interval?: number;
 
-  @Prop({ default: 10000 })
-  private readonly speed!: number;
-
-  @Prop({ required: true })
-  private readonly data!: CalendarData[];
+  private data: CalendarData[] = require("@/assets/calendar_testdata.json");
+  private speed = 10000;
 
   @Ref("main")
   private readonly _main?: Vue;
 
+  public created(): void {
+    super.created();
+  }
+
+  public beforeDestroy(): void {
+    super.beforeDestroy();
+    clearInterval(this.interval);
+  }
+
+  protected update(): void {
+    // Update Calendar Aggregates
+    this.$ovdashboard.api_get_list("aggregate/list", (names) => {
+      this.$ovdashboard.api_get_object_multi<EventData[]>(
+        names.map((name) => `aggregate/get/${name}`),
+        (calendars) => {
+          this.data = [];
+
+          for (let i = 0; i < names.length; i++) {
+            this.data.push({
+              title: names[i],
+              events: calendars[i],
+            });
+          }
+        }
+      );
+    });
+
+    // Update Calendar Config
+    type CalendarConfig = {
+      speed: number;
+    };
+
+    this.$ovdashboard.api_get_object<CalendarConfig>(
+      "calendar/config",
+      (data) => {
+        this.speed = data.speed;
+      }
+    );
+  }
+
   private update_height(): void {
     const diff = 150;
 
@@ -60,10 +98,6 @@ export default class CalendarCarousel extends Vue {
     this.interval = setInterval(this.update_height, 10000);
   }
 
-  public beforeDestroy(): void {
-    clearInterval(this.interval);
-  }
-
   private get calendars(): CalendarModel[] {
     let arr = [];
 
diff --git a/ui/src/ovd-vue.ts b/ui/src/ovd-vue.ts
index ecd9a1c..f688773 100644
--- a/ui/src/ovd-vue.ts
+++ b/ui/src/ovd-vue.ts
@@ -2,16 +2,16 @@ import { Vue as _Vue } from "vue-property-decorator";
 export * from "vue-property-decorator";
 
 export abstract class Vue extends _Vue {
-  private interval?: number;
+  private _ovd_interval?: number;
 
   protected abstract update(): void;
 
   public created(): void {
     this.update();
-    this.interval = setInterval(this.update, 30000);
+    this._ovd_interval = setInterval(this.update, 30000);
   }
 
   public beforeDestroy(): void {
-    clearInterval(this.interval);
+    clearInterval(this._ovd_interval);
   }
 }