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

<!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>
                    <script src="/Scripts/jquery-1.6.4.min.js"></script>
</head>

        <script language="javascript">
            var grid;

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

                Ext.apply(Ext.form.field.VTypes, {
                    //  vtype validation function
                    file: function (val, field) {
                        var fileName = /^.*\.(param)$/i;
                        return fileName.test(val);
                    },
                    // vtype Text property to display error Text
                    // when the validation function returns false
                    fileText: "File must be .param",
                    // vtype Mask property for keystroke filter mask
                    fileMask: /[a-z_\.]/i
                });

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

                grid = Ext.create('Ext.grid.Panel', {
                    tbar: [
                        {
                            text: '<%=GetGlobalResourceObject("CMSResource", "ClearSearchResult")%>',
                        id: 'clearButton',
                        cls: 'x-btn-default-small',
                        border: 1,
                        style: {
                            borderColor: 'gray',
                            borderStyle: 'solid'
                        },
                        icon: '/Common/DMZ/Images/16x16/broom.png',
                        hidden: true,
                        handler: function () {
                            grid.store.getProxy().setExtraParam('isSearch', "0");
                            grid.store.load({
                                callback: function (records, options, success) {
                                    if (success) {
                                        Ext.getCmp("clearButton").hide();
                                        Ext.getCmp("SearchForm").getForm().reset();
                                    }
                                }
                            });
                        }
                    }
                ],
                region: 'center',
                store: gridStore,
                columns: [
                    { text: '<%=GetGlobalResourceObject("CMSResource", "Name")%>', dataIndex: 'Name', flex: 1 },
                    { text: '<%=GetGlobalResourceObject("CMSResource", "IPAddress")%>', dataIndex: 'IP' ,width:120},
                    { text: 'MAC', dataIndex: 'MAC', width: 120 },
                    { text: '<%=GetGlobalResourceObject("CMSResource", "DeviceID")%>', dataIndex: 'IDs', width: 80 },
                    { text: '<%=GetGlobalResourceObject("CMSResource", "Nick")%>', dataIndex: 'NickName', flex: 1 },
                    {
                        text: '<%=GetGlobalResourceObject("CMSResource", "Status")%>',
                        width: 35,
                        dataIndex: 'Online',
                        sortable: false,
                        menuDisabled: false,
                        align: 'center',
                        renderer: function (value, metaData, record) {
                            if (value == "" || record.get("is3rdDevice") == "1") return;
                            switch (value) {
                                case "1":
                                    return '<img src=/Common/DMZ/Images/16x16/enabled.png />';
                                    break;
                                case "-1":
                                    return '<img src=/Common/DMZ/Images/16x16/question.png />';
                                    break;
                                default:
                                    return '<img src=/Common/DMZ/Images/16x16/alert.png />';
                                    break;
                            }
                        }
                    },
                        {
                            text: '',
                            width: 200,
                            hideable: false,
                            renderer: function (value, meta, record) {

                                if (record.get("is3rdDevice") == "1") {
                                    return;
                                }

                                var id = Ext.id();
                                setTimeout(function () {
                                    var button = Ext.create('Ext.container.Container', {
                                        layout: 'hbox',
                                        items: [
                                           {
                                               xtype: 'button',
                                               text: '<%=GetGlobalResourceObject("CMSResource", "Parameters")%>',
                                               icon: '/Common/DMZ/Images/16x16/gear.png',
                                               record: record,
                                               cls: 'x-btn-default-small',
                                               border: 1,
                                               style: {
                                                   borderColor: 'gray',
                                                   borderStyle: 'solid'
                                               },
                                               margin: '0 5 0 0',
                                               handler: function () {

                                                   var w = parent.Ext.create('Ext.window.Window', {
                                                       title: '<%=GetGlobalResourceObject("CMSResource", "ParamMainten")%>',
                                                       layout: 'fit',
                                                       modal: true,
                                                       constrain: true,
                                                       shadow: true,
                                                       shadowOffset: 50,
                                                       width: '95%',
                                                       height: '95%',
                                                       maximizable: true,
                                                       items: [
                                                          {
                                                              xtype: "component",
                                                              border: false,
                                                              autoEl: {
                                                                  tag: "iframe",
                                                                  src: "/Apps/DeviceSystem/DeviceParameter.aspx?MAC=" + record.get("MAC")
                                                              }
                                                          }
                                                       ],
                                                       buttons: [
                                {
                                    text: '<%=GetGlobalResourceObject("CMSResource", "Close")%>',
                                    handler: function () {
                                        this.up("window").close();
                                    }
                                }
                                                       ]
                                                   }).show();
                                               }
                                           }, {
                                               xtype: 'button',
                                               text: '<%=GetGlobalResourceObject("CMSResource", "ContactList")%>',
                                               icon: '/Common/DMZ/Images/16x16/list.png',
                                               record: record,
                                               cls: 'x-btn-default-small',
                                               border: 1,
                                               style: {
                                                   borderColor: 'gray',
                                                   borderStyle: 'solid'
                                               },
                                               margin: '0 5 0 0',
                                               handler: function () {

                                                   var w = parent.Ext.create('Ext.window.Window', {
                                                       title: '<%=GetGlobalResourceObject("CMSResource", "ContactList")%>',
                                                       layout: 'fit',
                                                       modal: true,
                                                       constrain: true,
                                                       shadow: true,
                                                       shadowOffset: 50,
                                                       width: '95%',
                                                       height: '95%',
                                                       maximizable: true,
                                                       items: [
                                                          {
                                                              xtype: "component",
                                                              border: false,
                                                              autoEl: {
                                                                  tag: "iframe",
                                                                  src: "/Apps/DeviceSystem/DeviceContactList.aspx?MAC=" + record.get("MAC")
                                                              }
                                                          }
                                                       ],
                                                       buttons: [
                                {
                                    text: '<%=GetGlobalResourceObject("CMSResource", "Close")%>',
                                    handler: function () {
                                        this.up("window").close();
                                    }
                                }
                                                       ]
                                                   }).show();
                                               }
                                           },
                                               {
                                                   xtype: 'button',
                                                   text: '<%=GetGlobalResourceObject("CMSResource", "Action")%>',

                                                   record: record,
                                                   cls: 'x-btn-default-small',
                                                   border: 1,
                                                   style: {
                                                       borderColor: 'gray',
                                                       borderStyle: 'solid'
                                                   },
                                                   menu: Ext.create('Ext.menu.Menu', {
                                                       items: [
                                                           {
                                                               text: '<%=GetGlobalResourceObject("CMSResource", "CallIdent")%>',
                                                               icon: '/Common/DMZ/Images/16x16/bell.png',
                                                               handler: function () {

                                                                   Ext.Ajax.request({
                                                                       url: 'Handler.ashx?action=HandsUP',
                                                                       params: {
                                                                           ip: record.get("IP")
                                                                       }
                                                                   });
                                                               }
                                                           }, '-',
                                                           {
                                                               text: '<%=GetGlobalResourceObject("CMSResource", "ParamExport")%>',
                                                               icon: '/Common/DMZ/Images/16x16/Export.png',
                                                               handler: function () {

                                                                   try {
                                                                       parent.CMSClientDownload("/Apps/DeviceSystem/ImportExport.ashx?action=ParamExport&IP=" + record.get("IP") + "&MAC=" + record.get("MAC") + "&Name=" + record.get("Name"));
                                                                   } catch (e) {
                                                                       window.open("ImportExport.ashx?action=ParamExport&IP=" + record.get("IP") + "&MAC=" + record.get("MAC") + "&Name=" + record.get("Name"), "CMSDownloadIFrame");
                                                                   }

                                                                   //window.open("Handler.ashx?action=ParamExport&IP=" + record.get("IP") + "&MAC=" + record.get("MAC") + "&Name=" + record.get("Name"), "CMSDownloadIFrame");
                                                               }
                                                           },
                                                                                                                      {
                                                                                                                          text: '<%=GetGlobalResourceObject("CMSResource", "ParamImport")%>',
                                                                                                                          icon: '/Common/DMZ/Images/16x16/Import.png',
                                                                                                                          handler: function () {
                                                                                                                              var win = Ext.create('Ext.window.Window', {
                                                                                                                                  title: 'Choose Import File',
                                                                                                                                  layout: 'fit',
                                                                                                                                  modal: true,
                                                                                                                                  constrain: true,
                                                                                                                                  shadow: true,
                                                                                                                                  shadowOffset: 50,
                                                                                                                                  width: 300,
                                                                                                                                  items: [
                                                                                                                                      {
                                                                                                                                          xtype: 'form',
                                                                                                                                          border: false,
                                                                                                                                          bodyPadding: 5,
                                                                                                                                          layout: 'anchor',
                                                                                                                                          url: "Handler.ashx?action=ParamImport&IP=" + record.get("IP"),
                                                                                                                                          defaults: {
                                                                                                                                              anchor: '100%',
                                                                                                                                              labelWidth: 60
                                                                                                                                          },
                                                                                                                                          items: [
                                                                                                                                              {
                                                                                                                                                  xtype: 'filefield',
                                                                                                                                                  name: 'uploadFile',

                                                                                                                                                  labelWidth: 50,
                                                                                                                                                  msgTarget: 'side',
                                                                                                                                                  allowBlank: false,
                                                                                                                                                  anchor: '100%',
                                                                                                                                                  vtype: 'file'
                                                                                                                                              }],
                                                                                                                                          buttons: [
                                                                                                                                              {
                                                                                                                                                  text: '<%=GetGlobalResourceObject("CMSResource", "OK")%>',
                                                                                                                                                  border: 1,
                                                                                                                                                  style: {
                                                                                                                                                      borderColor: 'gray',
                                                                                                                                                      borderStyle: 'solid'
                                                                                                                                                  },
                                                                                                                                                  formBind: false,
                                                                                                                                                  handler: function () {
                                                                                                                                                      var form = this.up("form");
                                                                                                                                                      form.submit({
                                                                                                                                                          waitMsg: '<%=GetGlobalResourceObject("CMSResource", "Saving")%>',
                                                                                                                                                          success: function () {
                                                                                                                                                              alert("<%=GetGlobalResourceObject("CMSResource", "ImportSuccess")%>");
                                                                                                                                                              win.close();
                                                                                                                                                          }
                                                                                                                                                      });
                                                                                                                                                  }
                                                                                                                                              }
                                                                                                                                          ]
                                                                                                                                      }
                                                                                                                                  ]
                                                                                                                              }).show();
                                                                                                                          }
                                                                                                                      },
                                                                                                                      '-',
                                                               {
                                                                   text: '<%=GetGlobalResourceObject("CMSResource", "Reboot")%>',
                                                                   icon: '/Common/DMZ/Images/16x16/reload_all_tabs.png',
                                                                   handler: function () {
                                                                       if (confirm("<%=GetGlobalResourceObject("CMSResource", "RebootConfirm")%>")) {
                                                                           Ext.Ajax.request({
                                                                               url: 'Handler.ashx?action=Reboot',
                                                                               params: {
                                                                                   ip: record.get("IP")
                                                                               }
                                                                           });
                                                                       }
                                                                   }
                                                               }
                                                       ]
                                                   })


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

                            }
                        }
                ],
                dockedItems: [{
                    xtype: 'pagingtoolbar',
                    store: gridStore,
                    dock: 'bottom',
                    displayInfo: true
                }]
            });

            Ext.create('Ext.container.Viewport', {
                layout: {
                    type: 'border'
                },
                items: [
                    {
                        xtype: 'panel',
                        region: 'west',
                        title: '<%=GetGlobalResourceObject("CMSResource", "Query")%>',
                        width: 200,
                        layout: 'fit',
                        split: true,
                        collapsible: true,
                        collapsed: true,
                        items: [
                            {
                                xtype: 'form',
                                id: 'SearchForm',
                                border: false,
                                bodyPadding: 5,
                                layout: 'anchor',
                                defaults: {
                                    anchor: '100%',
                                    labelWidth: 80
                                },
                                defaultType: 'textfield',
                                items: [{
                                    fieldLabel: '<%=GetGlobalResourceObject("CMSResource", "Name")%>',
                                    name: 'Name'
                                }, {
                                    fieldLabel: '<%=GetGlobalResourceObject("CMSResource", "IPAddress")%>',
                                    name: 'IP'
                                }, {
                                    fieldLabel: 'MAC',
                                    name: 'MAC'
                                }, {
                                    fieldLabel: '<%=GetGlobalResourceObject("CMSResource", "DeviceID")%>',
                                    name: 'IDs'
                                }, {
                                    fieldLabel: '<%=GetGlobalResourceObject("CMSResource", "Nick")%>',
                                    name: 'NickName'
                                }, {
                                    xtype: 'button',
                                    text: '<%=GetGlobalResourceObject("CMSResource", "StartSearch")%>',
                                    scale: 'medium',
                                    formBind: true,
                                    handler: function () {
                                        var Name = this.up("form").getForm().findField("Name").getValue();
                                        var IP = this.up("form").getForm().findField("IP").getValue();
                                        var MAC = this.up("form").getForm().findField("MAC").getValue();
                                        var IDs = this.up("form").getForm().findField("IDs").getValue();
                                        var NickName = this.up("form").getForm().findField("NickName").getValue();

                                        if (Name != "" || IP != "" || MAC != "" || IDs != "" || NickName != "") {
                                            grid.store.getProxy().setExtraParam('isSearch', "1");
                                            grid.store.getProxy().setExtraParam('Name', Name);
                                            grid.store.getProxy().setExtraParam('IP', IP);
                                            grid.store.getProxy().setExtraParam('MAC', MAC);
                                            grid.store.getProxy().setExtraParam('IDs', IDs);
                                            grid.store.getProxy().setExtraParam('NickName', NickName);
                                            grid.store.load({
                                                callback: function (records, options, success) {
                                                    if (success) {
                                                        Ext.getCmp("clearButton").show();
                                                    }
                                                }
                                            });
                                        }

                                    }
                                }]
                            }
                        ]
                    }, grid]
            });

            });


    </script>

<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
        <iframe id="CMSDownloadIFrame" name="CMSDownloadIFrame" style="width:0px;height:0px"></iframe>
    </form>
</body>
</html>
