fleet-contractor/Site/MachineDeviceManagement/ManageMakes.aspx

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


<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <style type="text/css">
        ::-ms-clear, ::-ms-reveal {
            display: none;
        }

        .selectinput {
            width: 150px;
            margin-right: 10px;
        }

        .dialog-content table {
            border-collapse: collapse;
            width: 100%;
        }

            .dialog-content table td.label {
                width: 100px;
                text-align: right;
                padding-right: 10px;
                line-height: 24px;
                height: 24px;
                vertical-align: top;
            }

            .dialog-content table td input,
            .dialog-content table td textarea {
                border: 1px solid #a9a9a9;
                width: 200px;
                height: 18px;
                padding: 1px;
            }

                .dialog-content table td input[type="checkbox"] {
                    border: none;
                }

            .dialog-content table td textarea {
                height: 100px;
                max-width: 200px;
            }

        #dialogdatatb td {
            padding-top: 30px;
        }

        .a {
            text-decoration: none;
            color: #2140fb;
        }
    </style>

    <link href="<%=GetFileUrlWithVersion("../css/jquery.datetimepicker.css")%>" rel="stylesheet" />
    <script src="<%=GetFileUrlWithVersion("../Maintenance/js/inputdatactr.js")%>" type="text/javascript"></script>
    <script src="<%=GetFileUrlWithVersion("../js/jquery.datetimepicker.full.js")%>"></script>
    <script type="text/javascript">        
        var IsSuperAdmin =<%=IsSuperAdmin ?"true":"false"%>;

        function devicerequest(method, param, callback, error) {
            _network.request("MachineDeviceManagement/ManageMakes.aspx", -1, method, param, callback, error || function (e) {
                showmaskbg(false, true);
                showAlert('An unknown error occurred.  Please refresh page.', 'Query');
            });
        }        

        function OnAdd() {
            makeID = undefined;

            $('#dialog_name').val('');
            $('#dialog_make .dialog-title span.title').text('Add Make');

            showmaskbg(true);
            $('#dialog_make')
                .attr('act', 'add')
                .css({
                    'top': (document.documentElement.clientHeight - $('#dialog_make').height()) / 3,
                    'left': (document.documentElement.clientWidth - $('#dialog_make').width()) / 2
                })
                .showDialog();
            $('#dialog_name').focus();
        }

        var makeID;
        function OnEdit() {
            var make = grid_dt.source[grid_dt.selectedIndex].Values;
            if (!make) {
                makeID = undefined;
                return;
            }
            if (!make.CanEdit)
                return;

            makeID = make.ID;
            $('#dialog_name').val(make.Name);

            $('#dialog_make .dialog-title span.title').text('Edit Make');
            showmaskbg(true);
            $('#dialog_make')
                .attr('act', 'edit')
                .css({
                    'top': (document.documentElement.clientHeight - $('#dialog_make').height()) / 3,
                    'left': (document.documentElement.clientWidth - $('#dialog_make').width()) / 2
                })
                .showDialog();
            $('#dialog_name').focus();
        }

        function OnDblClick(e) {
            OnEdit();
        }

        function OnDelete(make) {
            if (!make) {
                return;
            }
            showConfirm('Are you sure you want to delete this Make?', 'Delete Make', function () {
                devicerequest("DELETEMACHINEMAKE", make.ID, function (data) {
                    if (data !== 'OK')
                        showAlert(data, 'Delete Make');
                    else
                        OnRefresh();
                }, function (err) {
                    showAlert('Failed to delete this Make.', 'Delete Make');
                });
            });
        }

        function OnRefresh() {
            showloading(true);

            var contractorid = "";
            contractorid = htmlencode($.trim($('#sel_contractor').val()));

            var searchtxt = "";
            searchtxt = htmlencode($.trim($('#searchinputtxt').val()));
            devicerequest("GETMACHINEMAKELIST", searchtxt, function (data) {
                $('#tbody_makes').empty();
                currentShownIndex = -1;

                if (typeof (data) === "string") {
                    showAlert(data, 'Error');
                }
                else
                    showMakes(data);

                showloading(false);
            }, function (err) {
                showloading(false);
            });
        }

        function showMakes(data) {
            var rows = [];
            for (var i = 0; i < data.length; i++) {
                var r = data[i];
                var fr = { Values: r };
                rows.push(fr);
            }

            grid_dt.setData(rows);
        }

        var grid_dt;
        function InitGridData() {
            grid_dt = new GridView('#makelist');
            grid_dt.lang = {
                all: GetTextByKey("P_GRID_ALL", "(All)"),
                ok: GetTextByKey("P_GRID_OK", "OK"),
                reset: GetTextByKey("P_GRID_RESET", "Reset")
            };
            var list_columns = [
                { name: 'Name', caption: "Make Name", valueIndex: 'Name', css: { 'width': 360, '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;
                if (col.name === "Edit") {
                    if (!IsSuperAdmin) continue;
                    col.isurl = true;
                    col.text = "\uf044";
                    col.events = {
                        onclick: function () {
                            if (this.CanEdit)
                                OnEdit()
                        }
                    };
                    col.classFilter = function (e) {
                        return "icon-col";
                    }
                    col.styleFilter = function (e) {
                        return {
                            display: !e.CanEdit ? 'none' : ''
                        };
                    };
                    col.attrs = { 'title': 'Edit' };
                }
                else if (col.name === "Delete") {
                    if (!IsSuperAdmin) continue;
                    col.isurl = true;
                    col.text = "\uf00d";
                    col.events = {
                        onclick: function () {
                            if (this.CanEdit)
                                OnDelete(this);
                        }
                    };
                    col.classFilter = function (e) {
                        return "icon-col";
                    };
                    col.styleFilter = function (e) {
                        return {
                            display: !e.CanEdit ? 'none' : ''
                        };
                    };
                    col.attrs = { 'title': 'Delete' };
                }
                columns.push(col);
            }
            grid_dt.canMultiSelect = false;
            grid_dt.columns = columns;
            grid_dt.init();
            grid_dt.rowdblclick = OnEdit;

            grid_dt.selectedrowchanged = function (rowindex) {
                var rowdata = grid_dt.source[rowindex];
                if (rowdata) {
                    makeID = rowdata.Values.ID;
                }
            }
        }

        function OnDialogOK() {
            var item = {
                'Name': $.trim($('#dialog_name').val()),
                'AlterActiveName': $.trim($('#dialog_name').val())
            };
            var alerttitle;
            if (makeID) {
                item.ID = makeID;
                alerttitle = "Edit Make";
            } else {
                item.ID = -1;
                alerttitle = "Add Make";
            }

            if (!item.Name || item.Name.length == 0) {
                showAlert('Make name cannot be empty.', alerttitle);
                $('#dialog_name').focus();
                return;
            }

            showloading(true);
            var param = JSON.stringify(item);
            param = htmlencode(param);
            devicerequest("SaveMachineMake", param, function (data) {
                if (data !== 'OK') {
                    showAlert(data, 'Save Make');
                    showloading(false);
                } else {
                    $('#dialog_make').hideDialog();
                    OnRefresh();
                }
            }, function (err) {
                showAlert('Failed to save Make.', 'Save Make');
                showloading(false);
            });
        }


        $(function () {
            InitGridData();
            OnRefresh();

            $('#tbody_makes').click(function (e) {
                var target = $(e.target);
                if (!target.is('tr')) {
                    target = target.parents('tr');
                }
                $('#tbody_makes tr').removeClass('selected');
                target.addClass('selected');
            });

            $('#dialog_make').dialog(function () {
                showmaskbg(false);
            });

            $('#searchinputtxt').keydown(searchEnter);

            $(window).resize(function () {
                $("#makelist").css("height", $(window).height() - $("#makelist").offset().top - 4);
                grid_dt && grid_dt.resize();
            }).resize();
        });

        function searchEnter(e) {
            if (e.keyCode == 13 || e.keyCode == 9) {
                OnRefresh();
            }
        }

    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div id="recordcontent" style="padding: 0px; margin: 0px;">
        <div class="page_title">Manage Makes</div>
        <div class="search_bar">
            <input type="password" autocomplete="new-password" style="display: none" />
            <span id="span_contractor" style="display: none;">Contractor:
            <select id="sel_contractor"></select></span>
            <input type="text" id="searchinputtxt" autocomplete="off" />
            <input class="search" type="button" onclick="OnRefresh();" value="Search" />
        </div>
        <div class="function_title">
            <span class="sbutton iconadd" onclick="OnAdd();">Add</span>
            <span class="sbutton iconrefresh" onclick="OnRefresh();">Refresh</span>
        </div>
        <div class="clear"></div>
        <div id="makelist">
        </div>
    </div>
    <div id="mask_bg" style="display: none;">
        <div class="loading c-spin"></div>
    </div>

    <div class="dialog" id="dialog_make" style="display: none; width: 360px;">
        <div class="dialog-title"><span class="title">Add Make</span><em class="dialog-close"></em></div>
        <div class="dialog-content">
            <table>
                <tr>
                    <td class="label">Make:</td>
                    <td>
                        <input type="text" id="dialog_name" style="width: 220px;" maxlength="100" tabindex="1" /></td>
                </tr>
            </table>
        </div>
        <div class="dialog-func">
            <input type="button" value="Cancel" class="dialog-close" tabindex="3" />
            <input type="button" onclick="OnDialogOK();" value="OK" tabindex="2" />
            <div class="clear"></div>
        </div>
    </div>
</asp:Content>