🔀 Merge pull request #813 from Lissy93/FIX/gluetun-widget-lint

[REFACTOR] Lint, error catching and translations for Gluetun Status Widget

docs/widgets.md

@@ -1838,7 +1838,7 @@ Display info from the Gluetun VPN container public IP API. This can show the IP
 
 **Field** | **Type** | **Required** | **Description**
 --- | --- | --- | ---
-**`visibleFields`** | `string` |  Required | A comma separated list of the fields you want visible in the widget. You can have any number of the following : `public_ip`, `region`, `country`, `city`, `location`, `organisation`, `postal_code`, `timezone` 
+**`visibleFields`** | `string` |  Required | A comma separated list of the fields you want visible in the widget. You can have any number of the following : `public_ip`, `region`, `country`, `city`, `location`, `organisation`, `postal_code`, `timezone`. Defaults to just `public_ip` 
 **`host`** | `string` |  Required | The url to the gluetun HTTP control server. E.g. `http://gluetun:8000`
 
 

src/assets/locales/en.json

@@ -304,6 +304,16 @@
       "up": "Up",
       "down": "Down"
     },
+    "gluetun-status": {
+      "vpn-ip": "VPN IP",
+      "country": "Country",
+      "region": "Region",
+      "city": "City",
+      "post-code": "Post Code",
+      "location": "Location",
+      "timezone": "Timezone",
+      "organization": "Organization"
+    },
     "nextcloud": {
       "active": "active",
       "and": "and",

src/components/Widgets/GluetunStatus.vue

@@ -1,35 +1,35 @@
 <template>
   <div class="vpn-ip-addr-wrapper">
   <div class="ip-row public-ip" v-if="public_ip">
-    <span class="lbl">VPN IP</span>
+    <span class="lbl">{{ $t('widgets.gluetun-status.vpn-ip') }}</span>
     <span class="val">{{ public_ip }}</span>
   </div>
   <div class="ip-row" v-if="country">
-    <span class="lbl">Country</span>
+    <span class="lbl">{{ $t('widgets.gluetun-status.country') }}</span>
     <span class="val">{{ country }}</span>
   </div>
   <div class="ip-row" v-if="region">
-    <span class="lbl">Region</span>
+    <span class="lbl">{{ $t('widgets.gluetun-status.region') }}</span>
     <span class="val">{{ region }}</span>
   </div>
   <div class="ip-row" v-if="city">
-    <span class="lbl">City</span>
+    <span class="lbl">{{ $t('widgets.gluetun-status.city') }}</span>
     <span class="val">{{ city }}</span>
   </div>
   <div class="ip-row" v-if="postal_code">
-    <span class="lbl">Post Code</span>
+    <span class="lbl">{{ $t('widgets.gluetun-status.post-code') }}</span>
     <span class="val">{{ postal_code }}</span>
   </div>
   <div class="ip-row" v-if="location">
-    <span class="lbl">Location</span>
+    <span class="lbl">{{ $t('widgets.gluetun-status.location') }}</span>
     <span class="val">{{ location }}</span>
   </div>
   <div class="ip-row" v-if="timezone">
-    <span class="lbl">Timezone</span>
+    <span class="lbl">{{ $t('widgets.gluetun-status.timezone') }}</span>
     <span class="val">{{ timezone }}</span>
   </div>
   <div class="ip-row" v-if="organization">
-    <span class="lbl">Organization</span>
+    <span class="lbl">{{ $t('widgets.gluetun-status.organization') }}</span>
     <span class="val">{{ organization }}</span>
   </div>
 </div>
@@ -52,23 +52,32 @@ export default {
       timezone: null,
     };
   },
+  computed: {
+    visibleFields() {
+      return this.options.visibleFields || 'public_ip';
+    },
+    hostname() {
+      if (!this.options.hostname) this.error('`hostname` is required');
+      return this.options.hostname;
+    },
+  },
   methods: {
     /* Make GET request to Gluetun publicip API endpoint */
     fetchData() {
-      this.makeRequest(this.options.hostname + "/v1/publicip/ip").then(this.processData);
+      this.makeRequest(`${this.hostname}/v1/publicip/ip`).then(this.processData);
     },
     /* Assign data variables to the returned data */
     processData(ipInfo) {
-      var fields = this.options.visibleFields.split(",");
-      this.public_ip = fields.includes("public_ip") ? ipInfo.public_ip : null;
-      this.country = fields.includes("country") ?  ipInfo.country : null;
-      this.region = fields.includes("region") ? ipInfo.region : null;
-      this.city = fields.includes("city") ?  ipInfo.city : null;
-      this.location = fields.includes("location") ?  ipInfo.location : null;
-      this.organization = fields.includes("organization") ?  ipInfo.organization : null;
-      this.postal_code = fields.includes("postal_code") ?  ipInfo.postal_code : null;
-      this.timezone = fields.includes("timezone") ?  ipInfo.timezone : null;
-    }
+      const fields = this.visibleFields.split(',');
+      this.public_ip = fields.includes('public_ip') ? ipInfo.public_ip : null;
+      this.country = fields.includes('country') ? ipInfo.country : null;
+      this.region = fields.includes('region') ? ipInfo.region : null;
+      this.city = fields.includes('city') ? ipInfo.city : null;
+      this.location = fields.includes('location') ? ipInfo.location : null;
+      this.organization = fields.includes('organization') ? ipInfo.organization : null;
+      this.postal_code = fields.includes('postal_code') ? ipInfo.postal_code : null;
+      this.timezone = fields.includes('timezone') ? ipInfo.timezone : null;
+    },
   },
 };
 </script>