fleet-contractor/Site/Credentials/ManageCredential.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Credentials/Credentials.master" AutoEventWireup="true" CodeFile="ManageCredential.aspx.cs" Inherits="ManageCredential" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script type="text/javascript">
        var credentialType = "AEMP";
        var credentialList;

        credentialquery = function (method, param, callback, error, nolog) {
            _network.request("Credentials/ManageCredential.aspx?tp=ashx", -1, method, param, callback, error, nolog);
        }

        function OnDelete(cr) {
            var cre = cr;
            if (!cre) {
                return;
            }
            showConfirm(GetTextByKey("P_CRE_DELETETHECREDENTIALTIPS", 'Do you want to delete the credential?'), GetTextByKey("P_CRE_DELETECREDENTIAL", 'Delete Credential'), function () {
                credentialquery("DeleteAEMPCredential", cre.ID, function (data) {
                    OnRefresh();
                }, function (err) {
                    showAlert(GetTextByKey("P_CRE_FAILEDDELETECREDENTIAL", 'Failed to delete this credential.'), GetTextByKey("P_CRE_DELETECREDENTIAL", 'Delete Credential'));
                });
            });
        }

        function OnAdd() {
            creid = undefined;
            $('#dialog_manufacture').val('JOHNDEERE').removeAttr("disabled");
            $('#dialog_urlkey').val('');
            $('#dialog_username').val('');
            $('#dialog_password').val('');
            $('#dialog_enabled').prop('checked', true);
            $('#dialog_orgid').val('');
            $('#dialog_notes').val('');
            $('#dialog_credential .dialog-title span.title').text(GetTextByKey("P_CRE_ADDMANUFACTURE", 'Add Credential'));
            showmaskbg(true);
            $('#dialog_credential')
                .attr('act', 'add')
                .css({
                    'top': (document.documentElement.clientHeight - $('#dialog_credential').height()) / 3,
                    'left': (document.documentElement.clientWidth - $('#dialog_credential').width()) / 2
                })
                .showDialogfixed();
            $('#dialog_urlkey').focus();
        }

        var creid;
        function OnEdit() {
            var cre = grid_dt.source[grid_dt.selectedIndex];
            if (!cre) {
                creid = undefined;
                return;
            }

            creid = cre.ID;
            $('#dialog_manufacture').val(cre.ManufactureID).attr("disabled", "disabled");
            $('#dialog_urlkey').val(cre.UrlKey);
            $('#dialog_username').val(cre.UserName);
            $('#dialog_password').val(cre.Password);
            $('#dialog_enabled').prop("checked", cre.Enabled.Value);
            $('#dialog_orgid').val(cre.OrgnizationID);
            $('#dialog_notes').val(cre.Notes);
            $('#dialog_credential .dialog-title span.title').text(GetTextByKey("P_CRE_EDITMANUFACTURE", 'Edit Credential'));
            showmaskbg(true);
            $('#dialog_credential')
                .attr('act', 'edit')
                .css({
                    'top': (document.documentElement.clientHeight - $('#dialog_credential').height()) / 3,
                    'left': (document.documentElement.clientWidth - $('#dialog_credential').width()) / 2
                })
                .showDialog();
            $('#dialog_urlkey').focus();
        }

        function OnDblClick(e) {
            OnEdit();
        }

        function OnRefresh() {
            showloading(true);
            credentialquery("GetAEMPCredentials", '', function (data) {
                showloading(false);
                credentialList = data;
                showCredentialList(credentialList);
            }, function (err) {
                showloading(false);
            });
        }


        function showCredentialList(data) {
            var rows = [];
            for (var i = 0; i < data.length; i++) {
                var r = data[i];
                for (var j in r) {
                    if (j === "Enabled") {
                        r[j] = { DisplayValue: r["Enabled"] ? GetTextByKey("P_UTILITY_YES", "Yes") : GetTextByKey("P_UTILITY_NO", "No"), Value: r[j] };
                    }
                }
                rows.push(r);
            }

            grid_dt.setData(rows);
        }

        var grid_dt;
        function InitGridData() {
            $('#btnEdit').attr("disabled", "disabled");

            grid_dt = createGridView('#credentiallist');
            var list_columns = [
                { name: 'ManufactureID', caption: GetTextByKey("P_CRE_MANUFACTURE", "Manufacture"), valueIndex: 'ManufactureID', allowFilter: true, css: { 'width': 200, 'text-align': 'left' } },
                { name: 'UrlKey', caption: GetTextByKey("P_CRE_URLKEY", "Url Key"), valueIndex: 'UrlKey', allowFilter: true, css: { 'width': 200, 'text-align': 'left' } },
                { name: 'UserName', caption: GetTextByKey("P_CRE_USERNAME", "User Name"), valueIndex: 'UserName', allowFilter: true, css: { 'width': 200, 'text-align': 'left' } },
                { name: 'Enabled', caption: GetTextByKey("P_CRE_ENABLED", "Enabled"), valueIndex: 'Enabled', allowFilter: true, css: { 'width': 200, 'text-align': 'left' } },
                { name: 'Notes', caption: GetTextByKey("P_CRE_NOTES", "Notes"), valueIndex: 'Notes', css: { 'width': 200, 'text-align': 'left' } },
                { name: 'Edit', caption: "", css: { 'width': 30, 'text-align': 'center' } },
                { name: 'Delete', caption: "", css: { 'width': 30, 'text-align': 'center' } }
            ];
            var columns = [];
            // head
            for (var hd in list_columns) {
                var col = {};
                col.name = list_columns[hd].name;
                col.caption = list_columns[hd].caption;
                col.visible = true;
                col.sortable = true;
                col.width = list_columns[hd].css.width;
                col.align = list_columns[hd].css["text-align"]
                col.key = list_columns[hd].valueIndex;
                col.allowFilter = list_columns[hd].allowFilter;

                if (col.name === "Edit") {
                    col.sortable = false;
                    col.resizable = false;
                    col.type = GridView.ColumnTypes.Icon;
                    col.text = 'edit';
                    col.iconType = 'fa-light';
                    col.events = {
                        onclick: function () {
                            OnEdit();
                        }
                    };
                    col.attrs = { 'title': GetTextByKey("P_CRE_EDIT", 'Edit') };
                }
                else if (col.name === "Delete") {
                    col.sortable = false;
                    col.resizable = false;
                    col.type = GridView.ColumnTypes.Icon;
                    col.text = 'times';
                    col.iconType = 'fa-light';
                    col.events = {
                        onclick: function () {
                            OnDelete(this);
                        }
                    };
                    col.attrs = { 'title': GetTextByKey("P_CRE_DELETE", 'Delete') };
                }
                columns.push(col);
            }
            grid_dt.canMultiSelect = false;
            grid_dt.columns = columns;
            grid_dt.init();
            grid_dt.onRowDblClicked = OnEdit;

            grid_dt.onSelectedRowChanged = function (rowindex) {
                var rowdata = grid_dt.source[rowindex];
                if (rowdata) {
                    creid = rowdata.ID;
                }
            }
        }

        function OnDialogOK() {
            var item = {
                'ManufactureID': $('#dialog_manufacture').val(),
                'UrlKey': $('#dialog_urlkey').val().replace(/(^\s*)|(\s*$)/g, ''),
                'UserName': $('#dialog_username').val().replace(/(^\s*)|(\s*$)/g, ''),
                'Password': $('#dialog_password').val(),
                'Enabled': $('#dialog_enabled').prop("checked"),
                'OrgnizationID': $('#dialog_orgid').val(),
                'CredentialType': credentialType,
                'Notes': $('#dialog_notes').val()
            };
            var alerttitle;
            if (creid) {
                item.ID = creid;
                alerttitle = GetTextByKey("P_CRE_EDITMANUFACTURE", "Edit Credential");
            } else {
                item.ID = "";
                alerttitle = GetTextByKey("P_CRE_ADDMANUFACTURE", "Add Credential");
            }
            //if (!item.UrlKey || item.UrlKey.length == 0) {
            //    showAlert('Url Key cannot be empty.', alerttitle);
            //    $('#dialog_urlkey').focus();
            //    return;
            //}
            if (!item.UserName || item.UserName.length == 0) {
                showAlert(GetTextByKey("P_CRE_USERNAMENOTBEEMPTY", 'User Name cannot be empty.'), alerttitle);
                $('#dialog_username').focus();
                return;
            }
            if (!item.Password || item.Password.length == 0) {
                showAlert(GetTextByKey("P_CRE_PASSWORDNOTBEEMPTY", 'Password cannot be empty.'), alerttitle);
                $('#dialog_username').focus();
                return;
            }

            showloading(true);
            var param = JSON.stringify(item);
            param = htmlencode(param);
            credentialquery("UpdateAEMPCredential", param, function (data) {
                showloading(false);
                if (data !== 'OK') {
                    showAlert(data, GetTextByKey("P_CRE_SAVEMANUFACTURE", 'Save Credential'));
                } else {
                    $('#dialog_credential').hideDialog();
                    OnRefresh();
                }
            }, function (err) {
                showloading(false);
                showAlert(GetTextByKey("P_CRE_FAILEDTOSAVECREDENTIAL", 'Failed to save credential.'), GetTextByKey("P_CRE_SAVEMANUFACTURE", 'Save Credential'));
            });
        }

        $(function () {
            setPageTitle(GetTextByKey("P_CREDENTIALS", 'Credentials'), true);
            InitGridData();

            $('#dialog_credential').dialog(function () {
                showmaskbg(false);
            });
            OnRefresh();
            $(window).resize(function () {
                $("#credentiallist").css("height", $(window).height() - $("#credentiallist").offset().top - 4);
                grid_dt && grid_dt.resize();
            }).resize();
        });

    </script>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div style="min-width: 400px;">
        <div class="page_title" data-lgid="P_CREDENTIALS">Credentials</div>
        <div class="function_title">
            <span class="sbutton iconadd" onclick="OnAdd();" data-lgid="P_CRE_ADD">Add</span>
            <span class="sbutton iconrefresh" onclick="OnRefresh();" data-lgid="P_CRE_REFRESH">Refresh</span>
        </div>
        <div class="clear"></div>
        <div id="credentiallist"></div>
    </div>

    <div id="mask_bg">
        <div class="loading c-spin"></div>
    </div>
    <div class="dialog" id="dialog_credential" style="display: none; width: 530px;">
        <div class="dialog-title"><span class="title" data-lgid="P_CRE_ADDMANUFACTURE">Add Credential</span><em class="dialog-close"></em></div>
        <div class="dialog-content">
            <table style="line-height: 30px;">
                <tr>
                    <td class="label" data-lgid="P_CRE_MANUFACTURE_COLON">Manufacture:</td>
                    <td>
                        <select id="dialog_manufacture" tabindex="1" style="width: 150px;">
                            <option value="CAT" data-lgid="P_CRE_CAT">CAT</option>
                            <option value="JOHNDEERE" data-lgid="P_CRE_JOHNDEERE">JOHN DEERE</option>
                            <option value="Link-Belt" data-lgid="P_CRE_LINKBELT">Link-Belt</option>
                        </select></td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_CRE_URLKEY_COLON">Url Key:</td>
                    <td>
                        <input type="text" id="dialog_urlkey" maxlength="200" tabindex="1" /></td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_CRE_USERNAME_COLON">User Name:</td>
                    <td>
                        <input type="text" id="dialog_username" maxlength="50" tabindex="2" /></td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_CRE_PASSWORD_COLON">Password:</td>
                    <td>
                        <input type="password" id="dialog_password" maxlength="50" tabindex="3" /></td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_CRE_ENABLED_COLON">Enabled:</td>
                    <td>
                        <input type="checkbox" id="dialog_enabled" tabindex="4" />
                        <input type="hidden" id="dialog_orgid" />
                    </td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_CRE_NOTES_COLON">Notes:</td>
                    <td>
                        <textarea id="dialog_notes" maxlength="1000" tabindex="4"></textarea>
                    </td>
                </tr>
            </table>
        </div>
        <div class="dialog-func">
            <input type="button" value="Cancel" data-lgid="P_CRE_CANCEL" class="dialog-close" tabindex="6" />
            <input type="button" onclick="OnDialogOK();" value="OK" data-lgid="P_CRE_OK" tabindex="5" />
            <div class="clear"></div>
        </div>
    </div>
</asp:Content>