Adding graph to door log (open/closed)

app/controllers/door_logs_controller.rb

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

app/views/door_logs/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>

app/views/macs/history.html.erb

@@ -1,6 +1,6 @@
-<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
+<script src="https://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" />
+<link rel="stylesheet" href="https://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.highcharts.com/highcharts.js"></script>
 <script type="text/javascript">
 graph_data = <%= raw @mac_log_graph.to_json %>;
 plot_band_start_hour = 16;

app/views/payments/index.html.erb

@@ -1,6 +1,6 @@
-<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
+<script src="https://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" />
+<link rel="stylesheet" href="https://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.highcharts.com/highcharts.js"></script>
 <script type="text/javascript">
 $(function() {
 

app/views/settings/edit.html.erb

@@ -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(){