<% 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">×</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>