<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">Projects</a></li>
                <li>{{project.name}}</li>
            </ul>
            <h4>{{project.name}} ({{project.subname}})</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 build-btn"><i class="glyphicon glyphicon-plus"></i> 新增构建</a>
                <a href="" class="tooltips panel-minimize"><i class="fa fa-minus"></i></a>
            </div>
            <h4 class="panel-title">Static Deploy For {{project.subname}}</h4>
            <p>默认分支：<code>matser</code></p>
        </div>
        <div class="panel-body">
            <table id="table-production" class="table table-striped table-bordered building-table">
                <thead>
                <tr>
                    <th>构建版本</th>
                    <th>版本号</th>
                    <th>分支名称</th>
                    <th>状态</th>
                    <th>构建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<script>

    $(function() {

        var tables = {};
        $('.building-table').each(function() {
            tables = $(this).DataTable({
                responsive: true,
                ajax: '/projects/{{project._id}}/buildings',
                columns: [
                    {data: "buildTime"},
                    {data: "version"},
                    {data: "branch"},
                    {data: "state"},
                    {data: "updatedAt"},
                    {data: "_id"}
                ],
                order: [[0, 'desc']],
                columnDefs: [{
                    render: function(data, type, row) {
                        var color = 'warning';
                        if (data == 'success') {
                            color = 'success';
                        } else if (data == 'fail') {
                            color = 'danger';
                        }
                        var html = '<span id="version-' + row._id + '">' + data + '</span>';
                        return html;
                    },
                    targets: 1
                }, {
                    render: function(data, type, row) {
                        var color = 'warning';
                        if (data == 'success') {
                            color = 'success';
                        } else if (data == 'fail') {
                            color = 'danger';
                        }
                        var html = '<span id="b-' + row._id + '" class="label label-' + color + '">';
                        if (data != 'success' && data != 'fail') {
                            html += '<i class="fa fa-spinner fa-spin fa-fw margin-bottom"></i>';
                        }
                        html += data + '</span>';
                        return html;
                    },
                    targets: 3
                }, {
                    render: function(data, type, row) {
                        var disabled = row.state !== 'success';
                        {{#if is_master}}
                            return '<button ' + (disabled ? 'disabled' : '') + ' class="btn btn-success btn-xs deploy-btn" data-id="' + data + '" data-build=' + row.buildTime + '>分发</button>';
                        {{^}}
                            return '';
                        {{/if}}
                    },
                    targets: 5
                }]
            });

            $(this).on('draw.dt', function() {
                $('.deploy-btn').click(function() {
                    var id = $(this).data('id');
                    var build = $(this).data('build');
                    layer.confirm('确定发布版本<code>' + build + '</code>吗？', {
                        btn: ['确定', '取消']
                    }, function() {
                        doDeploy(id);
                    });
                });
            });
        });

        function doDeploy(build) {
            $.post('/projects/deploy/' + build, function(ret) {
                if (ret.code == 200) {
                    layer.msg('正在分发中');
                } else {
                    layer.msg(ret.msg, {icon: 5});
                }
            });
        }

        $('.build-btn').click(function() {
            var i = layer.prompt({
                title: '请输入需要构建的分支，默认为master',
                value: 'master'
            }, function(branch) {
                branch = branch || 'master';
                $.post('/projects/build/{{project._id}}', {
                    branch: branch
                }, function(ret) {
                    if (ret.code == 200) {
                        tables.ajax.reload();
                        layer.close(i);
                    }
                });
            });
        });


        $('.rollback-btn').click(function() {
            layer.prompt({
                title: '请输入回滚到哪个版本'
            }, function(build) {
                doDeploy(build);
            });
        });

        var ws = io();
        ws.on('connect', function() {
            ws.on('/building/{{project._id}}', function(data) {
                console.log(data);
                $('#b-' + data.bid).html(
                    '<i class="fa fa-spinner fa-spin fa-fw margin-bottom"></i>' +
                    data.state
                );
                if (data.state == 'success') {
                    $('#b-' + data.bid).removeClass('label-warning').addClass('label-success')
                    $('#b-' + data.bid).parent().parent().find('.deploy-btn').removeAttr('disabled');
                    $('#b-' + data.bid).find('i').remove();
                } else if (data.state == 'fail') {
                    $('#b-' + data.bid).removeClass('label-warning').addClass('label-danger');
                    $('#b-' + data.bid).find('i').remove();
                }

                $('#version-' +  data.bid).html(data.version);
            });

            ws.on('/deploy/{{project._id}}', function(data) {
                layer.msg(data.state);
            });
        });
        ws.on('error', function() {
            console.log('connect fail');
        });
    });
</script>