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_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 {
|
||||
// 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;
|
||||
});
|
||||
}
|
||||
|
|
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' {
|
||||
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<string, unknown>) => void
|
||||
) => void;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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';
|
||||
|
||||
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<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();
|
||||
|
|
Loading…
Reference in a new issue