93 lines
2.2 KiB
Vue
93 lines
2.2 KiB
Vue
<template>
|
|
<div>
|
|
<v-card
|
|
height="200"
|
|
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">{{ city.name }}</v-card-title>
|
|
<v-card-subtitle class="pb-0 px-0">{{ city.country }}</v-card-subtitle>
|
|
<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 city!: any;
|
|
|
|
private created() {
|
|
this.getCurrentData();
|
|
this.getHourForecast();
|
|
}
|
|
|
|
private getCurrentData() {
|
|
axios
|
|
.get("https://api.openweathermap.org/data/2.5/weather", {
|
|
params: {
|
|
id: this.city.id,
|
|
units: "metric",
|
|
lang: "pl",
|
|
appid: process.env.VUE_APP_OWM_API_KEY,
|
|
},
|
|
})
|
|
.then((res) => {
|
|
this.$data.data = res.data;
|
|
})
|
|
.catch((e) => {
|
|
console.error(e);
|
|
});
|
|
}
|
|
|
|
private getHourForecast() {
|
|
axios
|
|
.get("https://api.openweathermap.org/data/2.5/forecast", {
|
|
params: {
|
|
id: this.city.id,
|
|
units: "metric",
|
|
lang: "pl",
|
|
appid: process.env.VUE_APP_OWM_API_KEY,
|
|
},
|
|
})
|
|
.then((res) => {
|
|
this.$data.forecast = res.data;
|
|
})
|
|
.catch((e) => {
|
|
console.error(e);
|
|
});
|
|
}
|
|
|
|
private data() {
|
|
return {
|
|
data: undefined,
|
|
forecast: undefined,
|
|
};
|
|
}
|
|
}
|
|
</script> |