Open-Source-Access-Control-Web-Interface/app/views/space_api/access.html.erb

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