83 lines
2.0 KiB
Vue
83 lines
2.0 KiB
Vue
<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> |