ui/.vscode/settings.json

@@ -3,6 +3,5 @@
   "editor.codeActionsOnSave": {
     "source.organizeImports": true
   },
-  "git.closeDiffOnOperation": true,
-  "editor.tabSize": 2
+  "git.closeDiffOnOperation": true
 }

ui/src/components/TickerBar.vue

@@ -26,7 +26,7 @@ export default class TickerBar extends Vue {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @keyframes marquee {
   0% {
     transform: translate(0, 0);
@@ -50,9 +50,11 @@ export default class TickerBar extends Vue {
       animation-play-state: paused;
     }
   }
+}
+</style>
 
-  :deep(*) {
-    margin: 0 !important;
-  }
+<style>
+.v-footer p {
+  margin: 0;
 }
 </style>

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

@@ -1,9 +0,0 @@
-import axios from "axios";
-
-declare module 'vue/types/vue' {
-  interface Vue {
-    $axios: typeof axios;
-  }
-}
-
-export { };

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

@@ -1,10 +0,0 @@
-declare module 'vue/types/vue' {
-  interface Vue {
-    $ovdashboard: {
-      api_url: (endpoint: string) => string;
-    }
-  }
-}
-
-export { };
-

ui/src/main.ts

@@ -1,13 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
-import axios from './plugins/axios'
-import ovdashboard from './plugins/ovdashboard'
-import './plugins/registerServiceWorker'
+import './plugins/axios'
+import './registerServiceWorker'
 import vuetify from './plugins/vuetify'
 
 Vue.config.productionTip = false
-Vue.use(axios)
-Vue.use(ovdashboard)
 
 new Vue({
   vuetify,

ui/src/plugins/axios.js

@@ -0,0 +1,63 @@
+"use strict";
+
+import axios from "axios";
+import Vue from 'vue';
+
+// 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;
+// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
+
+let config = {
+  // baseURL: process.env.baseURL || process.env.apiUrl || ""
+  // timeout: 60 * 1000, // Timeout
+  // withCredentials: true, // Check cross-site Access-Control
+};
+
+const _axios = axios.create(config);
+
+_axios.interceptors.request.use(
+  function (config) {
+    // Do something before request is sent
+    return config;
+  },
+  function (error) {
+    // Do something with request error
+    return Promise.reject(error);
+  }
+);
+
+// Add a response interceptor
+_axios.interceptors.response.use(
+  function (response) {
+    // Do something with response data
+    return response;
+  },
+  function (error) {
+    // Do something with response error
+    return Promise.reject(error);
+  }
+);
+
+Plugin.install = function (Vue, options) {
+  options;
+
+  Vue.axios = _axios;
+  window.axios = _axios;
+  Object.defineProperties(Vue.prototype, {
+    axios: {
+      get() {
+        return _axios;
+      }
+    },
+    $axios: {
+      get() {
+        return _axios;
+      }
+    },
+  });
+};
+
+Vue.use(Plugin)
+
+export default Plugin;

ui/src/plugins/axios.ts

@@ -1,46 +0,0 @@
-import axios from 'axios';
-import _Vue from 'vue';
-
-class AxiosPlugin {
-  public install(Vue: typeof _Vue) {
-    // 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;
-    // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
-
-    const config = {
-      // baseURL: process.env.baseURL || process.env.apiUrl || ""
-      // timeout: 60 * 1000, // Timeout
-      // withCredentials: true, // Check cross-site Access-Control
-    };
-
-    const _axios = axios.create(config);
-
-    _axios.interceptors.request.use(
-      function (config) {
-        // Do something before request is sent
-        return config;
-      },
-      function (error) {
-        // Do something with request error
-        return Promise.reject(error);
-      }
-    );
-
-    // Add a response interceptor
-    _axios.interceptors.response.use(
-      function (response) {
-        // Do something with response data
-        return response;
-      },
-      function (error) {
-        // Do something with response error
-        return Promise.reject(error);
-      }
-    );
-
-    Vue.prototype.$axios = _axios;
-  }
-}
-
-export default new AxiosPlugin();

ui/src/plugins/ovdashboard.ts

@@ -1,30 +0,0 @@
-import _Vue from 'vue';
-
-class OVDashboardPlugin {
-  public install(Vue: typeof _Vue) {
-    Vue.prototype.$ovdashboard = this;
-  }
-
-  private get api_baseurl(): string {
-    if (process.env.NODE_ENV === "production") {
-      return "//" + window.location.host + "/api/v1";
-
-    } else {
-      if (process.env.NODE_ENV !== "development") {
-        console.warn("Unexpected NODE_ENV value");
-      }
-
-      return "//" + window.location.hostname + ":8000/api/v1";
-    }
-  }
-
-  public api_url(endpoint: string | undefined): string {
-    if (endpoint === undefined)
-      return this.api_baseurl;
-
-    else
-      return this.api_baseurl + "/" + endpoint;
-  }
-}
-
-export default new OVDashboardPlugin();

ui/src/plugins/vue-ovdashboard.js

@@ -0,0 +1,40 @@
+"use strict";
+
+import Vue from 'vue';
+
+function get_baseurl() {
+  if (process.env.NODE_ENV === "production") {
+    return "//" + window.location.host + "/api/v1";
+
+  } else {
+    if (process.env.NODE_ENV !== "development") {
+      console.warn("Unexpected NODE_ENV value");
+    }
+
+    return "//" + window.location.hostname + ":8000/api/v1";
+  }
+}
+
+Plugin.install = function (Vue, options) {
+  options;
+
+  Vue.ovd_api_baseurl = get_baseurl();
+  window.ovd_api_baseurl = get_baseurl();
+
+  Object.defineProperties(Vue.prototype, {
+    ovd_api_baseurl: {
+      get() {
+        return get_baseurl();
+      }
+    },
+    $ovd_api_baseurl: {
+      get() {
+        return get_baseurl();
+      }
+    },
+  });
+};
+
+Vue.use(Plugin)
+
+export default Plugin;