Adding graph to door log (open/closed)
This commit is contained in:
parent
2f4872218e
commit
57a5a00352
|
|
@ -5,7 +5,35 @@ class DoorLogsController < ApplicationController
|
|||
# GET /door_logs
|
||||
# GET /door_logs.json
|
||||
def index
|
||||
@door_logs = DoorLog.find(:all, :order => "created_at DESC", :limit => 500)
|
||||
@door_logs = DoorLog.find(:all, :order => "created_at DESC", :limit => 100)
|
||||
|
||||
|
||||
begin
|
||||
@start_date = DateTime.parse(params[:start])
|
||||
@end_date = DateTime.parse(params[:end])
|
||||
rescue
|
||||
@start_date = DateTime.now - 2.weeks
|
||||
@end_date = DateTime.now
|
||||
end
|
||||
|
||||
@door_logs_by_hour = DoorLog.where("created_at > ? AND created_at < ? AND (key = ? OR key = ?)", @start_date, @end_date,"door_1_locked","door_2_locked").order("created_at ASC").group_by(&:key)
|
||||
@door_log_graph = [
|
||||
@door_logs_by_hour["door_1_locked"].map{|d| [d.created_at.to_time.to_i*1000, 1^d.data.to_i]}, # use XOR to invert 1 into 0 and vice versa
|
||||
@door_logs_by_hour["door_2_locked"].map{|d| [d.created_at.to_time.to_i*1000, 1^d.data.to_i]}
|
||||
]
|
||||
|
||||
# @door_logs_by_hour.each do |door_log|
|
||||
# # Add one computer for activate, subtract one for deactivate
|
||||
# if door_log.data == 1
|
||||
#
|
||||
# elsif door_log.data == 0
|
||||
# mac_running_balance -= 1
|
||||
# end
|
||||
|
||||
# @door_log_graph << [time.to_time.to_i*1000,mac_running_balance]
|
||||
# end
|
||||
|
||||
|
||||
|
||||
respond_to do |format|
|
||||
format.html # index.html.erb
|
||||
|
|
|
|||
|
|
@ -1,4 +1,151 @@
|
|||
<h1>Door Logs</h1>
|
||||
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
|
||||
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
graph_data = <%= raw @door_log_graph.to_json %>;
|
||||
|
||||
plot_band_start_hour = 16;
|
||||
plot_band_end_hour = 22;
|
||||
|
||||
$(function() {
|
||||
|
||||
$( "#graph-dialog" ).dialog({
|
||||
autoOpen: false,
|
||||
height: 480,
|
||||
width: 640,
|
||||
modal: true,
|
||||
});
|
||||
|
||||
$( "#graph-button" ).click(function() {
|
||||
$( "#graph-dialog" ).dialog( "open" );
|
||||
});
|
||||
|
||||
|
||||
$('#graph').highcharts({
|
||||
chart: {
|
||||
type: 'line',
|
||||
zoomType : 'x'
|
||||
},
|
||||
colors: [
|
||||
'#2f7ed8',
|
||||
'#910000'
|
||||
],
|
||||
title: {
|
||||
style : { fontSize: '12px' },
|
||||
text: "Click a Door in the Legend to Hide"
|
||||
},
|
||||
subtitle: {
|
||||
style : { fontSize: '10px' },
|
||||
text: "Click and Drag to Zoom."
|
||||
},
|
||||
xAxis: {
|
||||
type : 'datetime',
|
||||
// grab plot bands from start and end time
|
||||
plotBands: generatePlotBands(graph_data[0][0][0], graph_data[0][graph_data[0].length-1][0]),
|
||||
labels : { align : "left" }
|
||||
},
|
||||
yAxis : {
|
||||
title : {
|
||||
text : "Door Open History"
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Door 1",
|
||||
data: graph_data[0]
|
||||
},
|
||||
{
|
||||
name: "Door 2",
|
||||
data: graph_data[1]
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
shared: true,
|
||||
xDateFormat: '%A %B %e, %l:%M %P',
|
||||
formatter: function() {
|
||||
output = '<b>'+ Highcharts.dateFormat(this.points[0].series.tooltipOptions.xDateFormat,this.x) +'</b><br/>';
|
||||
total = 0;
|
||||
this.points.forEach(function(e,i,a){
|
||||
if(e.y == 1){ val = "Open"; } else { val = "Closed"; }
|
||||
output += '<b><span style="color:'+e.series.color+'">'+e.series.name +'</span>: ' + val +'</b><br/>';
|
||||
});
|
||||
return output;
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
line: {
|
||||
marker: {
|
||||
enabled: false
|
||||
},
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Highcharts.setOptions({
|
||||
global : {
|
||||
useUTC : false
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function generatePlotBands(start,end){
|
||||
plotBands = new Array();
|
||||
for (var d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
|
||||
// weekends
|
||||
if(d.getDay()%6==0){
|
||||
// highlight the whole day
|
||||
plotBands.push({
|
||||
color: '#eee',
|
||||
from: d.setHours(0),
|
||||
to: d.setHours(23)
|
||||
});
|
||||
// weekend hours
|
||||
plotBands.push({
|
||||
color: '#94C9EC',
|
||||
from: d.setHours(12),
|
||||
to: d.setHours(18)
|
||||
});
|
||||
}
|
||||
else if(d.getDay()==3){
|
||||
// special wednesday hours
|
||||
plotBands.push({
|
||||
color: '#94C9EC',
|
||||
from: d.setHours(12),
|
||||
to: d.setHours(plot_band_end_hour)
|
||||
});
|
||||
}
|
||||
else {
|
||||
// open hours
|
||||
plotBands.push({
|
||||
color: '#82DAC9',
|
||||
from: d.setHours(plot_band_start_hour),
|
||||
to: d.setHours(plot_band_end_hour)
|
||||
});
|
||||
}
|
||||
}
|
||||
return plotBands;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div id="graph-dialog" title="Door Status">
|
||||
|
||||
<div id="graph" style="height: 400px; width: 600px; float: right;"></div>
|
||||
|
||||
<%= form_tag(nil, :method => :get) do %>
|
||||
<label>Start Date
|
||||
<input id="start" name="start" type="date" value="<%= @start_date.to_date.to_s %>" />
|
||||
</label>
|
||||
<label>End Date
|
||||
<input id="end" name="end" type="date" value="<%= @end_date.to_date.to_s %>" />
|
||||
</label>
|
||||
<%= submit_tag("Change Date", :name => nil, :class => 'btn') %>
|
||||
<% end %>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<h1>Door Logs <button id="graph-button" class="btn">View Graph</button></h1>
|
||||
|
||||
<%= link_to 'Download Door Logs', download_path %>
|
||||
<a href="#" onclick="$('#log-guide').toggle();">Show Log Guide</a>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
|
||||
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
|
||||
<script src="http://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
|
||||
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script type="text/javascript">
|
||||
graph_data = <%= raw @mac_log_graph.to_json %>;
|
||||
plot_band_start_hour = 16;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
|
||||
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
|
||||
<script src="http://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
|
||||
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-migrate-1.2.1.js"></script>
|
||||
<script type="text/javascript" src="/wymeditor/wymeditor/jquery.wymeditor.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user