index.html.haml

!!!
%html
  %head
    %title Home Control
    %script{ src: "//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"  }
    %script{ src: "//cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.16/socket.io.min.js" }
    %stylesheet{ href: "//cdnjs.cloudflare.com/ajax/libs/skeleton/1.2/skeleton.min.css" }
    :css
      * {
        font-family: "Helvetica", sans-serif;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      button.btn-block, a.btn-block {
        display: block;
        width: 100%;
      }
      button.btn-large, a.btn-large {
        margin-top: 3em;
        padding: 1em;
        font-size: 2em;
      }
      button, a {
        cursor: pointer;
      }
      [data-pin-status="1"] {
        background-color: darkgreen;
        color: white;
      }
      [data-pin-status="0"] {
        background-color: maroon;
        color: white;
      }
  %body
    .container#update-pins
      .row
        .sixteen.columns
          <button class="btn-block btn-large pin" data-pin-id=11> Lamp On/Off </button>
      .row
        .sixteen.columns
          <button class="btn-block btn-large pin" data-pin-id=12> Christmas Lights On/Off </button>

    :javascript
      var socket = io.connect('http://192.168.1.3:3000');

      socket.on('message', function(data) {
        console.log(data);
      });

      $(function() {
        var pins = $(".pin");

        $("#update-pins .pin").on('click', function( event ) {
          event.preventDefault();

          var data = {};
          var pinId = $(this).attr("data-pin-id");
          console.log($(this));

          var action;
          if ( $(this).attr("data-pin-status") == 1 ) {
            action = 0;
          } else {
            action = 1;
          }

          console.log(data);

          data[pinId] = action;
          socket.emit('update-pins', data );


          $(this).attr("data-pin-status", action);
        });
      });