Display local time on event if city selected

Author: Alan Smith

package-lock.json

@@ -15,6 +15,7 @@
     "directory-named-webpack-plugin": "^4.0.1",
     "lodash": "^4.17.15",
     "luxon": "^1.16.0",
+    "moment-timezone": "^0.5.27",
     "v-click-outside": "^2.1.3",
     "vue": "^2.6.10",
     "vue-datetime": "^1.0.0-beta.10",

package.json

@@ -2,10 +2,11 @@
 /* eslint-disable object-shorthand */
 
 import axios from 'axios';
+import moment from 'moment-timezone';
 import WeatherIcon from './WeatherIcon';
 
 export default {
-  name: 'EventWeather',
+  name: 'CityData',
 
   props: {
     eventCountry: {
@@ -24,6 +25,8 @@ export default {
   data() {
     return {
       weather: null,
+      triggerInt: true,
+      localTime: '',
     };
   },
 
@@ -32,6 +35,14 @@ export default {
       const { data } = await axios.get(`http://eventcountdownapi.mralansmith.com/api/weather/${this.eventCity.id}`);
       this.weather = data;
     },
+
+    triggerTimeUpdate() {
+      this.localTime = moment().tz(this.eventCity.timezoneName).format('h:mma');
+
+      setTimeout(() => {
+        window.requestAnimationFrame(() => this.triggerTimeUpdate());
+      }, 10000);
+    },
   },
 
   watch: {
@@ -47,6 +58,10 @@ export default {
   mounted() {
     if (this.eventCity) {
       this.getCurrentWeather();
+
+      if (this.eventCity.timezoneName) {
+        this.triggerTimeUpdate();
+      }
     }
   },
 };

src/components/sections/EventWeather/EventWeather.js renamed to src/components/sections/CityData/CityData.js

@@ -1,4 +1,4 @@
-.c-event-weather {
+.c-city-data {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -12,7 +12,7 @@
     border-bottom-right-radius: 45%;
 }
 
-.c-event-weather__icon {
+.c-city-data__icon {
     margin-bottom: 20px;
     max-width: 100px;
     max-height: 80px;
@@ -22,13 +22,13 @@
     }
 }
 
-.c-event-weather__text {
+.c-city-data__text {
     padding: 2px 10px;
     text-align: center;
     font-size: 16px;
 }
 
-.c-event-weather__city {
+.c-city-data__city {
     font-weight: bold;
     padding: 2px 12px;
 }

src/components/sections/EventWeather/EventWeather.scss renamed to src/components/sections/CityData/CityData.scss

@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="c-city-data"
+    v-if="weather">
+      <weather-icon
+        class="c-city-data__icon"
+        :icon="weather.icon"/>
+      <span
+        class="c-city-data__text"
+        v-if="localTime">{{ localTime }}</span>
+      <span class="c-city-data__text">{{ weather.summary }}</span>
+      <span class="c-city-data__text">{{ weather.temp }}</span>
+      <span class="c-city-data__city c-city-data__text">
+        in {{ eventCity.name }}, {{ eventCountry.name }}
+      </span>
+  </div>
+</template>
+<script src="./CityData.js"></script>
+<style src="./CityData.scss" lang="scss"></style>

src/components/sections/CityData/CityData.vue

@@ -1,6 +1,6 @@
 import Countdown from '@chenfengyuan/vue-countdown';
 import format from 'date-fns/format';
-import EventWeather from '@sections/EventWeather/EventWeather.vue';
+import CityData from '@sections/CityData/CityData.vue';
 import TrashIcon from '@/assets/icons/trash.svg';
 import EditIcon from '@/assets/icons/edit.svg';
 import CheckIcon from '@/assets/icons/check.svg';
@@ -45,7 +45,7 @@ export default {
 
   components: {
     Countdown,
-    EventWeather,
+    CityData,
     TrashIcon,
     EditIcon,
     CheckIcon,

src/components/sections/EventWeather/WeatherIcon.js renamed to src/components/sections/CityData/WeatherIcon.js

@@ -19,7 +19,7 @@
         </div>
       </div>
       <span class="c-event__title" v-if="isReady">{{ eventName }}</span>
-      <event-weather
+      <city-data
         :event-city="eventCity"
         :event-country="eventCountry"/>
       <countdown