{% extends "base/base_layout.html" %}
{% load static %}
 {% block sidebar_option %}
      sidebar-collapse
{% endblock %}
{% block extra_css %}
<!-- DataTables -->
<link rel="stylesheet" href="{% static "adminlte/plugins/datatables-bs4/dataTables.bootstrap4.min.css" %}">
{% endblock %}
{% block content %}
<div class="content-wrapper">
  <div class="content-header">
  </div>
   <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
            <div class="card">
              <div class="card-body">
                <h3 class="page-header"><strong>API Monitor </strong>- {{ package }}</h3>
                <div id="messages"></br>Data refreshed in every 10 seconds.</div>
                <div align="right">Data Snip:  <input type="text" value="100" oninput="change_snip(this.value)"></div><br />
                <div class="table-responsive">
                <table id="autotbl" class="table table-bordered table-hover table-striped" style="width:100%">
                        <thead>
                            <tr>
                                <th>NAME</th>
                                <th>CLASS</th>
                                <th>METHOD</th>
                                <th>ARGUMENTS</th>
                                <th>RESULT</th>
                                <th>RETURN VALUE</th>
                                <th>CALLED FROM</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th>NAME</th>
                                <th>CLASS</th>
                                <th>METHOD</th>
                                <th>ARGUMENTS</th>
                                <th>RESULT</th>
                                <th>RETURN VALUE</th>
                                <th>CALLED FROM</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>

          </div>
        </div>
       </div>
     </div>
    </div>
</div>
{% endblock %}
{% block extra_scripts %}
<!-- DataTables -->
<script src="{% static "adminlte/plugins/datatables/jquery.dataTables.min.js" %} "></script>
<script src="{% static "adminlte/plugins/datatables-bs4/dataTables.bootstrap4.min.js" %}"></script>
<script type="text/javascript">
var snip = 100;
var tbl;

function change_snip(val){
    snip = parseInt(val);
    tbl.ajax.reload();
}

$(document).ready( function () {
        $.fn.dataTable.ext.errMode = 'none';
        tbl = $('#autotbl').DataTable( {
        ajax: '/live_api/?hash={{ hash }}&stream=1',
        deferRender:    true,
        scroller:       true,
        scrollX:        true,
        searching:      true,
        paging:         false,
        info:           true,
        columns: [
            { data: "name" },
            { data: "class" },
            { data: "method" },
            { data: "arguments" },
            { data: "result" },
            { data: "returnValue" },
            { data: "calledFrom" }
        ],
        columnDefs: [ {
            targets: [3,4, 5],
            render: function ( data, type, row ) {
                if (data && JSON.stringify(data).length > snip )
                    return JSON.stringify(data).slice(0, snip) + "...";
                return JSON.stringify(data)
            }
        }]
    });
    setInterval( function () {
        tbl.ajax.reload();
    }, 10000 );
});

</script>
{% endblock %}