move axios to ovdashboard plugin
This commit is contained in:
parent
9804fffbf2
commit
ac13f60b81
6 changed files with 111 additions and 122 deletions
|
@ -87,89 +87,40 @@ export default class App extends Vue {
|
||||||
private ticker_html = "<p>changeme</p>";
|
private ticker_html = "<p>changeme</p>";
|
||||||
private ticker_color = "primary";
|
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<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 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 {
|
private update(): void {
|
||||||
// Update Logo Config
|
// 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_above = data.above as string;
|
||||||
this.logo_below = data.below as string;
|
this.logo_below = data.below as string;
|
||||||
});
|
});
|
||||||
|
|
||||||
// Update Title
|
// 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;
|
this.title_html = data;
|
||||||
});
|
});
|
||||||
|
|
||||||
// Update Images
|
// 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.image_urls = data.map((name: string) =>
|
||||||
this.$ovdashboard.api_url("image/get/" + name)
|
this.$ovdashboard.api_url("image/get/" + name)
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Update Image Config
|
// 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_height = data.height as number;
|
||||||
this.image_contain = data.contain as boolean;
|
this.image_contain = data.contain as boolean;
|
||||||
this.image_speed = data.speed as number;
|
this.image_speed = data.speed as number;
|
||||||
});
|
});
|
||||||
|
|
||||||
// Update Message
|
// Update Message
|
||||||
this.api_query_simple_string("text/get/html/message", (data) => {
|
this.$ovdashboard.api_query_simple_string(
|
||||||
this.message_html = data;
|
"text/get/html/message",
|
||||||
});
|
(data) => (this.message_html = data)
|
||||||
|
);
|
||||||
|
|
||||||
// Update Calendar Aggregates
|
// 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) =>
|
let promises = data.map((name: string) =>
|
||||||
this.$axios.get(this.$ovdashboard.api_url("aggregate/get/" + name))
|
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
|
// 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;
|
this.calendar_speed = data.speed as number;
|
||||||
});
|
});
|
||||||
|
|
||||||
// Update Server Config
|
// 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_host = data.host as string;
|
||||||
this.server_name = data.name as string;
|
this.server_name = data.name as string;
|
||||||
});
|
});
|
||||||
|
|
||||||
// Update Version
|
// Update Version
|
||||||
this.api_query_simple_string("misc/version", (data) => {
|
this.$ovdashboard.api_query_simple_string("misc/version", (data) => {
|
||||||
this.dashboard_version = data;
|
this.dashboard_version = data;
|
||||||
});
|
});
|
||||||
|
|
||||||
// Update IP
|
// Update IP
|
||||||
this.api_query_simple_string("misc/lanip", (data) => {
|
this.$ovdashboard.api_query_simple_string("misc/lanip", (data) => {
|
||||||
this.dashboard_ip = data;
|
this.dashboard_ip = data;
|
||||||
});
|
});
|
||||||
|
|
||||||
// Update Ticker
|
// Update Ticker
|
||||||
this.api_query_simple_string("ticker/html", (data) => {
|
this.$ovdashboard.api_query_simple_string("ticker/html", (data) => {
|
||||||
this.ticker_html = data;
|
this.ticker_html = data;
|
||||||
});
|
});
|
||||||
|
|
||||||
// Update Ticker Config
|
// 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;
|
this.ticker_color = data.color as string;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
9
ui/src/d.ts/shims-axios.d.ts
vendored
9
ui/src/d.ts/shims-axios.d.ts
vendored
|
@ -1,9 +0,0 @@
|
||||||
import axios from "axios";
|
|
||||||
|
|
||||||
declare module 'vue/types/vue' {
|
|
||||||
interface Vue {
|
|
||||||
$axios: typeof axios;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export { };
|
|
26
ui/src/d.ts/shims-ovdashboard.d.ts
vendored
26
ui/src/d.ts/shims-ovdashboard.d.ts
vendored
|
@ -1,7 +1,33 @@
|
||||||
|
import { AxiosInstance } from "axios";
|
||||||
|
|
||||||
declare module 'vue/types/vue' {
|
declare module 'vue/types/vue' {
|
||||||
interface Vue {
|
interface Vue {
|
||||||
|
$axios: AxiosInstance;
|
||||||
|
|
||||||
$ovdashboard: {
|
$ovdashboard: {
|
||||||
api_url: (endpoint?: string) => string;
|
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<string, unknown>) => void
|
||||||
|
) => void;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,12 +4,10 @@ import "@/registerServiceWorker"
|
||||||
import "@/sass/fonts.scss"
|
import "@/sass/fonts.scss"
|
||||||
|
|
||||||
import App from "@/App.vue"
|
import App from "@/App.vue"
|
||||||
import axios from "@/plugins/axios"
|
|
||||||
import ovdashboard from "@/plugins/ovdashboard"
|
import ovdashboard from "@/plugins/ovdashboard"
|
||||||
import vuetify from "@/plugins/vuetify"
|
import vuetify from "@/plugins/vuetify"
|
||||||
|
|
||||||
Vue.config.productionTip = false
|
Vue.config.productionTip = false
|
||||||
Vue.use(axios)
|
|
||||||
Vue.use(ovdashboard)
|
Vue.use(ovdashboard)
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
|
|
|
@ -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();
|
|
|
@ -1,7 +1,26 @@
|
||||||
|
import axios, { AxiosInstance } from 'axios';
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
|
|
||||||
class OVDashboardPlugin {
|
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) {
|
public install(vue: typeof Vue) {
|
||||||
|
vue.prototype.$axios = this.axios;
|
||||||
vue.prototype.$ovdashboard = this;
|
vue.prototype.$ovdashboard = this;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -25,6 +44,56 @@ class OVDashboardPlugin {
|
||||||
else
|
else
|
||||||
return this.api_baseurl + "/" + endpoint;
|
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<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>);
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default new OVDashboardPlugin();
|
export default new OVDashboardPlugin();
|
||||||
|
|
Loading…
Reference in a new issue