💄 Shows country flag in exchange rate widget

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