From 49cc0fd873387643c43162e414f89fb6c2bea5cf Mon Sep 17 00:00:00 2001
From: Kamil Klecha <urlikodd@gmail.com>
Date: Thu, 14 Oct 2021 21:34:13 +0200
Subject: [PATCH] Added city widget

---
 src/components/City.vue | 83 +++++++++++++++++++++++++++++++++++++++++
 src/views/Forecast.vue  | 17 ++++++++-
 2 files changed, 99 insertions(+), 1 deletion(-)
 create mode 100644 src/components/City.vue

diff --git a/src/components/City.vue b/src/components/City.vue
new file mode 100644
index 0000000..2b5bad2
--- /dev/null
+++ b/src/components/City.vue
@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <v-card height="200" width="350" v-if="data !== undefined">
+      <v-list-item three-line>
+      <v-list-item-content>
+        <div class="text-overline">
+          {{ data.name }}, {{ data.sys.country }}
+        </div>
+        <v-list-item-title class="text-h3 font-weight-thin">{{ Math.round(data.main.temp) }} °C</v-list-item-title>
+        <v-list-item-subtitle>{{ data.weather[0].description }}</v-list-item-subtitle>
+      </v-list-item-content>
+
+      <v-list-item-avatar
+        tile
+        size="80"
+      >
+      <v-img :src="'http://openweathermap.org/img/wn/' + data.weather[0].icon + '@2x.png'" height="75" width="75"></v-img>
+      </v-list-item-avatar>
+    </v-list-item>
+    </v-card>
+    <v-skeleton-loader type="card" v-else></v-skeleton-loader>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import axios from "axios";
+
+@Component
+export default class City extends Vue {
+  @Prop({ required: true }) private readonly id!: number;
+
+  private created() {
+    this.getCurrentData();
+    this.getHourForecast();
+  }
+
+  private getCurrentData() {
+    axios
+      .get("https://api.openweathermap.org/data/2.5/weather", {
+        params: {
+          id: this.id,
+          units: "metric",
+          lang: "pl",
+          appid: process.env.VUE_APP_API_KEY,
+        },
+      })
+      .then((res) => {
+        this.$data.data = res.data;
+        console.log(res.data);
+      })
+      .catch((e) => {
+        console.error(e);
+      });
+  }
+
+  private getHourForecast() {
+    axios
+      .get("https://api.openweathermap.org/data/2.5/forecast", {
+        params: {
+          id: this.id,
+          units: "metric",
+          lang: "pl",
+          appid: process.env.VUE_APP_API_KEY, 
+        },
+      })
+      .then((res) => {
+        this.$data.forecast = res.data;
+        console.log('forecast', res.data);
+      })
+      .catch((e) => {
+        console.error(e);
+      });
+  }
+
+  private data() {
+    return {
+      data: undefined,
+      forecast: undefined,
+    };
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/Forecast.vue b/src/views/Forecast.vue
index 80871d5..1fe09cc 100644
--- a/src/views/Forecast.vue
+++ b/src/views/Forecast.vue
@@ -1,13 +1,28 @@
 <template>
   <v-card flat tile>
     <v-card-title>Prognoza pogody</v-card-title>
+    <v-row justify="space-around">
+      <v-col pa-1 v-for="(city, i) in city_ids" :key="i">
+        <City :id="city"/>
+      </v-col>
+    </v-row>
   </v-card>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
+import City from "@/components/City.vue";
 
-@Component
+@Component({
+  components: {
+    City,
+  },
+})
 export default class Forecast extends Vue {
+  private data() {
+    return {
+      city_ids: [6695624, 759734, 3094802, 764849]
+    }
+  }
 }
 </script>
\ No newline at end of file