53 lines
1.8 KiB
Vue
53 lines
1.8 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">{{ captor.device }}</span>
|
|
<span class="text-sm">{{ captor.date_meteo }}</span>
|
|
</div>
|
|
<div class="flex flex-no-wrap text-sm -m-1">
|
|
<span v-if="captor.temperature" class="mx-1">{{ floated(captor.temperature) }} <span class="font-semibold text-xs">°C</span></span>
|
|
<span v-if="captor.humidite" class="mx-1">{{ floated(captor.humidite) }} <span class="font-semibold text-xs">%</span></span>
|
|
<span v-if="captor.pression" class="mx-1">{{ floated(captor.pression) }} <span class="font-semibold text-xs">hPa</span></span>
|
|
<span v-if="captor.lumiere" class="mx-1">{{ 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
|
|
console.log(response.data.data)
|
|
})
|
|
.catch(() => {
|
|
console.log('Unable to fetch memos.')
|
|
})
|
|
},
|
|
methods: {
|
|
floated: function (value) {
|
|
return value.toFixed(2)
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|