<%@page language="java" contentType="text/html;charset=utf-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<div id="breadcrumb">
    <a href="#" title="Go to Home" class="tip-bottom"><i
            class="icon-home"></i> Home</a> <a href="#" class="current">Tables</a>
</div>

<div class="container-fluid">
    <div class="widget-box">
        <div class="widget-title">

            <h5>Dynamic table</h5>

        </div>

        <!-- 树 -->
        <div style="float: left;border: dashed;width: 300px;color: #D3D3D3;height: 600px;">
            <div class="widget-title" style="height: 50px;">
                <h5>Tree Title</h5>
            </div>
            <div class="tree_container" style="height: 540px;color: black;overflow:auto">
                <div id="jstree" class="jstree jstree-default" role="tree" aria-multiselectable="true"
                     tabindex="0"></div>
            </div>
        </div>
        <!-- 列表 -->
        <div class="widget-content nopadding" style="margin-left: 300px;">
            <div id="table"></div>
        </div>
    </div>
</div>


<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="addModalLabel">新增</h4>
            </div>
            <div class="modal-body">
                <div class="row-fluid">
                    <div class="span12">
                        <div class="widget-content nopadding">
                            <form action="#" method="post" class="form-horizontal" id="addForm">
                                <div class="control-group" typeof="hidden" id="moId">

                                </div>
                                <div class="control-group" typeof="hidden" id="moTypeId">

                                </div>
                                <div class="control-group">
                                    <label class="control-label" style="float: left;">名称</label>
                                    <div class="controls">
                                        <input type="text" id="moName"/>

                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" style="float: left;">所属主机</label>
                                    <div class="controls">
                                        <input type="text" placeholder="请填写主机IP" id="moHostIp"/>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" style="float: left;">类型</label>
                                    <div class="controls">
                                        <input type="text" readonly="readonly" id="moTypeName"/>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" style="float: left;">标签</label>
                                    <div class="controls">
                                        <input type="text" id="moTags"/>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" style="float: left;">域名</label>
                                    <div class="controls">
                                        <input type="text" id="moUrl"/>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭
                </button>
                <button type="submit" class="btn btn-success" id="addSubmit">提交</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>
</div>

<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">修改</h4>
            </div>
            <div class="modal-body">
                <div class="row-fluid">
                    <div class="span12">
                        <div class="widget-content nopadding">
                            <form action="#" method="post" class="form-horizontal" id="updateForm">
                                <div class="control-group" typeof="hidden" id="moId">

                                </div>
                                <div class="control-group" typeof="hidden" id="moTypeId">

                                </div>
                                <div class="control-group">
                                    <label class="control-label" style="float: left;">名称</label>
                                    <div class="controls">
                                        <input type="text" id="moName"/>

                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" style="float: left;">所属主机</label>
                                    <div class="controls">
                                        <input type="text" placeholder="请填写主机IP" id="moHostIp"/>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" style="float: left;">类型</label>
                                    <div class="controls">
                                        <input type="text" readonly="readonly" id="moTypeName"/>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" style="float: left;">标签</label>
                                    <div class="controls">
                                        <input type="text" id="moTags"/>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label" style="float: left;">域名</label>
                                    <div class="controls">
                                        <input type="text" id="moUrl"/>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭
                </button>
                <button type="submit" class="btn btn-success" value="Validate" id="updateSubmit">提交</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>
</div>

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">确定删除？</h4>
            </div>
            <div class="modal-body">
                <div class="row-fluid">
                    <div class="span12">
                        <div class="widget-content nopadding">
                            <form action="#" method="post" class="form-horizontal" id="deleteForm">
                                <div class="control-group" typeof="hidden" id="moId">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <button type="button" class="btn btn-danger" style="margin-right: auto" data-dismiss="modal">关闭
                </button>

                <button type="submit" class="btn btn-success" style="margin-left: auto" id="deleteSubmit">提交</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>
