Added showing hourly forecast

src/components/City.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-card height="200" width="350" v-if="data !== undefined">
+    <v-card height="230" width="350" v-if="data !== undefined">
       <v-list-item three-line>
         <v-list-item-content>
           <v-card-title class="d-inline-block text-truncate pt-0 px-0">{{
@@ -29,6 +29,24 @@
           ></v-img>
         </v-list-item-avatar>
       </v-list-item>
+      <v-divider></v-divider>
+      <v-row justify="space-around">
+        <v-col class="text-center" v-for="i in 5" :key="i">
+          <div>{{ getMoment(data.hourly[i * 3].dt, "HH:mm") }}</div>
+          <div>
+            <v-img
+            :src="
+              'http://openweathermap.org/img/wn/' +
+              data.hourly[i * 3].weather[0].icon +
+              '.png'
+            "
+            height="40"
+            width="40"
+          ></v-img>
+          </div>
+          <div class="text-center">{{ Math.round(data.hourly[i * 3].temp) }} °C</div>
+        </v-col>
+      </v-row>
     </v-card>
     <v-skeleton-loader type="card" v-else></v-skeleton-loader>
   </div>
@@ -37,6 +55,7 @@
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
 import axios from "axios";
+const moment = require('moment');
 
 @Component
 export default class City extends Vue {
@@ -65,6 +84,10 @@ export default class City extends Vue {
       });
   }
 
+  getMoment(dt: string, format: string) {
+    return moment.unix(dt).format("HH:mm");
+  }
+
   private data() {
     return {
       data: undefined,