mirror of
https://github.com/Lissy93/dashy.git
synced 2024-11-23 21:23:28 +03:00
💄 Shows country flag in exchange rate widget
This commit is contained in:
Alicia Sykes
parent
c4ac847fc4
commit
c650743384
@ -190,7 +190,7 @@ In [`./src/utils/defaults.js`](https://github.com/Lissy93/dashy/blob/master/src/
|
||||
|
||||
First, import the helper function:
|
||||
```javascript
|
||||
import { shouldBeVisible } from '@/utils/MiscHelpers';
|
||||
import { shouldBeVisible } from '@/utils/SectionHelpers';
|
||||
```
|
||||
|
||||
Then you can create a computed value, that calls this function, passing in the route name:
|
||||
|
||||
137
docs/widgets.md
137
docs/widgets.md
@ -14,15 +14,15 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
|
||||
- [Crypto Watch List](#crypto-watch-list)
|
||||
- [Crypto Price History](#crypto-token-price-history)
|
||||
- [RSS Feed](#rss-feed)
|
||||
- [XKCD Comics](#xkcd-comics)
|
||||
- [Code Stats](#code-stats)
|
||||
- [Vulnerability Feed](#vulnerability-feed)
|
||||
- [Sports Scores](#sports-scores)
|
||||
- [Exchange Rates](#exchange-rates)
|
||||
- [Public Holidays](#public-holidays)
|
||||
- [TFL Status](#tfl-status)
|
||||
- [Exchange Rates](#exchange-rates)
|
||||
- [Stock Price History](#stock-price-history)
|
||||
- [Joke of the Day](#joke)
|
||||
- [XKCD Comics](#xkcd-comics)
|
||||
- [News Headlines](#news-headlines)
|
||||
- [Flight Data](#flight-data)
|
||||
- [NASA APOD](#astronomy-picture-of-the-day)
|
||||
@ -267,35 +267,6 @@ Display news and updates from any RSS-enabled service.
|
||||
- **Price**: 🟠 Free Plan (up to 10,000 requests / day)
|
||||
- **Privacy**: _See [Rss2Json Privacy Policy](https://rss2json.com/privacy-policy)_
|
||||
|
||||
|
||||
---
|
||||
|
||||
### XKCD Comics
|
||||
|
||||
Have a laugh with the daily comic from [XKCD](https://xkcd.com/). A classic webcomic website covering everything from Linux, math, romance, science and language. All fields are optional.
|
||||
|
||||
<p align="center"><img width="400" src="https://i.ibb.co/kqV68hy/xkcd-comic.png" /></p>
|
||||
|
||||
##### Options
|
||||
|
||||
**Field** | **Type** | **Required** | **Description**
|
||||
--- | --- | --- | ---
|
||||
**`comic`** | `string / number` | _Optional_ | Choose which comic to display. Set to either `random`, `latest` or the series number of a specific comic, like `627`. Defaults to `latest`
|
||||
|
||||
##### Example
|
||||
|
||||
```yaml
|
||||
- type: xkcd-comic
|
||||
options:
|
||||
comic: latest
|
||||
```
|
||||
|
||||
##### Info
|
||||
- **CORS**: 🟢 Enabled
|
||||
- **Auth**: 🟢 Not Required
|
||||
- **Price**: 🟢 Free
|
||||
- **Privacy**: ⚫ No Policy Available
|
||||
|
||||
---
|
||||
|
||||
### Code Stats
|
||||
@ -405,12 +376,49 @@ Show recent scores and upcoming matches from your favourite sports team. Data is
|
||||
##### Info
|
||||
- **CORS**: 🟢 Enabled
|
||||
- **Auth**: 🟠 Optional
|
||||
- **Price**: 🟠 Free plan (upto 30 requests / second, limited endpoints)
|
||||
- **Price**: 🟠 Free plan (upto 30 requests / minute, limited endpoints)
|
||||
- **Host**: Managed Instance Only
|
||||
- **Privacy**: ⚫ No Policy Available
|
||||
|
||||
---
|
||||
|
||||
### Exchange Rates
|
||||
|
||||
Display current FX rates in your native currency. Hover over a row to view more info, or click to show rates in that currency.
|
||||
|
||||
<p align="center"><img width="400" src="https://i.ibb.co/fMdyLTB/exchange-rates.png" /></p>
|
||||
|
||||
##### Options
|
||||
|
||||
**Field** | **Type** | **Required** | **Description**
|
||||
--- | --- | --- | ---
|
||||
**`inputCurrency`** | `string` | Required | The base currency to show results in. Specified as a 3-letter ISO-4217 code, see [here](https://www.exchangerate-api.com/docs/supported-currencies) for the full list of supported currencies, and their symbols
|
||||
**`outputCurrencies`** | `array` | Required | List or currencies to show results for. Specified as a 3-letter ISO-4217 code, see [here](https://www.exchangerate-api.com/docs/supported-currencies) for the full list of supported currencies, and their symbols
|
||||
**`apiKey`** | `string` | Required | API key for [exchangerate-api.com](https://www.exchangerate-api.com/), usually a 24-digit alpha-numeric string. You can sign up for a free account [here](https://app.exchangerate-api.com/sign-up)
|
||||
|
||||
##### Example
|
||||
|
||||
```yaml
|
||||
- type: exchange-rates
|
||||
options:
|
||||
apiKey: xxxxxxxxxxxxxxxxxxxxxxxx
|
||||
inputCurrency: GBP
|
||||
outputCurrencies:
|
||||
- USD
|
||||
- JPY
|
||||
- HKD
|
||||
- KPW
|
||||
```
|
||||
|
||||
##### Info
|
||||
- **CORS**: 🟢 Enabled
|
||||
- **Auth**: 🔴 Required
|
||||
- **Price**: 🟠 Free plan (upto 100,000 requests/ month)
|
||||
- **Host**: Managed Instance Only
|
||||
- **Privacy**: _See [ExchangeRateAPI Privacy Policy](https://www.exchangerate-api.com/terms)_
|
||||
|
||||
---
|
||||
|
||||
### Public Holidays
|
||||
|
||||
Counting down to the next day off work? This widget displays upcoming public holidays for your country. Data is fetched from [Enrico](http://kayaposoft.com/enrico/)
|
||||
@ -484,43 +492,6 @@ Shows real-time tube status of the London Underground. All fields are optional.
|
||||
|
||||
---
|
||||
|
||||
### Exchange Rates
|
||||
|
||||
Display current FX rates in your native currency
|
||||
|
||||
<p align="center"><img width="400" src="https://i.ibb.co/M905JHM/exchange-rates.png" /></p>
|
||||
|
||||
##### Options
|
||||
|
||||
**Field** | **Type** | **Required** | **Description**
|
||||
--- | --- | --- | ---
|
||||
**`apiKey`** | `string` | Required | API key for [exchangerate-api.com](https://www.exchangerate-api.com/), usually a 24-digit alpha-numeric string. You can sign up for a free account [here](https://app.exchangerate-api.com/sign-up)
|
||||
**`inputCurrency`** | `string` | Required | The base currency to show results in. Specified as a 3-letter ISO-4217 code, see [here](https://www.exchangerate-api.com/docs/supported-currencies) for the full list of supported currencies, and their symbols
|
||||
**`outputCurrencies`** | `array` | Required | List or currencies to show results for. Specified as a 3-letter ISO-4217 code, see [here](https://www.exchangerate-api.com/docs/supported-currencies) for the full list of supported currencies, and their symbols
|
||||
|
||||
##### Example
|
||||
|
||||
```yaml
|
||||
- type: exchange-rates
|
||||
options:
|
||||
apiKey: xxxxxxxxxxxxxxxxxxxxxxxx
|
||||
inputCurrency: GBP
|
||||
outputCurrencies:
|
||||
- USD
|
||||
- JPY
|
||||
- HKD
|
||||
- KPW
|
||||
```
|
||||
|
||||
##### Info
|
||||
- **CORS**: 🟢 Enabled
|
||||
- **Auth**: 🔴 Required
|
||||
- **Price**: 🟠 Free plan (upto 100,000 requests/ month)
|
||||
- **Host**: Managed Instance Only
|
||||
- **Privacy**: _See [ExchangeRateAPI Privacy Policy](https://www.exchangerate-api.com/terms)_
|
||||
|
||||
---
|
||||
|
||||
### Stock Price History
|
||||
|
||||
Shows recent price history for a given publicly-traded stock or share
|
||||
@ -588,6 +559,34 @@ Renders a programming or generic joke. Data is fetched from the [JokesAPI](https
|
||||
|
||||
---
|
||||
|
||||
### XKCD Comics
|
||||
|
||||
Have a laugh with the daily comic from [XKCD](https://xkcd.com/). A classic webcomic website covering everything from Linux, math, romance, science and language. All fields are optional.
|
||||
|
||||
<p align="center"><img width="400" src="https://i.ibb.co/kqV68hy/xkcd-comic.png" /></p>
|
||||
|
||||
##### Options
|
||||
|
||||
**Field** | **Type** | **Required** | **Description**
|
||||
--- | --- | --- | ---
|
||||
**`comic`** | `string / number` | _Optional_ | Choose which comic to display. Set to either `random`, `latest` or the series number of a specific comic, like `627`. Defaults to `latest`
|
||||
|
||||
##### Example
|
||||
|
||||
```yaml
|
||||
- type: xkcd-comic
|
||||
options:
|
||||
comic: latest
|
||||
```
|
||||
|
||||
##### Info
|
||||
- **CORS**: 🟢 Enabled
|
||||
- **Auth**: 🟢 Not Required
|
||||
- **Price**: 🟢 Free
|
||||
- **Privacy**: ⚫ No Policy Available
|
||||
|
||||
---
|
||||
|
||||
### News Headlines
|
||||
|
||||
Displays the latest news, click to read full article. Date is fetched from various news sources using [Currents API](https://currentsapi.services/en)
|
||||
|
||||
@ -1,11 +1,27 @@
|
||||
<template>
|
||||
<div class="exchange-rate-wrapper">
|
||||
<template v-if="exchangeRates">
|
||||
<p class="exchange-base-currency">Value of 1 {{ inputCurrency }}</p>
|
||||
<div v-for="(exchange, index) in exchangeRates" :key="index" class="exchange-rate-row">
|
||||
<p>{{ exchange.currency }}</p>
|
||||
<p>{{ exchange.value | applySymbol(inputCurrency) }}</p>
|
||||
<p class="exchange-base-currency">Value of 1 {{ newInputCurrency || inputCurrency }}</p>
|
||||
<p class="reset" v-if="newInputCurrency" @click="updateInputCurrency(inputCurrency)">
|
||||
⇦ Reset back to {{ inputCurrency }}
|
||||
</p>
|
||||
<div
|
||||
v-for="(exchange, index) in exchangeRates" :key="index"
|
||||
v-tooltip="tooltip(makeInverse(exchange))"
|
||||
class="exchange-rate-row"
|
||||
>
|
||||
<p class="country" @click="updateInputCurrency(exchange.currency)">
|
||||
<img :src="exchange.currency | flagUrl" alt="Flag" class="flag" />
|
||||
{{ exchange.currency }}
|
||||
</p>
|
||||
<p class="value">
|
||||
<span class="input-currency">
|
||||
{{ 1 | applySymbol(newInputCurrency || inputCurrency) }} =
|
||||
</span>
|
||||
{{ exchange.value | applySymbol(exchange.currency) }}
|
||||
</p>
|
||||
</div>
|
||||
<p class="last-updated">Updated on {{ lastUpdated }}</p>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
@ -14,7 +30,7 @@
|
||||
import axios from 'axios';
|
||||
import WidgetMixin from '@/mixins/WidgetMixin';
|
||||
import { widgetApiEndpoints } from '@/utils/defaults';
|
||||
import { findCurrencySymbol } from '@/utils/MiscHelpers';
|
||||
import { findCurrencySymbol, getCurrencyFlag, timestampToDate } from '@/utils/MiscHelpers';
|
||||
|
||||
export default {
|
||||
mixins: [WidgetMixin],
|
||||
@ -22,6 +38,8 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
exchangeRates: null,
|
||||
newInputCurrency: null,
|
||||
lastUpdated: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -38,13 +56,17 @@ export default {
|
||||
return this.options.outputCurrencies || [];
|
||||
},
|
||||
endpoint() {
|
||||
return `${widgetApiEndpoints.exchangeRates}${this.apiKey}/latest/${this.inputCurrency}`;
|
||||
const currency = this.newInputCurrency || this.inputCurrency;
|
||||
return `${widgetApiEndpoints.exchangeRates}${this.apiKey}/latest/${currency}`;
|
||||
},
|
||||
},
|
||||
filters: {
|
||||
/* Appends currency symbol onto price */
|
||||
applySymbol(price, inputCurrency) {
|
||||
return `${findCurrencySymbol(inputCurrency)} ${price}`;
|
||||
return `${findCurrencySymbol(inputCurrency)}${price}`;
|
||||
},
|
||||
flagUrl(currency) {
|
||||
return getCurrencyFlag(currency);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
@ -70,6 +92,20 @@ export default {
|
||||
}
|
||||
});
|
||||
this.exchangeRates = results;
|
||||
this.lastUpdated = timestampToDate(data.time_last_update_unix * 1000);
|
||||
},
|
||||
updateInputCurrency(newCurrency) {
|
||||
this.startLoading();
|
||||
if (newCurrency === this.inputCurrency) {
|
||||
this.newInputCurrency = null;
|
||||
} else {
|
||||
this.newInputCurrency = newCurrency;
|
||||
}
|
||||
this.fetchData();
|
||||
},
|
||||
makeInverse(exchange) {
|
||||
return `1 ${exchange.currency} = ${(1 / exchange.value).toFixed(2)}`
|
||||
+ ` ${this.newInputCurrency || this.inputCurrency}`;
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -77,13 +113,22 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.exchange-rate-wrapper {
|
||||
max-width: 300px;
|
||||
max-width: 380px;
|
||||
margin: 0 auto;
|
||||
p.exchange-base-currency {
|
||||
margin: 0.25rem 0;
|
||||
color: var(--widget-text-color);
|
||||
opacity: var(--dimming-factor);
|
||||
}
|
||||
p.reset {
|
||||
opacity: var(--dimming-factor);
|
||||
color: var(--widget-text-color);
|
||||
margin: 0.25rem 0;
|
||||
font-size: 0.8rem;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
&:hover { opacity: 1; }
|
||||
}
|
||||
.exchange-rate-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -93,9 +138,40 @@ export default {
|
||||
margin: 0;
|
||||
color: var(--widget-text-color);
|
||||
}
|
||||
p.country {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img.flag {
|
||||
border-radius: var(--curve-factor);
|
||||
margin-right: 0.5rem;
|
||||
max-width: 40px;
|
||||
}
|
||||
}
|
||||
p.value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: var(--font-monospace);
|
||||
span.input-currency {
|
||||
display: none;
|
||||
opacity: var(--dimming-factor);
|
||||
font-size: 0.8rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px dashed var(--widget-text-color);
|
||||
}
|
||||
&:hover {
|
||||
p.value span.input-currency { display: block; }
|
||||
}
|
||||
}
|
||||
p.last-updated {
|
||||
opacity: var(--dimming-factor);
|
||||
color: var(--widget-text-color);
|
||||
font-family: var(--font-monospace);
|
||||
margin: 0.2rem 0;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -44,6 +44,9 @@ const WidgetMixin = {
|
||||
fetchData() {
|
||||
this.finishLoading();
|
||||
},
|
||||
tooltip(content) {
|
||||
return { content, trigger: 'hover focus', delay: 250 };
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user