Added details

src/components/City.vue

@@ -31,7 +31,7 @@
       </v-list-item>
       <v-divider></v-divider>
       <v-row justify="space-around">
-        <v-col class="text-center pb-0" v-for="i in 5" :key="i">
+        <v-col class="text-center" v-for="i in 5" :key="i">
           <div>{{ getMoment(data.hourly[i * 3].dt, "HH:mm") }}</div>
           <v-tooltip bottom>
             <template v-slot:activator="{ on }">
@@ -49,27 +49,36 @@
             </template>
             <span>{{ data.hourly[i * 3].weather[0].description }}</span>
           </v-tooltip>
-
           <div>{{ Math.round(data.hourly[i * 3].temp) }} °C</div>
         </v-col>
       </v-row>
+      <v-divider></v-divider>
+      <v-card-actions>
+        <v-btn block class="primary" @click="details = true">Pokaż szczegóły</v-btn>
+      </v-card-actions>
     </v-card>
     <v-skeleton-loader type="card" v-else></v-skeleton-loader>
+    <Details v-model="details" :city="city" :wdata="data" v-if="city && data"></Details>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
+import Details from '@/components/Details.vue';
 import axios from "axios";
 const moment = require("moment");
 
-@Component
+@Component({
+  components: {
+    Details,
+  }
+})
 export default class City extends Vue {
   @Prop({ required: true }) private readonly city!: any;
 
   private created() {
     this.getData();
-    setInterval(this.getData, 1000 * 60);
+    //setInterval(this.getData, 1000 * 60);
   }
 
   private getData() {
@@ -99,6 +108,7 @@ export default class City extends Vue {
     return {
       data: undefined,
       forecast: undefined,
+      details: false,
     };
   }
 }