{% extends "base-left.html" %}
{% load staticfiles %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/datatables/jquery.dataTables.min.css' %}">
    <link rel="stylesheet" href="{% static 'js/plugins/layer/skin/layer.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/select2/select2.min.css' %}">
{% endblock %}

{% block content %}

    <!-- Main content -->
  <section class="content">
    <div id="devlist">
        <div class="box box-primary" id="liebiao">
            <div class="box-header">
                <div class="btn-group pull-left">
                    <button type="button" id="btnRefresh" class="btn btn-default">
                        <i class="glyphicon glyphicon-repeat"></i>刷新
                    </button>
                </div>
                <div class="btn-group pull-left">&nbsp</div>
                <div class="btn-group pull-left">
                    <button type="button" id="btnCreate" class="btn btn-default">
                        <i class="glyphicon glyphicon-plus"></i>新增
                    </button>

                </div>
                <div class="btn-group pull-left">&nbsp</div>
                <div class="btn-group pull-left">
                    <button type="button" id="btnDelete" class="btn btn-default">
                        <i class="glyphicon glyphicon-trash"></i>删除
                    </button>
                </div>
            </div>
            <div class="box-header">
                <form class="form-inline" id="queryForm">
                    <div class="form-group searchArea margin-r-5 margin-top-5">
                        <label>主机名：</label>
                        <input type="text" name="sys_hostname" class="form-control inputText" id="sys_hostname">
                    </div>
                    <div class="form-group searchArea margin-r-5 margin-top-5">
                        <label>设备地址：</label>
                        <input type="text" name="hostname" class="form-control inputText" id="hostname">
                    </div>
                    <div class="form-group searchArea margin-r-5 margin-top-5">
                        <label>网络类型：</label>
                        <select class="form-control inputText select2" name="network_type" id="network_type">
                          <option></option>
                          {% for code in all_code %}
                              {% ifequal code.parent.key 'NETWORK_TYPE' %}
                                <option value="{{ code.id }}">{{ code.value }}</option>
                              {% endifequal %}
                          {% endfor %}
                         </select>
                    </div>
                    <div class="form-group searchArea margin-r-5 margin-top-5">
                        <label>服务类型：</label>
                        <select class="form-control inputText select2" name="service_type" , id="service_type">
                          <option></option>
                          {% for code in all_code %}
                              {% if code.parent.key == 'SERVICE_TYPE' %}
                                <option value="{{ code.id }}">{{ code.value }}</option>
                              {% endif %}
                          {% endfor %}
                        </select>
                    </div>
                    <div class="form-group searchArea margin-r-5 margin-top-5">
                        <label>所属项目：</label>
                        <select class="form-control inputText select2" name="operation_type" , id="operation_type">
                          <option></option>
                          {% for code in all_code %}
                              {% if code.parent.key == 'OPERATION_TYPE' %}
                                <option value="{{ code.id }}">{{ code.value }}</option>
                              {% endif %}
                          {% endfor %}
                        </select>
                    </div>
                    <div class="form-group searchArea margin-r-5 margin-top-5">
                        <label>机柜信息：</label>
                        <select class="form-control inputText select2" name="dev_cabinet" , id="dev_cabinet">
                          <option></option>
                          {% for cabinet in all_cabinet %}

                                <option value="{{ cabinet.id }}">{{ cabinet.number }}</option>

                          {% endfor %}
                        </select>
                    </div>
                  <button type="button" id="btnSearch" class="btn btn-default">
                    <i class="glyphicon glyphicon-search"></i>查询
                  </button>
                </form>
            </div>

            <div class="box-body">
                <table id="dtbList" class="display" cellspacing="0" width="100%">
                    <thead>
                    <tr valign="middle">
                        <th><input type="checkbox" id="checkAll"></th>
                        <th>ID</th>
                        <th>主机名</th>
                        <th>IP地址</th>
                        <th>服务类型</th>
                        <th>所属项目</th>
                        <th>配置信息</th>
                        <th>机柜信息</th>
                        <th>网络类型</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <br> <br>
            </div>
        </div>
    </div>

  </section>

    <!-- /.content -->

{% endblock %}


{% block javascripts %}

<script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'plugins/datatables/dataTables.const-1.js' %}"></script>
<script src="{% static 'js/plugins/layer/layer.js' %}"></script>
<script src="{% static 'plugins/select2/select2.full.min.js' %}"></script>

