{% extends "bootstrap/base.html" %}
{% block title %}Flask-MQTT example{% endblock %}

{% block styles %}
{{ super() }}
{% endblock %}

{% block scripts %}
{{ super() }}
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    //建立連接
    var socket = io.connect('http://' + document.domain + ':' + location.port);
    MQTT();
    var duration = 1000 * 60 * 2;
    var timer = setInterval(MQTT, duration);

    function MQTT(){
      console.log("start to send mqtt...");
      var topic = $('#topic').val();
      var command = $('#command').val();
      var qos = $('#qos').val();
      var data = '{"topic": "' + topic + '", "command": "' + command + '", "qos": ' + qos + '}';
      //發送訊息到app.py
      socket.emit('publish', data=data);
    };
    //接收回傳訊息
    socket.on('mqtt_message', function(data) {
      var text = data['payload'];
      var $textarea = $('#subscribe_messages');
      $textarea.val($textarea.val() + text + '\n');
      console.log("recieve mqtt message...");
    })
  });
</script>
{% endblock %}

{% block content %}
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <h1>LandGreen-MQTT</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Publish MQTT Message</h3>
        </div>
        <div class="panel-body">
          <div class="col-xs-12">
            <div class="row">
              <div class="form-horizontal">
                <div class="form-group">
                  <label class="control-label col-xs-4">Topic: </label>
                  <div class="col-xs-8">
                    <input id="topic" class="form-control" value="AISKY/AppleFarm/MK-G/9c:65:f9:1e:66:b3">
                  </div>
                </div>
                <div class="form-group">
                  <label class="control-label col-xs-4">Command: </label>
                  <div class="col-xs-8">
                    <input id="command" class="form-control">
                  </div>
                </div>
                <div class="form-group">
                  <label class="control-label col-xs-4">Qos: </label>
                  <div class="col-xs-8">
                    <select id="qos" class="form-control">
                      <option value=0>0</option>
                      <option value=1>1</option>
                      <option value=2>2</option>
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-xs-8 col-xs-offset-4">
                    <button id="publish" class="btn btn-primary">Publish</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Subscribe MQTT Messages</h3>
        </div>
        <div class="panel-body">
          <div class="col-xs-12">
            <div class="row">
              <div class="form-horizontal">
                <div class="form-group">
                  <label class="control-label col-xs-4">Messages:</label>
                  <div class="col-xs-8">
                    <textarea id="subscribe_messages" class="form-control" rows=10></textarea>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}