From 8333952e7f5c7cb2d652966e77b28c9a3a36bcf6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <40151420+ldericher@users.noreply.github.com> Date: Mon, 12 Sep 2022 22:08:34 +0000 Subject: [PATCH] "OVDashboard" and "Axios" typescript plugins --- ui/src/d.ts/shims-axios.d.ts | 9 +++++ ui/src/d.ts/shims-ovdashboard.d.ts | 10 +++++ ui/src/main.ts | 5 ++- ui/src/plugins/axios.js | 63 ------------------------------ ui/src/plugins/axios.ts | 46 ++++++++++++++++++++++ ui/src/plugins/ovdashboard.ts | 30 ++++++++++++++ ui/src/plugins/vue-ovdashboard.js | 40 ------------------- 7 files changed, 99 insertions(+), 104 deletions(-) create mode 100644 ui/src/d.ts/shims-axios.d.ts create mode 100644 ui/src/d.ts/shims-ovdashboard.d.ts delete mode 100644 ui/src/plugins/axios.js create mode 100644 ui/src/plugins/axios.ts create mode 100644 ui/src/plugins/ovdashboard.ts delete mode 100644 ui/src/plugins/vue-ovdashboard.js diff --git a/ui/src/d.ts/shims-axios.d.ts b/ui/src/d.ts/shims-axios.d.ts new file mode 100644 index 0000000..024f272 --- /dev/null +++ b/ui/src/d.ts/shims-axios.d.ts @@ -0,0 +1,9 @@ +import axios from "axios"; + +declare module 'vue/types/vue' { + interface Vue { + $axios: typeof axios; + } +} + +export { }; diff --git a/ui/src/d.ts/shims-ovdashboard.d.ts b/ui/src/d.ts/shims-ovdashboard.d.ts new file mode 100644 index 0000000..62974b6 --- /dev/null +++ b/ui/src/d.ts/shims-ovdashboard.d.ts @@ -0,0 +1,10 @@ +declare module 'vue/types/vue' { + interface Vue { + $ovdashboard: { + api_url: (endpoint: string) => string; + } + } +} + +export { }; + diff --git a/ui/src/main.ts b/ui/src/main.ts index 455cfa1..41db596 100644 --- a/ui/src/main.ts +++ b/ui/src/main.ts @@ -1,10 +1,13 @@ import Vue from 'vue' import App from './App.vue' -import './plugins/axios' +import axios from './plugins/axios' +import ovdashboard from './plugins/ovdashboard' import './plugins/registerServiceWorker' import vuetify from './plugins/vuetify' Vue.config.productionTip = false +Vue.use(axios) +Vue.use(ovdashboard) new Vue({ vuetify, diff --git a/ui/src/plugins/axios.js b/ui/src/plugins/axios.js deleted file mode 100644 index 834a683..0000000 --- a/ui/src/plugins/axios.js +++ /dev/null @@ -1,63 +0,0 @@ -"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; diff --git a/ui/src/plugins/axios.ts b/ui/src/plugins/axios.ts new file mode 100644 index 0000000..d6d5632 --- /dev/null +++ b/ui/src/plugins/axios.ts @@ -0,0 +1,46 @@ +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(); diff --git a/ui/src/plugins/ovdashboard.ts b/ui/src/plugins/ovdashboard.ts new file mode 100644 index 0000000..9bf4b08 --- /dev/null +++ b/ui/src/plugins/ovdashboard.ts @@ -0,0 +1,30 @@ +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(); diff --git a/ui/src/plugins/vue-ovdashboard.js b/ui/src/plugins/vue-ovdashboard.js deleted file mode 100644 index 4a5d341..0000000 --- a/ui/src/plugins/vue-ovdashboard.js +++ /dev/null @@ -1,40 +0,0 @@ -"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;