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

<!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">
            Ext.onReady(function () {
                Ext.QuickTips.init();

                var gridStore = Ext.create('Ext.data.Store', {
                    pageSize: 20,
                    remoteSort: true,
                    autoLoad: true,
                    fields: ['MAC', 'IDs', 'IP',  'NickName', 'CameraList'],
                    proxy: {
                        type: 'ajax',
                        url: 'Handler.ashx?action=GetAdminGridData',
                        reader: {
                            type: 'json',
                            root: 'items',
                            totalProperty: 'totalCount'
                        },
                        simpleSortMode: true
                    },
                    sorters: [{
                        property: "ID",
                        direction: "ASC"
                    }]
                });

                var grid = Ext.create('Ext.grid.Panel', {
                    id: 'devicedGrid',
                    region: 'center',
                    store: gridStore,
                    disableSelection: true,
                    tbar: ['<font color=darkblue><b>【<%=GetGlobalResourceObject("CMSResource", "AdminCameraSetting")%>】</b></font>',
                        {
                            text: '<%=GetGlobalResourceObject("CMSResource", "AdminCameraUpdate")%>',
                            cls: 'x-btn-default-small',
                            border: 1,
                            style: {
                                borderColor: 'gray',
                                borderStyle: 'solid'
                            },
                            icon: '/Common/DMZ/Images/16x16/rss_black.png',
                            handler: function () {
                                Ext.Ajax.request({
                                    url: 'Handler.ashx',
                                    params: {
                                        action: 'UpdateAdminCamera2Device'
                                    },
                                    success: function (response) {
                                        alert("<%=GetGlobalResourceObject("CMSResource", "UpdateSuccess")%>");
                            }
                        });
                    }
                        }
                    ],
                    columns: [
                        { text: 'MAC', dataIndex: 'MAC', width: 120 },
                         { text: '<%=GetGlobalResourceObject("CMSResource", "DeviceID")%>', dataIndex: 'IDs', width: 80 },
                        { text: '<%=GetGlobalResourceObject("CMSResource", "IPAddress")%>', dataIndex: 'IP', width: 120 },
                    { text: '<%=GetGlobalResourceObject("CMSResource", "Nick")%>', dataIndex: 'NickName',flex:1 },
                                           {
                                               text: '<%=GetGlobalResourceObject("CMSResource", "CameraDevice")%>',
                                               width:490,
                                               renderer: function (value, meta, record) {
                                                   var id = Ext.id();
                                                   var ParentMAC = record.get("MAC");
                                                   setTimeout(function () {
                                                       var grid = Ext.create('Ext.grid.Panel', {
                                                           disableSelection: true,
                                                           tbar: [
                                                               '->',
                                                               {
                                                                   xtype: 'button',
                                                                   text: '<%=GetGlobalResourceObject("CMSResource", "Choice")%>',
                                                                   cls: 'x-btn-default-small',
                                                                   border: 1,
                                                                   style: {
                                                                       borderColor: 'gray',
                                                                       borderStyle: 'solid'
                                                                   },
                                                                   icon: '/Common/DMZ/Images/16x16/edit.png',
                                                                   handler: function () {

                                                                       var w = Ext.create('Ext.window.Window', {
                                                                           title: "<%=GetGlobalResourceObject("CMSResource", "CameraDeviceList")%>",
                                                                           layout: 'fit',
                                                                           modal: true,
                                                                           constrain: true,
                                                                           shadow: true,
                                                                           shadowOffset: 50,
                                                                           width: 600,
                                                                           height: 400,
                                                                           buttons: [
                                                                               {
                                                                                   xtype:'tbtext',
                                                                                   text:'<font color=red>※ <%=GetGlobalResourceObject("CMSResource", "Max3CameraDevice")%></font>'
                                                                               },
                                                                               {
                                                                                   text: '<%=GetGlobalResourceObject("CMSResource", "OK")%>',
                                                                    id: 'SaveButton',
                                                                    border: 1,
                                                                    style: {
                                                                        borderColor: 'gray',
                                                                        borderStyle: 'solid'
                                                                    },
                                                                    handler: function () {
                                                                        var cnt = 0;
                                                                        var list = "";
                                                                        this.up("window").down("grid").store.each(function (record) {
                                                                            if (record.get("checked")) {
                                                                                cnt++;
                                                                                if (list != "") list = list + ",";
                                                                                list = list + record.get("MAC");
                                                                            } 
                                                                        });

                                                                        if (cnt > 3) {
                                                                            alert("<%=GetGlobalResourceObject("CMSResource", "Max3CameraDevice")%>");
                                                                            return;
                                                                        }
                                                                        else {
                                                                            Ext.Ajax.request({
                                                                                url: 'Handler.ashx?action=UpdateCameraList&mac=' + ParentMAC + "&list=" + list,
                                                                                success: function (response) {
                                                                                    var result = Ext.decode(response.responseText);
                                                                                    if (result.success) {
                                                                                        Ext.getCmp("devicedGrid").store.load();
                                                                                        w.close();
                                                                                    }
                                                                                    else {

                                                                                    }
                                                                                }
                                                                            });
                                                                            
                                                                        }
                                                                       
                                                                    }
                                                                },{
                                                                    text: '<%=GetGlobalResourceObject("CMSResource", "Cancel")%>',
                                                                    border: 1,
                                                                    style: {
                                                                        borderColor: 'gray',
                                                                        borderStyle: 'solid'
                                                                    },
                                                                    handler: function() {
                                                                        this.up("window").close();
                                                                    }
                                                                }
                                                            ],
                                                                           items: [
                                                                               Ext.create('Ext.grid.Panel', {
                                                                                   border: false,
                                                                                   viewConfig: {
                                                                                       markDirty: false
                                                                                   },
                                                                                   store: Ext.create('Ext.data.Store', {
                                                                                       autoLoad: true,
                                                                                       fields: ['checked', 'MAC', 'IDs', 'IP', 'NickName', 'CameraList'],
                                                                                       proxy: {
                                                                                           type: 'ajax',
                                                                                           url: 'Handler.ashx?action=GetAdminCameraListGridData&mac=' + ParentMAC,
                                                                                           reader: {
                                                                                               type: 'json',
                                                                                               root: 'items',
                                                                                               totalProperty: 'totalCount'
                                                                                           },
                                                                                           simpleSortMode: true
                                                                                       },
                                                                                       sorters: [{
                                                                                           property: "ID",
                                                                                           direction: "ASC"
                                                                                       }]
                                                                                   }),
                                                                                   columns: [
                                                                                       {
                                                                                           xtype: 'checkcolumn',
                                                                                           dataIndex: 'checked',
                                                                                           width: 25
                                                                                       },
                                                                                       { text: 'MAC', dataIndex: 'MAC', width: 120 },
                                                 { text: '<%=GetGlobalResourceObject("CMSResource", "DeviceID")%>', dataIndex: 'IDs', width: 80 },
                                                { text: '<%=GetGlobalResourceObject("CMSResource", "IPAddress")%>', dataIndex: 'IP', width: 120 },
                    { text: '<%=GetGlobalResourceObject("CMSResource", "Nick")%>', dataIndex: 'NickName', flex: 1 }

                                                                                   ]
                                                                               })
                                                                           ]
                                                                       }).show();
                                                                   }
                                                               }
                                                           ],
                                                           store: Ext.create('Ext.data.Store', {
                                                               autoLoad: true,
                                                               fields: ['MAC', 'IDs', 'IP', 'NickName', 'CameraList'],
                                                               proxy: {
                                                                   type: 'ajax',
                                                                   url: 'Handler.ashx?action=GetAdminCameraGridData&mac=' + ParentMAC,
                                                                   reader: {
                                                                       type: 'json',
                                                                       root: 'items',
                                                                       totalProperty: 'totalCount'
                                                                   },
                                                                   simpleSortMode: true
                                                               },
                                                               sorters: [{
                                                                   property: "ID",
                                                                   direction: "ASC"
                                                               }]
                                                           }),
                                                           columns: [
                                                               { text: 'MAC', dataIndex: 'MAC', width: 120 },
                         { text: '<%=GetGlobalResourceObject("CMSResource", "DeviceID")%>', dataIndex: 'IDs', width: 80 },
                        { text: '<%=GetGlobalResourceObject("CMSResource", "IPAddress")%>', dataIndex: 'IP', width: 120 },
                    { text: '<%=GetGlobalResourceObject("CMSResource", "Nick")%>', dataIndex: 'NickName', width: 120 },
                                                               {
                                                                   xtype: 'actioncolumn',
                                                                   width: 30,
                                                                   sortable: false,
                                                                   menuDisabled: true,
                                                                   align: 'center',
                                                                   items: [{
                                                                       icon: '/Common/DMZ/Images/16x16/arrow_up.png',
                                                                       tooltip: '<%=GetGlobalResourceObject("CMSResource", "UpLayer")%>',
                                                                       scope: this,
                                                                       handler: function (view, rowIndex, colIndex, item, e, record, row) {

                                                                           if (rowIndex > 0) {
                                                                               grid.store.remove(record);
                                                                               grid.store.insert(rowIndex - 1, record);

                                                                               //Update to Server
                                                                               var list = "";
                                                                               grid.store.each(function (record) {
                                                                                   if (list != "") list = list + ",";
                                                                                   list = list + record.get("MAC");
                                                                               });
                                                                               Ext.Ajax.request({
                                                                                   url: 'Handler.ashx?action=UpdateCameraList&mac=' + ParentMAC + "&list=" + list,
                                                                                   success: function (response) {
                                                                                       var result = Ext.decode(response.responseText);
                                                                                       if (result.success) {
                                                                                       }
                                                                                       else {

                                                                                       }
                                                                                   }
                                                                               });
                                                                           }


                                                                       }
                                                                   }]
                                                               }

                                                           ],
                                                           flex:1
                                                       });
                                                       if (Ext.get(id)) {
                                                           grid.render(Ext.get(id));
                                                       }
                                                   }, 1);
                                                   return '<div id="' + id + '"></div>';

                                               }
                                           }
                    ]
                });

            Ext.create('Ext.container.Viewport', {
                layout: {
                    type: 'border'
                },
                items: [grid]
            });

        });

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