diff --git a/src/components/Widgets/DomainMonitor.vue b/src/components/Widgets/DomainMonitor.vue new file mode 100644 index 00000000..74c38665 --- /dev/null +++ b/src/components/Widgets/DomainMonitor.vue @@ -0,0 +1,238 @@ + + + + + diff --git a/src/components/Widgets/WidgetBase.vue b/src/components/Widgets/WidgetBase.vue index 089fc226..0f6a6d77 100644 --- a/src/components/Widgets/WidgetBase.vue +++ b/src/components/Widgets/WidgetBase.vue @@ -69,6 +69,13 @@ @error="handleError" :ref="widgetRef" /> + import('@/components/Widgets/CryptoPriceChart.vue'), CryptoWatchList: () => import('@/components/Widgets/CryptoWatchList.vue'), CveVulnerabilities: () => import('@/components/Widgets/CveVulnerabilities.vue'), + DomainMonitor: () => import('@/components/Widgets/DomainMonitor.vue'), EmbedWidget: () => import('@/components/Widgets/EmbedWidget.vue'), EthGasPrices: () => import('@/components/Widgets/EthGasPrices.vue'), ExchangeRates: () => import('@/components/Widgets/ExchangeRates.vue'), @@ -575,7 +583,8 @@ export default { cursor: not-allowed; opacity: 0.5; border-radius: var(--curve-factor); - background: #ffff0080; + background: #ffff0040; + &:hover { background: none; } } } // Error message output diff --git a/src/mixins/WidgetMixin.js b/src/mixins/WidgetMixin.js index e0d080a2..4e4385e2 100644 --- a/src/mixins/WidgetMixin.js +++ b/src/mixins/WidgetMixin.js @@ -20,7 +20,7 @@ const WidgetMixin = { overrideUpdateInterval: null, disableLoader: false, // Prevent ever showing the loader updater: null, // Stores interval - defaultTimeout: 10000, + defaultTimeout: 50000, }), /* When component mounted, fetch initial data */ mounted() { diff --git a/src/utils/MiscHelpers.js b/src/utils/MiscHelpers.js index 35a54a03..c3f59a8b 100644 --- a/src/utils/MiscHelpers.js +++ b/src/utils/MiscHelpers.js @@ -28,7 +28,7 @@ export const sanitize = (string) => { export const timestampToDate = (timestamp) => { const localFormat = navigator.language; const dateFormat = { - weekday: 'short', day: 'numeric', month: 'short', year: '2-digit', + weekday: 'short', day: 'numeric', month: 'short', year: 'numeric', }; const date = new Date(timestamp).toLocaleDateString(localFormat, dateFormat); return `${date}`; @@ -133,16 +133,18 @@ export const getTimeDifference = (startTime, endTime) => { 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`; + if (diff < 31557600) return `${divide(diff, 604800)} weeks`; + if (diff >= 31557600) return `${divide(diff, 31557600)} years`; 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 isHistorical = new Date(dateTime).getTime() < now; const diffStr = getTimeDifference(dateTime, now); if (diffStr === 'unknown') return diffStr; - return `${diffStr} ago`; + return isHistorical ? `${diffStr} ago` : `in ${diffStr}`; }; /* Given the name of a CSS variable, returns it's value */ diff --git a/src/utils/defaults.js b/src/utils/defaults.js index ad3af492..e1b41128 100644 --- a/src/utils/defaults.js +++ b/src/utils/defaults.js @@ -224,6 +224,7 @@ module.exports = { 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', + domainMonitor: 'https://api.whoapi.com', ethGasPrices: 'https://ethgas.watch/api/gas', ethGasHistory: 'https://ethgas.watch/api/gas/trend', exchangeRates: 'https://v6.exchangerate-api.com/v6/',