<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ByDevice.aspx.cs" Inherits="GigaTech.CMS.Web.Apps.DeviceSystem.VDPLog.ByDevice" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
           <script language=javascript>
               var unitList = "<%=unitList %>";
               var totalLevel = unitList.split("@").length;
               var totalLength=<%=totalLength%> ;

           var tree2;

           Ext.onReady(function () {
               Ext.QuickTips.init();

               tree2 = Ext.create('Ext.tree.Panel', {
                   region: 'center',
                   //title: '【<%=GetGlobalResourceObject("CMSResource", "CommunityStructure")%>】',
                   flex: 1,
                   border: true,
                   store: Ext.create('Ext.data.TreeStore', {
                       autoLoad: true,
                       fields: [
                           'children', 'realId', 'expanded', 'icon', 'mac','nick','doUpdate', 'note', 'leaf', { name: 'text', sortType: 'asNatural' }, 'status', 'assigned', 'text_f', 'ver', 'level', 'device_id','ip', 'waitUpdate'
                       ],
                       proxy: {
                           type: 'ajax',
                           url: '/Apps/DeviceSystem/Handler.ashx?action=GetStructureTreeByNickName'
                       },
                       root: {
                           text: '<%=GetGlobalResourceObject("CMSResource", "AllArea1")%>',
                           id: '<%=rootIdent %>'
                       },
                       sorters: [{ property: 'text', direction: 'ASC' }],
                       folderSort: true
                   }),
                   multiSelect: false,
                   singleExpand: false,

                   viewConfig: {
                       stripeRows: true
                   },
                   sortableColumns: false,

                   columns: [{
                       xtype: 'treecolumn', //this is so we know which column will show the tree
                       text: '<%=GetGlobalResourceObject("CMSResource", "DeviceType")%>',
                       flex: 1,
                       sortable: false,
                       dataIndex: 'text',
                       menuDisabled: true
                   }, {
                       text: 'MAC',
                       width: 120,
                       dataIndex: 'mac',
                       sortable: false,
                       menuDisabled: true
                   },{
                       text: 'IP',
                       width: 120,
                       dataIndex: 'ip',
                       sortable: false,
                       menuDisabled: true
                   }, {
                       text: '<%=GetGlobalResourceObject("CMSResource", "DeviceID")%>',
                       width: 90,
                       dataIndex: 'device_id',
                       sortable: false,
                       menuDisabled: false,
                       renderer: function (value, metaData, record) {
                           if (value == null) return "";

                           //console.log("waitUpdate=" + record.get("waitUpdate"));
                           if (record.get("waitUpdate") == "Y")
                               return "<font color=red>" + value + "</font>"
                           else
                               return "<font color=green>" + value + "</font>"
                       }
                   },{
                       text:'<%=GetGlobalResourceObject("CMSResource", "Nick")%>',
                       dataIndex:'nick',
                       flex: 1,
                       renderer: function (value, id, record) {
                           return "<font color=blue>" + value + "</font>";
                       }
                   },{
                       xtype: 'actioncolumn',
                       width: 30,
                       sortable: false,
                       menuDisabled: true,
                       hideable: false,
                       align: 'center',
                       items: [{
                           icon: '/Common/DMZ/Images/16x16/view.png',
                           tooltip: '<%=GetGlobalResourceObject("CMSResource", "CallRecords")%>',
                           scope: this,
                           handler: function (view, rowIndex, colIndex, item, e, record, row) {

                               var gridStore=Ext.create('Ext.data.Store', {
                                   pageSize: 20,
                                   remoteSort: true,
                                   autoLoad: true,
                                   fields: ['Location','Name','ID', 'ActionDateTime', 'Status'],
                                   proxy: {
                                       type: 'ajax',
                                       url: 'Handler.ashx?action=GetCallLog&MAC=' + record.get("id"),
                                       reader: {
                                           type: 'json',
                                           root: 'items',
                                           totalProperty: 'totalCount'
                                       },
                                       simpleSortMode: true
                                   },
                                   sorters: [{
                                       property: "ActionDateTime",
                                       direction: "DESC"
                                   }]
                               });

                               var w = Ext.create('Ext.window.Window', {
                                   title: '<%=GetGlobalResourceObject("CMSResource", "CallRecords")%>',
                                   height: '75%',
                                   width: '80%',
                                   layout: 'fit',
                                   modal: true,
                                   constrain: true,
                                   shadow: true,
                                   shadowOffset: 50,
                                   border: false,
                                   items: [
                                       {
                                           xtype:'grid',
                                           store:gridStore,
                                           columns: [
                                               { text: '<%=GetGlobalResourceObject("CMSResource", "Location")%>', dataIndex: 'Location', flex:1, sortable: false },
                                               { text: '<%=GetGlobalResourceObject("CMSResource", "CallType")%>', dataIndex: 'Name', width: 110, sortable: false },
                                               { text: '<%=GetGlobalResourceObject("CMSResource", "CallNumber")%>', dataIndex: 'ID', width: 110, sortable: false },
                                               { text: '<%=GetGlobalResourceObject("CMSResource", "Time")%>', dataIndex: 'ActionDateTime', width: 150, sortable: false },
                                               { text: '<%=GetGlobalResourceObject("CMSResource", "CallStatus")%>', dataIndex: 'Status', width: 110, sortable: false },
                                           ],
                                           dockedItems: [{
                                               xtype: 'pagingtoolbar',
                                               store: gridStore,
                                               dock: 'bottom',
                                               displayInfo: true
                                           }]
                                       }
                                   ],
                                   buttons: [
                                       {
                                           text: '<%=GetGlobalResourceObject("CMSResource", "Close")%>',
                                           border: 1,
                                           style: {
                                               borderColor: 'gray',
                                               borderStyle: 'solid'
                                           },
                                           handler: function() {
                                               w.close();
                                           }
                                       }
                                   ]
                               }).show();         
                           },
                               isDisabled: function (view, rowIndex, colIndex, item, record) {
                                   return !record.get("leaf");
                               }
                       }]
                   }],
                   listeners: {
                       //'afteritemexpand': function () {
                       //    tree2.getStore().sort("text", "ASC");
                       //},
                       'itemappend': function (n, node, index, eOpts) {

                           if (node.isLeaf()) {
                               var device_id = getAllParent(node);

                               //改編碼無全區
                               //device_id = padRight(device_id,totalLength);
                               //device_id = padLeft(device_id,8);
                               device_id = padRight(device_id,8);

                               //console.log("1--" + node.get("device_id").split('-')[0]);
                               //console.log("2--" + device_id);
                               if (node.get("device_id").split('-')[0] != device_id) {
                                   var dids = [];
                                   node.parentNode.eachChild(function (n) {

                                       if (n.isLeaf() && node.get("device_id") != n.get("device_id")) {

                                           dids.push(n.get("device_id"));
                                       }

                                   })

                                   for (var i = 1; i < 256; i++) {
                                       var curDid = device_id + "-" + i;
                                       var curDid_OK = true;
                                       dids.forEach(function (did) {
                                           if (curDid == did) {
                                               curDid_OK = false;
                                           }
                                       });

                                       if (curDid_OK) {
                                           node.set("device_id", curDid);
                                           break;
                                       }
                                   }

                               }


                           }
                           else {
                               if (totalLevel == node.getDepth()) {
                                   node.set("icon", "/Common/DMZ/Images/16x16/home.png");
                               }

                           }

                       }
                   }
               });


            //function padLeft(str, lenght) {
            //    if (str.length >= lenght)
            //        return str;
            //    else
            //        return padLeft("0" + str, lenght);
            //}
            function padRight(str, lenght) {
                if (str.length >= lenght)
                    return str;
                else
                    return padRight(str + "0", lenght);
            }

            function getAllParent(node) {
                var parentNode = node.parentNode;
                var names = "";
                if (parentNode) {
                    names = getAllParent(parentNode) + parentNode.get("realId");
                }
                return names;

            }


            Ext.create('Ext.container.Viewport', {
                layout: 'border',
                items: [ tree2

                ]
            });


            tree2.getSelectionModel().select(0); //Select Root
        });

           
    </script>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>
