<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DeviceList.aspx.cs" Inherits="GigaTech.CMS.Web.Apps.IOTDeviceSystem.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>
</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'],
                    proxy: {
                        type: 'ajax',
                        url: '/Apps/DeviceSystem/Handler.ashx?action=GetIOTDeviceGridData',
                        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: 'Import',
                            cls: 'x-btn-default-small',
                            border: 1,
                            style: {
                                borderColor: 'gray',
                                borderStyle: 'solid'
                            },
                            handler: function () {
                                var winw = 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: '/Apps/IOTDeviceSystem/ImportExport.ashx?action=Import&type=IOTDevice',
                                            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 () {
                                                                winw.close();
                                                                gridStore.load();
                                                                //grid.load(); <-- Jimmy 這行有問題
                                                                alert('OK');
                                                             
                                                            }
                                                        });
                                                    }
                                                }
                                            ]
                                        }
                                    ]
                                }).show();
                            }
                        }, {
                            text: 'Export',
                            cls: 'x-btn-default-small',
                            border: 1,
                            style: {
                                borderColor: 'gray',
                                borderStyle: 'solid'
                            },
                            handler: function () {
                                try {
                                    parent.CMSClientDownload("/Apps/IOTDeviceSystem/ImportExport.ashx?action=Export&type=IOTDevice");
                                } catch (e) {
                                    window.open("/Apps/IOTDeviceSystem/ImportExport.ashx?action=Export&type=IOTDevice", "CMSDownloadIFrame");
                                }

                            }
                        },
                        '->',
                        {
                            text: '新增IOT设备',
                        id: 'clearButton',
                        cls: 'x-btn-default-small',
                        border: 1,
                        style: {
                            borderColor: 'gray',
                            borderStyle: 'solid'
                        },
                        icon: '/Common/DMZ/Images/16x16/network_hub.png',
                        handler: function () {
                            ShowWin("");
                        }
                    }
                ],
                region: 'center',
                store: gridStore,
                columns: [
                    { text: '<%=GetGlobalResourceObject("CMSResource", "Name")%>', dataIndex: 'Name', flex: 1 },
                  //  { text: '<%=GetGlobalResourceObject("CMSResource", "DeviceID")%>', dataIndex: 'IDs', width: 120 },
                  //  { text: '<%=GetGlobalResourceObject("CMSResource", "IPAddress")%>', dataIndex: 'IP' ,width:120},
                    { text: '<%=GetGlobalResourceObject("CMSResource", "Nick")%>', dataIndex: 'NickName', flex: 1 },
                    { 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: '编辑',
                                                icon: '/Common/DMZ/Images/16x16/edit.png',
                                                record: record,
                                                cls: 'x-btn-default-small',
                                                border: 1,
                                                style: {
                                                    borderColor: 'gray',
                                                    borderStyle: 'solid'
                                                },
                                                margin: '0 5 0 0',
                                                handler: function () {
                                                    ShowWin(record.get("MAC"));

                                                    <%--                                                    var answer = prompt("<%=GetGlobalResourceObject("CMSResource", "InputNickPls")%>", record.get("NickName"));
                                                    if (answer != null) {
                                                                         Ext.Ajax.request({
                                                                            url: 'Handler.ashx?action=SaveNickName',
                                                                            params: {
                                                                                mac: record.get("MAC"),
                                                                                nickname: answer
                                                                            },
                                                                            success: function (response) {
                                                                                var result = Ext.decode(response.responseText);
                                                                                if (result.success) {

                                                                                    gridStore.load();
                                                                                }
                                                                                else {

                                                                                }
                                                                            }
                                                                        });
                                                      }--%>
                                                }
                                            },
                                           {
                                               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?iot=Y&MAC=" + record.get("MAC")
                                                              }
                                                          }
                                                       ],
                                                       buttons: [
                                {
                                    text: '<%=GetGlobalResourceObject("CMSResource", "Close")%>',
                                    handler: function () {
                                        this.up("window").close();
                                    }
                                }
                                                       ]
                                                   }).show();
                                               }
                                           },
                                               {
                                                   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: '學習',
                                                               icon: '/Common/DMZ/Images/16x16/rss.png',
                                                               hidden:record.get("IP")=="",
                                                               handler: function () {                                                                   
                                                                      
                                                                       Ext.Ajax.request({
                                                                           url: 'Handler.ashx?action=Learn',
                                                                           params: {
                                                                               ip: record.get("IP")
                                                                           }                                                                       
                                                                       });                                                                
                                                               }
                                                           }
                                                           ,*/
                                                            { 
                                                                text: '连网状态查询',
                                                                icon: '/Common/DMZ/Images/16x16/find.png',
                                                                hidden: record.get("MAC") == "",
                                                                //hidden: record.get("IP") == "",
                                                                handler: function () {                                                                   
                                                                    Ext.Ajax.request({
                                                                        url: 'Handler.ashx?action=linkstatequery',
                                                                        params: {
                                                                            MAC: record.get("MAC")
                                                                            //,ip: record.get("IP")
                                                                        },
                                                                        success: function (response)
                                                                        {
                                                                            //alert(response.responseText);
                                                                            
                                                                           
                                                                            Ext.MessageBox.show({
                                                                                title: '连网状态查询',
                                                                                msg: response.responseText,
                                                                                buttons: Ext.MessageBox.OK,
                                                                                icon: Ext.MessageBox.INFO
                                                                            });
                                                                           
                                                                        }

                                                                    });
                                                                }
                                                            } 
                                                            ,
                                                            {
                                                                text: '退網',
                                                                icon: '/Common/DMZ/Images/16x16/rss.png',
                                                                hidden: record.get("MAC") == "",
                                                                handler: function () {

                                                                    Ext.Ajax.request({
                                                                        url: 'Handler.ashx?action=unlinkNetwork',
                                                                        params: {
                                                                            MAC: record.get("MAC")
                                                                        }
                                                                    });
                                                                }
                                                            }
                                                              ,
                                                            {
                                                                text: '開啟',
                                                                icon: '/Common/DMZ/Images/16x16/arrow_up.png',
                                                                hidden: record.get("MAC") == "",
                                                                handler: function () {

                                                                    Ext.Ajax.request({
                                                                        url: 'Handler.ashx?action=turnon',
                                                                        params: {
                                                                            MAC: record.get("MAC")
                                                                        }
                                                                    });
                                                                }
                                                            }
                                                             ,
                                                            {
                                                                text: '關閉',
                                                                icon: '/Common/DMZ/Images/16x16/arrow_down.png',
                                                                hidden: record.get("MAC") == "",
                                                                handler: function () {

                                                                    Ext.Ajax.request({
                                                                        url: 'Handler.ashx?action=turnoff',
                                                                        params: {
                                                                            MAC: record.get("MAC")
                                                                        }
                                                                    });
                                                                }
                                                            },
                                                            {
                                                                text: '停止',
                                                                icon: '/Common/DMZ/Images/16x16/disabled.png',
                                                                hidden: record.get("MAC") == "",
                                                                handler: function () {

                                                                    Ext.Ajax.request({
                                                                        url: 'Handler.ashx?action=iotdevicestop',
                                                                        params: {
                                                                            MAC: record.get("MAC")
                                                                        }
                                                                    });
                                                                }
                                                            }
                                                       ]
                                                   })
                                               },
                                               {
                                                   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: [
                        <%=iot_list%>
                    ]
                }),
                readOnly: mac!='',
                editable: false,
                queryMode: 'local',
                displayField: 'name',
                valueField: 'abbr',
                allowBlank: false
            }, {
                fieldLabel: '<%=GetGlobalResourceObject("CMSResource", "DeviceID")%>',
                name: 'ID',
                // allowBlank: false,
                allowBlank: true,
                readOnly: mac != '',
                hidden: title == '新增IOT设备',
                //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>

