will/Open-Source-Access-Control-Web-Interface
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changing door access tablet interface

Browse Source
This commit is contained in:
Will Bradley 2013-12-29 21:56:47 -07:00
parent cbadcc5c73
commit 6157280655
4 changed files with 97 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/views/layouts/application.html.erb
View File

@ -17,7 +17,7 @@
<% else %> <% else %>
<%= link_to 'Certifications', certifications_path if can? :read, Certification %> <%= link_to 'Certifications', certifications_path if can? :read, Certification %>
<% end %> <% end %>
<%= link_to 'Payments', payments_path if can? :read, Payment %> <%= link_to 'Payments', payments_path if can? :create, Payment %>
<%= link_to 'Computers', macs_path if user_signed_in? || (can? :read, Mac) %> <%= link_to 'Computers', macs_path if user_signed_in? || (can? :read, Mac) %>
<%= link_to 'Settings', settings_path if can? :read, Setting %> <%= link_to 'Settings', settings_path if can? :read, Setting %>
<% if user_signed_in? then %><%= link_to 'Profile', edit_user_registration_path %><% end %> <% if user_signed_in? then %><%= link_to 'Profile', edit_user_registration_path %><% end %>

37
app/views/layouts/space_api.html.erb Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<title>HSL Access</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a id="home_nav_link" href="/" title="Home" class="navbar-brand">
<img src="/assets/logo.png" id="logo" />
</a>
<ul class="nav navbar-nav">
<li class="active">
<%= yield :header %>
</li>
</ul>
</div>
</nav>
<div id="content">
<% if(notice) then %><p class="notice"><%= raw(notice) %></p><% end %>
<% if(alert) then %><p class="alert"><%= raw(alert) %></p><% end %>
<%= yield %>
</div>
<%= raw Setting.analytics_code if Setting.present? %>
</body>
</html>

84
app/views/space_api/access.html.erb
View File

