wrong import

ui/src/App.vue

@@ -108,7 +108,7 @@ export default class App extends Vue {
     // Update Images
     this.$ovdashboard.api_get_list("image/list", (names) => {
       this.image_urls = names.map((name: string) =>
-        this.$ovdashboard.api_url("image/get/" + name)
+        this.$ovdashboard.api_url(`image/get/${name}`)
       );
     });
 
@@ -134,7 +134,7 @@ export default class App extends Vue {
     // Update Calendar Aggregates
     this.$ovdashboard.api_get_list("aggregate/list", (names) => {
       this.$ovdashboard.api_get_object_multi<EventData[]>(
-        names.map((name) => "aggregate/get/" + name),
+        names.map((name) => `aggregate/get/${name}`),
         (calendars) => {
           this.calendar_data = [];
 

ui/src/components/TickerBar.vue

@@ -50,7 +50,7 @@ export default class TickerBar extends Vue {
       // 10 seconds + another second per 40px
       const duration = 10 + Math.round(width / 40);
 
-      this._marquee.style.setProperty("animation-duration", duration + "s");
+      this._marquee.style.setProperty("animation-duration", `${duration}s`);
     });
   }
 }

ui/src/components/calendar/Calendar.vue

@@ -8,7 +8,7 @@
       <v-divider
         v-if="index < events.length - 1"
         class="mx-5"
-        :key="event.hash + '-div'"
+        :key="`${event.hash}-div`"
       />
     </template>
   </v-list>
@@ -16,7 +16,7 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { EventData } from "./model";
+import { EventData } from "./EventModel";
 import EventItem from "./EventItem.vue";
 
 @Component({

ui/src/components/calendar/CalendarCarousel.vue

@@ -52,7 +52,7 @@ export default class CalendarCarousel extends Vue {
       .getPropertyValue("height");
     const maxHeight = parseFloat(divHeightPX) - diff;
 
-    divElement.style.setProperty("max-height", maxHeight + "px");
+    divElement.style.setProperty("max-height", `${maxHeight}px`);
   }
 
   public mounted(): void {

ui/src/components/calendar/EventItem.vue

@@ -67,7 +67,7 @@ export default class EventItem extends Vue {
       .mapUnits((x) => Math.round(x))
       .toHuman();
 
-    return locale_string + " (" + duration_string + ")";
+    return `${locale_string} (${duration_string})`;
   }
 }
 </script>

ui/src/plugins/ovdashboard.ts

@@ -3,8 +3,9 @@ import Vue from 'vue';
 
 export class OVDashboardPlugin {
   private axios: AxiosInstance;
+  private api_version: string;
 
-  public constructor() {
+  public constructor(api_version: string) {
     // Full config:  https://github.com/axios/axios#request-config
     // axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
     // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
@@ -17,6 +18,7 @@ export class OVDashboardPlugin {
     };
 
     this.axios = axios.create(config);
+    this.api_version = api_version;
   }
 
   public install(vue: typeof Vue) {
@@ -25,23 +27,20 @@ export class OVDashboardPlugin {
 
   private get api_baseurl(): string {
     if (process.env.NODE_ENV === "production") {
-      return "//" + window.location.host + "/api/v1";
+      return `//${window.location.host}/api`;
 
-    } else {
-      if (process.env.NODE_ENV !== "development") {
-        console.warn("Unexpected NODE_ENV value");
-      }
-
-      return "//" + window.location.hostname + ":8000/api/v1";
+    } else if (process.env.NODE_ENV !== "development") {
+      console.warn("Unexpected NODE_ENV value");
     }
+
+    return `//${window.location.hostname}:8000/api`;
   }
 
   public api_url(endpoint?: string): string {
     if (endpoint === undefined)
-      return this.api_baseurl;
+      return `${this.api_baseurl}/${this.api_version}`;
 
-    else
-      return this.api_baseurl + "/" + endpoint;
+    return `${this.api_baseurl}/${this.api_version}/${endpoint}`;
   }
 
   private fail(name: string): (reason: unknown) => void {
@@ -141,4 +140,4 @@ export class OVDashboardPlugin {
   }
 }
 
-export default new OVDashboardPlugin();
+export default new OVDashboardPlugin("v1");