</div>
<script>
    $(function () {
        $("#table").table({
            url: contextPath + "/mobject/query",
            striped: true,
            panelClass: "panel-success",
            pagination: true,
            pageSize: 10,
            loadFilter: function (data) {
                return defaultLoadFilter(data);
            },
            columns: [{
                title: "名称",
                field: "moName"
            }, {
                title: "所属主机",
                field: "moHostIp"
            }, {
                title: "类型",
                field: "moTypeName"
            }, {
                title: "状态",
                field: "moStatus"
            }, {
                title: "标签",
                field: "moTags"
            }, {
                title: "操作",
                formatter: function (value, rowData, rowIndex) {
                    var div = $("<div>");

                    //修改
                    var editBtn = $("<button data-target='#updateModal' data-toggle='modal'>").addClass("btn btn-xs btn-success").html("修改").appendTo(div);
                    editBtn.click(function () {
                        updateMObject(rowData);
                    });

                    div.append("&nbsp;");
                    div.append("&nbsp;");
                    div.append("&nbsp;");

                    //删除
                    var delBtn = $("<button data-target='#deleteModal' data-toggle='modal'>").addClass("btn btn-xs btn-danger").html("删除").appendTo(div);
                    delBtn.click(function () {
                                deleteMObject(rowData);
                            }
                    );
                    return div;
                }
            }],
            /*            data: data*/
        });

    });

    //模拟数据
    var jsonData = [
        {"id": "1", "name": "父节点1", "url": "www.baidu.com", "pid": "0"},
        {"id": "4", "name": "父节点11", "url": "", "pid": "1"},

        {"id": "14", "name": "父节点112", "url": "", "pid": "4"},
        {"id": "5", "name": "父节点12", "url": "", "pid": "1"},
        {"id": "6", "name": "父节点13", "url": "", "pid": "1"},
        {"id": "2", "name": "父节点4", "url": "", "pid": "0"},
        {"id": "7", "name": "父节点41", "url": "", "pid": "2"},
        {"id": "8", "name": "父节点42", "url": "", "pid": "2"},
        {"id": "9", "name": "父节点43", "url": "", "pid": "2"},
        {"id": "3", "name": "父节点5", "url": "", "pid": "0"},
        {"id": "10", "name": "父节点51", "url": "", "pid": "3"},
        {"id": "13", "name": "父节点111", "url": "", "pid": "4"},
        {"id": "11", "name": "父节点52", "url": "", "pid": "3"},
        {"id": "12", "name": "父节点53", "url": "", "pid": "3"}
    ];


    //主方法，运用递归实现
    function createTree(jsons, pid) {
        if (jsons != null) {
            var ul = '<ul class="" style="width: 120px;" >';
            for (var i = 0; i < jsons.length; i++) {
                if (jsons[i].pid == pid) {
                    ul += '<input type="checkbox" name="checkBox" value=' + jsons[i].id + ' style="float: left;margin-top: 6px;width:10px;height:10px;"><li class="tree" value=' + jsons[i].id + '><a href="#">' + jsons[i].name + "</a></li>";
                    ul += createTree(jsons, jsons[i].id);
                }
            }
            ul += "</ul>";
        }
        return ul;
    }

    $(function () {
        var ul = createTree(jsonData, 0);
        $("#continer").append(ul);
        //控制菜单的隐藏显示
        $("ul[class] li").each(function () {
            $(this).click(function () {
                $(this).next().toggle();
            });
        });

    });

    function deleteMObject(rowData) {
        $("#deleteModal #moId").val(rowData.moId);
    }

    function updateMObject(rowData) {

        $("#updateModal #moName").val(rowData.moName);

        $("#updateModal #moHostIp").val(rowData.moHostIp);

        $("#updateModal #moTypeName").val(rowData.moTypeName);

        $("#updateModal #moTags").val(rowData.moTags);

        $("#updateModal #moUrl").val(rowData.moUrl);

        $("#updateModal #moId").val(rowData.moId);

        $("#updateModal #moTypeId").val(rowData.moTypeId);

    }

    $("#updateModal #updateSubmit").click(function () {

        if (!validEmpty($("#updateModal #moName").val())) {
            alert("必须填写监控对象名称！");
            return;
        }
        if (!validIp($("#updateModal #moHostIp").val())) {
            alert("Ip 填写错误！");
            return;
        }

        $.ajax({
            url: contextPath + "/mobject/update",
            type: "post",
            dataType: "json",
            data: {
                moId: $("#updateModal #moId").val(),
                moName: $("#updateModal #moName").val(),
                moHostIp: $("#updateModal #moHostIp").val(),
                moTypeId: $("#updateModal #moTypeId").val(),
                moTypeName: $("#updateModal #moTypeName").val(),
                moTags: $("#updateModal #moTags").val(),
                moUrl: $("#updateModal #moUrl").val()
            },
            success: function (response) {
                if (200 != response.code) {
                    alert(response.message);
                }
                else {
                    var div = document.getElementById("updateModal");
                    div.style.display = "none";
                }
            }
        });
    });


    $("#deleteModal #deleteSubmit").click(function () {
        $.ajax({
            url: contextPath + "/mobject/delete",
            type: "post",
            dataType: "json",
            data: {
                moId: $("#deleteModal #moId").val()
            },
            success: function () {
                var div = document.getElementById("deleteModal");
                div.style.display = "none";
            },
            error: function () {

            }
        });
    });

    $("#addModal #addSubmit").click(function () {
                if (!validEmpty($("#addModal #moName").val())) {
                    alert("必须填写监控对象名称！");
                    return;
                }
                if (!validIp($("#addModal #moHostIp").val())) {
                    alert("Ip 填写错误！");
                    return;
                }

                $.ajax(
                        {
                            url: contextPath + "/mobject/add",
                            type: "post",
                            dataType: "json",
                            data: {
                                moName: $("#addModal #moName").val(),
                                moHostIp: $("#addModal #moHostIp").val(),
                                moTypeId: $("#addModal #moTypeId").val(),
                                moTypeName: $("#addModal #moTypeName").val(),
                                moTags: $("#addModal #moTags").val(),
                                moUrl: $("#addModal #moUrl").val()
                            },
                            success: function (response) {
                                if (200 != response.code) {
                                    alert(response.message);
                                }
                                else {
                                    var div = document.getElementById("addModal");
                                    div.style.display = "none";
                                }
                            }

                        }
                );

            }
    );


    function validIp(ip) {
        var iPattern = /^([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/;
        if ("" != ip && iPattern.test(ip)) {
            return true;
        }
        else {
            return false;
        }
    }

    function validEmpty(str) {
        if ("" != str) {
            return true;
        }
        else {
            return false;
        }

    }

</script>

<script type="text/javascript" src="<%=basePath %>/script/yoho.type.tree.js"></script>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 300px">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">
                    添加类型
                </h4>
            </div>
            <div class="modal-body">
                <div id="modal_type_add">
                    <div class="input-group" style="padding-bottom: 5px">
                        <span class="input-group-addon" style="width: 100px">父节点：</span>
                        <input type="text" id="tx_new_type_parent" width="50" readonly="true" class="form-control"
                               placeholder=""/>
                    </div>
                    <div class="input-group" style="padding-bottom: 5px">
                        <span class="input-group-addon" style="width: 100px">Name：</span>
                        <input type="text" id="tx_new_type_name" width="50" class="form-control" placeholder=""/>
                    </div>
                    <div class="input-group" style="padding-bottom: 5px">
                        <span class="input-group-addon" style="width: 100px">子节点：</span>
                        <input type="checkbox" id="cb_new_type_isleaf" style="margin-left: 30px" name="appName"
                               value="JAVA">
                    </div>
                </div>
                <div id="modal_type_update">
                    <div class="input-group" style="padding-bottom: 5px">
                        <span class="input-group-addon" style="width: 100px">原名称：</span>
                        <input type="text" id="tx_update_type_name_old" readonly="true" class="form-control"
                               placeholder=""/>
                    </div>
                    <div class="input-group" style="padding-bottom: 5px">
                        <span class="input-group-addon" style="width: 100px">新名称：</span>
                        <input type="text" id="tx_update_type_name_new" class="form-control" placeholder=""/>
                    </div>
                </div>
                <div id="modal_type_del">
                    确认删除该类型节点?
                </div>
            </div>
            <div class="modal-footer">
                <input type="hidden" id="tx_type_action"/>
                <input type="hidden" id="tx_type_id"/>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" id="btn4type" class="btn btn-primary">确认</button>
            </div>
        </div>
    </div>
</div>