use wrappers

ui/src/App.vue

@@ -42,7 +42,6 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import { AxiosResponse } from "axios";
 
 import TitleBar from "./components/title/TitleBar.vue";
 import Dashboard from "./components/Dashboard.vue";
@@ -84,15 +83,102 @@ export default class App extends Vue {
   private ticker_html = "<p>changeme</p>";
   private ticker_color = "primary";
 
-  private update_logo(response: AxiosResponse): void {
+  private fail(name: string): (arg0: unknown) => void {
-    this.logo_above = response.data.above;
+    return (reason: unknown) =>
-    this.logo_below = response.data.below;
+      console.warn("Failed to query", name, "-", reason);
+  }
+
+  private api_query_simple(
+    endpoint: string,
+    on_success: (data: unknown) => void
+  ): void {
+    this.$axios
+      .get(this.$ovdashboard.api_url(endpoint))
+      .then((response) => on_success(response.data))
+      .catch(this.fail(endpoint));
+  }
+
+  private api_query_simple_string(
+    endpoint: string,
+    on_success: (data: string) => void
+  ): void {
+    this.api_query_simple(endpoint, (data) => {
+      if (typeof data !== "string") return;
+
+      on_success(data);
+    });
+  }
+
+  private api_query_simple_object(
+    endpoint: string,
+    on_success: (data: Record<string, unknown>) => void
+  ): void {
+    this.api_query_simple(endpoint, (data) => {
+      if (typeof data !== "object") return;
+      if (data === null) return;
+
+      on_success(data as Record<string, unknown>);
+    });
   }
 
   private update(): void {
-    this.$axios
+    // Update Logo Config
-      .get(this.$ovdashboard.api_url("misc/config/logo"))
+    this.api_query_simple_object("misc/config/logo", (data) => {
-      .then(this.update_logo);
+      this.logo_above = data.above as string;
+      this.logo_below = data.below as string;
+    });
+
+    // Update Title
+    this.api_query_simple_string("text/get/html/title", (data) => {
+      this.title_html = data;
+    });
+
+    // Update Images
+
+    // Update Image Config
+    this.api_query_simple_object("image/config", (data) => {
+      this.image_height = data.height as number;
+      this.image_contain = data.contain as boolean;
+      this.image_speed = data.speed as number;
+    });
+
+    // Update Message
+    this.api_query_simple_string("text/get/html/message", (data) => {
+      this.message_html = data;
+    });
+
+    // Update Calendars
+
+    // Update Calendar Config
+    this.api_query_simple_object("calendar/config", (data) => {
+      this.calendar_speed = data.speed as number;
+    });
+
+    // Update Server Config
+    this.api_query_simple_object("misc/config/server", (data) => {
+      this.server_host = data.host as string;
+      this.server_name = data.name as string;
+    });
+
+    // Update Version
+    this.api_query_simple_string("misc/version", (data) => {
+      this.dashboard_version = data;
+    });
+
+    // Update IP
+    this.api_query_simple_string("misc/lanip", (data) => {
+      this.dashboard_ip = data;
+    });
+
+    // Update Ticker
+    this.api_query_simple_string("ticker/html", (data) => {
+      this.ticker_html = data;
+    });
+
+    // Update Ticker Config
+    this.api_query_simple_object("ticker/config", (data) => {
+      this.ticker_color = data.color as string;
+    });
   }
 
   public mounted(): void {