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

<!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>  <%
        Response.ExpiresAbsolute = DateTime.Now;
        Response.Expires = -1441;
        Response.CacheControl = "no-cache";
        Response.AddHeader("Pragma", "no-cache");
        Response.AddHeader("Pragma", "no-store");
        Response.AddHeader("cache-control", "no-cache");
        Response.Cache.SetCacheability(HttpCacheability.NoCache);
        Response.Cache.SetNoServerCaching();
         %>
      <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 = /^.*\.(IOTDevice)$/i;
                        return fileName.test(val);
                    },
                    // vtype Text property to display error Text
                    // when the validation function returns false
                    fileText: "File must be .IOTDevice",
                    // vtype Mask property for keystroke filter mask
                    fileMask: /[a-z_\.]/i
                });

                // custom Vtype for vtype:'viotid'
                Ext.apply(Ext.form.field.VTypes, {
                    viotid: function (v) {
                        return /^[A-Za-z0-9_ -]*$/i.test(v);
                    },
                    viotidText:'<%=GetGlobalResourceObject("CMSResource", "viotidtext")%>',
                    viotidMask: /[A-Za-z0-9_ -]/i
                });

              
                var gridStore = Ext.create('Ext.data.Store', {
                    pageSize: 20,
                    remoteSort: true,
                    autoLoad: true,
                    fields: ['MAC', 'NickName', 'IP', 'IDs', 'Name', 'is3rdDevice', 'Online', 'IpTableNote', 'State'],
                    proxy: {
                        type: 'ajax',
                        url: '/Apps/DeviceSystem/Handler.ashx?action=GetIOTMobileGridData',
                        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', {
                    
                region: 'center',
                store: gridStore,
                columns: [
                    { text: '<%=GetGlobalResourceObject("CMSResource", "Name")%>', dataIndex: 'Name', flex: 1 },
                    { text: '<%=GetGlobalResourceObject("CMSResource", "DeviceID")%>', dataIndex: 'IDs', width: 120 },             
                    { text: '<%=GetGlobalResourceObject("CMSResource", "Nick")%>', dataIndex: 'NickName', flex: 1 },
                    {
                        text: '<%=GetGlobalResourceObject("CMSResource", "Status")%>', dataIndex: 'State', 
                        align: 'center',
                        renderer: function (value) {
                            if (value == "") return;
                            //return value == "1" ? '<img src=/Common/DMZ/Images/16x16/enabled.png />' : '<img src=/Common/DMZ/Images/16x16/alert.png />';
                            switch (value) {
                                case "ON":
                                    return '<img src=/Common/DMZ/Images/16x16/enabled.png />';
                                    break;
                                case "OFF":
                                    return '<img src=/Common/DMZ/Images/16x16/disabled.png />';
                                    break;
                                default:
                                    return '<img src=/Common/DMZ/Images/16x16/enabled.png />';
                                    break;
                            }
                        }
                    },
                    //{ text: 'Note', dataIndex: 'IpTableNote', flex: 1 },
                        {
                            text: '',
                            width: 210,
                            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", "Action")%>',
                                                   margin: '0 5 0 0',
                                                   record: record,
                                                   cls: 'x-btn-default-small',
                                                   border: 1,
                                                   style: {
                                                       borderColor: 'gray',
                                                       borderStyle: 'solid'
                                                   },
                                                   menu: Ext.create('Ext.menu.Menu', {
                                                       items: [                                                           
                                                            {
                                                                text:'<%=GetGlobalResourceObject("CMSResource", "Enable")%>',
                                                                icon: '/Common/DMZ/Images/16x16/enabled.png',
                                                                hidden: record.get("MAC") == "",
                                                                //hidden: record.get("IP") == "",
                                                                handler: function () {

                                                                    Ext.Ajax.request({
                                                                        url: 'Handler.ashx?action=mobileEnable&mac=' + record.get("MAC"),
                                                                        params: {
                                                                            MAC: record.get("MAC")
                                                                            //,ip: record.get("IP")
                                                                        },
                                                                        success: function (response) {
                                                                            var result = Ext.decode(response.responseText);
                                                                            if (result.success) {
                                                                                grid.store.load();
                                                                            }
                                                                            else {

                                                                            }
                                                                        }
                                                                    });
                                                                    
                                                                }
                                                            } 
                                                            ,
                                                            {
                                                                text: '<%=GetGlobalResourceObject("CMSResource", "Disable")%>',
                                                                icon: '/Common/DMZ/Images/16x16/disabled.png',
                                                                hidden: record.get("MAC") == "",
                                                                handler: function () {

                                                                    Ext.Ajax.request({
                                                                        url: 'Handler.ashx?action=mobileDisable&mac=' + record.get("MAC"),
                                                                        params: {
                                                                            MAC: record.get("MAC")
                                                                        },
                                                                        success: function (response) {
                                                                            var result = Ext.decode(response.responseText);
                                                                            if (result.success) {
                                                                                grid.store.load();
                                                                            }
                                                                            else {

                                                                            }
                                                                        }

                                                                    });
                                                                    
                                                                }
                                                            }
                                                       ]
                                                   })
                                               },
                                               {
                                                   xtype: 'button',
                                                   icon: '/Common/DMZ/Images/16x16/delete.png',
                                                   record: record,
                                                   cls: 'x-btn-default-small',
                                                   border: 1,
                                                   style: {
                                                       borderColor: 'gray',
                                                       borderStyle: 'solid'
                                                   },
                                                   margin: '0 5 0 0',
                                                   handler: function ()
                                                   {                                                                                 
                                                       if (confirm("<%=GetGlobalResourceObject("CMSResource", "SureRemoveDevice")%>")) {
                                                           Ext.Ajax.request({
                                                               url: 'Handler.ashx?action=RemoveIOTDevice&mac=' + record.get("MAC"),
                                                               success: function (response) {
                                                                   var result = Ext.decode(response.responseText);
                                                                   if (result.success) {
                                                                       grid.store.load();
                                                                   }
                                                                   else {

                                                                   }
                                                               }
                                                           });
                                                       }
                                                   }
                                               }
                                        ]
                                    });
                                    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: [grid]
                });
            });

            function ShowWin(mac) {
                var title = mac == '' ? '新增IOT设备' : '修改IOT设备';

                 var contentForm = Ext.create('Ext.form.Panel', {
                 border: false,
                 bodyPadding: 5,
                 layout: 'anchor',
                 url: 'Handler.ashx?action=SaveIOTData',
                 defaults: {
                     anchor: '100%',
                     labelWidth: 90
                 },
                 defaultType: 'textfield',
                 items: [{
                     xtype: 'hiddenfield',
                     fieldLabel: 'MAC',
                     name: 'MAC',
                     id: 'MAC',
                     readOnly:mac!="",
                    allowBlank: false
                 },{
                     fieldLabel: '<%=GetGlobalResourceObject("CMSResource", "DeviceCode")%>',
                     id: 'Model',
                name: 'Model',
                xtype: 'combo',
                store: Ext.create('Ext.data.Store', {
                    fields: ['abbr', 'name'],
                    data: [
                       
                    ]
                }),
                readOnly: mac!='',
                editable: false,
                queryMode: 'local',
                displayField: 'name',
                valueField: 'abbr',
                allowBlank: false
            }, {
                fieldLabel: '<%=GetGlobalResourceObject("CMSResource", "DeviceID")%>',
                name: 'ID',
                allowBlank: false,
                readOnly: mac != '',
                //vtype: 'alphanum'
                vtype: 'viotid'                
            },            
           {
                fieldLabel: '<%=GetGlobalResourceObject("CMSResource", "IPAddress")%>',
                name: 'IP'
                 },                 
                 {
                     fieldLabel: '<%=GetGlobalResourceObject("CMSResource", "Nick")%>',
                     id: 'NickName',
                     name: 'NickName',
                     allowBlank: false
                 },
                 {
                     fieldLabel: 'Note',
                     name: 'IpTableNote'
                 }],
            buttons: [
                {
                    text: '<%=GetGlobalResourceObject("CMSResource", "Save")%>',
                    formBind: true,
                    handler: function() {
                        var form = this.up('form').getForm();
                        if (form.isValid()) {
                            form.submit({
                                success: function(f, action) {
                                    grid.store.load();
                                    w.close();
                                },
                                failure: function(f, action) {
                                    var msg = "<%=GetGlobalResourceObject("CMSResource", "SaveFail")%>";
                                    if (action.result.msg != "") msg = action.result.msg;
                                    alert(msg);
                                }
                            });
                            }
                    }
                },
                {
                    text: '<%=GetGlobalResourceObject("CMSResource", "Cancel")%>',
                    handler: function() {
                        this.up("window").close();
                    }
                }
            ]
        });

            if (mac != "") {
            contentForm.getForm().load({
                url: 'Handler.ashx?action=GetIOTData&MAC=' + mac,
                success: function(form, action) {

                }
            });
            }

            var w = Ext.create('Ext.window.Window', {
                title: title,
                layout: 'fit',
                modal: true,
                constrain: true,
                shadow: true,
                shadowOffset: 50,
                width: 400,
                items: contentForm
            }).show();
            }
    </script>
<body>
   
    <form id="form1" runat="server">
    <div>
    
    </div> <iframe id="CMSDownloadIFrame" name="CMSDownloadIFrame" style="width:0px;height:0px"></iframe>
    </form>
</body>
</html>
