diff --git a/src/components/Widgets/WidgetBase.vue b/src/components/Widgets/WidgetBase.vue index cd73b403..458f2f17 100644 --- a/src/components/Widgets/WidgetBase.vue +++ b/src/components/Widgets/WidgetBase.vue @@ -346,7 +346,6 @@ export default { loading: false, error: false, errorMsg: null, - updater: null, // Stores interval }), computed: { /* Returns the widget type, shows error if not specified */ @@ -361,27 +360,13 @@ export default { widgetOptions() { const options = this.widget.options || {}; const useProxy = !!this.widget.useProxy; - const updateInterval = this.widget.updateInterval || 0; + const updateInterval = this.widget.updateInterval || null; return { useProxy, updateInterval, ...options }; }, /* A unique string to reference the widget by */ widgetRef() { return `widget-${this.widgetType}-${this.index}`; }, - /* Returns either `false` or a number in ms to continuously update widget data */ - updateInterval() { - const usersInterval = this.widget.updateInterval; - if (!usersInterval) return 0; - // If set to `true`, then default to 30 seconds - if (typeof usersInterval === 'boolean') return 30 * 1000; - // If set to a number, and within valid range, return user choice - if (typeof usersInterval === 'number' - && usersInterval >= 10 - && usersInterval < 7200) { - return usersInterval * 1000; - } - return 0; - }, }, methods: { /* Calls update data method on widget */ @@ -402,17 +387,6 @@ export default { this.loading = loading; }, }, - mounted() { - // If continuous updates enabled, create interval - if (this.updateInterval) { - this.updater = setInterval(() => { - this.update(); - }, this.updateInterval); - } - }, - beforeDestroy() { - clearInterval(this.updater); - }, }; diff --git a/src/mixins/WidgetMixin.js b/src/mixins/WidgetMixin.js index d8aa7310..e5ebeded 100644 --- a/src/mixins/WidgetMixin.js +++ b/src/mixins/WidgetMixin.js @@ -17,11 +17,22 @@ const WidgetMixin = { data: () => ({ progress: new ProgressBar({ color: 'var(--progress-bar)' }), overrideProxyChoice: false, + overrideUpdateInterval: null, disableLoader: false, // Prevent ever showing the loader + updater: null, // Stores interval }), /* When component mounted, fetch initial data */ mounted() { this.fetchData(); + if (this.updateInterval) { + this.continuousUpdates(); + this.disableLoader = true; + } + }, + beforeDestroy() { + if (this.updater) { + clearInterval(this.updater); + } }, computed: { proxyReqEndpoint() { @@ -31,6 +42,23 @@ const WidgetMixin = { useProxy() { return this.options.useProxy || this.overrideProxyChoice; }, + /* Returns either a number in ms to continuously update widget data. Or 0 for no updates */ + updateInterval() { + const usersInterval = this.options.updateInterval; + if (usersInterval === null && this.overrideUpdateInterval) { + return this.overrideUpdateInterval * 1000; + } + if (!usersInterval) return 0; + // If set to `true`, then default to 30 seconds + if (typeof usersInterval === 'boolean') return 30 * 1000; + // If set to a number, and within valid range, return user choice + if (typeof usersInterval === 'number' + && usersInterval >= 2 + && usersInterval <= 7200) { + return usersInterval * 1000; + } + return 0; + }, }, methods: { /* Re-fetches external data, called by parent. Usually overridden by widget */ @@ -38,6 +66,10 @@ const WidgetMixin = { this.startLoading(); this.fetchData(); }, + /* If continuous updates enabled, create interval */ + continuousUpdates() { + this.updater = setInterval(() => { this.update(); }, this.updateInterval); + }, /* Called when an error occurs. Logs to handler, and passes to parent component */ error(msg, stackTrace) { ErrorHandler(msg, stackTrace);