98 lines
2.6 KiB
Vue
98 lines
2.6 KiB
Vue
<template>
|
|
<div>
|
|
<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">{{
|
|
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.current.temp) }} °C</v-list-item-title
|
|
>
|
|
<v-list-item-subtitle>{{
|
|
data.current.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.current.weather[0].icon +
|
|
'@2x.png'
|
|
"
|
|
height="75"
|
|
width="75"
|
|
></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>
|
|
</template>
|
|
|
|
<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 {
|
|
@Prop({ required: true }) private readonly city!: any;
|
|
|
|
private created() {
|
|
this.getData();
|
|
}
|
|
|
|
private getData() {
|
|
axios
|
|
.get("https://api.openweathermap.org/data/2.5/onecall", {
|
|
params: {
|
|
lat: this.city.coord.lat,
|
|
lon: this.city.coord.lon,
|
|
units: "metric",
|
|
lang: "pl",
|
|
appid: process.env.VUE_APP_OWM_API_KEY,
|
|
},
|
|
})
|
|
.then((res) => {
|
|
this.$data.data = res.data;
|
|
})
|
|
.catch((e) => {
|
|
console.error(e);
|
|
});
|
|
}
|
|
|
|
getMoment(dt: string, format: string) {
|
|
return moment.unix(dt).format("HH:mm");
|
|
}
|
|
|
|
private data() {
|
|
return {
|
|
data: undefined,
|
|
forecast: undefined,
|
|
};
|
|
}
|
|
}
|
|
</script> |