<div class="pageheader">
    <div class="media">
        <div class="pageicon pull-left">
            <i class="fa fa-th-list"></i>
        </div>
        <div class="media-body">
            <ul class="breadcrumb">
                <li><a href="/"><i class="glyphicon glyphicon-home"></i></a></li>
                <li><a href="/servers">系统管理</a></li>
                <li>代码检查记录</li>
            </ul>
            <h4>代码检查记录一览</h4>
        </div>
    </div>
    <!-- media -->
</div>

<div class="contentpanel project-index-page">
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="pull-right">
            <a class="btn btn-success btn-rounded mr20 check-btn"><i class="glyphicon glyphicon-plus"></i> 新增检查</a>
            </div>
            <h4 class="panel-title">检查记录</h4>
        </div>
        <div class="panel-body">
            <table id="table-oper-log" class="table table-striped table-bordered building-table">
                <thead>
                <tr>
                    <th>项目名</th>
                    <th>分支名</th>
                    <th>状态</th>
                    <th>检查时间</th>
                    <th>操作</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<script>

    $(document).on('ready pjax:success', function() {
        var table = $("#table-oper-log").DataTable({
            pageLength: 25,
            retrieve: true,
            responsive: true,
            processing: true,
            serverSide: true,
            ajax: {
                url: '/check/list/query',
                type: "POST"
            },
            columns: [
                {data: "projectname"},
                {data: "branch"},
                {data: "state"},
                {data: "buildtime"},
                {data: "_id"}
            ],
            order: [[3, 'desc']],
            columnDefs: [{
                targets: 2,
                render: function(data, type, row) {
                    var color = 'warning';
                    if (data == 'success') {
                        color = 'success';
                    } else if (data == 'fail') {
                        color = 'danger';
                    }

                    var id = row._id.split('_');
                    id = id[id.length - 1];
                    var html = '<span id="b-' + id + '" class="label label-' + color + '">';
                    if (data != 'success' && data != 'fail') {
                        html += '<i class="fa fa-spinner fa-spin fa-fw margin-bottom"></i>';
                    }
                    html += '<span class="state">' + data + '</span></span>';
                    return html;
                }
            }, {
                targets: 4,
                render: function(data, type, row) {
                    return '<button class="btn btn-success btn-log" data-id="' + data + '">查看</button>';
                }
            }]
        });

        $(this).on('draw.dt', function() {
            $('.btn-log').click(function() {
                var id = $(this).data('id');
                location.href = '/check/log?id=' + id;
            });
        });

        $('.check-btn').click(function() {
            var i = layer.prompt({
                title: '输入项目名及分支名(格式为 项目:分支)',
                value: 'xxx:xx'
            }, function(value) {
                value = value.replace(/x/g,'').split(":");

                var projectname = value[0];
                var branch = value[1];

                if (!projectname || !branch) {
                    layer.msg('请输入正确的项目名及分支名');
                    return;
                }

                $.post('/check/exec', {
                    name: projectname,
                    branch: branch
                }, function(ret) {
                    if (ret.code == 200) {
                        table.ajax.reload();
                        layer.close(i);
                    } else {
                        layer.msg(ret.msg, {icon: 5});
                    }
                });
            });
        });
    });

    $(function(){
        var ws = io();

        ws.on('connect', function() {
            ws.on('/check/state', function(data) {
                var id = data.id.split('_');
                    id = id[id.length - 1];

                var $dom = $('#b-' + id);
                $dom.find('.state').text(data.state);
                if (data.state == 'success') {
                    $dom.removeClass('label-warning').addClass('label-success')
                    $dom.find('i').remove();
                } else if (data.state == 'fail') {
                    $dom.removeClass('label-warning').addClass('label-danger');
                    $dom.find('i').remove();
                }
            });
        });

        ws.on('error', function() {
            console.log('connect fail');
        });
    });
</script>