{% extends "base.html" %}

{% block css %}
    <style>
        #cen {
            text-align: center;
        }

        a:hover {
            color: red;
        }

        .btn-primary:hover {
            color: red;
        }

        #plan-name {
            max-width: 150px;
            word-wrap: break-word;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        #plan-name:hover {
            white-space: normal;
            overflow: auto;
        }

        .btn {
            padding: 6px 18px;
        }

        #plan-content {
            text-align: center;
            max-width: 50px;
            word-wrap: break-word;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
{% endblock %}

{% block crumbs %}
    <div class="row">
        <div class="col-md-12">
            <ol class="breadcrumb">
                <li>
                    <a href="{% url 'index' %}">主页</a>
                </li>
                <li class="active">
                    <a class="this">基础信息</a>
                </li>
                <li class="active">
                    <a class="this-page">测试任务</a>
                </li>
            </ol>

        </div>
    </div>
{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-md-12">
            <div class="panel">
                <div class="panel-heading">
                    <a href="{% url 'plan_add' %}" class="btn btn-primary"><i
                            class="fa fa-plus-circle"></i>&nbsp;添加计划</a>
                </div>
                <div class="panel-body">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th id="cen">ID</th>
                            <th id="cen">计划名称</th>
                            <th id="cen">所属项目</th>
                            <th id="cen">测试环境</th>
                            <th id="cen">计划内容</th>
                            {#                            <th id="cen">是否运行性能测试</th>#}
                            {#                            <th id="cen">是否执行定时任务</th>#}
                            <th id="cen">描述</th>
                            <th id="cen">更新时间</th>
                            <th id="cen">更新用户</th>
                            <th id="cen">操作</th>
                            <th id="cen">报告</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for plan in contacts %}
                            {#                            {% for plan in plan_ %}#}
                            <tr>
                                <td id="cen">{{ plan.plan_id }}</td>
                                <td id="plan-name"><a href="/base/plan_update?plan_id={{ plan.plan_id }}"
                                                      class="layui-btn layui-btn-xs"
                                                      lay-event="edit">{{ plan.plan_name }}</a></td>
                                <td id="cen">{{ plan.project }}</td>
                                <td id="cen">{{ plan.environment }}</td>
                                <td id="plan-content">{{ plan.content }}</td>
                                {#                                <td id="cen">{{ plan.is_locust }}</td>#}
                                {#                                <td id="cen">{{ plan.is_task }}</td>#}
                                <td>{{ plan.description }}</td>
                                <td id="cen">{{ plan.update_time }}</td>
                                <td id="cen">{{ plan.update_user }}</td>
                                <td id="cen">
                                    <button class="btn btn-primary" onclick="run_unittest(this);"><i
                                            class="fa fa-spinner"></i>&nbsp;执行unittest
                                    </button>
                                    <a href="/base/plan_delete?plan_id={{ plan.plan_id }}"
                                       class="runCaseForm btn btn-danger" lay-event="del"
                                       onclick="return delete_btn()"><i class="fa fa-trash-o">&nbsp;删除</i></a>
                                </td>
                                <td id="cen">
                                    <a class="btn btn-primary"
                                       href="/base/report_page?plan_id={{ plan.plan_id }}"><i
                                            class="fa fa-edit"></i>&nbsp;查看报告</a>
                                </td>
                            </tr>
                            {#                            {% endfor %}#}
                        {% endfor %}
                        </tbody>
                    </table>
                    <div id="input-timed">

                    </div>
                    {% if error %}
                        <span style="color: red; font-size: 10px;">{{ error }}</span>
                    {% endif %}
                </div>
                <div class="pagination">
                    <span class="step-links">
                        {% if contacts.has_previous %}
                            <a href="/base/plan/?page={{ contacts.previous_page_number }}">上一页</a>
                        {% endif %}

                        <span class="current">
                            Page {{ contacts.number }} of {{ contacts.paginator.num_pages }}.
                        </span>

                        {% if contacts.has_next %}
                            <a href="/base/plan/?page={{ contacts.next_page_number }}">下一页</a>
                        {% endif %}
                    </span>
                </div>
            </div>

        </div>
    </div>
{% endblock %}

{% block javascript %}
    <script>

        //删除
        function delete_btn() {
            if (window.confirm("你确定要删除吗？")) {
                return true;//确定返回真
            } else {
                return false;//取消返回假
            }
        }

        //运行
        function run_button(obj) {
            {#alert("开始执行...");#}
            var plan_id = obj.parentNode.parentNode.children[0].innerText;
            $.ajax({
                type: "post",
                url: "/base/plan_run/",
                data: {"plan_id": plan_id},
                success: function (data) {
                    console.log(data);
                    alert(data);
                },
                error: function () {
                    alert("执行失败");
                }
            });

        }

        //运行unittest
        function run_unittest(obj) {
            {#alert("开始执行...");#}
            $(obj).attr('disabled', true);
            $(obj).text('毫无费力的在执行😆...');
            var plan_id = obj.parentNode.parentNode.children[0].innerText;
            $.ajax({
                type: "post",
                url: "/base/plan_unittest_run/",
                data: {"plan_id": plan_id},
                success: function (data) {
                    $(obj).attr('disabled', false);
                    $(obj).html('<i class="fa fa-spinner"></i>&nbsp;执行unittest');
                    var report_a = $(obj).parent('td').next().find('a');
                    report_a.removeClass('btn-danger');
                    report_a.addClass('btn-primary');
                    alert(data);
                },
                error: function () {
                    $(obj).attr('disabled', false);
                    $(obj).html('<i class="fa fa-spinner"></i>&nbsp;执行unittest');
                    var report_a = $(obj).parent('td').next().find('a');
                    report_a.removeClass('btn-primary');
                    report_a.addClass('btn-danger');
                    alert("执行失败");
                }
            });

        }

    </script>
{% endblock %}