mirror of https://github.com/lissy93/dashy
93 lines
2.8 KiB
JavaScript
93 lines
2.8 KiB
JavaScript
/**
|
|
* Mixin that all pre-built and custom widgets extend from.
|
|
* Manages loading state, error handling, data updates and user options
|
|
*/
|
|
import axios from 'axios';
|
|
import ProgressBar from 'rsup-progress';
|
|
import ErrorHandler from '@/utils/ErrorHandler';
|
|
import { serviceEndpoints } from '@/utils/defaults';
|
|
|
|
const WidgetMixin = {
|
|
props: {
|
|
options: {
|
|
type: Object,
|
|
default: {},
|
|
},
|
|
},
|
|
data: () => ({
|
|
progress: new ProgressBar({ color: 'var(--progress-bar)' }),
|
|
overrideProxyChoice: false,
|
|
}),
|
|
/* When component mounted, fetch initial data */
|
|
mounted() {
|
|
this.fetchData();
|
|
},
|
|
computed: {
|
|
proxyReqEndpoint() {
|
|
const baseUrl = process.env.VUE_APP_DOMAIN || window.location.origin;
|
|
return `${baseUrl}${serviceEndpoints.corsProxy}`;
|
|
},
|
|
useProxy() {
|
|
return this.options.useProxy || this.overrideProxyChoice;
|
|
},
|
|
},
|
|
methods: {
|
|
/* Re-fetches external data, called by parent. Usually overridden by widget */
|
|
update() {
|
|
this.startLoading();
|
|
this.fetchData();
|
|
},
|
|
/* Called when an error occurs. Logs to handler, and passes to parent component */
|
|
error(msg, stackTrace) {
|
|
ErrorHandler(msg, stackTrace);
|
|
this.$emit('error', msg);
|
|
},
|
|
/* When a data request update starts, show loader */
|
|
startLoading() {
|
|
this.$emit('loading', true);
|
|
this.progress.start();
|
|
},
|
|
/* When a data request finishes, hide loader */
|
|
finishLoading() {
|
|
this.$emit('loading', false);
|
|
setTimeout(() => { this.progress.end(); }, 500);
|
|
},
|
|
/* Overridden by child component. Will make network request, then end loader */
|
|
fetchData() {
|
|
this.finishLoading();
|
|
},
|
|
/* Used as v-tooltip, pass text content in, and will show on hover */
|
|
tooltip(content) {
|
|
return { content, trigger: 'hover focus', delay: 250 };
|
|
},
|
|
/* Makes data request, returns promise */
|
|
makeRequest(endpoint, options) {
|
|
// Request Options
|
|
const method = 'GET';
|
|
const url = this.useProxy ? this.proxyReqEndpoint : endpoint;
|
|
const CustomHeaders = options ? JSON.stringify(options) : null;
|
|
const headers = this.useProxy
|
|
? { 'Target-URL': endpoint, CustomHeaders } : CustomHeaders;
|
|
// Make request
|
|
return new Promise((resolve, reject) => {
|
|
axios.request({ method, url, headers })
|
|
.then((response) => {
|
|
if (response.data.success === false) {
|
|
this.error('Proxy returned error from target server', response.data.message);
|
|
}
|
|
resolve(response.data);
|
|
})
|
|
.catch((dataFetchError) => {
|
|
this.error('Unable to fetch data', dataFetchError);
|
|
reject(dataFetchError);
|
|
})
|
|
.finally(() => {
|
|
this.finishLoading();
|
|
});
|
|
});
|
|
},
|
|
},
|
|
};
|
|
|
|
export default WidgetMixin;
|