Lissy93/dashy
1
1
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2024-11-28 05:14:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

🎨 Handle loading state for widgets

Browse Source
This commit is contained in:
Alicia Sykes 2021-12-13 22:40:35 +00:00
parent 0a4d021b4e
commit 5cb588a586
3 changed files with 129 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Widgets/Weather.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<LoadingAnimation v-if="loading" class="loader" /> <div class="weather">
<div v-else class="weather">
<!-- Icon + Temperature --> <!-- Icon + Temperature -->
<div class="intro"> <div class="intro">
<p class="temp">{{ temp }}</p> <p class="temp">{{ temp }}</p>

190
src/components/Widgets/WidgetBase.vue
View File

@ -1,91 +1,115 @@
<template> <template>
<div class="widget-base"> <div :class="`widget-base ${ loading ? 'is-loading' : '' }`">
<!-- Update and Full-Page Action Buttons -->
<Button :click="update" class="action-btn update-btn" v-if="!error && !loading"> <Button :click="update" class="action-btn update-btn" v-if="!error && !loading">
<UpdateIcon /> <UpdateIcon />
</Button> </Button>
<Button :click="fullScreenWidget" class="action-btn open-btn" v-if="!error && !loading"> <Button :click="fullScreenWidget" class="action-btn open-btn" v-if="!error && !loading">
<OpenIcon /> <OpenIcon />
</Button> </Button>
<div v-if="loading">Loading...</div> <!-- Loading Spinner -->
<div v-else-if="error" class="widget-error"> <div v-if="loading" class="loading">
<LoadingAnimation v-if="loading" class="loader" />
</div>
<!-- Error Message Display -->
<div v-if="error" class="widget-error">
<p class="error-msg">An error occurred, see the logs for more info.</p> <p class="error-msg">An error occurred, see the logs for more info.</p>
<p class="error-output">{{ errorMsg }}</p> <p class="error-output">{{ errorMsg }}</p>
</div> </div>
<Clock <!-- Widget -->
v-else-if="widgetType === 'clock'" <div v-else class="widget-wrap">
:options="widgetOptions" <Clock
@error="handleError" v-if="widgetType === 'clock'"
:ref="widgetRef" :options="widgetOptions"
/> @loading="setLoaderState"
<Weather @error="handleError"
v-else-if="widgetType === 'weather'" :ref="widgetRef"
:options="widgetOptions" />
@error="handleError" <Weather
:ref="widgetRef" v-else-if="widgetType === 'weather'"
/> :options="widgetOptions"
<WeatherForecast @loading="setLoaderState"
v-else-if="widgetType === 'weather-forecast'" @error="handleError"
:options="widgetOptions" :ref="widgetRef"
@error="handleError" />
:ref="widgetRef" <WeatherForecast
/> v-else-if="widgetType === 'weather-forecast'"
<TflStatus :options="widgetOptions"
v-else-if="widgetType === 'tfl-status'" @loading="setLoaderState"
:options="widgetOptions" @error="handleError"
@error="handleError" :ref="widgetRef"
:ref="widgetRef" />
/> <TflStatus
<CryptoPriceChart v-else-if="widgetType === 'tfl-status'"
v-else-if="widgetType === 'crypto-price-chart'" :options="widgetOptions"
:options="widgetOptions" @loading="setLoaderState"
@error="handleError" @error="handleError"
:ref="widgetRef" :ref="widgetRef"
/> />
<CryptoWatchList <CryptoPriceChart
v-else-if="widgetType === 'crypto-watch-list'" v-else-if="widgetType === 'crypto-price-chart'"
:options="widgetOptions" :options="widgetOptions"
@error="handleError" @loading="setLoaderState"
:ref="widgetRef" @error="handleError"
/> :ref="widgetRef"
<XkcdComic />
v-else-if="widgetType === 'xkcd-comic'" <CryptoWatchList
:options="widgetOptions" v-else-if="widgetType === 'crypto-watch-list'"
@error="handleError" :options="widgetOptions"
:ref="widgetRef" @loading="setLoaderState"
/> @error="handleError"
<ExchangeRates :ref="widgetRef"
v-else-if="widgetType === 'exchange-rates'" />
:options="widgetOptions" <XkcdComic
@error="handleError" v-else-if="widgetType === 'xkcd-comic'"
:ref="widgetRef" :options="widgetOptions"
/> @loading="setLoaderState"
<StockPriceChart @error="handleError"
v-else-if="widgetType === 'stock-price-chart'" :ref="widgetRef"
:options="widgetOptions" />
@error="handleError" <ExchangeRates
:ref="widgetRef" v-else-if="widgetType === 'exchange-rates'"
/> :options="widgetOptions"
<Jokes @loading="setLoaderState"
v-else-if="widgetType === 'joke'" @error="handleError"
:options="widgetOptions" :ref="widgetRef"
@error="handleError" />
:ref="widgetRef" <StockPriceChart
/> v-else-if="widgetType === 'stock-price-chart'"
<IframeWidget :options="widgetOptions"
v-else-if="widgetType === 'iframe'" @loading="setLoaderState"
:options="widgetOptions" @error="handleError"
@error="handleError" :ref="widgetRef"
:ref="widgetRef" />
/> <Jokes
v-else-if="widgetType === 'joke'"
:options="widgetOptions"
@loading="setLoaderState"
@error="handleError"
:ref="widgetRef"
/>
<IframeWidget
v-else-if="widgetType === 'iframe'"
:options="widgetOptions"
@loading="setLoaderState"
@error="handleError"
:ref="widgetRef"
/>
<!-- No widget type specified -->
<div v-else>{{ handleError('No widget type was specified') }}</div>
</div>
</div> </div>
</template> </template>
<script> <script>
// Import form elements, icons and utils
import ErrorHandler from '@/utils/ErrorHandler'; import ErrorHandler from '@/utils/ErrorHandler';
import Button from '@/components/FormElements/Button'; import Button from '@/components/FormElements/Button';
import UpdateIcon from '@/assets/interface-icons/widget-update.svg'; import UpdateIcon from '@/assets/interface-icons/widget-update.svg';
import OpenIcon from '@/assets/interface-icons/open-new-tab.svg'; import OpenIcon from '@/assets/interface-icons/open-new-tab.svg';
import LoadingAnimation from '@/assets/interface-icons/loader.svg';
// Import available widgets
import Clock from '@/components/Widgets/Clock.vue'; import Clock from '@/components/Widgets/Clock.vue';
import Weather from '@/components/Widgets/Weather.vue'; import Weather from '@/components/Widgets/Weather.vue';
import WeatherForecast from '@/components/Widgets/WeatherForecast.vue'; import WeatherForecast from '@/components/Widgets/WeatherForecast.vue';
@ -104,6 +128,7 @@ export default {
Button, Button,
UpdateIcon, UpdateIcon,
OpenIcon, OpenIcon,
LoadingAnimation,
Clock, Clock,
Weather, Weather,
WeatherForecast, WeatherForecast,
@ -134,25 +159,33 @@ export default {
} }
return this.widget.type.toLowerCase(); return this.widget.type.toLowerCase();
}, },
/* Returns the users specified widget options, or empty object */ /* Returns users specified widget options, or empty object */
widgetOptions() { widgetOptions() {
return this.widget.options || {}; return this.widget.options || {};
}, },
/* A unique string to reference the widget by */
widgetRef() { widgetRef() {
return `widget-${this.widgetType}-${this.index}`; return `widget-${this.widgetType}-${this.index}`;
}, },
}, },
methods: { methods: {
/* Calls update data method on widget */
update() { update() {
this.$refs[this.widgetRef].update(); this.$refs[this.widgetRef].update();
}, },
/* Shows message when error occurred */
handleError(msg) { handleError(msg) {
this.error = true; this.error = true;
this.errorMsg = msg; this.errorMsg = msg;
}, },
/* Opens current widget in full-page */
fullScreenWidget() { fullScreenWidget() {
this.$emit('navigateToSection'); this.$emit('navigateToSection');
}, },
/* Toggles loading state */
setLoaderState(loading) {
this.loading = loading;
},
}, },
}; };
</script> </script>
@ -162,6 +195,7 @@ export default {
.widget-base { .widget-base {
position: relative; position: relative;
padding-top: 0.75rem; padding-top: 0.75rem;
// Refresh and full-page action buttons
button.action-btn { button.action-btn {
height: 1rem; height: 1rem;
min-width: auto; min-width: auto;
@ -184,7 +218,7 @@ export default {
right: 1.75rem; right: 1.75rem;
} }
} }
// Error message output
.widget-error { .widget-error {
p.error-msg { p.error-msg {
color: var(--warning); color: var(--warning);
@ -199,6 +233,20 @@ export default {
margin: 0.5rem auto; margin: 0.5rem auto;
} }
} }
// Loading spinner
.loading {
margin: 0.2rem auto;
text-align: center;
svg.loader {
width: 100px;
}
}
// Hide widget contents while loading
&.is-loading {
.widget-wrap {
display: none;
}
}
} }
</style> </style>

26
src/mixins/WidgetMixin.js
View File

@ -1,49 +1,41 @@
/**
* Mixin that all pre-built and custom widgets extend from.
* Manages loading state, error handling and data updates.
*/
import ProgressBar from 'rsup-progress'; import ProgressBar from 'rsup-progress';
import ErrorHandler from '@/utils/ErrorHandler'; import ErrorHandler from '@/utils/ErrorHandler';
import LoadingAnimation from '@/assets/interface-icons/loader.svg';
const WidgetMixin = { const WidgetMixin = {
components: {
LoadingAnimation,
},
props: { props: {
/* The options prop is an object of settings for a given widget */
options: { options: {
type: Object, type: Object,
default: {}, default: {},
}, },
}, },
data: () => ({ data: () => ({
loading: true, // Indicates current loading status, to display spinner
progress: new ProgressBar({ color: 'var(--progress-bar)' }), progress: new ProgressBar({ color: 'var(--progress-bar)' }),
}), }),
methods: { methods: {
/* Overridden by widget component. Re-fetches and renders any external data * /* Re-fetches external data, called by parent. Usually overridden by widget */
* Called by parent component, and triggered either by user or time interval */
update() { update() {
// eslint-disable-next-line no-console console.log('No update method configured for this widget'); // eslint-disable-line no-console
console.log('No update method configured for this widget');
}, },
/* Called when an error occurs */ /* Called when an error occurs. Logs to handler, and passes to parent component */
error(msg, stackTrace) { error(msg, stackTrace) {
ErrorHandler(msg, stackTrace); ErrorHandler(msg, stackTrace);
this.$emit('error', msg); this.$emit('error', msg);
}, },
/* When a data request update starts, show loader */ /* When a data request update starts, show loader */
startLoading() { startLoading() {
this.loading = true; this.$emit('loading', true);
this.progress.start(); this.progress.start();
}, },
/* When a data request finishes, hide loader */ /* When a data request finishes, hide loader */
finishLoading() { finishLoading() {
this.loading = false; this.$emit('loading', false);
setTimeout(() => { this.progress.end(); }, 500); setTimeout(() => { this.progress.end(); }, 500);
}, },
}, },
mounted() {
// If the mounted function isn't overridden,then hide loader
this.loading = false;
},
}; };
export default WidgetMixin; export default WidgetMixin;