Added showing hourly forecast

package-lock.json

@@ -11,6 +11,7 @@
         "axios": "^0.23.0",
         "core-js": "^3.18.3",
         "firebase": "^9.1.3",
+        "moment": "^2.29.1",
         "nanoid": "^3.1.30",
         "vue": "^2.6.14",
         "vue-class-component": "^7.2.6",
@@ -9807,6 +9808,14 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -23994,6 +24003,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

package.json

@@ -10,6 +10,7 @@
     "axios": "^0.23.0",
     "core-js": "^3.18.3",
     "firebase": "^9.1.3",
+    "moment": "^2.29.1",
     "nanoid": "^3.1.30",
     "vue": "^2.6.14",
     "vue-class-component": "^7.2.6",

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,

src/views/Forecast.vue

@@ -11,7 +11,7 @@
             <v-card
               tile
               outlined
-              height="200"
+              height="230"
               width="350"
               :color="hover ? 'grey lighten-2' : ''"
               class="rounded-xl"