fleet-contractor/Site/Maintenance/MaintenanceSchedulesManagement.aspx

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

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link href="<%=GetFileUrlWithVersion("css/maintenance.css")%>" rel="stylesheet" type="text/css" />
    <style type="text/css">
        /*body { overflow-x: hidden; }*/
        .maintenance {
            table-layout: fixed;
            border-bottom: none;
            width: auto;
            min-width: 100%;
        }

        #pm_tbody {
        }

            #pm_tbody .tr_noresults {
                font-style: italic;
            }

                #pm_tbody .tr_noresults:hover {
                    background: none;
                }

        .maintenance tr {
            border-bottom: 1px solid #e6e6e6;
        }

        .main_table .td_intervals {
            padding: 0 0 0 60px;
        }

        .main_table .tr_intervals {
            border-bottom: none;
        }

            .main_table .tr_intervals:hover {
                background: none;
            }

        .icon {
            float: left;
            font-style: normal;
            width: 20px;
            font-size: 11px;
            height: 16px;
            line-height: 16px;
        }

        .expand:before {
            content: '\e608';
        }

        .collapse:before {
            content: '\e607';
        }

        .dialog_table {
            width: 100%;
        }

            .dialog_table tr {
                height: 40px;
            }
    </style>
    <script src="<%=GetFileUrlWithVersion("js/controls.js")%>" type="text/javascript"></script>
    <script src="<%=GetFileUrlWithVersion("js/schedule.js")%>" type="text/javascript"></script>
    <script type="text/javascript">
        var interval_label = 'Hours';
        var currentdate = "<%=CurrentDate %>";
        function pmquery(method, param, callback, error) {
            _network.request("Maintenance/MaintenanceSchedulesManagement.aspx", -1, method, param, callback, error || function (e) {
                console.log(e);
                showmaskbg(false, true);
                showAlert('An unknown error occurred.  Please refresh page.', 'Query');
                showAlert(GetTextByKey('P_PM_PAGEERROR', 'An unknown error occurred.  Please refresh page.'), GetTextByKey('P_PM_QUERY', 'Query'));
            });
        }        

        function getIntervalLabel(type, unit) {
            switch (type) {
                case "TBM": return "Days"; break;
                case "ADM":
                case "RDM":
                    if (unit === "Kilometre")
                        return "Kilometres"
                    else
                        return "Miles";
                    break;
                default: return "Hours"; break;
            }
        }
        function OnAdd() {
            window.location.href = 'ScheduleDetail.aspx?TP=ADM';
        }

        function OnDialogOK() {
            var title = GetTextByKey('P_PM_ADDABSOLUTEHOURSINTERVAL', 'Add Absolute Hours Interval');

            var pmsid = $('#dialog_interval').attr('data-id')
            var name = $('#dig_name').val();
            var interval = parseInt($('#dig_interval').val());
            var period = parseInt($('#dig_period').val());
            var recurring = $('#dig_recurring').prop('checked');
            var priority = $('#dig_priority').val();
            var description = $('#dig_servicedec').val();
            var expectedcost = $('#dig_expectedcost').val();

            var item = {
                'PmScheduleID': pmsid,
                'Intervals': [{
                    'ServiceName': name,
                    'Interval': interval,
                    'NotificationPeriod': period,
                    'Recurring': recurring,
                    'Priority': priority,
                    'ServiceDescription': description,
                    'ExpectedCost': expectedcost
                }]
            };
            if (!_sc.checkIntervalItem(item.Intervals[0])) {
                return;
            }
            pmquery('AddPmInterval', htmlencode(JSON.stringify(item)), function (data) {
                if (!data || data.length == 0) {
                    $('#dialog_interval').hideDialog();
                    $('#refresh_button').click();
                } else {
                    showAlert(data, title);
                }
            });
        }

        var firstload = true;
        function refreshData() {
            var p = [
                $('#sel_plantype').val(),
                $('#sel_plan').val(),
                htmlencode($.trim($('#searchinputtxt').val()))
            ];
            var param = JSON.stringify(p);
            showloading(true);
            pmquery('GetMaintenanceSchedules', param, function (data) {
                showloading(false);
                if (firstload == true) {
                    setPlans(data)
                    firstload = false;
                }
                if (data && data.length > 0) {
                    var trs = [];
                    for (var i = 0; i < data.length; i++) {
                        createItem(trs, data[i]);
                    }
                    $('#pm_tbody').empty().append(trs);
                } else {
                    $('#pm_tbody').empty().append('<tr class="tr_noresults"><td colspan="5">' + GetTextByKey("P_PM_NORESULTS", "No results.") + '</td></tr>');
                }
            }, function () {
                showloading(false);
            });
        }

        function createItem(trs, item) {
            var tr = $('<tr></tr>').attr('data-id', item.PmScheduleID);
            var td = $('<td></td>').css('width', 340);
            td.append($('<em class="icon collapse"></em>').click(collapse));
            td.append($('<div class="item_name"></div>').html(getText(item.PmScheduleName)).attr('title', item.PmScheduleName));
            tr.append(td);
            td = $('<td></td>');
            td.append($('<div class="item_desc"></div>').html(getText(item.Notes)).attr('title', item.Notes));
            tr.append(td);
            td = $('<td></td>');
            td.append($('<div class="item_type"></div>').html(getText(item.PmScheduleTypeStr)).attr('title', item.PmScheduleTypeStr));
            tr.append(td);
            td = $('<td class="td_funcs"></td>').css({ 'width': 70, 'min-width': 70 });
            td.append($('<a onclick="return false;">' + GetTextByKey("P_PM_DELETE", "Delete") + '</a>').click(deleteItem));
            tr.append(td);
            td = $('<td class="td_funcs"></td>').css({ 'width': 120, 'min-width': 120 });
            td.append($('<a onclick="return false;">' + GetTextByKey("P_PM_MANAGESCHEDULE", "Manage schedule") + '</a>').click(editItem));
            tr.append(td);
            td = $('<td class="td_funcs"></td>').css({ 'width': 120, 'min-width': 120 });
            var a = $('<a onclick="return false;">' + GetTextByKey("P_PM_MANAGEASSETS", "Manage assets") + '</a>');
            if (item.Intervals && item.Intervals.length > 0) {
                a.click(editItemMachine);
            } else {
                a.addClass('disabled');
            }
            td.append(a);
            tr.append(td);
            trs.push(tr);

            tr = $('<tr class="tr_intervals" style="display:none;"></tr>');
            td = $('<td colspan="6" class="td_intervals"></td>');
            tr.append(td);
            var table = $('<table class="table_intervals"></table>');
            td.append(table);
            trs.push(tr);

            tr = $('<tr></tr>');
            tr.append('<th style="width: 150px;">' + GetTextByKey("P_PM_SERVICENAME", "Service Name") + '</th>');
            tr.append('<th style="width: 150px;">' + GetTextByKey("P_PM_INTERVAL", "Interval") + '</th>');
            tr.append('<th style="width: 180px;">' + GetTextByKey("P_PM_NOTIFICATIONPERIOD", "Notification Period") + '</th>');
            tr.append('<th style="width: 80px;">' + GetTextByKey("P_PM_RECURRING", "Recurring") + '</th>');
            //tr.append('<th style="width: 80px;">Predictive</th>');
            //tr.append('<th style="width: 100px;">Service Type</th>');
            tr.append('<th style="width: 200px;">' + GetTextByKey("P_PM_SERVICEDESCRIPTION", "Service Description") + '</th>');
            tr.append('<th style="width: 100px;">' + GetTextByKey("P_PM_EXPECTEDCOST", "Expected Cost") + '</th>');
            tr.append('<th style="width: 80px;">' + GetTextByKey("P_PM_PRIORITY", "Priority") + '</th>');
            tr.append($('<th style="width: 166px; min-width: 166px;" class="td_funcs"></th>')
                .append($('<a onclick="return false;">' + GetTextByKey("P_PM_ADD", "Add") + '</a>').click(function () {
                    var rst = "";
                    if (item.PmScheduleType == "PM")
                        rst = GetTextByKey('P_PM_ADDABSOLUTEHOURSINTERVAL', 'Add Absolute Hours Interval');
                    else if (item.PmScheduleType == "TBM")
                        rst = GetTextByKey('P_PM_ADDTIMEBASEDNTERVAL', 'Add TimeBased Interval');
                    else if (item.PmScheduleType == "HM")
                        rst = GetTextByKey('P_PM_ADDHOURSTERVAL', 'Add Hours Interval');
                    else if (item.PmScheduleType == "ADM")
                        rst = GetTextByKey('P_PM_ADDABSOLUTEDISTANCEINTERVAL', 'Add Absolute Distance Interval');
                    else if (item.PmScheduleType == "RDM")
                        rst = GetTextByKey('P_PM_ADDDISTANCEINTERVAL', 'Add Distance Interval');
                    $('#dialog_interval .dialog-title span.title').text(rst);
                    _sc.addIntervalItem(item.PmScheduleID);
                })));
            table.append($('<thead></thead>').append(tr));
            if (item.Intervals && item.Intervals.length > 0) {
                interval_label = getIntervalLabel(item.PmScheduleType, item.PmScheduleUom);
                for (var i = 0; i < item.Intervals.length; i++) {
                    tr = _sc.createIntervalTr(item.Intervals[i]);
                    table.append(tr);
                }
            }
        }


        function deleteItem(e) {
            var tr = $(this).parents('tr:first');
            var iid = tr.attr('data-id');
            showConfirm(GetTextByKey("P_PM_DELETETHISSCHEDULE", 'Do you want to delete this schedule?'), GetTextByKey("P_PM_DELETE", 'Delete'), function (e) {
                pmquery('DeletePmSchedule', iid, function (data) {
                    if (!data || data.length == 0) {
                        refreshData();
                    } else {
                        showAlert(data, GetTextByKey("P_PM_DELETE", 'Delete'));
                    }
                });
            });
        }

        function editItem(e) {
            var tr = $(this).parents('tr:first');
            var iid = tr.attr('data-id');
            window.location.href = 'ScheduleDetail.aspx?IID=' + iid;
        }

        function editItemMachine(e) {
            var tr = $(this).parents('tr:first');
            var iid = tr.attr('data-id');
            window.location.href = 'ScheduleMachines.aspx?IID=' + iid;
        }

        function collapse(e) {
            if ($(this).hasClass('expand')) {
                // 收折
                $(this).parents('tr:first').next('tr.tr_intervals').css('display', 'none');
                $(this).removeClass('expand').addClass('collapse');
            } else {
                $(this).parents('tr:first').next('tr.tr_intervals').css('display', '');
                $(this).removeClass('collapse').addClass('expand');
            }
        }

        function setPlans(data) {
            $('#sel_plan').empty();
            var opt = $('<option></option>').val("").text(" ");
            $('#sel_plan').append(opt);
            if (data && data.length > 0) {
                for (var i = 0; i < data.length; i++) {
                    opt = $('<option></option>').val(data[i].PmScheduleID).text(data[i].PmScheduleName);
                    $('#sel_plan').append(opt);
                }
            }
        }

        $(function () {
            setPageTitle(GetTextByKey("P_PM_MAINTENANCESCHEDULES", "Maintenance Schedules"), true);
            $('#sel_plantype').change(refreshData);
            $('#sel_plan').change(refreshData);

            $("#expandintervals").click(function (e) {
                var btn = $(this);
                if (btn.text() == "Expand Intervals") {
                    btn.removeClass("iconadd");
                    btn.addClass("iconreduce");
                    btn.text("Collapse Intervals");
                    $('#pm_tbody').find(".icon").each(function () {
                        if ($(this).hasClass("collapse"))
                            $(this).click();
                    });
                }
                else {
                    btn.removeClass("iconreduce");
                    btn.addClass("iconadd");
                    btn.text("Expand Intervals");
                    $('#pm_tbody').find(".icon").each(function () {
                        if ($(this).hasClass("expand"))
                            $(this).click();
                    });
                }
            });

            $('#refresh_button').click(refreshData);
            refreshData();

            // dialog
            $('#dig_interval').number();
            $('#dig_period').number();
            $('#dig_priority').number();
            $('#dialog_interval').dialog(function () {
                showmaskbg(false);
            });
        });

    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div style="min-width: 850px;">
        <div class="page_title" data-lgid="P_PM_MAINTENANCESCHEDULES">Maintenance Schedules</div>
        <div class="search_bar">
            <input type="password" autocomplete="new-password" style="display: none" />
            <span style="padding-left: 5px;" data-lgid="P_PM_PLAN_COLON">Plan:</span>&nbsp;&nbsp;<select class="selectinput" id="sel_plan"></select>
            <span style="padding-left: 5px;" data-lgid="P_PM_PLANTYPE_COLON">Plan Type:</span>&nbsp;&nbsp;
              <select class="selectinput" id="sel_plantype">
                  <option value=""></option>
                  <option value="ADM">Absolute Distance</option>
                  <option value="PM">Absolute Hours</option>
                  <option value="RDM">Relative Distance</option>
                  <option value="HM">Relative Hours</option>
                  <option value="TBM">Relative Time</option>
              </select>
            <span style="padding-left: 5px;" data-lgid="P_PM_ASSET_COLON">Asset:</span>&nbsp;&nbsp;
            <input id="searchinputtxt" type="text" autocomplete="off" />
            <input class="search" type="button" onclick="refreshData();" value="Search" data-lgid="P_MRM_SEARCH" style="margin-left: 5px;" />
        </div>
        <div class="function_title">
            <span class="sbutton iconadd" onclick="OnAdd();" data-lgid="P_PM_ADD">Add</span>
            <span class="sbutton iconrefresh" id="refresh_button" data-lgid="P_PM_REFRESH">Refresh</span>
            <span class="sbutton iconadd" id="expandintervals" data-lgid="P_PM_EXPANDINTERVALS">Expand Intervals</span>
        </div>
        <div class="clear"></div>
        <div class="content_main content_div">
            <table class="main_table maintenance">
                <tbody id="pm_tbody"></tbody>
            </table>
        </div>
        <div id="mask_bg" style="display: none;"><div class="loading c-spin"></div></div>
    </div>
    <div class="dialog" id="dialog_interval" style="display: none; ">
        <div class="dialog-title"><span class="title" data-lgid="P_PM_ADDABSOLUTEHOURSINTERVAL">Add Absolute Hours Interval</span><em class="dialog-close"></em></div>
        <div class="dialog-content">
            <table class="dialog_table">
                <tr>
                    <td class="label" data-lgid="P_PM_SERVICENAME_COLON">Service Name:</td>
                    <td>
                        <input type="text" class="intervalinput" id="dig_name" tabindex="1" maxlength="50" /></td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_PM_INTERVAL_COLON">Interval:<b class="red">*</b></td>
                    <td>
                        <input type="text" class="intervalinput" id="dig_interval" tabindex="2" maxlength="10" /></td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_PM_NOTIFICATIONPERIOD_COLON">Notification Period:<b class="red">*</b></td>
                    <td>
                        <input type="text" class="intervalinput" id="dig_period" tabindex="3" maxlength="10" /></td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_PM_RECURRING_COLON">Recurring:</td>
                    <td>
                        <input type="checkbox" id="dig_recurring" tabindex="4" /></td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_PM_SERVICEDESCRIPTION_COLON">Service Description:<b class="red">*</b></td>
                    <td>
                        <textarea id="dig_servicedec" class="servicedescription" maxlength="3000" tabindex="5"></textarea></td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_PM_EXPECTEDCOST_COLON">Expected Cost:<b class="red">*</b></td>
                    <td>
                        <input type="text" class="intervalinput inp_expectedcost" id="dig_expectedcost" tabindex="5" maxlength="12" /></td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_PM_PRIORITY_COLON">Priority:<b class="red">*</b></td>
                    <td>
                        <input type="text" class="intervalinput inp_priority" id="dig_priority" tabindex="6" maxlength="5" /></td>
                </tr>
            </table>
        </div>
        <div class="dialog-func">
            <input type="button" value="Cancel" data-lgid="P_PM_CANCEL" class="dialog-close" tabindex="7" />
            <input type="button" onclick="OnDialogOK();" value="OK" data-lgid="P_PM_OK" tabindex="6" />
            <div class="clear"></div>
        </div>
        <div class="maskbg" style="display: none;"></div>
    </div>
</asp:Content>