{% extends "base.html" %} {% if dronetype == None %} {% set dataurl = '/data/drones' %} {% else %} {% set dataurl = '/data/drones/' + dronetype %} {% endif %} {% block content %}
<h3>Drones</h3>
<table id="dronestable" class="table table-bordered datagrid">
    <thead/>

    <tfoot>
        <tr>
            <th>
                <div class="datagrid-footer-left" style="display:none;">
                    <div class="grid-controls">
                        <span><span class="grid-start"></span> - <span class="grid-end"></span> of <span class="grid-count"></span></span>
                        <select class="grid-pagesize">
                        <option>20</option>
                        <option>50</option>
                        <option>100</option>
                    </select>
                        <span>Per Page</span>
                    </div>
                </div>
                <div class="datagrid-footer-right" style="display:none;">
                    <div class="grid-pager">
                        <button class="btn grid-prevpage"><i class="icon-chevron-left"></i></button>
                        <span>Page</span>

                        <div class="input-append dropdown combobox">
                            <input class="span1" type="text">
                        </div>
                        <span>of <span class="grid-pages"></span></span>
                        <button class="btn grid-nextpage"><i class="icon-chevron-right"></i></button>
                    </div>
                    <a class="btn btn-info pull-right" id="pingAllDronesButton"><i class="icon-map-marker"></i> Ping all drones</a>
                </div>
            </th>
        </tr>
    </tfoot>
</table>


<div id="confirmDeletModal" class="modal hide">
    <div class="modal-header">
        <a href="#" data-dismiss="modal" aria-hidden="true" class="close">×</a>

        <h3>Confirm deletion</h3>
    </div>
    <div class="modal-body">
        <p>You are about to delete a drone.</p>

        <p>Do you want to proceed?</p>
    </div>
    <div class="modal-footer">
        <a href="#" id="confirmDeleteButton" class="btn danger">Yes</a>
        <a href="#" data-dismiss="modal" aria-hidden="true" class="btn secondary">No</a>
    </div>
</div>

<script type="text/javascript">

function enablePingAllDronesButton() {
   $('#pingAllDronesButton').attr('disabled', false);
   $('#dronestable').datagrid('reload');
}


    $('#pingAllDronesButton').on('click', function() {
        $(this).attr('disabled', true);

        $.ajax({
            url: '/ws/drones/ping',
            type: 'GET',
            contentType: 'application/json; charset=utf-8'
        });

        setTimeout(enablePingAllDronesButton, 2000);

        return false;
    });


    $('#confirmDeleteButton').click(function() {
        var drone_id = $('#dronestable').data('selected_drone_id');
        $.ajax({
            url: '/ws/drone/delete',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify([drone_id, ])
        });
        $('#dronestable').datagrid('reload');
        $('#confirmDeletModal').modal('hide');
    });

    $('#dronestable').datagrid({
        dataSource: new FlexibleUrlDatasource({
            columns: [{
                property: 'id',
                label: 'Id',
                sortable: true
            }, {
                property: 'name',
                label: 'Name',
                sortable: true
            }, {
                property: 'ip',
                label: 'Address',
                sortable: true
            }, {
                property: 'type',
                label: 'Type',
                sortable: true
            }, {
                property: 'last_activity',
                label: 'Last activity',
                sortable: true
            }, {
                property: 'actions',
                label: 'Actions',
                sortable: false
            }],
            url: '{{ dataurl }}',
            formatter: function(items) {
                $.each(items, function(index, item) {
                    item.last_activity = item.last_activity + '<span style="visibility: hidden;" data-id="' + item.id + '"/>';
                    item.actions = '';
                    item.actions += '<div class="btn-group" style="float: right;" >';
                    item.actions += '<a id="settings" title="Configure drone" data-id=' + item.id + ' href="#" class="btn btn-primary btn-mini"><i class="icon-white icon-wrench"></i></a>';
                    item.actions += '<a id="delete" titel="Delete drone" data-id=' + item.id + ' href="#" class="btn btn-danger btn-mini"><i class="icon-white icon-trash"></i></a>';
                    item.actions += '</div>';
                });
            }
        })
    }).on('click', 'a', function() {
        var drone_id = $(this).attr("data-id");
        $('#dronestable').data('selected_drone_id', drone_id);
        var icon_id = $(this).attr("id");
        if (icon_id == 'delete') {
            $('#confirmDeletModal').modal('show');
        } else if (icon_id == 'settings') {
            window.location.href = '/ws/drone/configure/' + drone_id;
        }
    });
</script>
{% endblock content %}