{% extends 'base.html' %}
{% load static %}
{% load i18n %}

{% block custom_head_css_js %}
    <link href="{% static 'css/plugins/jstree/style.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/plugins/ztree/awesomeStyle/awesome.css' %}" rel="stylesheet">
    <script type="text/javascript" src="{% static 'js/plugins/ztree/jquery.ztree.all.min.js' %}"></script>
	<style type="text/css">
        div#rMenu {
            position:absolute;
            visibility:hidden;
            text-align: left;
            top: 100%;
            left: 0;
            z-index: 1000;
            float: left;
            padding: 5px 0;
            margin: 2px 0 0;
            list-style: none;
            background-clip: padding-box;
        }
        div#rMenu li{
        	margin: 1px 0;
        	cursor: pointer;
        	{#list-style: none outside none;#}
        }
        .dropdown a:hover {
            background-color: #f1f1f1
        }
	</style>

{% endblock %}

{% block content %}
<div class="wrapper wrapper-content">
   <div class="row">
       <div class="col-lg-3" id="split-left">
           <div class="ibox float-e-margins">
               <div class="ibox-content mailbox-content" style="padding-top: 0">
                   <div class="file-manager ">
                       <div id="assetTree" class="ztree">
                       </div>
                       <div class="clearfix"></div>
                   </div>
               </div>
           </div>
       </div>
       <div class="col-lg-9 animated fadeInRight" id="split-right">
           <div class="tree-toggle">
               <div class="btn btn-sm btn-primary tree-toggle-btn" onclick="toggle()">
                   <i class="fa fa-angle-left fa-x" id="toggle-icon"></i>
               </div>
           </div>
          <div class="mail-box-header">
              <div class="uc pull-left m-r-5">
                   <a class="btn btn-sm btn-primary btn-create-permission">
                       {% trans "Create permission" %}
                   </a>
              </div>
              <table class="table table-striped table-bordered table-hover" id="permission_list_table" style="width: 100%">
                  <thead>
                  <tr>
                    <th class="text-center">
                          <input type="checkbox" id="check_all" class="ipt_check_all" >
                    </th>
                    <th class="text-center">{% trans 'Node' %}</th>
                    <th class="text-center">{% trans 'User group' %}</th>
                    <th class="text-center">{% trans 'System user' %}</th>
                    <th class="text-center">{% trans 'Is active' %}</th>
                    <th class="text-center">{% trans 'Date expired' %}</th>
                    <th class="text-center">{% trans 'Action' %}</th>
                  </tr>
                  </thead>
                  <tbody>
                  </tbody>
              </table>
          </div>
       </div>
   </div>
</div>
{% endblock %}

{% block custom_foot_js %}