<script type="text/javascript">
    // 菜单选中高亮
    $(function () {
        $('#CMDB-EAM').addClass('active');
        $('#CMDB-EAM-DEVICE').addClass('active');

    });

    // datatables 初始化配置
    var oDataTable = null;
    $(function () {
        oDataTable = initTable();

        function initTable() {
            var oTable = $('#dtbList').DataTable($.extend(true, {},
                DATATABLES_CONSTANT.DATA_TABLES.SERVER_SIDE_OPTION,

                {
                    ajax: {
                        "url": "{% url 'cmdb:eam-device-list' %}",
                        "data": function (d) {
                                d.sys_hostname = $("#sys_hostname").val();
                                d.hostname = $("#hostname").val();
                                d.network_type = $("#network_type").val();
                                d.service_type = $("#service_type").val();
                                d.operation_type = $("#operation_type").val();
                                d.dev_cabinet = $("#dev_cabinet").val();
                            }
                    },
                    columns: [
                        DATATABLES_CONSTANT.DATA_TABLES.COLUMN.CHECKBOX,

                        {
                            data: "id",
                        },
                        {
                            data: "sys_hostname",
                        },
                        {
                            data: "hostname",
                        },
                        {
                            data: "service_type",
                        },
                        {
                            data: "operation_type",
                        },
                        {
                            data: "config",
                        },
                        {
                            data: "dev_cabinet",
                        },
                        {
                            data: "network_type",
                        },
                        {
                            data: "id",
                            bSortable: "false",
                            render: function (data, type, row, meta) {
                                var ret = "<button title='详情' onclick='doDetail("
                                    + data + ")'><i class='glyphicon glyphicon-list-alt'></i></button>";
                                ret = ret + "<button title='修改' onclick='doUpdate("
                                    + data + ")'><i class='glyphicon glyphicon-pencil'></i></button>";
                                ret = ret + "<button title='认证管理' onclick='doDevice2Connection("
                                    + data + ")'><i class='glyphicon glyphicon-user'></i></button>";
                                ret = ret + "<button title='删除' onclick='doDelete("
                                    + data + ")'><i class='glyphicon glyphicon-trash'></i></button>";
                                return ret;
                            }
                        }],
                    }));
                return oTable;
            }

        });

    // 刷新数据
    $("#btnRefresh").click(function () {
        window.location.reload();
    });
    //新建数据
    $("#btnCreate").click(function () {
        var div=layer.open({
            type: 2,
            title: '新增',
            shadeClose: false,
            maxmin: true,
            area: ['800px', '400px'],
            content: "{% url 'cmdb:eam-device-create' %}",
            end: function () {
                //关闭时做的事情
                oDataTable.ajax.reload();
            }
        });
        layer.full(div )
    });

    //修改数据
    function doUpdate(id) {
        var div=layer.open({
            type: 2,
            title: '编辑',
            shadeClose: false,
            maxmin: true,
            area: ['800px', '400px'],
            content: ["{% url 'cmdb:eam-device-update' %}" + '?id=' + id, 'no'],
            end: function () {
                oDataTable.ajax.reload();
            }
        });
        layer.full(div )
    }

    //checkbox全选
    $("#checkAll").on("click", function () {
        if ($(this).prop("checked") === true) {
            $("input[name='checkList']").prop("checked", $(this).prop("checked"));
            $('#example tbody tr').addClass('selected');
        } else {
            $("input[name='checkList']").prop("checked", false);
            $('#example tbody tr').removeClass('selected');
        }
    });

    //批量删除
    $("#btnDelete").click(function () {
        if ($("input[name='checkList']:checked").length == 0) {
            layer.msg("请选择要删除的记录");
            return;
        }

        var arrId = new Array();
        $("input[name='checkList']:checked").each(function () {
            //alert($(this).val());
            arrId.push($(this).val());
        });

        sId = arrId.join(',');

        layer.alert('确定删除吗？', {
            title: '提示'
            , icon: 3 //0:感叹号 1：对号 2：差号 3：问号 4：小锁 5：哭脸 6：笑脸
            , time: 0 //不自动关闭
            , btn: ['YES', 'NO']
            , yes: function (index) {
                layer.close(index);
                $.ajax({
                    type: "POST",
                    url: "{% url 'cmdb:eam-device-delete' %}",
                    data: {"id": sId, csrfmiddlewaretoken: '{{ csrf_token }}'},
                    cache: false,
                    success: function (msg) {
                        if (msg.result) {
                            layer.alert("操作成功", {icon: 1});
                            oDataTable.ajax.reload();
                        } else {
                            //alert(msg.message);
                            layer.alert("操作失败", {icon: 2});
                        }
                        return;
                    }
                });
            }
        });
    });

    //删除单个数据
    function doDelete(id) {
        layer.alert('确定删除吗？', {
            title: '提示'
            , icon: 3 //0:感叹号 1：对号 2：差号 3：问号 4：小锁 5：哭脸 6：笑脸
            , time: 0 //不自动关闭
            , btn: ['YES', 'NO']
            , yes: function (index) {
                layer.close(index);
                $.ajax({
                    type: "POST",
                    url: "{% url 'cmdb:eam-device-delete' %}",
                    data: {"id": id, csrfmiddlewaretoken: '{{ csrf_token }}'},
                    cache: false,
                    success: function (msg) {
                        if (msg.result) {
                            layer.alert('删除成功', {icon: 1});
                            oDataTable.ajax.reload();
                        } else {
                            //alert(msg.message);
                            layer.alert('删除失败', {icon: 2});
                        }
                        return;
                    }
                });
            }
        });
    }

    //select2
    $(function () {
        //Initialize Select2 Elements
        $(".select2").select2();
    });

    $("#btnSearch").click(function(){
        oDataTable.ajax.reload();
    });


    function doDevice2Connection(id) {
          layer.open({
            type: 2,
            title: '认证管理',
            shadeClose: false,
            maxmin: true,
            area: ['800px', '400px'],
            content: ["{% url 'cmdb:eam-device-device2connection' %}" + '?id=' + id, 'no'],
            end: function () {
                oDataTable.ajax.reload();
            }
        });
        }

    function doDetail(id){
        window.location.href="{% url 'cmdb:eam-device-detail' %}?id="+id;
    }
</script>
{% endblock %}