|
|
<!doctype html> |
|
|
<html lang="en"> |
|
|
|
|
|
<head> |
|
|
<meta charset="utf-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<meta name="description" content="IoT around the house"> |
|
|
<title>Life Around</title> |
|
|
<link rel="stylesheet" href="https://static.10ninox.com/css/bulma.min.css" /> |
|
|
<style> |
|
|
h1.subtitle>small { |
|
|
font-size: 0.83rem; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<div class="container" id="app"> |
|
|
<div class="notification" v-if="message.length > 0"> |
|
|
{{ message }} |
|
|
</div> |
|
|
|
|
|
<div v-for="group in groups"> |
|
|
<section class="hero is-light"> |
|
|
<div class="hero-body"> |
|
|
<div class="container"> |
|
|
<h1 class="title"> |
|
|
{{ group }} |
|
|
</h1> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
<div class="columns is-multiline" > |
|
|
<div class="column is-one-third" v-for="device in devices[group]"> |
|
|
<div class="box has-ribbon"> |
|
|
<div class="ribbon is-danger" v-if="device.needWater">รดน้ำด้วย!</div> |
|
|
<h1 class="title">{{ device.info.name }}</h1> |
|
|
<h2 class="subtitle is-6">{{ device.fromNow }}</h2> |
|
|
<span class="tag is-light">{{ device.info.sensor }}</span> |
|
|
<span class="tag is-danger" v-if="device.needBattery">เปลี่ยน Battery</span> |
|
|
<div class="columns"> |
|
|
<div class="column"> |
|
|
<p>Temperature <small>ºC</small></p> |
|
|
<h1 class="subtitle is-1">{{ device.data.temperature }}</h1> |
|
|
</div> |
|
|
<div class="column" v-if="device.info.sensor !== 'Xiaomi Mi Flora'"> |
|
|
<p>ความชื้นอากาศ <small>%</small></p> |
|
|
<h1 class="subtitle is-1">{{ device.data.humidity }} </h1> |
|
|
</div> |
|
|
<div class="column" v-if="device.info.sensor === 'Xiaomi Mi Flora'"> |
|
|
<p>ความชื้นของดิน <small>%</small></p> |
|
|
<h1 class="subtitle is-1">{{ device.data.moisture }} </h1> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.14/moment-timezone.mi |
|
|
n.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script> |
|
|
<script> |
|
|
var app = new Vue({ |
|
|
el: '#app', |
|
|
data: { |
|
|
url: { base: 'http://iot.10ninox.com', all: '/all' }, |
|
|
message: '', |
|
|
groups: [], |
|
|
devices: {}, |
|
|
}, |
|
|
created: function() { |
|
|
this.getDevices() |
|
|
}, |
|
|
methods: { |
|
|
getDevices: function() { |
|
|
var vm = this |
|
|
axios.get(`${vm.url.base}${vm.url.all}`) |
|
|
.then(function(resp) { |
|
|
var data = resp.data |
|
|
vm.groups = Array.from(new Set(resp.data.map((i) => i.group))) |
|
|
vm.groups.forEach(ele => { |
|
|
vm.devices[ele] = data.filter((i) => { |
|
|
if (i.group !== ele) return |
|
|
i.needWater = false |
|
|
i.needBattery = false |
|
|
var sensor = i.info.sensor.toLowerCase() |
|
|
if (sensor === 'xiaomi mi flora' || sensor === 'mijia') { |
|
|
i.needBattery = i.data.battery < 10 |
|
|
} |
|
|
if (sensor === 'Xiaomi Mi Flora') { |
|
|
i.needWater = i.data.moisture < 40 ? true : false |
|
|
} |
|
|
i.fromNow = moment.tz(i.timestamp, '').fromNow() |
|
|
return i |
|
|
}) |
|
|
}) |
|
|
}) |
|
|
.catch(function(error){ |
|
|
vm.message = 'Error! Could not reach the API. ' + error |
|
|
}) |
|
|
}, |
|
|
} |
|
|
}) |
|
|
</script> |
|
|
</body> |
|
|
</html>
|
|
|
|
