Open-Source-Access-Control-Web-Interface/app/views/door_logs/index.html.erb

<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>
<div id="log-guide" style="display: none;">
<pre>
Guide to Card Number storage:
cardnum = (R+(r*32767)), convert to hex

Guide to log keys and data:

Commands:
 * rem_ = remote command issues via web UI (#=user id)
Statuses:
 * armed = current status of alarm arming
 * activated = current status of alarm ringing
 * alarm_2 = current status of alarm sensor 2
 * alarm_3 = current status of alarm sensor 3
 * door_1_locked = status of door 1
 * door_2_locked = status of door 2
Log Entries:
 * A=alarm armed (# level)
 * a=added user (# usernum)
 * C=keypad command (# command)
 * c=second half
 * c=checked user (0=failed, #=found usernum)
 * D=denied access (# card num)
 * d=second half
 * d=deleted user (# usernum)
 * E=second (#=second)
 * F=priv fail (0=wrong pw, 1=too many attempts, 2=not logged in)
 * f=second half
 * f=card fail (#=usermask)
 * G=granted access (# card num)
 * g=second half of card
 * H=hour (#=hour)
 * i=attempt to write to invalid eeprom address (# usernum)
 * I=attempt to delete from invalid eeprom address (# usernum)
 * L=locked (1=door1, 2=door2, 3=bedtime)
 * M=minute (#=minute)
 * m=alarm state (# level)
 * p=power restored / arduino boot (1)
 * R=read tag (# card num)
 * r=second half of tag
 * Q=superuser authed (#=superuser)
 * S=auth (0=privileged mode enabled)
 * s=alarm sensor (# zone)
 * t=alarm trained (#=sensor value)
 * T=alarm triggered (0)
 * U=unlocked door (1=door1, 2=door2, # card num)
 * u=second half of card
 * Z=user db cleared (0)
 * z=log cleared (0)
</pre>
</div>
<table>
  <tr>
    <th>Date</th>
    <th>Key</th>
    <th>Data</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>

<% @divided_tmp = nil %>
<% @door_logs.each do |door_log| %>
  <tr>
    <td><%= door_log.created_at %></td>
    <td><%= door_log.key %></td>
    <td><%= door_log.data %></td>
    <% 
      if door_log.key == 'r' || door_log.key == 'd' ||door_log.key == 'g'
        @divided_tmp = door_log.data.to_i
      elsif (door_log.key == 'R' || door_log.key == 'D' || door_log.key == 'G') && !@divided_tmp.nil? %>
      <td>
        <%= case door_log.key
              when 'R'
                "Read"
              when 'D'
                "Denied"
              when 'G'
                "Granted"
              end %>
        <% @cardnum = (door_log.data.to_i+(@divided_tmp*32767)).to_s(16) %>
        <%= "Card: "+@cardnum %>
	<% @card = Card.find(:first,:conditions=>['lower(card_number) = ?', @cardnum.downcase]) %>
	<%= "("+@card.user.name+")" unless @card.nil? %>
      </td>
   <% else 
        @divided_tmp = nil
      end %>
  </tr>
<% end %>
</table>

<br />