🩹 Fix capitalization in weather widget (#402)

src/components/Widgets/Weather.vue

@@ -23,7 +23,6 @@
 </template>
 
 <script>
-import axios from 'axios';
 import WidgetMixin from '@/mixins/WidgetMixin';
 import { widgetApiEndpoints } from '@/utils/defaults';
 
@@ -39,6 +38,9 @@ export default {
       weatherDetails: [],
     };
   },
+  mounted() {
+    this.checkProps();
+  },
   computed: {
     units() {
       return this.options.units || 'metric';
@@ -63,34 +65,21 @@ export default {
     },
   },
   methods: {
-    /* Extends mixin, and updates data. Called by parent component */
-    update() {
-      this.startLoading();
-      this.fetchWeather();
-    },
     /* Adds units symbol to temperature, depending on metric or imperial */
     processTemp(temp) {
       return `${Math.round(temp)}${this.tempDisplayUnits}`;
     },
+    fetchData() {
+      this.makeRequest(this.endpoint).then(this.processData);
+    },
     /* Fetches the weather from OpenWeatherMap, and processes results */
-    fetchWeather() {
+    processData(data) {
-      axios.get(this.endpoint)
+      this.icon = data.weather[0].icon;
-        .then((response) => {
+      this.description = data.weather[0].description;
-          this.loading = false;
+      this.temp = this.processTemp(data.main.temp);
-          const { data } = response;
+      if (!this.options.hideDetails) {
-          this.icon = data.weather[0].icon;
+        this.makeWeatherData(data);
-          this.description = data.weather[0].description;
+      }
-          this.temp = this.processTemp(data.main.temp);
-          if (!this.options.hideDetails) {
-            this.makeWeatherData(data);
-          }
-        })
-        .catch((error) => {
-          this.throwError('Failed to fetch weather', error);
-        })
-        .finally(() => {
-          this.finishLoading();
-        });
     },
     /* If showing additional info, then generate this data too */
     makeWeatherData(data) {
@@ -116,30 +105,12 @@ export default {
     /* Validate input props, and print warning if incorrect */
     checkProps() {
       const ops = this.options;
-      let valid = true;
+      if (!ops.apiKey) this.error('Missing API key for OpenWeatherMap');
-      if (!ops.apiKey) {
+      if (!ops.city) this.error('A city name is required to fetch weather');
-        this.throwError('Missing API key for OpenWeatherMap');
-        valid = false;
-      }
-      if (!ops.city) {
-        this.throwError('A city name is required to fetch weather');
-        valid = false;
-      }
       if (ops.units && ops.units !== 'metric' && ops.units !== 'imperial') {
-        this.throwError('Invalid units specified, must be either \'metric\' or \'imperial\'');
+        this.error('Invalid units specified, must be either \'metric\' or \'imperial\'');
-        valid = false;
       }
-      return valid;
     },
-    /* Just outputs an error message */
-    throwError(msg, error) {
-      this.error(msg, error);
-    },
-  },
-  created() {
-    if (this.checkProps()) {
-      this.fetchWeather();
-    }
   },
 };
 </script>
@@ -218,6 +189,9 @@ export default {
         &:not(:last-child) {
           border-bottom: 1px dashed var(--widget-text-color);
         }
+        span.lbl {
+          text-transform: capitalize;
+        }
       }
     }
   }

src/components/Widgets/WeatherForecast.vue

@@ -31,8 +31,8 @@
 </template>
 
 <script>
-import axios from 'axios';
 import WidgetMixin from '@/mixins/WidgetMixin';
+import { capitalize } from '@/utils/MiscHelpers';
 import { widgetApiEndpoints } from '@/utils/defaults';
 
 export default {
@@ -45,6 +45,9 @@ export default {
       moreInfo: [],
     };
   },
+  mounted() {
+    this.checkProps();
+  },
   computed: {
     units() {
       return this.options.units || 'metric';
@@ -73,11 +76,6 @@ export default {
     },
   },
   methods: {
-    /* Extends mixin, and updates data. Called by parent component */
-    update() {
-      this.startLoading();
-      this.fetchWeather();
-    },
     /* Adds units symbol to temperature, depending on metric or imperial */
     processTemp(temp) {
       return `${Math.round(temp)}${this.tempDisplayUnits}`;
@@ -88,23 +86,11 @@ export default {
       const dateFormat = { weekday: 'short', day: 'numeric', month: 'short' };
       return new Date(timestamp * 1000).toLocaleDateString(localFormat, dateFormat);
     },
-    /* Fetches the weather from OpenWeatherMap, and processes results */
+    fetchData() {
-    fetchWeather() {
+      this.makeRequest(this.endpoint).then(this.processData);
-      axios.get(this.endpoint)
-        .then((response) => {
-          if (response.data.list) {
-            this.processApiResults(response.data);
-          }
-        })
-        .catch((error) => {
-          this.error('Failed to fetch weather', error);
-        })
-        .finally(() => {
-          this.finishLoading();
-        });
     },
     /* Process the results from the Axios request */
-    processApiResults(dataList) {
+    processData(dataList) {
       const uiWeatherData = [];
       dataList.list.forEach((day, index) => {
         uiWeatherData.push({
@@ -137,8 +123,12 @@ export default {
     },
     /* When a day is clicked, then show weather info on the UI */
     showMoreInfo(moreInfo) {
-      this.moreInfo = moreInfo;
+      if (this.showDetails && JSON.stringify(moreInfo) === JSON.stringify(this.moreInfo)) {
-      this.showDetails = true;
+        this.showDetails = false;
+      } else {
+        this.moreInfo = moreInfo;
+        this.showDetails = true;
+      }
     },
     /* Show/ hide additional weather info */
     toggleDetails() {
@@ -146,36 +136,19 @@ export default {
     },
     /* Display weather description and Click for more note on hover */
     tooltip(text) {
-      const content = `${text.split(' ').map(
+      const content = `${text ? capitalize(text) : ''}\nClick for more Info`;
-        (word) => word[0].toUpperCase() + word.substring(1),
-      ).join(' ')}\nClick for more Info`;
       return { content, trigger: 'hover focus', delay: 250 };
     },
     /* Validate input props, and print warning if incorrect */
     checkProps() {
       const ops = this.options;
-      let valid = true;
+      if (!ops.apiKey) this.error('Missing API key for OpenWeatherMap');
-      if (!ops.apiKey) {
+      if (!ops.city) this.error('A city name is required to fetch weather');
-        this.error('Missing API key for OpenWeatherMap');
-        valid = false;
-      }
-      if (!ops.city) {
-        this.error('A city name is required to fetch weather');
-        valid = false;
-      }
       if (ops.units && ops.units !== 'metric' && ops.units !== 'imperial') {
         this.error('Invalid units specified, must be either \'metric\' or \'imperial\'');
-        valid = false;
       }
-      return valid;
     },
   },
-  /* When the widget loads, the props are checked, and weather fetched */
-  created() {
-    if (this.checkProps()) {
-      this.fetchWeather();
-    }
-  },
 };
 </script>
 
@@ -266,6 +239,9 @@ export default {
         margin: 0.1rem 0.5rem;
         padding: 0.1rem 0;
         color: var(--widget-text-color);
+        span.lbl {
+          text-transform: capitalize;
+        }
         &:not(:last-child) {
           border-bottom: 1px dashed var(--widget-text-color);
         }