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

<!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: ['NickName', 'IP', 'IDs', 'Name', 'State', 'Online'],
                    proxy: {
                        type: 'ajax',
                        url: '/Apps/DeviceSystem/Handler.ashx?action=GetIOTDeviceGridLogData',
                        reader: {
                            type: 'json',
                            root: 'items',
                            totalProperty: 'totalCount'
                        },
                        simpleSortMode: true,
                        extraParams: {
                            isSearch: '0',                         
                            NickName: '',
                            IP: '',
                            IDs: '',
                            Name:''
                        }
                    },
                    sorters: [{
                        property: "Name",
                        direction: "ASC"
                    }]
                }); 

                grid = Ext.create('Ext.grid.Panel', {
                    tbar: [
                       {
                            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");
                                }
                            }
                    }
                ],
                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: '<%=GetGlobalResourceObject("CMSResource", "Time")%>', dataIndex: 'Online', flex: 1 },   
                    { text: '<%=GetGlobalResourceObject("CMSResource", "Action")%>', dataIndex: 'State', flex: 1 },   ],
                dockedItems: [{
                    xtype: 'pagingtoolbar',
                    store: gridStore,
                    dock: 'bottom',
                    displayInfo: true
                }]
            });
                
            Ext.create('Ext.container.Viewport', {
                layout: {
                    type: 'border'
                },
                items: [grid]
                });
            });
    </script>

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