<!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>Description</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>
                   </div>`;


          var table = $('#example2').DataTable({
            'ajax': '/json/status',
            "columns" : [
            { "data" : "Num" },
            { "data" : "Description" },
            { "data" : "Status" },
            { "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'      : false,
            'lengthChange': true,
            'searching'   : true,
            'ordering'    : true,
            'info'        : true,
            'rowCallback': function( row, data ) {
              if ( data.Status ) {
                $('td:eq(2)', row).html( '<i class="fa fa-toggle-on"></i>' );
              } else {
                $('td:eq(2)', row).html( '<i class="fa fa-toggle-off"></i>' );
              }
            }
          });

          // autoreload every 3 seconds
          setInterval( function () {
            table.ajax.reload();
          }, 3000 );

        $('#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>