<!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="status" %}
    {% include "common/sidebar-menu.html" %}
    {% endwith %}

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

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


      <div class="row">
        <div class="col-xs-12">
          <div class="box">

            <div class="box-body">
              <table id="example2" class="table table-bordered table-hover">
                <thead>
                <tr>
                  <th style="width: 15px">#</th>
                  <th>Plug name</th>
                  <th style="width: 30px">Status</th>
                  <th style="width: 300px">Power load</th>
                  <th style="width: 150px">Command</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->

        </section>
        <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->
        
        {% include "common/footer.html" %}
        
        </div>
        <!-- ./wrapper -->
        
        {% include "common/common-js.html" %}
        
<!-- DataTables -->
<script src="../../bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="../../bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>

<script>
        $(function () {
          var btnhtml = `<div class="btn-group">
                    <button type="button" class="btn btn-info" script="toggle">Toggle</button>
                    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                      <span class="caret"></span>
                      <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                      <li><a href="#">On</a></li>
                      <li><a href="#">Off</a></li>
                      <li class="divider"></li>
                      <li><a href="#">Edit</a></li>
                    </ul>
                  </div>`;


          var table = $('#example2').DataTable({
            'ajax': '/json/status',
            "columns" : [
            { "data" : 0 },
            { "data" : 1 },
            { "data" : 2 },
            { "data" : null, "defaultContent": "<div class='progress progress-xs'><div class='progress-bar progress-bar-danger' style='width: 55%'></div></div>"},
            { "data" : null, "defaultContent":btnhtml }
          ],
            'paging'      : true,
            'lengthChange': true,
            'searching'   : true,
            'ordering'    : true,
            'info'        : true
          });

        // fa-toggle-off

        $('#example2 tbody').on( 'click', '[script="toggle"]', function (e) {
          e.preventDefault();
          var id = $( this ).closest('tr').find('td:first').text();
          $.ajax({
              url: '/json/outlet/'+id+'/toggle',
              type: 'post'
            })
              .done(function(result) {
                console.log(result);
                table.ajax.reload();
              })
              .fail(function(jqXHR, textStatus, errorThrown) {
                // needs to implement if it fails
                console.log(textStatus);
              });

          });

    } );

      </script>


        </body>
        </html>
        