<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Main.aspx.cs" Inherits="GigaTech.CMS.Web.Common.SystemAdmin.AccessLog.Main" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <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: ['ident', 'UserName', 'UserID', 'LoginDateTime', 'LogoutDateTime', 'UserIP'],
                proxy: {
                    type: 'ajax',
                    url: 'Handler.ashx?action=GetGridData',
                    reader: {
                        type: 'json',
                        root: 'items',
                        totalProperty: 'totalCount'
                    },
                    simpleSortMode: true,
                    extraParams: {
                        isSearch: '0',
                        name: '',
                        id: '',
                        login_begin: '',
                        login_end: ''
                    }
                },
                sorters: [{
                    property: "LoginDateTime",
                    direction: "DESC"
                }]
            });

            var 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: '',
                        menuDisabled: true,
                        sortable: false,
                        width: 25,
                        renderer: function(value) {
                            return "<img src='/Common/DMZ/Images/16x16/user.png'/>";

                        }
                    },
                    { text: '<%=GetGlobalResourceObject("CMSResource", "Name")%>', dataIndex: 'UserName', flex: 1 },
                    { text: '<%=GetGlobalResourceObject("CMSResource", "ID")%>', dataIndex: 'UserID' },
                    { text: '<%=GetGlobalResourceObject("CMSResource", "LoginTime")%>', dataIndex: 'LoginDateTime', flex: 1 },
                    { text: '<%=GetGlobalResourceObject("CMSResource", "LogoutTime")%>', dataIndex: 'LogoutDateTime', flex: 1 },
                    { text: '<%=GetGlobalResourceObject("CMSResource", "IPAddress")%>', dataIndex: 'UserIP', flex: 1 }
                ],
                dockedItems: [{
                    xtype: 'pagingtoolbar',
                    store: gridStore,
                    dock: 'bottom',
                    displayInfo: true
                }],
                listeners: {
                    'selectionchange': function(e, selected, eOpts) {

                    }
                }
            });

            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", "ID")%>',
                                    name: 'id'
                                }, {
                                    fieldLabel: '<%=GetGlobalResourceObject("CMSResource", "LoginDateRange")%>',
                                    xtype: 'datefield',
                                    name: 'login_begin'
                                }, {
                                    fieldLabel: '&nbsp;',
                                    xtype: 'datefield',
                                    labelSeparator: '',
                                    name: 'login_end'
                                }, {
                                    xtype: 'button',
                                    text: '<%=GetGlobalResourceObject("CMSResource", "StartSearch")%>',
                                    scale: 'medium',
                                    formBind: true,
                                    handler: function () {
                                        var name = this.up("form").getForm().findField("name").getValue();
                                        var id = this.up("form").getForm().findField("id").getValue();

                                        var login_begin = this.up("form").getForm().findField("login_begin").getValue();
                                        var login_end = this.up("form").getForm().findField("login_end").getValue();
                                        login_begin = login_begin == null ? "" : login_begin;
                                        login_end = login_end == null ? "" : login_end;

                                        if (login_begin != "" && login_end != "") {
                                            if (login_begin > login_end) {
                                                alert("<%=GetGlobalResourceObject("CMSResource", "LoginDateRangeError")%>");
                                                return;
                                            }
                                        }

                                        if (name != "" || id != "" || login_begin != "" || login_end != "") {
                                            grid.store.getProxy().setExtraParam('isSearch', "1");
                                            grid.store.getProxy().setExtraParam('name', name);
                                            grid.store.getProxy().setExtraParam('id', id);
                                            grid.store.getProxy().setExtraParam('login_begin', login_begin);
                                            grid.store.getProxy().setExtraParam('login_end', login_end);
                                            grid.store.load({
                                                callback: function (records, options, success) {
                                                    if (success) {
                                                        Ext.getCmp("clearButton").show();
                                                    }
                                                }
                                            });
                                        }

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

        });
    </script>

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