57 lines
2.2 KiB
Vue
57 lines
2.2 KiB
Vue
<template>
|
|
<div>
|
|
<div class="card flex flex-col">
|
|
<h2>Météo Home</h2>
|
|
<ul class="mt-2">
|
|
<li v-for="(captor, index) in captors" :key="index" class="block mb-4">
|
|
<div class="flex justify-between items-baseline mb-2">
|
|
<span class="font-bold text-lg capitalize">{{ captor.device }}</span>
|
|
<span class="tinline-block bg-gray-400 text-white text-center rounded-full px-3 py-1 text-sm font-semibold">{{ dateIt(captor.date_meteo) }}</span>
|
|
</div>
|
|
<div class="flex flex-no-wrap text-sm -m-1">
|
|
<span v-if="captor.temperature" class="px-1 w-1/4">{{ floated(captor.temperature) }} <span class="font-semibold text-xs">°C</span></span>
|
|
<span v-if="captor.humidite" class="px-1 w-1/4">{{ floated(captor.humidite) }} <span class="font-semibold text-xs">%</span></span>
|
|
<span v-if="captor.pression" class="px-1 w-1/4">{{ floated(captor.pression) }} <span class="font-semibold text-xs">hPa</span></span>
|
|
<span v-if="captor.lumiere" class="px-1 w-1/4">{{ captor.lumiere }}</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'AutomaticMeteoHome',
|
|
data: function () {
|
|
return {
|
|
captors: null,
|
|
}
|
|
},
|
|
mounted() {
|
|
// eslint-disable-next-line no-undef
|
|
axios.get('/api/automation/home')
|
|
.then(response => {
|
|
this.captors = response.data.data
|
|
})
|
|
.catch(() => {
|
|
console.log('Unable to fetch memos.')
|
|
})
|
|
},
|
|
methods: {
|
|
floated: function (value) {
|
|
return value.toFixed(2)
|
|
},
|
|
dateIt: function (val) {
|
|
let hour = val.split(' ')[1].split(':00:')[0]
|
|
let date = val.split(' ')[0].split('-')
|
|
let result = hour + 'h ' + date[2] + '/' + date[1]
|
|
if (parseInt(date[0]) !== new Date().getFullYear()) {
|
|
result += '/' + date[0]
|
|
}
|
|
return result
|
|
}
|
|
}
|
|
}
|
|
</script>
|