Displaying the timezone hour near temprature for each location (#449)

Co-authored-by: Bastien Wirtz <bastien.wirtz@gmail.com>

diff --git a/src/components/services/OpenWeather.vue b/src/components/services/OpenWeather.vue
index ba0be96e92e56e421b173b518e7f313ca3551f9e..31698663dd87c0ae7715f120af1177ba4ff3ffe9 100644 (file)
--- a/src/components/services/OpenWeather.vue
+++ b/src/components/services/OpenWeather.vue
@@ -22,7 +22,12 @@
               <div v-else>
                 <p class="title is-4">{{ name }}</p>
                 <p class="subtitle is-6">
-                  {{ temperature }}
+                  <span>
+                    {{ temp | tempSuffix(this.item.units) }}
+                  </span>
+                  <span class="location-time">
+                    {{ locationTime }}
+                  </span>
                 </p>
               </div>
             </div>
@@ -49,6 +54,7 @@ export default {
     temp: null,
     conditions: null,
     error: false,
+    timezoneOffset: 0,
   }),
   computed: {
     temperature: function () {
@@ -66,6 +72,11 @@ export default {
   created() {
     this.fetchWeather();
   },
+  computed: {
+    locationTime: function () {
+      return this.calcTime(this.timezoneOffset);
+    },
+  },
   methods: {
     fetchWeather: async function () {
       let locationQuery;
@@ -92,12 +103,23 @@ export default {
           this.temp = parseInt(weather.main.temp).toFixed(1);
           this.icon = weather.weather[0].icon;
           this.conditions = weather.weather[0].description;
+          this.timezoneOffset = weather.timezone;
         })
         .catch((e) => {
           console.log(e);
           this.error = true;
         });
     },
+    calcTime: (offset) => {
+      const localTime = new Date();
+      const utcTime =
+        localTime.getTime() + localTime.getTimezoneOffset() * 60000;
+      const calculatedTime = new Date(utcTime + 1000 * offset);
+      return calculatedTime.toLocaleString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+      });
+    },
   },
 };
 </script>
@@ -133,4 +155,9 @@ export default {
     }
   }
 }
+
+//Location Time
+.location-time {
+  margin-left: 20px;
+}
 </style>