<script>
var zTree, rMenu, table, show = 0;
function initTable() {
    var options = {
        ele: $('#permission_list_table'),
        columnDefs: [
            {targets: 1, createdCell: function (td, cellData) {
                var html = '<a href="{% url 'assets:asset-list' %}?node=99899">' + cellData.name + '</a>';
                $(td).html(html.replace("99899", cellData.pk));
            }},
            {targets: 2, createdCell: function (td, cellData) {
                var html = '<a href="{% url "users:user-group-detail" pk=DEFAULT_PK %}">' + cellData.name + '</a>';
                $(td).html(html.replace("{{ DEFAULT_PK }}", cellData.pk))
            }},
            {targets: 3, createdCell: function (td, cellData) {
                var html = '<a href="{% url 'assets:system-user-detail' pk=DEFAULT_PK %}">' + cellData.name + '</a>';
                $(td).html(html.replace("{{ DEFAULT_PK }}", cellData.pk));
            }},
            {targets: 4, createdCell: function (td, cellData) {
                if (!cellData) {
					$(td).html('<i class="fa fa-times text-danger"></i>')
				} else {
					$(td).html('<i class="fa fa-check text-navy"></i>')
				}
            }},
            {targets: 5, createdCell: function (td, cellData) {
                var date_expired = cellData.split(" ");
                if (date_expired && date_expired.length === 3) {
                    $(td).html(date_expired[0]);
                } else {
                    $(td).html(cellData);
                }
            }},
            {targets: 6, createdCell: function (td, cellData, rowData) {
                var name = rowData.user_group.name + "=>" + rowData.system_user.name + "=>" + rowData.node.name;
                var update_btn = '<a href="{% url "perms:asset-permission-update" pk=DEFAULT_PK %}" class="btn btn-xs m-l-xs btn-info">{% trans "Update" %}</a>'.replace('{{ DEFAULT_PK }}', cellData);
                var del_btn = '<a class="btn btn-xs btn-danger m-l-xs btn-del" data-uid="{{ DEFAULT_PK }}" data-name="99991938">{% trans "Delete" %}</a>'
                    .replace('{{ DEFAULT_PK }}', cellData)
                    .replace('99991938', name);
				$(td).html(update_btn + del_btn);
            }}
        ],
        ajax_url: '{% url "api-perms:asset-permission-list" %}',
        columns: [
            {data: "id"}, {data: "node"}, {data: "user_group" }, {data: "system_user"},
            {data: "is_active"}, {data: "date_expired"}, {data: "id"}
        ],
        op_html: $('#actions').html()
    };
    table = jumpserver.initDataTable(options);
    return table
}


function onSelected(event, treeNode) {
    var url = table.ajax.url();
    url = setUrlParam(url, "node_id", treeNode.id);
    setCookie('node_selected', treeNode.id);
    table.ajax.url(url);
    table.ajax.reload();
}

function selectQueryNode() {
    var query_node_id = $.getUrlParam("node");
    var cookie_node_id = getCookie('node_selected');
    var node;
    var node_id;

    if (query_node_id !== null) {
        node_id = query_node_id
    } else if (cookie_node_id !== null) {
        node_id = cookie_node_id;
    }

    node = zTree.getNodesByParam("id", node_id, null);
    if (node){
        zTree.selectNode(node[0]);
    }
}

function initTree() {
    var setting = {
        view: {
            dblClickExpand: false,
            showLine: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onSelected: onSelected
        }
    };

    var zNodes = [];
    $.get("{% url 'api-assets:node-list' %}", function(data, status){
        $.each(data, function (index, value) {
            value["pId"] = value["parent"];
            {#if (value["key"] === "0") {#}
            value["open"] = true;
            {# }#}
            value["name"] = value["value"] + ' (' + value['assets_amount'] + ')'
        });
        zNodes = data;
        $.fn.zTree.init($("#assetTree"), setting, zNodes);
        zTree = $.fn.zTree.getZTreeObj("assetTree");
		rMenu = $("#rMenu");
		selectQueryNode();
    });
}

function toggle() {
    if (show === 0) {
        $("#split-left").hide(500, function () {
            $("#split-right").attr("class", "col-lg-12");
            $("#toggle-icon").attr("class", "fa fa-angle-right fa-x");
            show = 1;
        });
    } else {
        $("#split-right").attr("class", "col-lg-9");
        $("#toggle-icon").attr("class", "fa fa-angle-left fa-x");
        $("#split-left").show(500);
        show = 0;
    }
}

$(document).ready(function(){
    initTable();
    initTree();
})
.on('click', '.btn-del', function () {
    var $this = $(this);
    var uid = $this.data('uid');
    var name = $this.data('name');
    var the_url = '{% url "api-perms:asset-permission-detail" pk=DEFAULT_PK %}'
            .replace('{{ DEFAULT_PK }}', uid);
    objectDelete($this, name, the_url);
})
.on('click', '.btn-create-permission', function () {
    var url = "{% url 'perms:asset-permission-create' %}";
    var nodes = zTree.getSelectedNodes();
    var current_node;
    if (nodes && nodes.length ===1 ){
        current_node = nodes[0];
        url += "?node_id=" + current_node.id;
    }
    window.open(url, '_self');
})

</script>
{% endblock %}
