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

<!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>
    <script language="javascript">
        Ext.onReady(function () {
            Ext.QuickTips.init();

            var gridStore = Ext.create('Ext.data.Store', {
                pageSize: 20,
                remoteSort: true,
                autoLoad: true,
                fields: ['MAC', 'Code', 'SubCode', 'ID', 'SubID', 'IP','SubMask', 'IpTableNote', 'NickName'],
                proxy: {
                    type: 'ajax',
                    url: 'Handler.ashx?action=Get3rdGridData',
                    reader: {
                        type: 'json',
                        root: 'items',
                        totalProperty: 'totalCount'
                    },
                    simpleSortMode: true
                },
                sorters: [{
                    property: "Code",
                    direction: "ASC"
                }]
            });

            var grid = Ext.create('Ext.grid.Panel', {
                id: '3rdGrid',
                //title: '第三方設備維護',
                region: 'center',
                store: gridStore,
                tbar: ['【<%=GetGlobalResourceObject("CMSResource", "DeviceManage3rd")%>】',
                        '->',
                        {
                            text: '<%=GetGlobalResourceObject("CMSResource", "New3rdDevice")%>',
                            cls: 'x-btn-default-small',
                            border: 1,
                            style: {
                                borderColor: 'gray',
                                borderStyle: 'solid'
                            },
                            icon: '/Common/DMZ/Images/16x16/phone_on.png',
                            handler: function () {
                                ShowWin("");
                            }
                        }
                                    ],
                columns: [
                    { text: 'MAC', dataIndex: 'MAC', width: 120 },
                    { text: '<%=GetGlobalResourceObject("CMSResource", "DeviceCode")%>', dataIndex: 'Code', width: 80 },
                    { text: '<%=GetGlobalResourceObject("CMSResource", "DeviceSubCode")%>', dataIndex: 'SubCode', width: 90 },
                     { text: '<%=GetGlobalResourceObject("CMSResource", "DeviceID")%>', dataIndex: 'ID', width: 80 },
                      { text: '<%=GetGlobalResourceObject("CMSResource", "DeviceSubID")%>', dataIndex: 'SubID', width: 60 },
                    { text: '<%=GetGlobalResourceObject("CMSResource", "IPAddress")%>', dataIndex: 'IP', width: 120 },
                    { text: '<%=GetGlobalResourceObject("CMSResource", "SubMask")%>', dataIndex: 'SubMask', width: 120 },
                    { text: '<%=GetGlobalResourceObject("CMSResource", "Nick")%>', dataIndex: 'NickName', width: 120 },
                   { text: 'IPTable Note', dataIndex: 'IpTableNote', flex: 1 },
                                                                   {
                                                                       xtype: 'actioncolumn',
                                                                       width: 30,
                                                                       sortable: false,
                                                                       menuDisabled: true,
                                                                       hideable: false,
                                                                       align: 'center',
                                                                       items: [{
                                                                           icon: '/Common/DMZ/Images/16x16/edit.png',
                                                                           tooltip: '<%=GetGlobalResourceObject("CMSResource", "Edit")%>',
                                                                           scope: this,
                                                                           handler: function (view, rowIndex, colIndex, item, e, record, row) {
                                                                               ShowWin(record.get("MAC"));
                                                                           }
                                                                       }]
                                                                   },
                                                                                                                                      {
                                                                                                                                          xtype: 'actioncolumn',
                                                                                                                                          width: 30,
                                                                                                                                          sortable: false,
                                                                                                                                          menuDisabled: true,
                                                                                                                                          hideable: false,
                                                                                                                                          align: 'center',
                                                                                                                                          items: [{
                                                                                                                                              icon: '/Common/DMZ/Images/16x16/delete.png',
                                                                                                                                              tooltip: '<%=GetGlobalResourceObject("CMSResource", "Remove")%>',
                                                                           scope: this,
                                                                           handler: function (view, rowIndex, colIndex, item, e, record, row) {
                                                                               if (confirm("<%=GetGlobalResourceObject("CMSResource", "SureRemoveDevice")%>")) {
                                                                                   Ext.Ajax.request({
                                                                                       url: 'Handler.ashx?action=Remove3rdDevice&mac=' + record.get("MAC"),
                                                                                       success: function (response) {
                                                                                           var result = Ext.decode(response.responseText);
                                                                                           if (result.success) {
                                                                                               Ext.getCmp("3rdGrid").store.load();
                                                                                           }
                                                                                           else {

                                                                                           }
                                                                                       }
                                                                                   });
                                                                               }
                                                                           }
                                                                       }]
                                                                                                                                      }
                ]
            });

            Ext.create('Ext.container.Viewport', {
                layout: {
                    type: 'border'
                },
                items: [grid]
            });

        });

        function ShowWin(mac) {
            var title = mac == '' ? '<%=GetGlobalResourceObject("CMSResource", "New3rdDevice")%>' : '<%=GetGlobalResourceObject("CMSResource", "Modify3rdDevice")%>';

             var contentForm = Ext.create('Ext.form.Panel', {
                 border: false,
                 bodyPadding: 5,
                 layout: 'anchor',
                 url: 'Handler.ashx?action=Save3rdData',
                 defaults: {
                     anchor: '100%',
                     labelWidth: 90
                 },
                 defaultType: 'textfield',
                 items: [{
                     xtype: 'hiddenfield',
                     name: 'update',
                     value: mac==""?"0":"1"
                 },{
                     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: [
                        { "abbr": "240-2", "name": "<%=GetGlobalResourceObject("CMSResource", "IPCam_H")%>" },
                        { "abbr": "240-3", "name": "<%=GetGlobalResourceObject("CMSResource", "IPCam_S")%>" }
                    ]
                }),
                editable: false,
                queryMode: 'local',
                displayField: 'name',
                valueField: 'abbr',
                value: "240-2"
            }, {
                fieldLabel: '<%=GetGlobalResourceObject("CMSResource", "DeviceID")%>',
                name: 'ID',
                allowBlank: false,
                vtype: 'alphanum'
            }, {
                fieldLabel: '<%=GetGlobalResourceObject("CMSResource", "DeviceSubID")%>',
                name: 'SubID',
                allowBlank: false,
                vtype: 'alphanum'
            }, {
                fieldLabel: '<%=GetGlobalResourceObject("CMSResource", "IPAddress")%>',
                name: 'IP',
                allowBlank: false
            }, {
                fieldLabel: '<%=GetGlobalResourceObject("CMSResource", "SubMask")%>',
                name: 'SubMask',
                allowBlank: false
            },
                 {
                     fieldLabel: '<%=GetGlobalResourceObject("CMSResource", "Nick")%>',
                     id: 'NickName',
                     name: 'NickName',
                     allowBlank: false
                 },
                 {
                     fieldLabel: 'IPTable 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();
                                    Ext.getCmp("3rdGrid").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=Get3rdData&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();
        Ext.getCmp('MAC').focus(false, 200);
       
    }
    </script>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>
