From 08de6b8f1743f8bc2e3621d26d46eb424b8bd019 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 17 Dec 2021 20:16:11 +0000
Subject: [PATCH] :sparkles: Adds widget for showing public IP

---
 docs/widgets.md                       | 21 +++++-
 src/components/Widgets/PublicIp.vue   | 93 +++++++++++++++++++++++++++
 src/components/Widgets/WidgetBase.vue |  9 +++
 src/utils/MiscHelpers.js              | 15 +++++
 src/utils/defaults.js                 |  1 +
 5 files changed, 138 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Widgets/PublicIp.vue

diff --git a/docs/widgets.md b/docs/widgets.md
index 04259561..ded52484 100644
--- a/docs/widgets.md
+++ b/docs/widgets.md
@@ -18,6 +18,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [Stock Price History](#stock-price-history)
   - [Joke of the Day](#joke)
   - [Flight Data](#flight-data)
+  - [Public IP Address](#public-ip)
 - [Self-Hosted Services Widgets](#dynamic-widgets)
   - [System Info](#system-info)
   - [CPU History](#cpu-history-netdata)
@@ -430,6 +431,24 @@ Displays airport departure and arrival flights, using data from [AeroDataBox](ht
 
 ---
 
+### Public IP
+
+Displays your public IP address, along with ISP name and approx location. Data is fetched from [IP-API.com](https://ip-api.com/).
+
+<p align="center"><img width="400" src="https://i.ibb.co/vc3c8zN/public-ip.png" /></p>
+
+##### Options
+
+_No config options._
+
+##### Example 
+
+```yaml
+- type: public-ip
+```
+
+---
+
 ## Self-Hosted Services Widgets
 
 
@@ -441,7 +460,7 @@ Displays info about the server which Dashy is hosted on. Includes user + host, o
 
 ##### Options
 
-No config options.
+_No config options._
 
 ##### Example 
 
diff --git a/src/components/Widgets/PublicIp.vue b/src/components/Widgets/PublicIp.vue
new file mode 100644
index 00000000..93c3450f
--- /dev/null
+++ b/src/components/Widgets/PublicIp.vue
@@ -0,0 +1,93 @@
+<template>
+<div class="ip-info-wrapper">
+  <p class="ip-address">{{ ipAddr }}</p>
+  <div class="region-wrapper" title="Open in Maps">
+    <img class="flag-image" :src="flagImg" />
+    <div class="info-text">
+      <p class="isp-name">{{ ispName }}</p>
+      <a class="ip-location" :href="mapsUrl">{{ location }}</a>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+import axios from 'axios';
+import WidgetMixin from '@/mixins/WidgetMixin';
+import { widgetApiEndpoints } from '@/utils/defaults';
+import { getCountryFlag, getMapUrl } from '@/utils/MiscHelpers';
+
+export default {
+  mixins: [WidgetMixin],
+  components: {},
+  data() {
+    return {
+      ipAddr: null,
+      location: null,
+      ispName: null,
+      flagImg: null,
+      mapsUrl: null,
+    };
+  },
+  methods: {
+    /* Make GET request to CoinGecko API endpoint */
+    fetchData() {
+      axios.get(widgetApiEndpoints.publicIp)
+        .then((response) => {
+          this.processData(response.data);
+        })
+        .catch((dataFetchError) => {
+          this.error('Unable to fetch IP info', dataFetchError);
+        })
+        .finally(() => {
+          this.finishLoading();
+        });
+    },
+    /* Assign data variables to the returned data */
+    processData(ipInfo) {
+      this.ipAddr = ipInfo.query;
+      this.ispName = ipInfo.isp;
+      this.location = `${ipInfo.city}, ${ipInfo.regionName}`;
+      this.flagImg = getCountryFlag(ipInfo.countryCode);
+      this.mapsUrl = getMapUrl({ lat: ipInfo.lat, lon: ipInfo.lon });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.ip-info-wrapper {
+  cursor: default;
+  p.ip-address {
+    font-size: 1.6rem;
+    margin: 0.5rem auto;
+    color: var(--widget-text-color);
+    font-family: var(--font-monospace);
+  }
+  .region-wrapper {
+    display: flex;
+    align-items: center;
+    img.flag-image {
+      width: 2rem;
+      border-radius: var(--curve-factor-small);
+      margin: 0.25rem 0.5rem 0 0;
+    }
+    a.ip-location {
+      font-size: 1rem;
+      margin: 0;
+      text-decoration: none;
+      color: var(--widget-text-color);
+      opacity: var(--dimming-factor);
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+    p.isp-name {
+      font-size: 1rem;
+      margin: 0.25rem 0 0 0;
+      color: var(--widget-text-color);
+    }
+  }
+}
+
+</style>
diff --git a/src/components/Widgets/WidgetBase.vue b/src/components/Widgets/WidgetBase.vue
index ec1e839b..f49bd345 100644
--- a/src/components/Widgets/WidgetBase.vue
+++ b/src/components/Widgets/WidgetBase.vue
@@ -109,6 +109,13 @@
         @error="handleError"
         :ref="widgetRef"
       />
+      <PublicIp
+        v-else-if="widgetType === 'public-ip'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <RssFeed
         v-else-if="widgetType === 'rss-feed'"
         :options="widgetOptions"
@@ -186,6 +193,7 @@ import NdCpuHistory from '@/components/Widgets/NdCpuHistory.vue';
 import NdLoadHistory from '@/components/Widgets/NdLoadHistory.vue';
 import NdRamHistory from '@/components/Widgets/NdRamHistory.vue';
 import PublicHolidays from '@/components/Widgets/PublicHolidays.vue';
+import PublicIp from '@/components/Widgets/PublicIp.vue';
 import RssFeed from '@/components/Widgets/RssFeed.vue';
 import StockPriceChart from '@/components/Widgets/StockPriceChart.vue';
 import SystemInfo from '@/components/Widgets/SystemInfo.vue';
@@ -216,6 +224,7 @@ export default {
     NdLoadHistory,
     NdRamHistory,
     PublicHolidays,
+    PublicIp,
     RssFeed,
     StockPriceChart,
     SystemInfo,
diff --git a/src/utils/MiscHelpers.js b/src/utils/MiscHelpers.js
index db099320..fca6a800 100644
--- a/src/utils/MiscHelpers.js
+++ b/src/utils/MiscHelpers.js
@@ -81,6 +81,21 @@ export const findCurrencySymbol = (currencyCode) => {
   return code;
 };
 
+/* Given a 2-digit country code, return path to flag image from Flagpedia */
+export const getCountryFlag = (countryCode, dimens) => {
+  const protocol = 'https';
+  const cdn = 'flagcdn.com';
+  const dimensions = dimens || '64x48';
+  const country = countryCode.toLowerCase();
+  const ext = 'png';
+  return `${protocol}://${cdn}/${dimensions}/${country}.${ext}`;
+};
+
+/* Given a Latitude & Longitude object, and optional zoom level, return link to OSM */
+export const getMapUrl = (location, zoom) => {
+  return `https://www.openstreetmap.org/#map=${zoom || 10}/${location.lat}/${location.lon}`;
+};
+
 /* Given a large number, will add commas to make more readable */
 export const putCommasInBigNum = (bigNum) => {
   const strNum = Number.isNaN(bigNum) ? bigNum : String(bigNum);
diff --git a/src/utils/defaults.js b/src/utils/defaults.js
index d5bcdd06..e19738c8 100644
--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@@ -219,6 +219,7 @@ module.exports = {
     rssToJson: 'https://api.rss2json.com/v1/api.json',
     codeStats: 'https://codestats.net/',
     holidays: 'https://kayaposoft.com/enrico/json/v2.0/?action=getHolidaysForDateRange',
+    publicIp: 'http://ip-api.com/json',
   },
   /* URLs for web search engines */
   searchEngineUrls: {