You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
2.7 KiB
90 lines
2.7 KiB
<!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://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> |
|
|
|
<!--[if lte IE 8]> |
|
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css"> |
|
<![endif]--> |
|
<!--[if gt IE 8]><!--> |
|
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css"> |
|
<!--<![endif]--> |
|
|
|
|
|
<!--[if lte IE 8]> |
|
<link rel="stylesheet" href="/combo/1.18.13?/css/layouts/blog-old-ie.css"> |
|
<![endif]--> |
|
<!--[if gt IE 8]><!--> |
|
<link rel="stylesheet" href="http://hq.10ninox.com/styles/blog.css"> |
|
<!--<![endif]--> |
|
<!--[if lt IE 9]> |
|
<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script> |
|
<![endif]--> |
|
<style> |
|
.dash { |
|
padding: 1em; |
|
font-size: 16px; |
|
} |
|
.dash-one { |
|
text-align: center; |
|
font-size: 1.2em; |
|
background: #33333322; |
|
padding: 10px; |
|
overflow: wrap; |
|
} |
|
.dash-one h2 { |
|
font-size: 1.1em; |
|
margin: 2px 5px; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<div id="layout" class="pure-g"> |
|
<div class="sidebar pure-u-1 pure-u-md-1-4"> |
|
<ul class="device-list"></ul> |
|
</div> |
|
<div class="content pure-u-1 pure-u-md-3-4"></div> |
|
</div> |
|
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> |
|
<script src="http://code.highcharts.com/highcharts.js"></script> |
|
<script> |
|
(function () { |
|
var baseUrl = 'http://localhost:8000', |
|
allUrl = baseUrl + '/all', |
|
$sidebar = $('.sidebar'), |
|
$list = $sidebar.find('.device-list'), |
|
$content = $('.content'); |
|
|
|
var addToList = function(item) { |
|
$list.append( |
|
`<li><a href="#${item['device']}">` + |
|
`${item["device"]}</a></li>`); |
|
}; |
|
|
|
var addEleToDashBoard = function(item) { |
|
var data = item['data']; |
|
var str = `<div class="pure-u-md-1-2 dash">` + |
|
`<h1>${item['device']}</h1>` + |
|
`<div class="pure-u-md-1-3 dash-one"><h2>Temp</h2>${data['temperature']}</div>` + |
|
`<div class="pure-u-md-1-3 dash-one"><h2>Moisture</h2>${data['moisture']}</div>` + |
|
`</div>`; |
|
$content.append(str); |
|
}; |
|
|
|
$.getJSON(allUrl, function(data, textStatus, xhr) { |
|
for (var i=0; i<data.length; i++) { |
|
addToList(data[i]); |
|
addEleToDashBoard(data[i]); |
|
} |
|
}); |
|
})(jQuery); |
|
</script> |
|
</body> |
|
</html>
|
|
|