💄 Shows country flag in exchange rate widget

docs/development-guides.md

@@ -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:

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)

src/components/Widgets/ExchangeRates.vue

@@ -1,11 +1,27 @@
 <template>
 <div class="exchange-rate-wrapper">
   <template v-if="exchangeRates">
-    <p class="exchange-base-currency">Value of 1 {{ inputCurrency }}</p>
+    <p class="exchange-base-currency">Value of 1 {{ newInputCurrency || inputCurrency }}</p>
-    <div v-for="(exchange, index) in exchangeRates" :key="index" class="exchange-rate-row">
+    <p class="reset" v-if="newInputCurrency" @click="updateInputCurrency(inputCurrency)">
-      <p>{{ exchange.currency }}</p>
+      ⇦ Reset back to {{ inputCurrency }}
-      <p>{{ exchange.value | applySymbol(inputCurrency) }}</p>
+    </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,7 +56,8 @@ 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: {
@@ -46,6 +65,9 @@ export default {
     applySymbol(price, inputCurrency) {
       return `${findCurrencySymbol(inputCurrency)}${price}`;
     },
+    flagUrl(currency) {
+      return getCurrencyFlag(currency);
+    },
   },
   methods: {
     /* Make GET request to CoinGecko API endpoint */
@@ -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>

src/mixins/WidgetMixin.js

@@ -44,6 +44,9 @@ const WidgetMixin = {
     fetchData() {
       this.finishLoading();
     },
+    tooltip(content) {
+      return { content, trigger: 'hover focus', delay: 250 };
+    },
   },
 };