fleet-contractor/Site/Maintenance/ScheduleDetail.aspx

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

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link href="<%=GetFileUrlWithVersion("css/maintenance.css")%>" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body {
            min-width: 730px;
        }

        .return {
            float: left;
            width: 50px;
            font-style: normal;
            text-align: center;
            cursor: pointer;
        }

            .return:before {
                content: '\e631';
            }

        #sc_name {
            width: 400px;
        }

        #sc_notes {
            width: 400px;
            height: 100px;
        }

        #th_intervals {
            padding: 0;
        }

        .table_intervals tbody tr {
            background: #fff;
        }

        .table_intervals tr:last-child {
            border-bottom: none;
        }

        .table_intervals td {
            font-weight: normal;
        }

        .dialog_table {
            width: 100%;
        }

            .dialog_table tr {
                height: 40px;
            }

        .maintenance th {
            vertical-align: top;
        }

        .maintenance tr {
            background: #fff;
        }

        .maintenance .td_funcs {
            vertical-align: middle;
        }

        .table_intervals th input {
            padding: 1px;
        }
    </style>
    <script src="<%=GetFileUrlWithVersion("js/controls.js")%>" type="text/javascript"></script>
    <script src="<%=GetFileUrlWithVersion("js/schedule.js")%>" type="text/javascript"></script>
    <script src="<%=GetFileUrlWithVersion("../js/editableselect.js")%>"></script>
    <script type="text/javascript">

        var iid = '<%=IID%>';
        var scheduleUom = '<%=PmScheduleUom%>';
        var scheduletype = '<%=ScheduleType%>';
        var interval_label = getIntervalLabel();
        var currentdate = "<%=CurrentDate %>";   

        function getIntervalLabel() {
            switch (scheduletype) {
                case "TBM": return "Days"; break;
                case "ADM":
                case "RDM":
                    if (scheduleUom === "Kilometre")
                        return "Kilometres"
                    else
                        return "Miles";
                    break;
                default: return "Hours"; break;
            }
        }

        function pmquery(method, param, callback, error) {
            _network.request("Maintenance/ScheduleDetail.aspx", -1, method, param, callback, error || function (e) {
                console.log(e);
                showAlert(GetTextByKey("P_PM_FAILEDTOLOADDATA", 'Failed to load data: ') + e.statusText, GetTextByKey("P_PM_SCHEDULEDETAIL", 'Schedule Detail'));
            });
        }



        function OnSave(exit) {
            var name = $('#sc_name').val();
            var scheduleUom = null;
            if (scheduletype == "ADM" || scheduletype == "RDM") {
                scheduleUom = $('#sc_intervaluom').val();
            }
            var notes = $('#sc_notes').val();

            if (name.trim().length == 0) {
                showAlert(GetTextByKey("P_PM_SCHEDULENAMECANNOTBEEMPTY", 'Schedule Name cannot be empty.'), GetTextByKey("P_PM_SAVE", 'Save'), undefined, function () {
                    $('#sc_name').focus();
                });
                return;
            }

            var schedule = {
                'IID': iid,
                'Name': name,
                'Type': $('#sc_plantype').val(),
                'Notes': notes,
                'ScheduleUom': scheduleUom,
                'Intervals': []
            };



            // 组织intervals
            var trs = $('#tbody_intervals').children('tr');
            for (var i = 0; i < trs.length; i++) {
                var tr = $(trs[i]);
                var item = {
                    'PmIntervalID': tr.attr('data-id'),
                    'Interval': parseInt(tr.find('.inp_interval').val()),
                    'NotificationPeriod': parseInt(tr.find('.inp_period').val()),
                    'ServiceName': tr.find('.inp_name').val(),
                    'Recurring': tr.find('.inp_recurring').prop('checked'),
                    'Priority': tr.find('.inp_priority').val(),
                    'ServiceDescription': tr.find('.textarea_desc').val(),
                    'ExpectedCost': tr.find('.ipt_expectedcost').val()
                };
                if (!_sc.checkIntervalItem(item)) {
                    return;
                }
                tr.find('.inp_name').val(item.ServiceName);
                tr.find('.inp_interval').val(item.Interval);
                tr.find('.inp_period').val(item.NotificationPeriod);
                schedule.Intervals.push(item);
            }

            pmquery('SavePmSchedule', htmlencode(JSON.stringify(schedule)), function (data) {
                if (/[a-zA-Z\d]{8}-[a-zA-Z\d]{4}-[a-zA-Z\d]{4}-[a-zA-Z\d]{4}-[a-zA-Z\d]{12}/.test(data)) {
                    if (exit == 0) {
                        showAlert(GetTextByKey("P_PM_SAVSUCCESSFULLY", 'Saved successfully.'), GetTextByKey("P_PM_SAVE", 'Save'));
                        window.location.href = 'ScheduleDetail.aspx?IID=' + data;
                    }
                    if (exit == 1)
                        OnExit();
                } else {
                    showAlert(GetTextByKey("P_PM_FAILEDTOSAVESCHEDULE", 'Failed to save schedule: ') + data, GetTextByKey("P_PM_SAVE", 'Save'));
                }
            });
        }

        function OnExit() {
            window.location.href = 'MaintenanceSchedulesManagement.aspx';
        }

        function OnRefresh() {
            window.location.href = window.location.href;
        }

        function OnDialogOK() {
            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 expectedcost = $('#dig_expectedcost').val();
            var description = $('#dig_servicedec').val();
            var unit = $('#sc_intervaluom').val();


            var item = {
                'PmScheduleID': pmsid,
                'Intervals': [{
                    'ServiceName': name,
                    'Interval': interval,
                    'NotificationPeriod': period,
                    'Recurring': recurring,
                    'Priority': priority,
                    'ExpectedCost': expectedcost,
                    'ServiceDescription': description
                }]
            };
            if (!_sc.checkIntervalItem(item.Intervals[0])) {
                return;
            }
            function next() {
                $('#th_intervals .table_intervals tbody').append(_sc.createIntervalTr(item.Intervals[0], true));
                showmaskbg(false);
                $('#dialog_interval').hideDialog();
            }
            next();
        }

        var editableSelectSchedule;
        $(function () {
            if (iid) {
                $('#sc_plantype').val(scheduletype);
                $('#sc_plantype').attr('disabled', true);
            }
            else {
                $('#sc_plantype').val('');
                $('#sc_plantype').attr('disabled', false);
            }


            if (scheduletype == "ADM" || scheduletype == "RDM") {
                $('#trScheduleUom').show();
                $('#sc_intervaluom').val(scheduleUom);
            }
            else {
                $('#trScheduleUom').hide();
                $('#sc_intervaluom').val('');
            }

            $("#sc_intervaluom").change(function (e) {
                scheduleUom = $('#sc_intervaluom').val();
                interval_label = getIntervalLabel();
                $('.span_uom').text(interval_label);
            });

            $("#sc_plantype").change(function (e) {
                scheduletype = $('#sc_plantype').val();
                interval_label = getIntervalLabel();
                $('.span_uom').text(interval_label);
                if (scheduletype == "ADM" || scheduletype == "RDM")
                    $('#trScheduleUom').show();
                else
                    $('#trScheduleUom').hide();

                getSchedules();
            });


            showmaskbg(true, true);
            // load intervals

            pmquery('GETPMINTERVALBYSCHEDULEID', iid, function (data) {
                $('#th_intervals').append(loadIntervals(data));
                editableSelectSchedule = new $editableselect($("#dialog_schedule"));
                getSchedules();
            });

            $('#dig_interval').number();
            $('#dig_period').number();
            $('#dig_priority').number();

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

            showmaskbg(false);

            function resizeContent() {
                $('.content_main').css('min-height', $(window).height() - $('.content_main').offset().top - 24);
            }

            window.onresize = resizeContent;
            resizeContent();
        });

        function loadIntervals(data) {
            var table = $('<table class="table_intervals"></table>');
            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: 350px;" class="td_funcs"></th>')
                .append($('<a onclick="return false;">' + GetTextByKey("P_PM_ADD", "Add") + '</a>').click(iid, _sc.addIntervalItem))
                .append($('<div id="dialog_schedule" style="width: 150px; height: 22px;margin-left: 20px;float:left;"></div>'))
                .append($('<a onclick="return false;" style="margin-left: 5px;">' + GetTextByKey("P_PM_COPYSCHEDULE", "Copy Schedule") + '</a>').click(function () {
                    onCopySchedule();
                })
                )
            );
            table.append($('<thead></thead>').append(tr));
            var body = $('<tbody id="tbody_intervals"></tbody>');
            if (data && data.length > 0) {
                for (var i = 0; i < data.length; i++) {
                    data[i].ServiceName = htmldecode(data[i].ServiceName);
                    body.append(_sc.createIntervalTr(data[i], true));
                }
            }
            table.append(body);
            return table;
        }

        function getSchedules() {
            var p = ['', '', ''];
            var param = JSON.stringify(p);
            pmquery("GetMaintenanceSchedules", param, function (data) {
                if (data && data.length > 0) {
                    var schedules = [];
                    var type = $('#sc_plantype').val();
                    for (var i = 0; i < data.length; i++) {
                        var s = data[i];
                        if ((type === "PM" || type === "HM") && (s.PmScheduleType === "PM" || s.PmScheduleType === "HM")) {
                            schedules.push(s);
                        }
                        if (type === "TBM" && s.PmScheduleType === "TBM") {
                            schedules.push(s);
                        }
                        if ((type === "ADM" || type === "RDM") && (s.PmScheduleType === "ADM" || s.PmScheduleType === "RDM")) {
                            schedules.push(s);
                        }
                    }
                    editableSelectSchedule.datasource = schedules;
                    editableSelectSchedule.valuepath = "PmScheduleID"
                    editableSelectSchedule.displaypath = "PmScheduleName";
                }

            }, function (err) {
            });
        }

        function onCopySchedule() {
            var schedule = editableSelectSchedule.selecteditem();
            if (schedule && schedule.Intervals && schedule.Intervals.length > 0) {
                var tboby = $('#tbody_intervals');
                for (var i = 0; i < schedule.Intervals.length; i++) {
                    var sch = schedule.Intervals[i];
                    sch.PmIntervalID = "";
                    var tr = _sc.createIntervalTr(sch, true)
                    tboby.append(tr);
                }
            }
        }

        function back() {
            window.location.href = 'MaintenanceSchedulesManagement.aspx';
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div style="min-width: 400px;">
        <div class="page_title">
            <span class="sbutton iconback" onclick="back();"></span>
            <span id="span_title" data-lgid="P_PM_MANAGEMAINTENANCESCHEDULE">Manage Maintenance Schedule</span>
        </div>
        <div class="function_title">
            <span class="sbutton iconsave" onclick="OnSave(0);" data-lgid="P_PM_SAVE">Save</span>
            <span class="sbutton iconsave" onclick="OnSave(1);" data-lgid="P_PM_SAVE1">Save and Exit</span>
            <span class="sbutton iconexit" onclick="OnExit();" data-lgid="P_PM_SAVE2">Exit Without Saving</span>
            <span class="sbutton iconrefresh" onclick="OnRefresh();" data-lgid="P_PM_REFRESH">Refresh</span>
        </div>
        <div class="clear"></div>
        <div class="content_main content_div">
            <table class="main_table maintenance">
                <thead>
                    <tr>
                        <th style="width: 140px;" data-lgid="P_PM_NAME_COLON">Name:</th>
                        <td>
                            <input type="text" id="sc_name" value="<%=Schedule == null ? null : Schedule.PmScheduleName %>" maxlength="200" autocomplete="off" /></td>
                    </tr>
                    <tr>
                        <th data-lgid="P_PM_PLANTYPE_COLON">Plan Type:</th>
                        <td>
                            <select id="sc_plantype" style="width: 150px;" disabled="disabled">
                                <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></td>
                    </tr>
                    <tr id="trScheduleUom" style="display: none;">
                        <th data-lgid="P_PM_ODOMETERUOM_COLON">Odometer UOM:</th>
                        <td>
                            <select id="sc_intervaluom">
                                <option value="Mile" data-lgid="P_PM_MILE">Mile</option>
                                <option value="Kilometre" data-lgid="P_PM_KILOMETER">Kilometer</option>
                            </select></td>
                    </tr>
                    <tr>
                        <th data-lgid="P_PM_DESCRIPTION_COLON">Description:</th>
                        <td>
                            <textarea id="sc_notes" maxlength="1000"><%=Schedule == null ? null : Schedule.Notes %></textarea></td>
                    </tr>
                    <tr>
                        <th data-lgid="P_PM_INTERVALS_COLON">Intervals:</th>
                        <td id="th_intervals"></td>
                    </tr>
                </thead>
            </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; z-index: 500;">
        <div class="dialog-title"><span class="title" data-lgid="P_PM_ADDINTERVAL">Add 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="inputbox intervalinput" id="dig_name" tabindex="1" maxlength="50" autocomplete="off" /></td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_PM_INTERVAL_COLON">Interval:<b class="red">*</b></td>
                    <td>
                        <input type="text" class="inputbox intervalinput" id="dig_interval" tabindex="2" maxlength="10" autocomplete="off" /></td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_PM_NOTIFICATIONPERIOD_COLON">Notification Period:<b class="red">*</b></td>
                    <td>
                        <input type="text" class="inputbox intervalinput" id="dig_period" tabindex="3" maxlength="10" autocomplete="off" /></td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_PM_RECURRING_COLON">Recurring:</td>
                    <td>
                        <input type="checkbox" id="dig_recurring" tabindex="5" /></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="inputbox intervalinput inp_expectedcost" id="dig_expectedcost" tabindex="5" maxlength="12" autocomplete="off" /></td>
                </tr>
                <tr>
                    <td class="label" data-lgid="P_PM_PRIORITY_COLON">Priority:<b class="red">*</b></td>
                    <td>
                        <input type="text" class="inputbox intervalinput inp_priority" id="dig_priority" tabindex="7" maxlength="5" autocomplete="off" /></td>
                </tr>
            </table>
        </div>
        <div class="dialog-func">
            <input type="button" value="Cancel" data-lgid="P_PM_CANCEL" class="dialog-close" tabindex="9" />
            <input type="button" onclick="OnDialogOK();" value="OK" data-lgid="P_PM_OK" tabindex="8" />
            <div class="clear"></div>
        </div>
        <div class="maskbg" style="display: none;"></div>
    </div>

</asp:Content>