fleet-contractor/Site/Maintenance/ScheduleMachines.aspx

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

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link href="../css/jquery.datetimepicker.css" rel="stylesheet" />
    <style type="text/css">
        body {
            min-width: 995px;
        }

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

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

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

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

        .page_title {
            margin-left: 10px;
        }

        .maintenance {
            table-layout: fixed;
        }

            .maintenance em {
                font-style: normal;
                font-size: 11px;
                cursor: pointer;
                line-height: 16px;
                float: left;
            }

            .maintenance th {
                vertical-align: top;
            }

            .maintenance tr {
                background: #fff;
            }

            .maintenance .td_funcs {
                padding: 0;
                font-weight: normal;
                vertical-align: middle;
            }

                .maintenance .td_funcs a {
                    float: left;
                    cursor: pointer;
                    margin-left: 20px;
                }

                    .maintenance .td_funcs a:first-child {
                        margin-left: 0;
                    }

        #th_intervals {
            padding: 0;
        }

        .table_intervals {
            width: 100%;
            color: #666;
            border-collapse: collapse;
        }

            .table_intervals thead tr {
                background: #f9f9f9;
                /*font-weight: bold;*/
            }

                .table_intervals thead tr:hover {
                    background: #f9f9f9;
                }

            .table_intervals tbody tr,
            .table_intervals tbody tr:hover {
                background: #fff;
            }

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

            .table_intervals td {
                font-weight: normal;
                overflow: hidden;
                text-overflow: ellipsis;
            }

                .table_intervals td input {
                    width: 60px;
                    border: 1px solid #fff;
                }

                    .table_intervals td input.focused,
                    .table_intervals td input:hover {
                        border-color: #666;
                    }

            .table_intervals .editing {
                display: none;
            }

                .table_intervals .editing input {
                    width: auto;
                    cursor: pointer;
                    background: rgb(249, 189, 117);
                    margin-left: 6px;
                    border: none;
                    padding: 5px 14px;
                }

                    .table_intervals .editing input:hover {
                        background: #d7690E;
                    }

        .maintenance .th_machines {
            padding: 0;
        }

        .machine_filter {
            height: 32px;
            line-height: 32px;
        }

            .machine_filter select {
                height: 23px;
                min-width: 100px;
                max-width: 300px;
            }

            .machine_filter span {
                margin-left: 8px;
            }

        #txt_machine_key {
            height: 21px;
            padding: 0;
            margin: 0;
            border: 1px solid #aaa;
        }

        .machines {
            /*table-layout: fixed;*/
            word-break: keep-all;
        }

            .machines td {
                padding-right: 5px;
                white-space: nowrap;
            }

                .machines td input {
                    width: auto;
                }

        .table_holder {
            border-collapse: collapse;
            height: 100%;
        }

            .table_holder thead th {
                text-align: left;
            }

            .table_holder tbody tr {
                line-height: 28px;
                height: 28px;
            }

            .table_holder td {
                vertical-align: top;
            }

            .table_holder .td_controller {
                vertical-align: middle;
                padding: 40px 8px;
                border-left: 1px solid #b0b0b0;
                border-right: 1px solid #b0b0b0;
            }

            .table_holder .scroller {
                height: 100%;
                overflow-y: auto;
            }

        .ctl_button {
            font-family: 'CalciteWebCoreIcons';
            display: block;
            margin: 6px auto;
            width: 60px;
            height: 22px;
            line-height: 21px;
            padding: 0;
        }

        .right_main {
            min-width: 400px;
        }

        .page_title .sbutton {
            font-size: 16px;
            font-weight: bold;
        }

            .page_title .sbutton:before {
                color: black;
            }

        .data-grid .autoHeightBody {
            position: static;
            max-height: 400px;
        }

        .data-grid .hidden-x {
            overflow-x: hidden;
        }

        .data-grid .noMax {
            /*max-height: none;*/
        }
    </style>
    <script src="<%=GetFileUrlWithVersion("../js/vue.min.js")%>" type="text/javascript"></script>
    <script>Vue.config.productionTip = false; Vue.config.silent = true;</script>
    <script src="<%=GetFileUrlWithVersion("../js/components/datagrid.js")%>" type="text/javascript"></script>
    <script src="<%=GetFileUrlWithVersion("js/schedule.js")%>" type="text/javascript"></script>
    <script src="<%=GetFileUrlWithVersion("js/scheduleassets.js")%>" type="text/javascript"></script>
    <script src="<%=GetFileUrlWithVersion("../js/assetselector.js")%>" type="text/javascript"></script>
    <script src="../js/jquery.datetimepicker.full.js"></script>
    <script type="text/javascript">

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

        var _ScheduleAssets = [];
        var _showSelectedMachines = [];
        var _SelectedUnSavedMachines = [];

        var allintervals = [];

        function getIntervalLabel() {
            switch (scheduletype) {
                case "TBM": return GetTextByKey("P_WO_DAYS", 'Days'); break;
                case "ADM":
                case "RDM":
                    if (scheduleUom === "Kilometre")
                        return GetTextByKey("P_PM_KILOMETERS", 'Kilometers');
                    else
                        return GetTextByKey("P_PM_MILES", 'Miles');
                    break;
                default: return GetTextByKey("P_PM_HOURS", 'Hours');
            }
        }

        function pmquery(method, param, callback, error) {
            _network.request("Maintenance/ScheduleMachines.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_SCHEDULEASSETS", 'Schedule Assets'));
            });
        }

        function OnExpandCollapse() {
            var flag = $(this).hasClass('expand');
            $('.collapsable').css('display', flag ? 'none' : '');
            if (flag) {
                $(this).removeClass('expand').addClass('collapse');
                resizeMachines();
            } else {
                $(this).removeClass('collapse').addClass('expand');
                resizeMachines();
            }
        }

        function resizeMachines() {
            $('.scroller').css('height', $('.right_main').height() - $('.maintenance').height() - 5);
            $('.scroller').css('width', ($('.right_main').width() - $('.td_controller').width()) / 2 - 15);
        }

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

        function setHeaderTitle() {
            var title = '<%=Header%>';
            if (title === "Manage Time Based Maintenance Assets")
                title = GetTextByKey("P_PM_MANAGETIMEBASEDMAINTENANCEASSETS", "Manage Time Based Maintenance Assets");
            else if (title === "Manage Hours Maintenance Assets")
                title = GetTextByKey("P_PM_MANAGEHOURSMAINTENANCEASSETS", "Manage Hours Maintenance Assets");
            else if (title === "Manage Absolute Distance Maintenance Assets")
                title = GetTextByKey("P_PM_MANAGEABSOLUTEDISTANCEMAINTENANCEASSETS", "Manage Absolute Distance Maintenance Assets");
            else if (title === "Manage Relative Distance Maintenance Assets")
                title = GetTextByKey("P_PM_MANAGERELATIVEDISTANCEMAINTENANCEASSETS", "Manage Relative Distance Maintenance Assets");
            else if (title === "Manage Absolute Hours Maintenance Assets")
                title = GetTextByKey("P_PM_MANAGEABSOLUTEHOURSMAINTENANCEASSETS", "Manage Absolute Hours Maintenance Assets");

            $('#span_title').text(title);
        }

        $(function () {

            InitAssignedAssetsGridData();
            InitSelectedAssetsGridData();

            if (scheduletype == "ADM" || scheduletype == "RDM") {
                $('#trScheduleUom').css('display', '');
            }

            $('#em_collapse_schedule').click(OnExpandCollapse);

            setHeaderTitle();
            // load intervals
            pmquery('GetPMScheduleByID', iid, function (data) {
                if (typeof (data) !== "string") {
                    allintervals.length = 0;
                    if (data.AllIntervals) {
                        for (var i = 0; i < data.AllIntervals.length; i++) {
                            allintervals.push(data.AllIntervals[i]);
                        }
                    }
                    $('#th_intervals').append(loadIntervals(data.Intervals));
                    getMachineTypes();
                }
            });

            $('#sel_machine_type').change(getMatchSelectedMachines);
            $('#button_machine_filter').click(getMatchSelectedMachines);
            $('#chk_showallassignedassets').click(getMatchSelectedMachines);

            $('#txt_machine_key').keypress(function (e) {
                if (e.keyCode == 13 && !$('#button_machine_filter').prop('disabled')) {
                    $('#button_machine_filter').click();
                }
            });

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

            $(window).resize(resizeMachines);
            resizeMachines();


            function resizeContent() {
                $('.content_main').css('min-height', $(window).height() - $('.content_main').offset().top - 1);
                $("#divScheduleAssets").css("height", $(window).height() - $("#divScheduleAssets").offset().top - 10);
            }

            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: 180px;">' + 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>');
            table.append($('<thead></thead>').append(tr));
            var body = $('<tbody></tbody>');
            if (data && data.length > 0) {
                for (var i = 0; i < data.length; i++) {
                    data[i].ServiceName = htmldecode(data[i].ServiceName);
                    body.append(_sc.createIntervalReadonlyTr(data[i]));
                }
            }
            table.append(body);
            return table;
        }

        function back() {
            window.location.href = 'MaintenanceSchedulesManagement.aspx';
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div class="right_main">
        <div class="page_title">
            <span class="sbutton iconback" onclick="back();"></span>
            <span id="span_title"></span>
        </div>
        <div class="function_title">
            <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: 10px;"><em class="icon expand" id="em_collapse_schedule"></em></th>
                        <th style="width: 140px;" data-lgid="P_PM_NAME_COLON">Name:</th>
                        <td><%=Schedule == null ? null : HttpUtility.HtmlEncode(Schedule.PmScheduleName) %></td>
                    </tr>
                    <tr id="trScheduleUom" style="display: none;">
                        <th style="width: 10px;"></th>
                        <th style="width: 140px;" data-lgid="P_PM_ODOMETERUOM_COLON">Odometer UOM:</th>
                        <td><%=Schedule == null ? null : HttpUtility.HtmlEncode(Schedule.PmScheduleUom) %></td>
                    </tr>
                    <tr class="collapsable">
                        <th></th>
                        <th data-lgid="P_PM_DESCRIPTION_COLON">Description:</th>
                        <td><%=Schedule == null ? null : HttpUtility.HtmlEncode(Schedule.Notes).Replace("\n", "<br/>") %></td>
                    </tr>
                    <tr class="collapsable">
                        <th></th>
                        <th data-lgid="P_PM_INTERVALS_COLON">Intervals:</th>
                        <td id="th_intervals"></td>
                    </tr>
                    <tr>
                        <td class="th_machines" colspan="3">
                            <div class="machine_filter">
                                <span data-lgid="P_PM_ASSETSTYPE_COLON">Assets Type: </span>
                                <select id="sel_machine_type" style="width: 230px;"></select>
                                <input type="text" id="txt_machine_key" />
                                <input type="button" class="funcctionbtn" id="button_machine_filter" value="Filter" data-lgid="P_PM_FILTER" />
                                <input type="button" class="funcctionbtn" onclick="OnSaveMachines();" value="Save" data-lgid="P_PM_SAVE" />
                                <input type="button" class="funcctionbtn" onclick="OnAddAssets();" value="Add" data-lgid="P_PM_ADD" />
                                <input type="button" class="funcctionbtn" onclick="OnRemoveAssets();" value="Remove" data-lgid="P_PM_REMOVE" />
                            </div>
                        </td>
                    </tr>
                </thead>
            </table>
            <div>
                <div id="divScheduleAssets" style="min-height: 400px; position: relative;"></div>
            </div>
        </div>
    </div>
    <div id="mask_bg" style="display: none;">
        <div class="loading c-spin"></div>
    </div>

    <div class="dialog" id="dialog_selectedassets" style="display: none;">
        <div class="dialog-title"><span class="title" data-lgid="P_PM_SETASSETS">Set Assets</span><em class="dialog-close"></em></div>
        <div>
            <div id="selectedassets" style="height: 400px; width: 700px; position: relative;"></div>
        </div>
        <div class="dialog-func">
            <input type="button" value="Cancel" data-lgid="P_PM_CANCEL" class="dialog-close" tabindex="18" />
            <input type="button" onclick="OnSetAssetsDialogOK();" value="OK" data-lgid="P_PM_OK" tabindex="17" />
            <div class="clear"></div>
        </div>
    </div>
</asp:Content>