+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
-
+
{{ handleError('Widget type was not found') }}
@@ -265,17 +378,32 @@ export default {
OpenIcon,
LoadingAnimation,
// Register widget components
+ AnonAddy: () => import('@/components/Widgets/AnonAddy.vue'),
Apod: () => import('@/components/Widgets/Apod.vue'),
Clock: () => import('@/components/Widgets/Clock.vue'),
CodeStats: () => import('@/components/Widgets/CodeStats.vue'),
+ CovidStats: () => import('@/components/Widgets/CovidStats.vue'),
CryptoPriceChart: () => import('@/components/Widgets/CryptoPriceChart.vue'),
CryptoWatchList: () => import('@/components/Widgets/CryptoWatchList.vue'),
CveVulnerabilities: () => import('@/components/Widgets/CveVulnerabilities.vue'),
EmbedWidget: () => import('@/components/Widgets/EmbedWidget.vue'),
+ EthGasPrices: () => import('@/components/Widgets/EthGasPrices.vue'),
ExchangeRates: () => import('@/components/Widgets/ExchangeRates.vue'),
Flights: () => import('@/components/Widgets/Flights.vue'),
GitHubTrending: () => import('@/components/Widgets/GitHubTrending.vue'),
GitHubProfile: () => import('@/components/Widgets/GitHubProfile.vue'),
+ GlAlerts: () => import('@/components/Widgets/GlAlerts.vue'),
+ GlCpuCores: () => import('@/components/Widgets/GlCpuCores.vue'),
+ GlCpuGauge: () => import('@/components/Widgets/GlCpuGauge.vue'),
+ GlCpuHistory: () => import('@/components/Widgets/GlCpuHistory.vue'),
+ GlDiskIo: () => import('@/components/Widgets/GlDiskIo.vue'),
+ GlDiskSpace: () => import('@/components/Widgets/GlDiskSpace.vue'),
+ GlLoadHistory: () => import('@/components/Widgets/GlLoadHistory.vue'),
+ GlMemGauge: () => import('@/components/Widgets/GlMemGauge.vue'),
+ GlMemHistory: () => import('@/components/Widgets/GlMemHistory.vue'),
+ GlNetworkInterfaces: () => import('@/components/Widgets/GlNetworkInterfaces.vue'),
+ GlNetworkTraffic: () => import('@/components/Widgets/GlNetworkTraffic.vue'),
+ GlSystemLoad: () => import('@/components/Widgets/GlSystemLoad.vue'),
HealthChecks: () => import('@/components/Widgets/HealthChecks.vue'),
IframeWidget: () => import('@/components/Widgets/IframeWidget.vue'),
Jokes: () => import('@/components/Widgets/Jokes.vue'),
@@ -294,6 +422,7 @@ export default {
StockPriceChart: () => import('@/components/Widgets/StockPriceChart.vue'),
SystemInfo: () => import('@/components/Widgets/SystemInfo.vue'),
TflStatus: () => import('@/components/Widgets/TflStatus.vue'),
+ WalletBalance: () => import('@/components/Widgets/WalletBalance.vue'),
Weather: () => import('@/components/Widgets/Weather.vue'),
WeatherForecast: () => import('@/components/Widgets/WeatherForecast.vue'),
XkcdComic: () => import('@/components/Widgets/XkcdComic.vue'),
@@ -306,7 +435,6 @@ export default {
loading: false,
error: false,
errorMsg: null,
- updater: null, // Stores interval
}),
computed: {
/* Returns the widget type, shows error if not specified */
@@ -321,31 +449,19 @@ export default {
widgetOptions() {
const options = this.widget.options || {};
const useProxy = !!this.widget.useProxy;
- const updateInterval = this.widget.updateInterval || 0;
+ const updateInterval = this.widget.updateInterval !== undefined
+ ? 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 */
update() {
+ this.error = false;
this.$refs[this.widgetRef].update();
},
/* Shows message when error occurred */
@@ -362,17 +478,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);
- },
};
@@ -404,6 +509,15 @@ export default {
right: 1.75rem;
}
}
+
+ .widget-wrap {
+ &.has-error {
+ cursor: not-allowed;
+ opacity: 0.5;
+ border-radius: var(--curve-factor);
+ background: #ffff0080;
+ }
+ }
// Error message output
.widget-error {
p.error-msg {
@@ -418,6 +532,13 @@ export default {
font-size: 0.85rem;
margin: 0.5rem auto;
}
+ p.retry-link {
+ cursor: pointer;
+ text-decoration: underline;
+ color: var(--widget-text-color);
+ font-size: 0.85rem;
+ margin: 0;
+ }
}
// Loading spinner
.loading {
diff --git a/src/components/Workspace/SideBar.vue b/src/components/Workspace/SideBar.vue
index 94595b6e..40ac0d02 100644
--- a/src/components/Workspace/SideBar.vue
+++ b/src/components/Workspace/SideBar.vue
@@ -55,6 +55,7 @@ export default {
/* Toggles the section clicked, and closes all other sections */
openSection(index) {
this.isOpen = this.isOpen.map((val, ind) => (ind !== index ? false : !val));
+ if (this.sections[index].widgets) this.$emit('launch-widget', this.sections[index].widgets);
},
/* When item clicked, emit a launch event */
launchApp(options) {
diff --git a/src/components/Workspace/WidgetView.vue b/src/components/Workspace/WidgetView.vue
new file mode 100644
index 00000000..7ffa12b4
--- /dev/null
+++ b/src/components/Workspace/WidgetView.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/mixins/GlancesMixin.js b/src/mixins/GlancesMixin.js
new file mode 100644
index 00000000..413845e5
--- /dev/null
+++ b/src/mixins/GlancesMixin.js
@@ -0,0 +1,34 @@
+/** Reusable mixin for all Glances widgets */
+export default {
+ computed: {
+ /* Required, hostname (e.g. IP + port) for Glances instance */
+ hostname() {
+ if (!this.options.hostname) this.error('You must specify a \'hostname\' for Glaces');
+ return this.options.hostname;
+ },
+ /* Optionally specify the API version, defaults to V 3 */
+ apiVersion() {
+ return this.options.apiVersion || 3;
+ },
+ /* Optionally specify basic auth credentials for Glances instance */
+ credentials() {
+ if (this.options.username && this.options.password) {
+ const stringifiedUser = `${this.options.username}:${this.options.password}`;
+ const headers = { Authorization: `Basic ${window.btoa(stringifiedUser)}` };
+ return { headers };
+ }
+ return null;
+ },
+ },
+ methods: {
+ /* Make the request to Glances API, and calls handler function with results
+ * Requires endpoint attribute and processData method to be implemented by child */
+ fetchData() {
+ this.makeRequest(this.endpoint, this.credentials).then(this.processData);
+ },
+ /* Returns URL to Glances API endpoint */
+ makeGlancesUrl(apiPath) {
+ return `${this.hostname}/api/${this.apiVersion}/${apiPath}`;
+ },
+ },
+};
diff --git a/src/mixins/WidgetMixin.js b/src/mixins/WidgetMixin.js
index 8ae161a8..53dfc5ef 100644
--- a/src/mixins/WidgetMixin.js
+++ b/src/mixins/WidgetMixin.js
@@ -17,10 +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() {
@@ -30,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 */
@@ -37,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);
@@ -44,8 +77,10 @@ const WidgetMixin = {
},
/* When a data request update starts, show loader */
startLoading() {
- this.$emit('loading', true);
- this.progress.start();
+ if (!this.disableLoader) {
+ this.$emit('loading', true);
+ this.progress.start();
+ }
},
/* When a data request finishes, hide loader */
finishLoading() {
@@ -57,20 +92,26 @@ const WidgetMixin = {
this.finishLoading();
},
/* Used as v-tooltip, pass text content in, and will show on hover */
- tooltip(content) {
- return { content, trigger: 'hover focus', delay: 250 };
+ tooltip(content, html = false) {
+ return {
+ content, html, trigger: 'hover focus', delay: 250,
+ };
},
/* Makes data request, returns promise */
- makeRequest(endpoint, options) {
+ makeRequest(endpoint, options, protocol, body) {
// Request Options
- const method = 'GET';
+ const method = protocol || 'GET';
const url = this.useProxy ? this.proxyReqEndpoint : endpoint;
- const CustomHeaders = options ? JSON.stringify(options) : null;
+ const data = JSON.stringify(body || {});
+ const CustomHeaders = options || null;
const headers = this.useProxy
- ? { 'Target-URL': endpoint, CustomHeaders } : CustomHeaders;
+ ? { 'Target-URL': endpoint, CustomHeaders: JSON.stringify(CustomHeaders) } : CustomHeaders;
+ const requestConfig = {
+ method, url, headers, data,
+ };
// Make request
return new Promise((resolve, reject) => {
- axios.request({ method, url, headers })
+ axios.request(requestConfig)
.then((response) => {
if (response.data.success === false) {
this.error('Proxy returned error from target server', response.data.message);
diff --git a/src/utils/MiscHelpers.js b/src/utils/MiscHelpers.js
index c560d089..e84b132f 100644
--- a/src/utils/MiscHelpers.js
+++ b/src/utils/MiscHelpers.js
@@ -86,7 +86,17 @@ export const showNumAsThousand = (bigNum) => {
/* Capitalizes the first letter of each word within a string */
export const capitalize = (str) => {
- return str.replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase())));
+ const words = str.replaceAll('_', ' ').replaceAll('-', ' ');
+ return words.replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase())));
+};
+
+/* Given a mem size in bytes, will return it in appropriate unit */
+export const convertBytes = (bytes, decimals = 2) => {
+ if (bytes === 0) return '0 Bytes';
+ const k = 1024;
+ const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ return `${parseFloat((bytes / (k ** i)).toFixed(decimals))} ${sizes[i]}`;
};
/* Round price to appropriate number of decimals */
@@ -107,6 +117,33 @@ export const truncateStr = (str, len = 60, ellipse = '...') => {
return str.length > len + ellipse.length ? `${str.slice(0, len)}${ellipse}` : str;
};
+/* Given two timestamp, return the difference in text format, e.g. '10 minutes' */
+export const getTimeDifference = (startTime, endTime) => {
+ const msDifference = new Date(endTime).getTime() - new Date(startTime).getTime();
+ const diff = Math.abs(Math.round(msDifference / 1000));
+ const divide = (time, round) => Math.round(time / round);
+ if (diff < 60) return `${divide(diff, 1)} seconds`;
+ if (diff < 3600) return `${divide(diff, 60)} minutes`;
+ if (diff < 86400) return `${divide(diff, 3600)} hours`;
+ if (diff < 604800) return `${divide(diff, 86400)} days`;
+ if (diff >= 604800) return `${divide(diff, 604800)} weeks`;
+ return 'unknown';
+};
+
+/* Given a timestamp, return how long ago it was, e.g. '10 minutes' */
+export const getTimeAgo = (dateTime) => {
+ const now = new Date().getTime();
+ const diffStr = getTimeDifference(dateTime, now);
+ if (diffStr === 'unknown') return diffStr;
+ return `${diffStr} ago`;
+};
+
+/* Given the name of a CSS variable, returns it's value */
+export const getValueFromCss = (colorVar) => {
+ const cssProps = getComputedStyle(document.documentElement);
+ return cssProps.getPropertyValue(`--${colorVar}`).trim();
+};
+
/* Given a currency code, return the corresponding unicode symbol */
export const findCurrencySymbol = (currencyCode) => {
const code = currencyCode.toUpperCase().trim();
diff --git a/src/utils/defaults.js b/src/utils/defaults.js
index cedd90d9..bc0d4901 100644
--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@@ -206,11 +206,15 @@ module.exports = {
},
/* API endpoints for widgets that need to fetch external data */
widgetApiEndpoints: {
+ anonAddy: 'https://app.anonaddy.com',
astronomyPictureOfTheDay: 'https://apodapi.herokuapp.com/api',
codeStats: 'https://codestats.net/',
+ covidStats: 'https://disease.sh/v3/covid-19',
cryptoPrices: 'https://api.coingecko.com/api/v3/coins/',
cryptoWatchList: 'https://api.coingecko.com/api/v3/coins/markets/',
cveVulnerabilities: 'https://www.cvedetails.com/json-feed.php',
+ ethGasPrices: 'https://ethgas.watch/api/gas',
+ ethGasHistory: 'https://ethgas.watch/api/gas/trend',
exchangeRates: 'https://v6.exchangerate-api.com/v6/',
flights: 'https://aerodatabox.p.rapidapi.com/flights/airports/icao/',
githubTrending: 'https://gh-trending-repos.herokuapp.com/',
@@ -224,6 +228,8 @@ module.exports = {
sportsScores: 'https://www.thesportsdb.com/api/v1/json',
stockPriceChart: 'https://www.alphavantage.co/query',
tflStatus: 'https://api.tfl.gov.uk/line/mode/tube/status',
+ walletBalance: 'https://api.blockcypher.com/v1',
+ walletQrCode: 'https://www.bitcoinqrcodemaker.com/api',
weather: 'https://api.openweathermap.org/data/2.5/weather',
weatherForecast: 'https://api.openweathermap.org/data/2.5/forecast/daily',
xkcdComic: 'https://xkcd.vercel.app/',
diff --git a/src/views/Workspace.vue b/src/views/Workspace.vue
index 80d22f33..452b3e2d 100644
--- a/src/views/Workspace.vue
+++ b/src/views/Workspace.vue
@@ -1,8 +1,14 @@
-
+
+
@@ -10,6 +16,7 @@
import HomeMixin from '@/mixins/HomeMixin';
import SideBar from '@/components/Workspace/SideBar';
import WebContent from '@/components/Workspace/WebContent';
+import WidgetView from '@/components/Workspace/WidgetView';
import MultiTaskingWebComtent from '@/components/Workspace/MultiTaskingWebComtent';
import Defaults from '@/utils/defaults';
import { GetTheme, ApplyLocalTheme, ApplyCustomVariables } from '@/utils/ThemeHelper';
@@ -19,6 +26,7 @@ export default {
mixins: [HomeMixin],
data: () => ({
url: '',
+ widgets: null,
GetTheme,
ApplyLocalTheme,
ApplyCustomVariables,
@@ -37,6 +45,7 @@ export default {
components: {
SideBar,
WebContent,
+ WidgetView,
MultiTaskingWebComtent,
},
methods: {
@@ -46,6 +55,11 @@ export default {
} else {
this.url = options.url;
}
+ this.widgets = null;
+ },
+ launchWidget(widgets) {
+ this.url = '';
+ this.widgets = widgets;
},
setTheme() {
const theme = this.GetTheme();
