|
|
|
|
|
<!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>
|
