Make NTU Hackathon / Program5_mbedConnectorQuickstart

mbed connector webapp quickstart

views/index.hbs

Committer:
group-Make-NTU-Hackathon
Date:
2017-02-10
Revision:
0:4233b7b10255

File content as of revision 0:4233b7b10255:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>mbed Device Connector Webapp Quickstart</title>

    <link rel="stylesheet" href="static/css/normalize.css">
    <link rel="stylesheet" href="static/css/foundation.min.css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="static/css/styles.css">

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="row margin">
      <div class="small-12 columns">
        <div><img src="static/img/ARMmbedLogo.png" alt="ARM mbed"></div>
      </div>
    </div>
    <div class="blueband">
      <div class="row">
        <div class="small-12 columns">
          <h1>Webapp Quickstart</h1>
        </div>
      </div>
    </div>
    <div id="endpoints">
    {{#each endpoints}}
      <div class="row" id="{{name}}">
        <div class="small-12 columns">
          <div class="row">
            <div class="small-12 columns">
              <h2>{{name}}</h2>
            </div>
          </div>
          <div class="row">
            <div class="small-12 medium-6 columns">
              <h4>Presses: <span class="presses-value">Unknown</span></h4>
              <label><input type="checkbox" class="subscribe-presses"> Subscribe</label>
              <button class="get-presses">GET</button>
            </div>
            <div class="small-12 medium-6 columns">
              <h4>LED Blink Pattern</h4>
              <div>
                <input type="text" value="{{blinkPattern}}" class="blink-pattern">
              </div>
              <div class="row">
                <div class="small-6 columns">
                  <button class="update-blink-pattern">Update (PUT)</button>
                </div>
                <div class="small-6 columns text-right">
                  <button class="blink">Blink (POST)</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    {{/each}}
    </div>


    <script type="text/javascript" src="/static/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="/static/js/socket.io.js"></script>
    <script type="text/javascript">
      $(function() {
        var socket = io();

        $('#endpoints').children().each(function(index, element) {
          var _this = $(this);
          _this.find('.subscribe-presses').change(function() {
            if ($(this).is(":checked")) {
              _this.find('.get-presses').prop('disabled', true);
              socket.emit('subscribe_to_presses', {
                endpointName: _this.attr('id')
              });
            } else {
              _this.find('.get-presses').prop('disabled', false);
              socket.emit('unsubscribe_to_presses', {
                endpointName: _this.attr('id')
              });
            }
          });

          _this.find('.get-presses').on('click', function() {
            socket.emit('get_presses', {
              endpointName: _this.attr('id')
            });
          });

          _this.find('.blink-pattern').bind('input', function() {
            _this.find('.update-blink-pattern').addClass('active');
          })

          _this.find('.update-blink-pattern').on('click', function() {
            socket.emit('update_blink_pattern', {
              endpointName: _this.attr('id'),
              blinkPattern: _this.find('.blink-pattern').val()
            });

            $(this).removeClass('active');
          });

          _this.find('.blink').on('click', function() {
            socket.emit('blink', {
              endpointName: _this.attr('id')
            });
          });
        });


        socket.on('presses', function (data) {
          console.log('presses', data);
          $('#' + data.endpointName + ' .presses-value').html(data.value);
        });

        socket.on('subscribed-to-presses', function (data) {
          console.log('subscribed-to-presses', data);
        });

        socket.on('unsubscribed-to-presses', function (data) {
          console.log('unsubscribed-to-presses', data);
        });

      });
    </script>
  </body>
</html>