167 lines
6.6 KiB
HTML
Executable File
167 lines
6.6 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<!-- Basic Page Needs
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<meta charset="utf-8">
|
||
<title>History</title>
|
||
<meta name="description" content="History">
|
||
<meta name="author" content="mattbk">
|
||
<!-- Mobile Specific Metas
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<!-- FONT
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
|
||
<!-- CSS
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<link rel="stylesheet" href="/static/css/normalize.css">
|
||
<link rel="stylesheet" href="/static/css/skeleton.css">
|
||
<link rel="stylesheet" type="text/css" href="/static/css/jquery.datetimepicker.css"/ >
|
||
<!-- Favicon
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<link rel="icon" type="image/png" href="/static/images/favicon.png">
|
||
<!~~ D3.js https://github.com/d3/d3/releases~~>
|
||
<script src="static/javascript/d3.min.js"></script>
|
||
<!~~ jQuery https://jquery.com/download/ ~~>
|
||
<script src="static/javascript/jquery-3.2.1.min.js"></script>
|
||
<!~~ Plotly.js https://github.com/plotly/plotly.js/releases/ ~~>
|
||
<script src="static/javascript/plotly.js"></script>
|
||
<script src="static/javascript/jquery.datetimepicker.full.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstimezonedetect/1.0.4/jstz.min.js" ></script>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="row">
|
||
<form id="datetime_range" action="/history" method="GET">
|
||
<!-- <div class="row"> -->
|
||
<div class="three columns">
|
||
<label for="from">From date</label>
|
||
<input class="u-full-width" id="datetimepicker1" type="text" value="{{from_date}}" name="from">
|
||
</div>
|
||
<!-- </div> -->
|
||
<!-- <div class="row"> -->
|
||
<div class="three columns">
|
||
<label for="to">To date</label>
|
||
<input class="u-full-width" id="datetimepicker2" type="text" value="{{to_date}}" name="to">
|
||
</div>
|
||
<!-- </div> -->
|
||
<!-- <div class="row"> -->
|
||
<div class="two columns">
|
||
<input type="hidden" class="timezone" name="timezone" />
|
||
<input class="button-primary" type="submit" value="Submit" style="position:relative; top: 28px" id="submit_button" />
|
||
</div>
|
||
<!-- </div> -->
|
||
</form>
|
||
</div>
|
||
<div class="row">
|
||
<div class="eleven columns">
|
||
<div class="one column">
|
||
<a href="/">Live</a>
|
||
</div>
|
||
<form id="range_select" action = "/history" method="GET">
|
||
<input type="hidden" class="timezone" name="timezone" />
|
||
<div class="one column">
|
||
<input type="radio" name="range_h" value="3" id="radio_3" /><label for="radio_3">3hrs</label>
|
||
</div>
|
||
<div class="one column">
|
||
<input type="radio" name="range_h" value="6" id="radio_6" /><label for="radio_6">6hrs</label>
|
||
</div>
|
||
<div class="one column">
|
||
<input type="radio" name="range_h" value="12" id="radio_12" /><label for="radio_12">12hrs</label>
|
||
</div>
|
||
<div class="one column">
|
||
<input type="radio" name="range_h" value="24" id="radio_24" /><label for="radio_24">24hrs</label>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<div class='row' id='plotly-plot'></div>
|
||
<div class="row">
|
||
<div class="one-third column" style="margin-top: 5%">
|
||
<strong>Showing all records</strong>
|
||
<h2>Temperatures</h2>
|
||
<table class="u-full-width">
|
||
<thead style="display:block;">
|
||
<tr>
|
||
<th>Date</th>
|
||
<th> °F</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody style="height:450px; overflow:scroll; display:block;">
|
||
{% for row in temp %}
|
||
<tr>
|
||
<td>{{row[0]}}</td>
|
||
<td>{{'%0.2f'|format(row[1])}}</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
<h2>Humidities</h2>
|
||
<table class="u-full-width">
|
||
<thead style="display:block;">
|
||
<tr>
|
||
<th>Date</th>
|
||
<th> %</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody style="height:450px; overflow:scroll; display:block;">
|
||
{% for row in hum %}
|
||
<tr>
|
||
<td>{{row[0]}}</td>
|
||
<td>{{'%0.2f'|format(row[1])}}</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="two-thirds column" style="margin-top: 5%">
|
||
<div class="row">
|
||
<div class="row">
|
||
<div class="three columns">
|
||
<div id="chart_temps"></div>
|
||
<div id="chart_humid"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
|
||
|
||
|
||
<script>
|
||
jQuery( "#datetime_range" ).submit(function( event ) {
|
||
timezone = jstz.determine();
|
||
jQuery(".timezone").val(timezone.name());
|
||
});
|
||
|
||
jQuery('#datetimepicker1').datetimepicker(
|
||
{
|
||
format:'Y-m-d H:i',
|
||
defaultDate:'{{from_date}}'
|
||
});
|
||
jQuery('#datetimepicker2').datetimepicker({
|
||
format:'Y-m-d H:i',
|
||
defaultDate:'{{to_date}}'
|
||
});
|
||
|
||
jQuery("#range_select input[type=radio]").click(function(){
|
||
timezone = jstz.determine();
|
||
jQuery(".timezone").val(timezone.name());
|
||
jQuery("#range_select").submit();
|
||
});
|
||
</script>
|
||
|
||
|
||
|
||
<footer>
|
||
<!~~Plot data~~>
|
||
<script type="text/javascript">
|
||
var graph = {{graphJSON | safe}};
|
||
Plotly.plot('plotly-plot', graph.data, graph.layout);
|
||
</script>
|
||
</footer>
|
||
|
||
-</html> |