09.10.2017, 12:02
Code:
<?
require('apps')
d1 = grp.tag('battery_chk1')
d2 = grp.tag('battery_chk2')
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Objects</title>
<link rel="stylesheet" href="/apps/css/bootstrap.css">
<link rel="stylesheet" href="/apps/css/font-awesome.css">
<link rel="stylesheet" href="/apps/css/style.css">
<script src="/apps/js/jquery.js.gz"></script>
<style>
body { padding: 20px; background-color: #fff; }
.navbar { background-color: #eee; }
</style>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid text-center">
<span class="btn btn-default navbar-btn pull-right back"><span class="fa fa-lg fa-times"></span></span>
<span class="btn btn-default navbar-btn pull-left refresh"><span class="fa fa-lg fa-refresh"></span></span>
<span class="navbar-brand">Objects</span>
</div>
</div>
<div class="wrap">
<div class="container">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th>Date</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<script>
$(function() {
function render(data) {
// sort data by name
data.sort(function(a, b) {
var na = a.name.toLowerCase()
, nb = b.name.toLowerCase();
if (na > nb) {
return 1;
}
else if (na < nb) {
return -1;
}
else {
return 0;
}
});
// show each object name/value/update time
$.each(data, function(index, item) {
var trs = $('<tr><td></td><td></td><td></td></tr>').appendTo('tbody')
, tds = trs.find('td')
, d = new Date(item.updatetime * 1000);
$(tds[ 0 ]).text(item.name);
$(tds[ 1 ]).text(item.value);
$(tds[ 2 ]).text(d.toString().split(' GMT')[0]);
});
}
render(<?=json.encode(d1)?>);
render(<?=json.encode(d2)?>);
$('.refresh').click(function() {
window.location.reload();
});
$('.back').click(function() {
$(this).find('.fa')
.removeClass('fa-times')
.addClass('fa-refresh fa-spin')
window.location = '/apps/';
});
});
</script>
</body>
</html>