don't install $axios

ui/src/App.vue

@@ -42,6 +42,7 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
+import { EventData } from "./components/calendar/EventModel";
 import { CalendarData } from "./components/calendar/CalendarModel";
 
 import TitleBar from "./components/title/TitleBar.vue";
@@ -89,85 +90,112 @@ export default class App extends Vue {
 
   private update(): void {
     // Update Logo Config
-    this.$ovdashboard.api_query_simple_object("misc/config/logo", (data) => {
+    type LogoConfig = {
-      this.logo_above = data.above as string;
+      above: string;
-      this.logo_below = data.below as string;
+      below: string;
+    };
+
+    this.$ovdashboard.api_get_object<LogoConfig>("misc/config/logo", (cfg) => {
+      this.logo_above = cfg.above;
+      this.logo_below = cfg.below;
     });
 
     // Update Title
-    this.$ovdashboard.api_query_simple_string("text/get/html/title", (data) => {
+    this.$ovdashboard.api_get_string("text/get/html/title", (title) => {
-      this.title_html = data;
+      this.title_html = title;
     });
 
     // Update Images
-    this.$ovdashboard.api_query_simple_list("image/list", (data) => {
+    this.$ovdashboard.api_get_list("image/list", (names) => {
-      this.image_urls = data.map((name: string) =>
+      this.image_urls = names.map((name: string) =>
         this.$ovdashboard.api_url("image/get/" + name)
       );
     });
 
     // Update Image Config
-    this.$ovdashboard.api_query_simple_object("image/config", (data) => {
+    type ImageConfig = {
-      this.image_height = data.height as number;
+      height: number;
-      this.image_contain = data.contain as boolean;
+      contain: boolean;
-      this.image_speed = data.speed as number;
+      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_query_simple_string(
+    this.$ovdashboard.api_get_string(
       "text/get/html/message",
       (data) => (this.message_html = data)
     );
 
     // Update Calendar Aggregates
-    this.$ovdashboard.api_query_simple_list("aggregate/list", (data) => {
+    this.$ovdashboard.api_get_list("aggregate/list", (names) => {
-      let promises = data.map((name: string) =>
+      this.$ovdashboard.api_get_object_multi<EventData[]>(
-        this.$axios.get(this.$ovdashboard.api_url("aggregate/get/" + name))
+        names.map((name) => "aggregate/get/" + name),
-      );
+        (calendars) => {
-
-      Promise.all(promises)
-        .then((responses) => {
           this.calendar_data = [];
 
-          for (let i = 0; i < data.length; i++) {
+          for (let i = 0; i < names.length; i++) {
             this.calendar_data.push({
-              title: data[i],
+              title: names[i],
-              events: responses[i].data,
+              events: calendars[i],
             });
           }
-        })
+        }
-        .catch(this.$ovdashboard.fail("Calendar Aggregates"));
+      );
     });
 
     // Update Calendar Config
-    this.$ovdashboard.api_query_simple_object("calendar/config", (data) => {
+    type CalendarConfig = {
-      this.calendar_speed = data.speed as number;
+      speed: number;
-    });
+    };
+
+    this.$ovdashboard.api_get_object<CalendarConfig>(
+      "calendar/config",
+      (data) => {
+        this.calendar_speed = data.speed;
+      }
+    );
 
     // Update Server Config
-    this.$ovdashboard.api_query_simple_object("misc/config/server", (data) => {
+    type ServerConfig = {
-      this.server_host = data.host as string;
+      host: string;
-      this.server_name = data.name as string;
+      name: string;
-    });
+    };
+
+    this.$ovdashboard.api_get_object<ServerConfig>(
+      "misc/config/server",
+      (data) => {
+        this.server_host = data.host;
+        this.server_name = data.name;
+      }
+    );
 
     // Update Version
-    this.$ovdashboard.api_query_simple_string("misc/version", (data) => {
+    this.$ovdashboard.api_get_string("misc/version", (data) => {
       this.dashboard_version = data;
     });
 
     // Update IP
-    this.$ovdashboard.api_query_simple_string("misc/lanip", (data) => {
+    this.$ovdashboard.api_get_string("misc/lanip", (data) => {
       this.dashboard_ip = data;
     });
 
     // Update Ticker
-    this.$ovdashboard.api_query_simple_string("ticker/html", (data) => {
+    this.$ovdashboard.api_get_string("ticker/html", (data) => {
       this.ticker_html = data;
     });
 
     // Update Ticker Config
-    this.$ovdashboard.api_query_simple_object("ticker/config", (data) => {
+    type TickerConfig = {
-      this.ticker_color = data.color as string;
+      color: string;
+    };
+
+    this.$ovdashboard.api_get_object<TickerConfig>("ticker/config", (data) => {
+      this.ticker_color = data.color;
     });
   }
 

ui/src/d.ts/shims-ovdashboard.d.ts

@@ -1,34 +1,8 @@
-import { AxiosInstance } from "axios";
+import { OVDashboardPlugin } from "@/plugins/ovdashboard";
 
 declare module 'vue/types/vue' {
   interface Vue {
-    $axios: AxiosInstance;
+    $ovdashboard: OVDashboardPlugin;
-
-    $ovdashboard: {
-      api_url: (endpoint?: string) => string;
-
-      fail: (name: string) => ((arg0: unknown) => void);
-
-      api_query_simple: (
-        endpoint: string,
-        on_success: (data: unknown) => void
-      ) => void;
-
-      api_query_simple_string: (
-        endpoint: string,
-        on_success: (data: string) => void
-      ) => void;
-
-      api_query_simple_list: (
-        endpoint: string,
-        on_success: (data: string[]) => void
-      ) => void;
-
-      api_query_simple_object: (
-        endpoint: string,
-        on_success: (data: Record<string, unknown>) => void
-      ) => void;
-    }
   }
 }
 

ui/src/plugins/ovdashboard.ts

@@ -1,7 +1,7 @@
-import axios, { AxiosInstance } from 'axios';
+import axios, { AxiosInstance, AxiosPromise } from 'axios';
 import Vue from 'vue';
 
-class OVDashboardPlugin {
+export class OVDashboardPlugin {
   private axios: AxiosInstance;
 
   public constructor() {
@@ -20,7 +20,6 @@ class OVDashboardPlugin {
   }
 
   public install(vue: typeof Vue) {
-    vue.prototype.$axios = this.axios;
     vue.prototype.$ovdashboard = this;
   }
 
@@ -45,55 +44,101 @@ class OVDashboardPlugin {
       return this.api_baseurl + "/" + endpoint;
   }
 
-  public fail(name: string): (reason: unknown) => void {
+  private fail(name: string): (reason: unknown) => void {
     return (reason: unknown) =>
       console.warn("Failed to query", name, "-", reason);
   }
 
-  public api_query_simple(
+  private api_get_prepare<T>(endpoint: string): AxiosPromise<T> {
+    return this.axios.get<T>(this.api_url(endpoint));
+  }
+
+  private api_get<T>(
     endpoint: string,
-    on_success: (data: unknown) => void
+    on_success: (data: T) => void
   ): void {
-    this.axios
+    this.api_get_prepare<T>(endpoint)
-      .get(this.api_url(endpoint))
       .then((response) => on_success(response.data))
       .catch(this.fail(endpoint));
   }
 
-  public api_query_simple_string(
+  public api_get_string(
     endpoint: string,
     on_success: (data: string) => void
   ): void {
-    this.api_query_simple(endpoint, (data) => {
+    this.api_get<string>(endpoint, (data) => {
-      if (typeof data !== "string") return;
+      if (typeof data !== "string") {
+        console.error("Endpoint", endpoint, "did not return a string:", data);
+        return;
+      }
 
       on_success(data);
     });
   }
 
-  public api_query_simple_list(
+  private check_array<T>(value: unknown): value is T[] {
+    if (!Array.isArray(value)) return false;
+    if (!value.every((entry) => typeof entry === "string")) return false;
+
+    return true;
+  }
+
+  public api_get_list(
     endpoint: string,
     on_success: (data: string[]) => void
   ): void {
-    this.api_query_simple(endpoint, (data) => {
+    this.api_get(endpoint, (data) => {
-      if (!Array.isArray(data)) return;
+      if (!this.check_array<string>(data)) {
-      if (!data.every((value) => typeof value === "string")) return;
+        console.error("Endpoint", endpoint, "did not return a string[]:", data);
+        return;
+      }
 
       on_success(data);
     });
   }
 
-  public api_query_simple_object(
+  private check_object(value: unknown): value is object {
-    endpoint: string,
+    if (typeof value !== "object") return false;
-    on_success: (data: Record<string, unknown>) => void
+    if (value === null) return false;
-  ): void {
-    this.api_query_simple(endpoint, (data) => {
-      if (typeof data !== "object") return;
-      if (data === null) return;
 
-      on_success(data as Record<string, unknown>);
+    return true;
+  }
+
+  public api_get_object<Type extends object>(
+    endpoint: string,
+    on_success: (data: Type) => void
+  ): void {
+    this.api_get<Type>(endpoint, (data) => {
+      if (!this.check_object(data)) {
+        console.error("Endpoint", endpoint, "did not return an Object:", data);
+        return;
+      }
+
+      on_success(data);
     });
   }
+
+  public api_get_object_multi<Type extends object>(
+    endpoints: string[],
+    on_success: (data: Type[]) => void
+  ): void {
+    const promises = endpoints.map((endpoint) => this.api_get_prepare<Type>(endpoint));
+
+    Promise.all(promises)
+      .then((responses) => {
+        const data = responses.map((response) => response.data);
+
+        for (let i = 0; i < data.length; i++) {
+          if (!this.check_object(data[i])) {
+            console.error("Response data was not an Object:", data[i]);
+            return;
+          }
+        }
+
+        on_success(data);
+      })
+      .catch(this.fail(endpoints.join(", ")));
+  }
 }
 
 export default new OVDashboardPlugin();