Open-Source-Access-Control-.../app/views/space_api/access.html.erb
2014-02-09 00:56:48 -07:00

143 lines
4.8 KiB
Plaintext
Executable File

<% content_for :header do %>
<h3>Door Control System</h3>
<% end %>
<% if @output %>
<p class="notice">
<%= raw @output %>
</p>
<hr/>
<% end %>
<style type="text/css">
#status, #status span { display: inline-block; text-align: center; font-weight: bold; border-radius: 5px; }
#status { width: 400px;}
#status span { border: 1px solid black; width: 180px; padding: 5px; margin: 1em 0;}
#status span button { width: 100%; margin: 0.2em 0;}
#webcams-button { margin: 1em 0 0; }
#cam { width: 100%; }
@media only screen and (max-width: 769px){
#header a:not(#home_nav_link) { display: none; }
#title {
position: absolute;
top: 0;
left: 45px;
}
#status { width: 100%; }
#status span { width: 45%; border: none; padding: 1%; margin: 0; }
#status span button { font-size: 1.8em; height: 2em;}
#webcams-button { margin: 5px 0 0; }
}
.open { background-color: green; }
.closed { background-color: red; }
.open>button.unlock, .closed>button.lock { background: #bbb; }
</style>
<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(){
// grab status from space api
$.get( "<%= space_api_path(:format => :json) %>", function( data ) {
switch(data.status){
case "doors_open=both":
$( "#status, #overall_status" ).attr("class","open");
$( "#door_1_status" ).attr("class","open");
$( "#door_2_status" ).attr("class","open");
break;
case "doors_open=door1":
$( "#status" ).attr("class","open"); // don't apply overall_status style because it's both
$( "#door_1_status" ).attr("class","open");
$( "#door_2_status" ).attr("class","closed");
break;
case "doors_open=door2":
$( "#status" ).attr("class","open"); // don't apply overall_status style because it's both
$( "#door_1_status" ).attr("class","closed");
$( "#door_2_status" ).attr("class","open");
break;
case "doors_open=none":
$( "#status, #overall_status" ).attr("class","closed");
$( "#door_1_status" ).attr("class","closed");
$( "#door_2_status" ).attr("class","closed");
break;
}
});
}
function updateMacStatus(){
$.get( "/macs.json", function( data ) {
$("#mac_status").text($.unique(data.map(function(item){
return item.name;
})).sort().join(", "));
});
}
// run once
updateDoorStatus();
updateMacStatus();
// and again every few seconds
setInterval(updateDoorStatus, 60000);
setInterval(updateMacStatus, 60000);
</script>
<%= form_tag do %>
<% unless user_signed_in? %>
<p>
<%= label_tag :user, "Email Address" %><br/>
<%= text_field_tag :user %>
</p>
<p>
<%= label_tag :pass, "Password" %><br/>
<%= password_field_tag :pass %>
</p>
<% end %>
<span id="status">
<div>
<span id="overall_status">
Both<br/>
<%= button_tag "Unlock", {name: "cmd", value: "unlock", class: "btn unlock"} %>
<%= button_tag "Lock", {name: "cmd", value: "lock", class: "btn lock"} %>
</span>
</div>
<span id="door_1_status">
Front Door<br/>
<%= button_tag "Open", {name: "cmd", value: "open-front", class: "btn unlock"} %>
<%= button_tag "Unlock", {name: "cmd", value: "unlock-front", class: "btn unlock"} %>
<%= button_tag "Lock", {name: "cmd", value: "lock-front", class: "btn lock"} %>
</span>
<span id="door_2_status">
Rear Door<br/>
<%= button_tag "Open", {name: "cmd", value: "open-rear", class: "btn unlock"} %>
<%= button_tag "Unlock", {name: "cmd", value: "unlock-rear", class: "btn unlock"} %>
<%= button_tag "Lock", {name: "cmd", value: "lock-rear", class: "btn lock"} %>
</span>
<p>Green = open, Red = locked.</p>
</span>
<!--
<h3>Alarm</h3>
<p>
<input type="submit" name="cmd" value="arm" class="btn">
<input type="submit" name="cmd" value="disarm" class="btn">
</p>
-->
<% end %>
<button id="webcams-button" class="btn" data-toggle="modal" data-target="#webcams">Who's Here?</button>
<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>