72 lines
2.4 KiB
Vue
72 lines
2.4 KiB
Vue
<template>
|
|
<div class="my-2">
|
|
<h2>Météo</h2>
|
|
<p v-if="loading"></p>
|
|
<div v-else class="meteo card my-1">
|
|
<h3>{{ meteo.city.name }}</h3>
|
|
<div class="flex flex-end">
|
|
<div class="flex-1 flex-col flex-end">
|
|
<div class="meteo-date">{{ dateFormat(meteo.list[0].dt_txt) }}</div>
|
|
<div><strong>{{ meteo.list[0].main.temp }}</strong> °C</div>
|
|
<div><strong>{{ meteo.list[0].main.humidity }}</strong> %</div>
|
|
<div><strong>{{ meteo.list[0].main.pressure }}</strong> hPa</div>
|
|
</div>
|
|
<div class="flex-1 text-right">
|
|
<i v-bind:class="'owf owf-5x owf-' + meteo.list[0].weather[0].id"></i>
|
|
<div><strong>{{ meteo.list[0].weather[0].description }}</strong></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'OpenWeatherCard',
|
|
data: function () {
|
|
return {
|
|
loading: true,
|
|
meteo: null,
|
|
}
|
|
},
|
|
methods : {
|
|
dateFormat(date) {
|
|
const d = new Date(date)
|
|
const dtf = new Intl.DateTimeFormat('fr', { year: '2-digit', month: 'short', day: '2-digit', hour: 'numeric' })
|
|
const [{ value: mo },,{ value: da },,{value: ho }] = dtf.formatToParts(d)
|
|
return `${mo}/${da} - ${ho}h`
|
|
}
|
|
},
|
|
mounted() {
|
|
let refreshMeteo = false
|
|
|
|
if(localStorage.getItem('meteo')) {
|
|
this.meteo = JSON.parse(localStorage.getItem('meteo'))
|
|
let deltaTime = new Date() - new Date(this.meteo.list[0].dt_txt)
|
|
if (deltaTime/1000/3600 > 3) {
|
|
refreshMeteo = true
|
|
}
|
|
this.loading = false
|
|
console.log('in storage', this.meteo.list[0], this.meteo.list[0].dt_txt)
|
|
} else {
|
|
refreshMeteo = true
|
|
}
|
|
|
|
if (refreshMeteo) {
|
|
// eslint-disable-next-line no-undef
|
|
axios.get('/api/meteo')
|
|
.then(response => {
|
|
this.meteo = response.data
|
|
this.loading = false
|
|
localStorage.setItem('meteo', JSON.stringify(response.data))
|
|
})
|
|
.catch(() => {
|
|
console.log('Unable to fetch meteo.')
|
|
})
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|