Error handling and fixed link to city.

[github/bastienwirtz/homer.git] / src / components / services / OpenWeather.vue

diff --git a/src/components/services/OpenWeather.vue b/src/components/services/OpenWeather.vue
index 30abb2d0b8c09273f47d0abf4816adb6954f3885..8029716988233f99190ba22b87e0e07b5ee11700 100644 (file)
--- a/src/components/services/OpenWeather.vue
+++ b/src/components/services/OpenWeather.vue
@@ -1,12 +1,16 @@
 <template>
   <div>
     <div class="card" :class="item.class">
-      <a :href="item.url" :target="item.target" rel="noreferrer">
+      <a :href="`https://openweathermap.org/city/` + locationId" :target="item.target" rel="noreferrer">
         <div class="card-content">
           <div class="media">
-            <div v-if="image" class="media-left">
+            <div v-if="image" class="media-left" :class="item.background">
               <figure class="image is-48x48">
-                <img :src="`http://openweathermap.org/img/wn/` + image + `@2x.png`" :alt="conditions" :title="conditions" />
+                <img
+                  :src="`http://openweathermap.org/img/wn/` + image + `@2x.png`"
+                  :alt="conditions"
+                  :title="conditions"
+                />
               </figure>
             </div>
             <div v-if="item.icon" class="media-left">
@@ -21,10 +25,15 @@
                   {{ item.subtitle }}
                 </template>
                 <template v-else-if="api">
-                  {{ temp }} 
-                                 <span v-if="this.item.units == 'metric'">&deg;C</span>
-                                 <span v-else-if="this.item.units == 'imperial'">&deg;F</span>                           
-                                 <span v-else>K</span>
+                  <template v-if="temp !== ''">
+                    {{ temp }}
+                    <span v-if="this.item.units === 'metric'">&deg;C</span>
+                    <span v-else-if="this.item.units === 'imperial'">&deg;F</span>
+                    <span v-else>K</span>
+                  </template>
+                  <template v-else> 
+                    <span class="error">Data could not be retrieved</span>                      
+                  </template>
                 </template>
               </p>
             </div>
@@ -45,55 +54,96 @@ export default {
     item: Object,
   },
   data: () => ({
+    error: false,
     api: {
+      id: "",
       name: "",
-         weather: [{
-               main: "",
-               description: "",
-               icon: ""
-         }],
+      weather: [
+        {
+          main: "",
+          description: "",
+          icon: "",
+        },
+      ],
       main: {
-               temp: "",
-               humidity: ""
-         }
-    }
+        temp: "",
+        humidity: "",
+      },
+    },
   }),
   computed: {
+    locationId: function () {
+      if (this.api) {
+        return this.api.id;
+      }
+      return "";
+    },
     temp: function () {
+      if (this.api && this.api.main.temp !== "") {
+        return parseInt(this.api.main.temp).toFixed(1);
+      }
+      return "";
+    },
+    image: function () {
       if (this.api) {
-               return parseInt(this.api.main.temp).toFixed(1);
+        return this.api.weather[0].icon;
+      }
+      return "";
+    },
+    conditions: function () {
+      if (this.api) {
+        return this.api.weather[0].description;
       }
       return "";
     },
-       image: function () {
-         if (this.api) {
-               return this.api.weather[0].icon;
-         }
-         return "";
-       },
-       conditions: function () {
-         if (this.api) {
-               return this.api.weather[0].description;
-         }
-         return "";
-       }
   },
   created() {
     this.fetchStatus();
   },
   methods: {
     fetchStatus: async function () {
-      const url = `${this.item.url}?q=${this.item.location}&appid=${this.item.apiKey}&units=${this.item.units}`;
+      const url = `https://api.openweathermap.org/data/2.5/weather?q=${this.item.location}&appid=${this.item.apiKey}&units=${this.item.units}`;
       this.api = await fetch(url)
         .then((response) => response.json())
-        .catch((e) => console.log(e));
+        .catch((e) => { 
+          this.error = true; 
+          console.log(e) 
+        });
     },
   },
 };
 </script>
 
 <style scoped lang="scss">
-.media-left img {
-  max-height: 100%;
+
+// Add a border around the weather image.
+// Otherwise the image is not always distinguishable.
+.media-left {
+  &.circle,
+  &.square {
+    background-color: #e4e4e4;
+  }
+
+  &.circle {
+    border-radius: 90%;
+  }
+
+  img {
+    max-height: 100%;
+  }
+}
+
+.error {
+  color: #de0000;
+}
+
+// Change background color in dark mode.
+.is-dark {
+  .media-left {
+    &.circle,
+    &.square {
+      background-color: #909090;
+    }
+  }
 }
-</style>
\ No newline at end of file
+</style>