mirror of
https://github.com/Lissy93/dashy.git
synced 2025-07-21 12:45:16 +02:00
📦 Modifies how widgets are compiled
This commit is contained in:
Alicia Sykes
parent
f243d9b916
commit
7a63fdc6c7
23
src/components/Widgets/Blank.vue
Normal file
23
src/components/Widgets/Blank.vue
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<template>
|
||||||
|
<div class="placeholder-widget">
|
||||||
|
<p>Error finding and mounting specified widget</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import WidgetMixin from '@/mixins/WidgetMixin';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mixins: [WidgetMixin],
|
||||||
|
mounted() {
|
||||||
|
this.error('Unable to render widget of specified type');
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.placeholder-widget p {
|
||||||
|
color: var(--danger);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -18,301 +18,32 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- Widget -->
|
<!-- Widget -->
|
||||||
<div v-else class="widget-wrap">
|
<div v-else class="widget-wrap">
|
||||||
<Apod
|
<WidgetComponent
|
||||||
v-if="widgetType === 'apod'"
|
|
||||||
:options="widgetOptions"
|
:options="widgetOptions"
|
||||||
@loading="setLoaderState"
|
@loading="setLoaderState"
|
||||||
@error="handleError"
|
@error="handleError"
|
||||||
:ref="widgetRef"
|
:ref="widgetRef"
|
||||||
/>
|
/>
|
||||||
<Clock
|
|
||||||
v-else-if="widgetType === 'clock'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<CryptoPriceChart
|
|
||||||
v-else-if="widgetType === 'crypto-price-chart'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<CryptoWatchList
|
|
||||||
v-else-if="widgetType === 'crypto-watch-list'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<CodeStats
|
|
||||||
v-else-if="widgetType === 'code-stats'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<EmbedWidget
|
|
||||||
v-else-if="widgetType === 'embed'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<ExchangeRates
|
|
||||||
v-else-if="widgetType === 'exchange-rates'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<Flights
|
|
||||||
v-else-if="widgetType === 'flight-data'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<GitHubTrending
|
|
||||||
v-else-if="widgetType === 'github-trending-repos'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<GitHubProfile
|
|
||||||
v-else-if="widgetType === 'github-profile-stats'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<HealthChecks
|
|
||||||
v-else-if="widgetType === 'health-checks'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<IframeWidget
|
|
||||||
v-else-if="widgetType === 'iframe'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<Jokes
|
|
||||||
v-else-if="widgetType === 'joke'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<NdCpuHistory
|
|
||||||
v-else-if="widgetType === 'nd-cpu-history'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<NdLoadHistory
|
|
||||||
v-else-if="widgetType === 'nd-load-history'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<NdRamHistory
|
|
||||||
v-else-if="widgetType === 'nd-ram-history'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<NewsHeadlines
|
|
||||||
v-else-if="widgetType === 'news-headlines'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<PiHoleStats
|
|
||||||
v-else-if="widgetType === 'pi-hole-stats'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<PiHoleTopQueries
|
|
||||||
v-else-if="widgetType === 'pi-hole-top-queries'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<PiHoleTraffic
|
|
||||||
v-else-if="widgetType === 'pi-hole-traffic'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<PublicHolidays
|
|
||||||
v-else-if="widgetType === 'public-holidays'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<PublicIp
|
|
||||||
v-else-if="widgetType === 'public-ip'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<RssFeed
|
|
||||||
v-else-if="widgetType === 'rss-feed'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<StatPing
|
|
||||||
v-else-if="widgetType === 'stat-ping'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<StockPriceChart
|
|
||||||
v-else-if="widgetType === 'stock-price-chart'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<SystemInfo
|
|
||||||
v-else-if="widgetType === 'system-info'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<TflStatus
|
|
||||||
v-else-if="widgetType === 'tfl-status'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<XkcdComic
|
|
||||||
v-else-if="widgetType === 'xkcd-comic'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<Weather
|
|
||||||
v-else-if="widgetType === 'weather'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<WeatherForecast
|
|
||||||
v-else-if="widgetType === 'weather-forecast'"
|
|
||||||
:options="widgetOptions"
|
|
||||||
@loading="setLoaderState"
|
|
||||||
@error="handleError"
|
|
||||||
:ref="widgetRef"
|
|
||||||
/>
|
|
||||||
<!-- No widget type specified -->
|
|
||||||
<div v-else>{{ handleError('Widget type was not found') }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Import form elements, icons and utils
|
|
||||||
|
import Vue from 'vue';
|
||||||
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 LoadingAnimation from '@/assets/interface-icons/loader.svg';
|
||||||
|
|
||||||
// Import available widgets (add new widgets alphabetically)
|
|
||||||
import Apod from '@/components/Widgets/Apod.vue';
|
|
||||||
import Clock from '@/components/Widgets/Clock.vue';
|
|
||||||
import CryptoPriceChart from '@/components/Widgets/CryptoPriceChart.vue';
|
|
||||||
import CryptoWatchList from '@/components/Widgets/CryptoWatchList.vue';
|
|
||||||
import CodeStats from '@/components/Widgets/CodeStats.vue';
|
|
||||||
import EmbedWidget from '@/components/Widgets/EmbedWidget.vue';
|
|
||||||
import ExchangeRates from '@/components/Widgets/ExchangeRates.vue';
|
|
||||||
import Flights from '@/components/Widgets/Flights.vue';
|
|
||||||
import GitHubTrending from '@/components/Widgets/GitHubTrending.vue';
|
|
||||||
import GitHubProfile from '@/components/Widgets/GitHubProfile.vue';
|
|
||||||
import HealthChecks from '@/components/Widgets/HealthChecks.vue';
|
|
||||||
import IframeWidget from '@/components/Widgets/IframeWidget.vue';
|
|
||||||
import Jokes from '@/components/Widgets/Jokes.vue';
|
|
||||||
import NdCpuHistory from '@/components/Widgets/NdCpuHistory.vue';
|
|
||||||
import NdLoadHistory from '@/components/Widgets/NdLoadHistory.vue';
|
|
||||||
import NdRamHistory from '@/components/Widgets/NdRamHistory.vue';
|
|
||||||
import NewsHeadlines from '@/components/Widgets/NewsHeadlines.vue';
|
|
||||||
import PiHoleStats from '@/components/Widgets/PiHoleStats.vue';
|
|
||||||
import PiHoleTopQueries from '@/components/Widgets/PiHoleTopQueries.vue';
|
|
||||||
import PiHoleTraffic from '@/components/Widgets/PiHoleTraffic.vue';
|
|
||||||
import PublicHolidays from '@/components/Widgets/PublicHolidays.vue';
|
|
||||||
import PublicIp from '@/components/Widgets/PublicIp.vue';
|
|
||||||
import RssFeed from '@/components/Widgets/RssFeed.vue';
|
|
||||||
import StatPing from '@/components/Widgets/StatPing.vue';
|
|
||||||
import StockPriceChart from '@/components/Widgets/StockPriceChart.vue';
|
|
||||||
import SystemInfo from '@/components/Widgets/SystemInfo.vue';
|
|
||||||
import TflStatus from '@/components/Widgets/TflStatus.vue';
|
|
||||||
import Weather from '@/components/Widgets/Weather.vue';
|
|
||||||
import WeatherForecast from '@/components/Widgets/WeatherForecast.vue';
|
|
||||||
import XkcdComic from '@/components/Widgets/XkcdComic.vue';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Widget',
|
name: 'Widget',
|
||||||
components: {
|
components: {
|
||||||
// Register form elements
|
|
||||||
Button,
|
Button,
|
||||||
UpdateIcon,
|
UpdateIcon,
|
||||||
OpenIcon,
|
OpenIcon,
|
||||||
LoadingAnimation,
|
LoadingAnimation,
|
||||||
// Register widget components
|
|
||||||
Apod,
|
|
||||||
Clock,
|
|
||||||
CodeStats,
|
|
||||||
CryptoPriceChart,
|
|
||||||
CryptoWatchList,
|
|
||||||
EmbedWidget,
|
|
||||||
ExchangeRates,
|
|
||||||
Flights,
|
|
||||||
GitHubTrending,
|
|
||||||
GitHubProfile,
|
|
||||||
HealthChecks,
|
|
||||||
IframeWidget,
|
|
||||||
Jokes,
|
|
||||||
NdCpuHistory,
|
|
||||||
NdLoadHistory,
|
|
||||||
NdRamHistory,
|
|
||||||
NewsHeadlines,
|
|
||||||
PiHoleStats,
|
|
||||||
PiHoleTopQueries,
|
|
||||||
PiHoleTraffic,
|
|
||||||
PublicHolidays,
|
|
||||||
PublicIp,
|
|
||||||
RssFeed,
|
|
||||||
StatPing,
|
|
||||||
StockPriceChart,
|
|
||||||
SystemInfo,
|
|
||||||
TflStatus,
|
|
||||||
Weather,
|
|
||||||
WeatherForecast,
|
|
||||||
XkcdComic,
|
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
widget: Object,
|
widget: Object,
|
||||||
@ -359,6 +90,55 @@ export default {
|
|||||||
setLoaderState(loading) {
|
setLoaderState(loading) {
|
||||||
this.loading = loading;
|
this.loading = loading;
|
||||||
},
|
},
|
||||||
|
getComponent() {
|
||||||
|
/* eslint-disable global-require, max-len */
|
||||||
|
const widgetType = this.widget.type;
|
||||||
|
if (!widgetType) { // widget type not specified
|
||||||
|
this.handleError('Widget type was not specified');
|
||||||
|
return () => require('@/components/Widgets/Blank.vue').default;
|
||||||
|
}
|
||||||
|
switch (widgetType) {
|
||||||
|
case ('apod'): return () => require('@/components/Widgets/Apod.vue').default;
|
||||||
|
case ('clock'): return () => require('@/components/Widgets/Clock.vue').default;
|
||||||
|
case ('code-stats'): return () => require('@/components/Widgets/CodeStats.vue').default;
|
||||||
|
case ('crypto-price-chart'): return () => require('@/components/Widgets/CryptoPriceChart.vue').default;
|
||||||
|
case ('crypto-watch-list'): return () => require('@/components/Widgets/CryptoWatchList.vue').default;
|
||||||
|
case ('embed'): return () => require('@/components/Widgets/EmbedWidget.vue').default;
|
||||||
|
case ('exchange-rates'): return () => require('@/components/Widgets/ExchangeRates.vue').default;
|
||||||
|
case ('flight-data'): return () => require('@/components/Widgets/Flights.vue').default;
|
||||||
|
case ('github-trending-repos'): return () => require('@/components/Widgets/GitHubTrending.vue').default;
|
||||||
|
case ('github-profile-stats'): return () => require('@/components/Widgets/GitHubProfile.vue').default;
|
||||||
|
case ('health-checks'): return () => require('@/components/Widgets/HealthChecks.vue').default;
|
||||||
|
case ('iframe'): return () => require('@/components/Widgets/IframeWidget.vue').default;
|
||||||
|
case ('joke'): return () => require('@/components/Widgets/Jokes.vue').default;
|
||||||
|
case ('nd-cpu-history'): return () => require('@/components/Widgets/NdCpuHistory.vue').default;
|
||||||
|
case ('nd-load-history'): return () => require('@/components/Widgets/NdLoadHistory.vue').default;
|
||||||
|
case ('nd-ram-history'): return () => require('@/components/Widgets/NdRamHistory.vue').default;
|
||||||
|
case ('news-headlines'): return () => require('@/components/Widgets/NewsHeadlines.vue').default;
|
||||||
|
case ('pi-hole-stats'): return () => require('@/components/Widgets/PiHoleStats.vue').default;
|
||||||
|
case ('pi-hole-top-queries'): return () => require('@/components/Widgets/PiHoleTopQueries.vue').default;
|
||||||
|
case ('pi-hole-traffic'): return () => require('@/components/Widgets/PiHoleTraffic.vue').default;
|
||||||
|
case ('public-holidays'): return () => require('@/components/Widgets/PublicHolidays.vue').default;
|
||||||
|
case ('public-ip'): return () => require('@/components/Widgets/PublicIp.vue').default;
|
||||||
|
case ('rss-feed'): return () => require('@/components/Widgets/RssFeed.vue').default;
|
||||||
|
case ('stat-ping'): return () => require('@/components/Widgets/StatPing.vue').default;
|
||||||
|
case ('stock-price-chart'): return () => require('@/components/Widgets/StockPriceChart.vue').default;
|
||||||
|
case ('system-info'): return () => require('@/components/Widgets/SystemInfo.vue').default;
|
||||||
|
case ('tfl-status'): return () => require('@/components/Widgets/TflStatus.vue').default;
|
||||||
|
case ('xkcd-comic'): return () => require('@/components/Widgets/XkcdComic.vue').default;
|
||||||
|
case ('weather'): return () => require('@/components/Widgets/Weather.vue').default;
|
||||||
|
case ('weather-forecast'): return () => require('@/components/Widgets/WeatherForecast.vue').default;
|
||||||
|
default: { // No widget found for specified type
|
||||||
|
this.handleError(`Widget not found: ${widgetType}`);
|
||||||
|
return () => require('@/components/Widgets/Blank.vue').default;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* eslint-enable global-require, max-len */
|
||||||
|
},
|
||||||
|
},
|
||||||
|
beforeMount() {
|
||||||
|
const WidgetComponent = this.getComponent();
|
||||||
|
Vue.component('WidgetComponent', WidgetComponent());
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user