fleet-contractor/Site/JobSite/RequirementChangeHistory.aspx

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

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link href="../css/jquery.datetimepicker.css" rel="stylesheet" />
    <style type="text/css">
        .itemselcted {
            background-color: #ccc;
        }

        .itemhidden {
            display: none;
        }

        .itemsuggested {
            background-color: #ffff99;
        }

        #tbMachineTypes tbody tr:hover {
            cursor: default;
            background: #ddd;
        }

        #tbodyAssigned tr:hover {
            cursor: default;
            background: #ddd;
        }

        #tbodyUnassigned tr:hover {
            cursor: default;
            background: #ddd;
        }

        #tbodySelected tr:hover {
            cursor: default;
            background: #ddd;
        }

        #contentctrl {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .float_left {
            float: left;
        }

        .function_bar {
            float: right;
        }

        .user_main {
            padding: 0 4px;
        }

        .dialog .dialog-title .dialog-close {
            float: right;
            margin-right: 6px;
            cursor: pointer;
        }

            .dialog .dialog-title .dialog-close:before {
                content: '\e600';
            }

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

            .dialog-content table td.label {
                width: 170px;
                text-align: right;
                padding-right: 10px;
                line-height: 28px;
                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_machines .dialog-content table td input,
        #dialog_layouts .dialog-content table td input {
            width: auto;
        }

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

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

        #dialog_user_randompass {
            width: auto;
            height: 16px;
            margin: 3px 4px 0 4px;
        }

        .icon {
            font-family: CalciteWebCoreIcons;
            cursor: default;
        }


        .ybutton {
            width: 80px;
            line-height: normal;
            margin-left: 6px;
            border: none;
            background: rgb(249, 189, 117);
            padding: 5px 14px;
            cursor: pointer;
        }

            .ybutton:hover {
                background: #d7690E;
            }

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

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

        .subdialog {
            width: -moz-calc(100% - 24px);
            width: -webkit-calc(100% - 24px);
            width: calc(100% - 24px);
        }

        .machine_maskbg {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            background: #000;
            opacity: 0.2;
        }

        #machine-name {
            margin: 10px 10px 6px;
            /*color: gray;*/
            font-weight: lighter;
            font-size: 18px;
            width: 770px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .div_filter .dropdown {
            width: 120px;
        }

        .requireinfo {
            line-height: 30px;
            margin-left: 10px;
        }

        .requireinfospan {
            font-weight: 500;
            margin-left: 20px;
        }

        .quantity {
            padding: 3px 0 3px 10px;
            margin-top: 5px;
            margin-bottom: 5px;
            /*color: gray;*/
            font-weight: 500;
            font-size: 16px;
            /*width: 770px;*/
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            background-color: #f0f0f0;
        }

        .span-caption {
            position: absolute;
        }

        .span-bar {
            position: absolute;
            height: 100%;
            margin: 0;
            vertical-align: bottom;
        }
    </style>
    <link href="<%=GetFileUrlWithVersion("../css/spectrum.css")%>" rel="stylesheet" type="text/css" />
    <script src="../js/spectrum.js?v=1" type="text/javascript"></script>
    <script src="../js/jquery.datetimepicker.full.js"></script>
    <script src="<%=GetFileUrlWithVersion("../js/editmultiselect.js")%>" type="text/javascript"></script>
    <script src="<%=GetFileUrlWithVersion("js/jobsiterequirement.js")%>" type="text/javascript"></script>

    <script>
        jobsitequery = function (method, param, callback, error, nolog) {
            _network.request("JobSite/RequirementChangeHistory.aspx?tp=ashx", -1, method, param, callback, error, nolog);
        }

        var currentdate = "<%=CurrentDate %>";
        var jobsiteparam;
        var IsReadOnly = <%=IsReadOnly ?"true":"false"%>;
        var IsRequestOnly = <%=IsRequestOnly ?"true":"false"%>;

        /***************************Jobsites***************************/        

        function showConfirmIndialog(msg, title, fok, fcancel, shownote) {
            $("#dialogmask").show();
            _dialog.showConfirm(msg, title, function (e, notes) {
                $("#dialogmask").hide();
                if (typeof fok === 'function') {
                    fok(e, notes);
                }
            }, fcancel || function () {
                $("#dialogmask").hide();
            }, null, null, shownote);
        }

        function OnRefresh() {
            showloading(true);

            var jobsites = [];
            if (jobsiteparam)
                jobsites = jobsiteparam.selectedvalue;

            var p = [
                htmlencode($('#startdatetxt').val()),
                htmlencode($('#enddatetxt').val()),
                JSON.stringify(jobsites),
                $.trim($('#searchinputtxt').val())
            ];
            jobsitequery("GetRequirementHistory", htmlencode(JSON.stringify(p)), function (data) {
                showloading(false);
                if (typeof (data) === "string") {
                    showAlert(data, GetTextByKey("P_AM_ERROR", 'Error'));
                    return;
                }

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

        function showRequirementList(data) {
            var rows = [];
            for (var i = 0; i < data.length; i++) {
                var r = data[i];
                for (var j in r) {
                    if (j === "BeginDate")
                        r[j] = { DisplayValue: r["BeginDateStr"], Value: r[j] };
                    else if (j === "EndDate")
                        r[j] = { DisplayValue: r["EndDateStr"], Value: r[j] };
                    else if (j === "DeletedOn")
                        r[j] = { DisplayValue: r["DeletedOnStr"], Value: r[j] };
                }
                var fr = { Values: r };
                rows.push(fr);
            }

            grid_dt.setData(rows);
            grid_dt.refresh();
        }

        var grid_dt;
        function InitGridData() {
            grid_dt = new GridView('#jobsitelist');
            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: 'BeginDate', caption: GetTextByKey("P_JS_BEGINDATE", "Begin Date"), valueIndex: 'BeginDate', css: { 'width': 100, 'text-align': 'left' } },
                { name: 'EndDate', caption: GetTextByKey("P_JS_ENDDATE", "End Date"), valueIndex: 'EndDate', css: { 'width': 100, 'text-align': 'left' } },
                { name: 'AssetTypeName', caption: GetTextByKey("P_JS_ASSETTYPE", "Asset Type"), valueIndex: 'AssetTypeName', css: { 'width': 180, 'text-align': 'left' } },
                { name: 'Quantity', caption: GetTextByKey("P_JS_QUANTITY", "Quantity"), valueIndex: 'Quantity', css: { 'width': 80, 'text-align': 'right' } },
                { name: 'ScheduledQuantity', caption: GetTextByKey("P_JS_SCHEDULED", "Scheduled"), valueIndex: 'ScheduledQuantity', css: { 'width': 80, 'text-align': 'right' } },
                { name: 'JobSiteName', caption: GetTextByKey("P_JOBSITE", "Jobsite"), valueIndex: 'JobSiteName', css: { 'width': 200, 'text-align': 'left' } },
                { name: 'NumberOfDays', caption: GetTextByKey("P_JS_NUMBEROFDAYS", "Number of Days"), valueIndex: 'NumberOfDays', css: { 'width': 120, 'text-align': 'right' } },
                { name: 'Notes', caption: GetTextByKey("P_JS_NOTES", "Notes"), valueIndex: 'Notes', css: { 'width': 200, 'text-align': 'left' } },
                { name: 'PointOfContact', caption: GetTextByKey("P_JS_POINTOFCONTACT", "Point Of Contact"), valueIndex: 'PointOfContact', css: { 'width': 200, 'text-align': 'left' } },
                { name: 'AddedByName', caption: GetTextByKey("P_JS_CREATOR", "Creator"), valueIndex: 'AddedByName', css: { 'width': 150, 'text-align': 'left' } },
                { name: 'FulfilledByName', caption: GetTextByKey("P_JS_FULFILLEDBY", "Fulfilled By"), valueIndex: 'FulfilledByName', css: { 'width': 150, 'text-align': 'left' } },
                { name: 'DeletedByName', caption: GetTextByKey("P_JS_DELETEDBY", "Deleted By"), valueIndex: 'DeletedByName', css: { 'width': 150, 'text-align': 'left' } },
                { name: 'DeletedOn', caption: GetTextByKey("P_JS_DELETEDON", "Deleted On"), valueIndex: 'DeletedOn', css: { 'width': 150, 'text-align': 'left' } },
                { name: 'DeletedNotes', caption: GetTextByKey("P_JS_DELETIONNOTES", "Deletion Notes"), valueIndex: 'DeletedNotes', css: { 'width': 200, 'text-align': 'left' } }

            ];
            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 = list_columns[hd].visible === false ? false : 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;

                col.alwaysshow = list_columns[hd].alwaysshow;
                columns.push(col);
            }
            grid_dt.canMultiSelect = false;
            grid_dt.columns = columns;
            grid_dt.init();
            grid_dt.rowdblclick = function (rowindex) {
                if (!IsReadOnly && !IsRequestOnly) {
                    var rowdata = grid_dt.source[rowindex];
                    if (rowdata) {
                        onManageAssets(rowdata.Values);
                    }
                }
            }

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

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

        var jobsite_editmultiselect;
        var alljobsites;
        function getJobsitesAndRegions() {
            showmaskbg(true);
            jobsitequery('GetJobsitesAndRegions', '', function (data) {
                if (typeof (data) === "string") {
                    showAlert(data, GetTextByKey("P_AM_ERROR", 'Error'));
                    return;
                }

                alljobsites = data.Jobsites;
                jobsiteparam = {
                    items: data.Jobsites,
                    selectedvalue: [],
                    width: 300
                };
                jobsite_editmultiselect = editmultiselect(jobsiteparam);
                $('#div_jobsites').append(jobsite_editmultiselect);

            }, function () {
                showmaskbg(false);
            });
        }

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

            $(window).resize(function () {
                $("#jobsitelist").css("height", $(window).height() - $("#jobsitelist").offset().top - 14);
                grid_dt && grid_dt.resize();

            }).resize();

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

            $('#startdatetxt').datetimepicker({
                timepicker: false,
                format: 'm/d/Y',
                enterLikeTab: false,
                onSelectDate: function (v, inp) {
                    var date = new DateFormatter().formatDate(v, 'm/d/Y 00:00:00');
                    inp.parent().data('val', [date]);
                }
            });
            $('#enddatetxt').datetimepicker({
                timepicker: false,
                format: 'm/d/Y',
                enterLikeTab: false,
                onSelectDate: function (v, inp) {
                    var date = new DateFormatter().formatDate(v, 'm/d/Y 00:00:00');
                    inp.parent().data('val', [date]);
                }
            });

        });

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


    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div id="contentctrl">
        <div class="page_title" data-lgid="P_JS_DELETEDJOBSITEREQUIREMENTS">Deleted Jobsite Requirements</div>
        <div class="search_bar">
            <input type="password" autocomplete="new-password" style="display: none" />
            <span data-lgid="P_JS_DELETEDBEGINDATE_COLON">Deleted Begin Date:</span>
            <div>
                <input type="text" id="startdatetxt" autocomplete="off" style="width: 100px; margin-left: 5px;" value="<%=BeginDate %>" />
            </div>
            <span style="margin-left: 10px;" data-lgid="P_JS_DELETEDENDDATE_COLON">Deleted End Date:</span>
            <div>
                <input type="text" id="enddatetxt" autocomplete="off" style="width: 100px; margin-left: 5px;" value="<%=EndDate %>" />
            </div>
            <input type="text" id="searchinputtxt" autocomplete="off" style="margin-left: 5px; display: none;" />
            <span style="margin-left: 10px;" data-lgid="P_JS_JOBSITES_COLON">Jobsites:</span>
            <div id="div_jobsites"></div>
            <input class="search" type="button" onclick="OnRefresh();" value="Search" data-lgid="P_CM_SEARCH" style="margin-left: 5px;" />
        </div>
        <div class="function_title">
            <span class="sbutton iconrefresh" onclick="OnRefresh();" data-lgid="P_JS_REFRESH"></span>
            <%--<span class="sbutton iconexport" onclick="OnExport();" data-lgid="P_MR_EXPORTTOEXCEL">Export to Excel</span>--%>
        </div>
        <div id="jobsitelist"></div>
    </div>
    <div id="mask_bg" style="display: none;">
        <div class="loading c-spin"></div>
    </div>

</asp:Content>