X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=src%2Fcomponents%2Fservices%2FOpenWeather.vue;h=79d5e37d67eb981e1420d487a9fe9c4cd1c480fd;hb=120ee25bf52e5a6809ce3919f625f269624ec32c;hp=a9310eeac5d359527eeb71784b96c2e9ee09c24d;hpb=b79561bc9c59d79875a9931d235774333579a363;p=github%2Fbastienwirtz%2Fhomer.git

diff --git a/src/components/services/OpenWeather.vue b/src/components/services/OpenWeather.vue
index a9310ee..79d5e37 100644
--- a/src/components/services/OpenWeather.vue
+++ b/src/components/services/OpenWeather.vue
@@ -1,36 +1,30 @@
 <template>
   <div>
     <div class="card" :class="item.class">
-      <a :href="item.url" :target="item.target" rel="noreferrer">
+      <a
+        :href="`https://openweathermap.org/city/${id}`"
+        :target="item.target"
+        rel="noreferrer"
+      >
         <div class="card-content">
           <div class="media">
-            <div v-if="image" class="media-left">
+            <div v-if="icon" class="media-left" :class="item.background">
               <figure class="image is-48x48">
                 <img
-                  :src="`http://openweathermap.org/img/wn/` + image + `@2x.png`"
+                  :src="`https://openweathermap.org/img/wn/${icon}@2x.png`"
                   :alt="conditions"
                   :title="conditions"
                 />
               </figure>
             </div>
-            <div v-if="item.icon" class="media-left">
-              <figure class="image is-48x48">
-                <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
-              </figure>
-            </div>
             <div class="media-content">
-              <p class="title is-4">{{ item.location }}</p>
-              <p class="subtitle is-6">
-                <template v-if="item.subtitle">
-                  {{ 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>
-              </p>
+              <p v-if="error" class="error">Data could not be retrieved</p>
+              <div v-else>
+                <p class="title is-4">{{ name }}</p>
+                <p class="subtitle is-6">
+                  {{ temp | tempSuffix(this.item.units) }}
+                </p>
+              </div>
             </div>
           </div>
           <div class="tag" :class="item.tagstyle" v-if="item.tag">
@@ -49,57 +43,94 @@ export default {
     item: Object,
   },
   data: () => ({
-    api: {
-      name: "",
-      weather: [
-        {
-          main: "",
-          description: "",
-          icon: "",
-        },
-      ],
-      main: {
-        temp: "",
-        humidity: "",
-      },
-    },
+    id: null,
+    icon: null,
+    name: null,
+    temp: null,
+    conditions: null,
+    error: false,
   }),
-  computed: {
-    temp: function () {
-      if (this.api) {
-        return parseInt(this.api.main.temp).toFixed(1);
-      }
-      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();
+    this.fetchWeather();
   },
   methods: {
-    fetchStatus: async function () {
-      const url = `${this.item.url}?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));
+    fetchWeather: async function () {
+      let locationQuery;
+
+      // Use location ID if specified, otherwise retrieve value from location (name).
+      if (this.item.locationId) {
+        locationQuery = `id=${this.item.locationId}`;
+      } else {
+        locationQuery = `q=${this.item.location}`;
+      }
+
+      const apiKey = this.item.apikey || this.item.apiKey;
+      const url = `https://api.openweathermap.org/data/2.5/weather?${locationQuery}&appid=${apiKey}&units=${this.item.units}`;
+      fetch(url)
+        .then((response) => {
+          if (!response.ok) {
+            throw Error(response.statusText);
+          }
+          return response.json();
+        })
+        .then((weather) => {
+          this.id = weather.id;
+          this.name = weather.name;
+          this.temp = parseInt(weather.main.temp).toFixed(1);
+          this.icon = weather.weather[0].icon;
+          this.conditions = weather.weather[0].description;
+        })
+        .catch((e) => {
+          console.log(e);
+          this.error = true;
+        });
+    },
+  },
+  filters: {
+    tempSuffix: function (value, type) {
+      if (!value) return "";
+
+      let unit = "K";
+      if (type === "metric") {
+        unit = "°C";
+      } else if (type === "imperial") {
+        unit = "°F";
+      }
+      return `${value} ${unit}`;
     },
   },
 };
 </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>