@ -1,17 +1,21 @@
<h2 id="title">Door Control System</h2> <% content_for :header do %>
<h3>Door Control System</h3>
<% end %>
<% if @output %> <% if @output %>
<p class="notice"> <p class="notice">
<%= raw @output %> <%= raw @output %>
</p> </p>
<hr/> <hr/>
<% end %> <% end %>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css"> <style type="text/css">
#status, #status span { display: inline-block; text-align: center; font-weight: bold; border-radius: 5px; } #status, #status span { display: inline-block; text-align: center; font-weight: bold; border-radius: 5px; }
#status { width: 400px;} #status { width: 400px;}
#status span { border: 1px solid black; width: 180px; padding: 5px; } #status span { border: 1px solid black; width: 180px; padding: 5px; margin: 1em 0;}
#status span input { width: 100%; margin: 0.2em 0;} #status span button { width: 100%; margin: 0.2em 0;}
@media only screen and (max-width: 480px){ #webcams-button { margin: 1em 0 0; }
#cam { width: 100%; }
@media only screen and (max-width: 769px){
#header a:not(#home_nav_link) { display: none; } #header a:not(#home_nav_link) { display: none; }
#title { #title {
position: absolute; position: absolute;
@ -19,35 +23,41 @@
left: 45px; left: 45px;
} }
#status { width: 100%; } #status { width: 100%; }
#status span { width: 45%; border: none; padding: 1%; margin: 1em 0; } #status span { width: 45%; border: none; padding: 1%; margin: 0; }
#status span input { font-size: 1.8em; height: 2em;} #status span button { font-size: 1.8em; height: 2em;}
#webcams-button { margin: 5px 0 0; }
} }
.open { background-color: green; } .open { background-color: green; }
.closed { background-color: red; } .closed { background-color: red; }
.open input.unlock, .closed input.lock { background: #bbb; } .open>button.unlock, .closed>button.lock { background: #bbb; }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
function refreshCam(){
$('#cam').attr("src", 'http://live.heatsynclabs.org/snapshot.php?camera=1&'+Math.round(Math.random()*1000000));
return false;
}
function updateDoorStatus(){ function updateDoorStatus(){
// grab status from space api // grab status from space api
$.get( "<%= space_api_path(:format => :json) %>", function( data ) { $.get( "<%= space_api_path(:format => :json) %>", function( data ) {
switch(data.status){ switch(data.status){
case "doors_open=both": case "doors_open=both":
$( "#status" ).attr("class","open"); $( "#status, #overall_status" ).attr("class","open");
$( "#door_1_status" ).attr("class","open"); $( "#door_1_status" ).attr("class","open");
$( "#door_2_status" ).attr("class","open"); $( "#door_2_status" ).attr("class","open");
break; break;
case "doors_open=door1": case "doors_open=door1":
$( "#status" ).attr("class","open"); $( "#status" ).attr("class","open"); // don't apply overall_status style because it's both
$( "#door_1_status" ).attr("class","open"); $( "#door_1_status" ).attr("class","open");
$( "#door_2_status" ).attr("class","closed"); $( "#door_2_status" ).attr("class","closed");
break; break;
case "doors_open=door2": case "doors_open=door2":
$( "#status" ).attr("class","open"); $( "#status" ).attr("class","open"); // don't apply overall_status style because it's both
$( "#door_1_status" ).attr("class","closed"); $( "#door_1_status" ).attr("class","closed");
$( "#door_2_status" ).attr("class","open"); $( "#door_2_status" ).attr("class","open");
break; break;
case "doors_open=none": case "doors_open=none":
$( "#status" ).attr("class","closed"); $( "#status, #overall_status" ).attr("class","closed");
$( "#door_1_status" ).attr("class","closed"); $( "#door_1_status" ).attr("class","closed");
$( "#door_2_status" ).attr("class","closed"); $( "#door_2_status" ).attr("class","closed");
break; break;
@ -56,17 +66,17 @@
} }
function updateMacStatus(){ function updateMacStatus(){
$.get( "/macs.json", function( data ) { $.get( "/macs.json", function( data ) {
$("#mac_status").text(data.map(function(item){ $("#mac_status").text($.unique(data.map(function(item){
return item.name; return item.name;
}).join(", ")); })).sort().join(", "));
}); });
} }
// run once // run once
updateDoorStatus(); updateDoorStatus();
updateMacStatus(); updateMacStatus();
// and again every few seconds // and again every few seconds
setInterval(updateDoorStatus, 10000);
setInterval(updateDoorStatus, 60000); setInterval(updateDoorStatus, 60000);
setInterval(updateMacStatus, 60000);
</script> </script>
<%= form_tag do %> <%= form_tag do %>
<% unless user_signed_in? %> <% unless user_signed_in? %>
@ -83,22 +93,23 @@
<div> <div>
<span id="overall_status"> <span id="overall_status">
Both<br/> Both<br/>
<input type="submit" name="cmd" value="unlock" class="btn unlock"> <%= button_tag "Unlock", {name: "cmd", value: "unlock", class: "btn unlock"} %>
<input type="submit" name="cmd" value="lock" class="btn lock"> <%= button_tag "Lock", {name: "cmd", value: "lock", class: "btn lock"} %>
</span> </span>
</div> </div>
<span id="door_1_status"> <span id="door_1_status">
Door 1<br/> Front Door<br/>
<input type="submit" name="cmd" value="open-front" class="btn unlock"> <%= button_tag "Open", {name: "cmd", value: "open-front", class: "btn unlock"} %>
<input type="submit" name="cmd" value="unlock-front" class="btn unlock"> <%= button_tag "Unlock", {name: "cmd", value: "unlock-front", class: "btn unlock"} %>
<input type="submit" name="cmd" value="lock-front" class="btn lock"> <%= button_tag "Lock", {name: "cmd", value: "lock-front", class: "btn lock"} %>
</span> </span>
<span id="door_2_status"> <span id="door_2_status">
Door 2<br/> Rear Door<br/>
<input type="submit" name="cmd" value="open-rear" class="btn unlock"> <%= button_tag "Open", {name: "cmd", value: "open-rear", class: "btn unlock"} %>
<input type="submit" name="cmd" value="unlock-rear" class="btn unlock"> <%= button_tag "Unlock", {name: "cmd", value: "unlock-rear", class: "btn unlock"} %>
<input type="submit" name="cmd" value="lock-rear" class="btn lock"> <%= button_tag "Lock", {name: "cmd", value: "lock-rear", class: "btn lock"} %>
</span> </span>
<p>Green = open, Red = locked.</p>
</span> </span>
<!-- <!--
<h3>Alarm</h3> <h3>Alarm</h3>
@ -107,8 +118,25 @@
<input type="submit" name="cmd" value="disarm" class="btn"> <input type="submit" name="cmd" value="disarm" class="btn">
</p> </p>
--> -->
<% end %> <% end %>
<h3>Who's here?</h3> <button id="webcams-button" class="btn" data-toggle="modal" data-target="#webcams">Who's Here?</button>
<p id="mac_status">
</p> <div class="modal fade" id="webcams" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Webcam</h4>
<em>(click to refresh)</em>
</div>
<div class="modal-body">
<a href="#" onclick="refreshCam()">
<img id="cam" src="http://live.heatsynclabs.org/snapshot.php?camera=1">
</a>
<p id="mac_status"></p>
</div>
</div>
</div>
</div>

3
app/views/space_api/index.html.erb
View File

@ -1,6 +1,9 @@
<% content_for :header do %>
<h2>Space Status API <h2>Space Status API
<%= link_to 'JSON', space_api_path( :format => :json ), :class => 'btn' %> <%= link_to 'JSON', space_api_path( :format => :json ), :class => 'btn' %>
<%= link_to 'Door Access', space_api_access_path, :class => 'btn' %>
</h2> </h2>
<% end %>
<dl> <dl>
<% @json.each do |key,value| %> <% @json.each do |key,value| %>