From ac13f60b81052d4e6b3179b10f91a57cc59d710d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <40151420+ldericher@users.noreply.github.com> Date: Fri, 16 Sep 2022 21:15:46 +0000 Subject: [PATCH] move axios to ovdashboard plugin --- ui/src/App.vue | 81 ++++++------------------------ ui/src/d.ts/shims-axios.d.ts | 9 ---- ui/src/d.ts/shims-ovdashboard.d.ts | 26 ++++++++++ ui/src/main.ts | 2 - ui/src/plugins/axios.ts | 46 ----------------- ui/src/plugins/ovdashboard.ts | 69 +++++++++++++++++++++++++ 6 files changed, 111 insertions(+), 122 deletions(-) delete mode 100644 ui/src/d.ts/shims-axios.d.ts delete mode 100644 ui/src/plugins/axios.ts diff --git a/ui/src/App.vue b/ui/src/App.vue index a22a9de..6516a33 100644 --- a/ui/src/App.vue +++ b/ui/src/App.vue @@ -87,89 +87,40 @@ export default class App extends Vue { private ticker_html = "

changeme

"; private ticker_color = "primary"; - private fail(name: string): (arg0: unknown) => void { - return (reason: unknown) => - 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) => void - ): void { - this.api_query_simple(endpoint, (data) => { - if (typeof data !== "object") return; - if (data === null) return; - - on_success(data as Record); - }); - } - - private api_query_simple_list( - endpoint: string, - on_success: (data: string[]) => void - ): void { - this.api_query_simple(endpoint, (data) => { - if (!Array.isArray(data)) return; - if (!data.every((value) => typeof value === "string")) return; - - on_success(data); - }); - } - private update(): void { // Update Logo Config - this.api_query_simple_object("misc/config/logo", (data) => { + this.$ovdashboard.api_query_simple_object("misc/config/logo", (data) => { 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.$ovdashboard.api_query_simple_string("text/get/html/title", (data) => { this.title_html = data; }); // Update Images - this.api_query_simple_list("image/list", (data) => { + this.$ovdashboard.api_query_simple_list("image/list", (data) => { this.image_urls = data.map((name: string) => this.$ovdashboard.api_url("image/get/" + name) ); }); // Update Image Config - this.api_query_simple_object("image/config", (data) => { + this.$ovdashboard.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; - }); + this.$ovdashboard.api_query_simple_string( + "text/get/html/message", + (data) => (this.message_html = data) + ); // Update Calendar Aggregates - this.api_query_simple_list("aggregate/list", (data) => { + this.$ovdashboard.api_query_simple_list("aggregate/list", (data) => { let promises = data.map((name: string) => this.$axios.get(this.$ovdashboard.api_url("aggregate/get/" + name)) ); @@ -185,37 +136,37 @@ export default class App extends Vue { }); } }) - .catch(this.fail("Calendar Aggregates")); + .catch(this.$ovdashboard.fail("Calendar Aggregates")); }); // Update Calendar Config - this.api_query_simple_object("calendar/config", (data) => { + this.$ovdashboard.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.$ovdashboard.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.$ovdashboard.api_query_simple_string("misc/version", (data) => { this.dashboard_version = data; }); // Update IP - this.api_query_simple_string("misc/lanip", (data) => { + this.$ovdashboard.api_query_simple_string("misc/lanip", (data) => { this.dashboard_ip = data; }); // Update Ticker - this.api_query_simple_string("ticker/html", (data) => { + this.$ovdashboard.api_query_simple_string("ticker/html", (data) => { this.ticker_html = data; }); // Update Ticker Config - this.api_query_simple_object("ticker/config", (data) => { + this.$ovdashboard.api_query_simple_object("ticker/config", (data) => { this.ticker_color = data.color as string; }); } diff --git a/ui/src/d.ts/shims-axios.d.ts b/ui/src/d.ts/shims-axios.d.ts deleted file mode 100644 index 024f272..0000000 --- a/ui/src/d.ts/shims-axios.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -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 index f10213a..9158190 100644 --- a/ui/src/d.ts/shims-ovdashboard.d.ts +++ b/ui/src/d.ts/shims-ovdashboard.d.ts @@ -1,7 +1,33 @@ +import { AxiosInstance } from "axios"; + declare module 'vue/types/vue' { interface Vue { + $axios: AxiosInstance; + $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) => void + ) => void; } } } diff --git a/ui/src/main.ts b/ui/src/main.ts index 8d61084..5c0c82f 100644 --- a/ui/src/main.ts +++ b/ui/src/main.ts @@ -4,12 +4,10 @@ import "@/registerServiceWorker" import "@/sass/fonts.scss" import App from "@/App.vue" -import axios from "@/plugins/axios" import ovdashboard from "@/plugins/ovdashboard" import vuetify from "@/plugins/vuetify" Vue.config.productionTip = false -Vue.use(axios) Vue.use(ovdashboard) new Vue({ diff --git a/ui/src/plugins/axios.ts b/ui/src/plugins/axios.ts deleted file mode 100644 index 146637d..0000000 --- a/ui/src/plugins/axios.ts +++ /dev/null @@ -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(); diff --git a/ui/src/plugins/ovdashboard.ts b/ui/src/plugins/ovdashboard.ts index a926b92..0c5a50e 100644 --- a/ui/src/plugins/ovdashboard.ts +++ b/ui/src/plugins/ovdashboard.ts @@ -1,7 +1,26 @@ +import axios, { AxiosInstance } from 'axios'; import Vue from 'vue'; class OVDashboardPlugin { + private axios: AxiosInstance; + + public constructor() { + // 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 + }; + + this.axios = axios.create(config); + } + public install(vue: typeof Vue) { + vue.prototype.$axios = this.axios; vue.prototype.$ovdashboard = this; } @@ -25,6 +44,56 @@ class OVDashboardPlugin { else return this.api_baseurl + "/" + endpoint; } + + public fail(name: string): (reason: unknown) => void { + return (reason: unknown) => + console.warn("Failed to query", name, "-", reason); + } + + public api_query_simple( + endpoint: string, + on_success: (data: unknown) => void + ): void { + this.axios + .get(this.api_url(endpoint)) + .then((response) => on_success(response.data)) + .catch(this.fail(endpoint)); + } + + public 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); + }); + } + + public api_query_simple_list( + endpoint: string, + on_success: (data: string[]) => void + ): void { + this.api_query_simple(endpoint, (data) => { + if (!Array.isArray(data)) return; + if (!data.every((value) => typeof value === "string")) return; + + on_success(data); + }); + } + + public api_query_simple_object( + endpoint: string, + on_success: (data: Record) => void + ): void { + this.api_query_simple(endpoint, (data) => { + if (typeof data !== "object") return; + if (data === null) return; + + on_success(data as Record); + }); + } } export default new OVDashboardPlugin();