<!DOCTYPE html>
<html>
<head>
    {% include "common/common-head.html" %}
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    {% include "common/page-header.html" %}
    {% with pageselected="settings/mqtt" %}
    {% include "common/sidebar-menu.html" %}
    {% endwith %}

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
          MQTT configuration
      </h1>
    </section>

    <!-- Main content -->
    <section class="content">



        <div class="row" id="notification-success" style="display: none;">
            <div class="col-md-12">
                <div class="box box-success box-solid">
                    <div class="box-header with-border">
                        <h3 class="box-title">Settings saved!</h3>
    
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="remove"><i
                                    class="fa fa-times"></i></button>
                        </div>
                        <!-- /.box-tools -->
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        The body of the box
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
    
        <div class="row" id="notification-error" style="display: none;">
                <div class="col-md-12">
                    <div class="box box-danger box-solid">
                        <div class="box-header with-border">
                            <h3 class="box-title">Error saving settings!</h3>
        
                            <div class="box-tools pull-right">
                                <button type="button" class="btn btn-box-tool" data-widget="remove"><i
                                        class="fa fa-times"></i></button>
                            </div>
                            <!-- /.box-tools -->
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            The body of the box
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
    





<div class="row">
<!-- left column -->
<div class="col-md-12">
<!-- general form elements -->
<div class="box box-primary">
    <!-- form start -->
    <form role="form" id="theform" class="form-horizontal">

      <div class="box-body">
        <div class="form-group">
          <label class="col-sm-2 control-label" for="brokerip">Broker IP address</label>
          <div class="col-sm-10">
              <input type="text" class="form-control" id="brokerip" placeholder="MQTT broker IP address or hostname" value="{{ r_brokerip }}">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label" for="brokerport">Broker port</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="brokerport" placeholder="MQTT broker port" value="{{ r_brokerport }}">
              </div>
            </div>
          
        <div class="form-group">
          <label class="col-sm-2 control-label" for="clientid">MQTT Client ID</label>
          <div class="col-sm-10">
              <input type="text" class="form-control" id="clientid" placeholder="MQTT client ID" value="{{ r_clientid }}">
            </div>
          </div>

          <div class="form-group">
              <label class="col-sm-2 control-label" for="username">Username</label>
              <div class="col-sm-10">
                  <input type="text" class="form-control" id="username" placeholder="MQTT broker username" value="{{ r_username }}">
                </div>
              </div>

              <div class="form-group">
          <label class="col-sm-2 control-label" for="password">Password</label>
          <div class="col-sm-10">
              <input type="text" class="form-control" id="password" placeholder="MQTT broker password" value="{{ r_password }}">
            </div>
          </div>

          <div class="form-group">
              <label class="col-sm-2 control-label" for="topic">Topic</label>
              <div class="col-sm-10">
                  <input type="text" class="form-control" id="topic" placeholder="MQTT topic" value="{{ r_topic }}">
                </div>
              </div>
    

              <div class="form-group">
                  <div class="col-sm-offset-2 col-sm-10">
                    <div class="checkbox">
                      <label>
<!--    value !!!!   -->
                        <input type="checkbox" id="cleansession"> Clean session
                      </label>
                    </div>
                  </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                      <div class="checkbox">
                        <label>
  <!--    value !!!!   -->
                          <input type="checkbox" id="homeassistant"> HomeAssistant auto discovery
                        </label>
                      </div>
                    </div>
                  </div>
  

      </div>
    <!-- /.box-body -->




      <div class="box-footer">
          <button type="submit" class="btn btn-primary pull-right">Save</button>
      </div>
    </form>
</div>
<!-- /.box -->

</div>
<!--/.col (right) -->
</div>
<!-- /.row -->


      
        </section>
        <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->
        
        {% include "common/footer.html" %}
        
        </div>
        <!-- ./wrapper -->
        
        {% include "common/common-js.html" %}
        

        <script>
            $(function () {
                $('#brokerip').select();
                $('#theform').on( 'submit', function (e) {
                        e.preventDefault();

                        
            
                        $.ajax({
                             url: '/json/settings/mqtt',
                             type: 'post',
                             data: {
                              'brokerip': $('#brokerip').val(),
                              'brokerport': $('#brokerport').val(),
                              'clientid': $('#clientid').val(),
                              'username': $('#username').val(),
                              'password': $('#password').val(),
                              'topic': $('#topic').val(),
                              'cleansession': $('#cleansession').val(),
                              'homeassistant': $('#homeassistant').val(),
                                },
                            })
                          .done(function(r) {
                            if (r.result=='ok') {
                                $('#notification-success .box-body').text('MQTT settings saved.');
                                $("#notification-success").show("fast");
                                setTimeout(function(){
                                    $("#notification-success").fadeOut("slow");
                                },1000);
                            } else {
                                $('#notification-error .box-body').text('Error saving MQTT settings.');
                                $("#notification-error").show("fast");
                                setTimeout(function(){
                                    $("#notification-error").fadeOut("slow");
                                },5000);
                            }
                          })
                          .fail(function(jqXHR, textStatus, errorThrown) {
                            var responseText = jQuery.parseJSON(jqXHR.responseText);
                            $('#notification-error .box-body').text('Something went wrong. Settings not saved.');
                            $("#notification-error").show("fast");
                            setTimeout(function(){
                                $("#notification-error").fadeOut("slow");
                            },5000);
            
                          });
            
                      });    
            })
            </script>
            


</body>
</html>
        