323 lines
		
	
	
		
			14 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
	
	
			
		
		
	
	
			323 lines
		
	
	
		
			14 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
	
	
| <%@ Page Title="" Language="C#" MasterPageFile="~/OTRConfig/OTRConfig.master" AutoEventWireup="true" CodeFile="ManageHarshDriving.aspx.cs" Inherits="ManageHarshDriving" %>
 | |
| 
 | |
| <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
 | |
|     <link href="../css/jquery.datetimepicker.css" rel="stylesheet" />
 | |
|     <style type="text/css">
 | |
|         .main_group {
 | |
|             table-layout: fixed;
 | |
|         }
 | |
| 
 | |
|             .main_group td {
 | |
|                 overflow: hidden;
 | |
|                 text-overflow: ellipsis;
 | |
|             }
 | |
| 
 | |
|         .group_table {
 | |
|             width: 100%;
 | |
|             border-collapse: collapse;
 | |
|         }
 | |
| 
 | |
|             .group_table tr {
 | |
|                 height: 24px;
 | |
|                 line-height: 24px;
 | |
|             }
 | |
| 
 | |
|             .group_table td {
 | |
|                 padding: 0;
 | |
|                 vertical-align: top;
 | |
|             }
 | |
| 
 | |
|         td.label {
 | |
|             width: 160px;
 | |
|         }
 | |
| 
 | |
|         .ctl_button {
 | |
|             font-family: 'CalciteWebCoreIcons';
 | |
|             display: block;
 | |
|             margin: 6px auto;
 | |
|             width: 60px;
 | |
|             height: 22px;
 | |
|             line-height: 21px;
 | |
|             padding: 0;
 | |
|         }
 | |
| 
 | |
|         #dialog_group_description {
 | |
|             padding: 2px;
 | |
|             height: 60px;
 | |
|         }
 | |
| 
 | |
|         .group_table .main_table thead tr {
 | |
|             display: block;
 | |
|         }
 | |
| 
 | |
|         .group_table .main_table tbody {
 | |
|             height: 280px;
 | |
|             display: block;
 | |
|             overflow-y: auto;
 | |
|         }
 | |
| 
 | |
|         .group_table .main_table th {
 | |
|             width: 165px;
 | |
|             padding: 0;
 | |
|         }
 | |
| 
 | |
|         .group_table .main_table td {
 | |
|             width: 170px;
 | |
|         }
 | |
| 
 | |
|             .group_table .main_table td div {
 | |
|                 width: 170px;
 | |
|                 overflow: hidden;
 | |
|                 text-overflow: ellipsis;
 | |
|             }
 | |
|     </style>
 | |
|     <script src="../js/jquery.datetimepicker.full.js"></script>
 | |
|     <script src="<%=GetFileUrlWithVersion("js/controls.js")%>" type="text/javascript"></script>
 | |
|     <script type="text/javascript">
 | |
|         otrconfigquery = function (method, param, callback, error) {
 | |
|             _network.request("OTRConfig/ManageHarshDriving.aspx", -1, method, param, callback, error);
 | |
|         }
 | |
| 
 | |
|         function showList(data) {
 | |
|             var rows = [];
 | |
|             for (var i = 0; i < data.length; i++) {
 | |
|                 var r = data[i];
 | |
|                 for (var j in r) {
 | |
|                     if (j === "AsofTimeLocal")
 | |
|                         r[j] = { DisplayValue: r["AsofTimeLocalStr"], Value: r[j] };
 | |
|                     else if (j === "Excluded") {
 | |
|                         r["SetText"] = r.Excluded ? GetTextByKey("P_MHD_EXCLUDE", "Exclude") : GetTextByKey("P_MHD_EXCLUDE", "Exclude");
 | |
|                         r[j] = { DisplayValue: r.Excluded ? "Yes" : "No", Value: r[j] };
 | |
|                     }
 | |
|                 }
 | |
|                 var fr = { Values: r };
 | |
|                 rows.push(fr);
 | |
|             }
 | |
| 
 | |
|             grid_dt.setData(rows);
 | |
|         }
 | |
| 
 | |
|         var grid_dt;
 | |
|         function InitGridData() {
 | |
|             grid_dt = new GridView('#harshdrivinglist');
 | |
|             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: 'Set', valueIndex: 'SetText', css: { 'width': 60, 'text-align': 'left' } },
 | |
|                 { name: 'Excluded', caption: GetTextByKey("P_MHD_EXCLUDED", "Excluded"), valueIndex: 'Excluded', allowFilter: true, css: { 'width': 80, 'text-align': 'left' } },
 | |
|                 { name: 'DisplayName', caption: GetTextByKey("P_MHD_ASSETNAME", "Asset Name"), valueIndex: 'DisplayName', allowFilter: true, css: { 'width': 150, 'text-align': 'left' } },
 | |
|                 { name: 'MakeName', caption: GetTextByKey("P_MHD_MAKE", "Make"), valueIndex: 'MakeName', allowFilter: true, css: { 'width': 100, 'text-align': 'left' } },
 | |
|                 { name: 'ModelName', caption: GetTextByKey("P_MHD_MODEL", "Model"), valueIndex: 'ModelName', allowFilter: true, css: { 'width': 100, 'text-align': 'left' } },
 | |
|                 { name: 'EventDesc', caption: GetTextByKey("P_MHD_EVENTTYPE", "Event Type"), valueIndex: 'EventDesc', allowFilter: true, css: { 'width': 90, 'text-align': 'left' } },
 | |
|                 { name: 'AsofTimeLocal', caption: GetTextByKey("P_MHD_EVENTTIME", "Event Time"), valueIndex: 'AsofTimeLocal', css: { 'width': 110, 'text-align': 'left' } },
 | |
|                 { name: 'Street', caption: GetTextByKey("P_MHD_STREET", "Street"), valueIndex: 'Street', css: { 'width': 100, 'text-align': 'left' } },
 | |
|                 { name: 'City', caption: GetTextByKey("P_MHD_CITY", "City"), valueIndex: 'City', css: { 'width': 100, 'text-align': 'left' } },
 | |
|                 { name: 'State', caption: GetTextByKey("P_MHD_STATE", "State"), valueIndex: 'State', css: { 'width': 90, 'text-align': 'left' } },
 | |
|                 { name: 'PostalCode', caption: GetTextByKey("P_MHD_POSTALCODE", "Postal Code"), valueIndex: 'PostalCode', css: { 'width': 60, 'text-align': 'left' } },
 | |
|                 //{ name: 'Country', caption: GetTextByKey("P_MHD_EXCLUDED",  "Country"), valueIndex: 'Country', css: { 'width': 100, 'text-align': 'left' } },
 | |
|                 { name: 'StartingSpeed', caption: GetTextByKey("P_MHD_STARTINGSPEED", "Starting Speed"), valueIndex: 'StartingSpeed', css: { 'width': 60, 'text-align': 'right' } },
 | |
|                 { name: 'SpeedUnits', caption: GetTextByKey("P_MHD_SPEEDUNITS", "Speed Units"), valueIndex: 'SpeedUnits', css: { 'width': 60, 'text-align': 'right' } },
 | |
|                 { name: 'Duration', caption: GetTextByKey("P_MHD_DURATION", "Duration"), valueIndex: 'Duration', css: { 'width': 65, 'text-align': 'right' } },
 | |
|                 { name: 'DurationUnits', caption: GetTextByKey("P_MHD_DURATIONUNITS", "Duration Units"), valueIndex: 'DurationUnits', css: { 'width': 65, 'text-align': 'right' } },
 | |
|                 { name: 'Magnitude', caption: GetTextByKey("P_MHD_MAGNITUDE", "Magnitude"), valueIndex: 'Magnitude', css: { 'width': 75, 'text-align': 'right' } },
 | |
|                 { name: 'MagnitudeUnits', caption: GetTextByKey("P_MHD_MAGNITUDEUNITS", "Magnitude Units"), valueIndex: 'MagnitudeUnits', css: { 'width': 80, 'text-align': 'right' } }
 | |
|             ];
 | |
|             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;
 | |
|                 col.allowFilter = list_columns[hd].allowFilter;
 | |
|                 if (col.name === "Set") {
 | |
|                     col.isurl = true;
 | |
|                     col.events = {
 | |
|                         onclick: function () {
 | |
|                             OnExcluded();
 | |
|                         }
 | |
|                     };
 | |
|                 }
 | |
|                 columns.push(col);
 | |
|             }
 | |
|             grid_dt.canMultiSelect = false;
 | |
|             grid_dt.columns = columns;
 | |
|             grid_dt.init();
 | |
|             grid_dt.rowdblclick = OnExcluded;
 | |
| 
 | |
|             grid_dt.selectedrowchanged = function (rowindex) {
 | |
|                 var rowdata = grid_dt.source[rowindex];
 | |
|                 if (rowdata) {
 | |
|                 }
 | |
|             }
 | |
|         }
 | |
| 
 | |
| 
 | |
|         function OnRefresh() {
 | |
|             showloading(true);
 | |
|             var startdate = htmlencode($('#startdatetxt').val());
 | |
|             var enddate = htmlencode($('#enddatetxt').val());
 | |
|             var searchtxt = htmlencode($.trim($('#searchinputtxt').val()));
 | |
|             otrconfigquery('GetHarshDrivingEvents', startdate + String.fromCharCode(170) + enddate + String.fromCharCode(170) + searchtxt, function (data) {
 | |
|                 showloading(false);
 | |
|                 if (typeof (data) === "string") {
 | |
|                     showAlert(data, GetTextByKey("P_MHD_ERROR", 'Error'));
 | |
|                     return;
 | |
|                 }
 | |
|                 showList(data);
 | |
|             }, function (err) {
 | |
|                 showloading(false);
 | |
|             });
 | |
|         }
 | |
| 
 | |
|         var rowdata;
 | |
|         function OnExcluded() {
 | |
|             $('#dialog_notes').val('');
 | |
|             var data = grid_dt.source[grid_dt.selectedIndex].Values;
 | |
|             if (!data) {
 | |
|                 rowdata = undefined;
 | |
|                 return;
 | |
|             }
 | |
|             rowdata = data;
 | |
|             var text = "Exclude";
 | |
|             if (rowdata.Excluded.Value)
 | |
|                 text = "Include";
 | |
| 
 | |
|             $('#dialog_excluded .dialog-title span.title').text(text);
 | |
|             showmaskbg(true);
 | |
|             $('#dialog_excluded')
 | |
|                 .attr('act', 'edit')
 | |
|                 .css({
 | |
|                     'top': (document.documentElement.clientHeight - $('#dialog_excluded').height()) / 3,
 | |
|                     'left': (document.documentElement.clientWidth - $('#dialog_excluded').width()) / 2
 | |
|                 })
 | |
|                 .showDialog();
 | |
|         }
 | |
| 
 | |
|         function OnDialogOK() {
 | |
|             if (!rowdata)
 | |
|                 return;
 | |
| 
 | |
|             var text = GetTextByKey("P_MHD_EXCLUDE", "Exclude");
 | |
|             if (rowdata.Excluded.Value)
 | |
|                 text = GetTextByKey("P_MHD_INCLUDE", "Include");
 | |
|             var item = {
 | |
|                 'LogID': rowdata.LogID,
 | |
|                 'AssetID': rowdata.AssetID,
 | |
|                 'Excluded': rowdata.Excluded.Value,
 | |
|                 'Notes': $('#dialog_notes').val()
 | |
|             };
 | |
|             var param = JSON.stringify(item);
 | |
|             param = htmlencode(param);
 | |
|             showloading(true);
 | |
|             otrconfigquery("ExcludedHarshDrivingEvents", param, function (data) {
 | |
|                 showloading(false);
 | |
|                 if (data !== 'OK') {
 | |
|                     showAlert(data, alerttitle);
 | |
|                 } else {
 | |
|                     $('#dialog_excluded').hideDialog();
 | |
|                     OnRefresh();
 | |
|                 }
 | |
|             }, function (err) {
 | |
|                 showloading(false);
 | |
|                 showAlert(GetTextByKey("P_MHD_FAILEDTOEXCLUDEDHARSHDRIVING", 'Failed to excluded harsh driving.'), text + GetTextByKey("P_MHD_HARSHDRIVING", " Harsh Driving"));
 | |
|             });
 | |
|         }
 | |
| 
 | |
|         $(function () {
 | |
|             setPageTitle(GetTextByKey("P_MANAGEHARSHDRIVING", "Manage Harsh Driving"), true);
 | |
|             InitGridData();
 | |
| 
 | |
|             OnRefresh();
 | |
|             $('#dialog_excluded').dialog(function () {
 | |
|                 showmaskbg(false);
 | |
|             });
 | |
| 
 | |
|             $('#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]);
 | |
|                 }
 | |
|             });
 | |
| 
 | |
|             $('#searchinputtxt').keydown(searchEnter);
 | |
|             $(window).resize(function () {
 | |
|                 $("#harshdrivinglist").css("height", $(window).height() - $("#harshdrivinglist").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="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
 | |
|     <div style="min-width: 400px;">
 | |
|         <div class="page_title" data-lgid="P_MANAGEHARSHDRIVING">Manage Harsh Driving</div>
 | |
|         <div class="search_bar">
 | |
|             <input type="password" autocomplete="new-password" style="display: none" />
 | |
|             <span style="padding-left: 5px;" data-lgid="P_MHD_STATDATE_COLON">Start Date: </span>
 | |
|             <span>
 | |
|                 <input id="startdatetxt" type="text" style="width: 100px;" value="<%=BeginDate %>" /></span>
 | |
|             <span style="padding-left: 5px;" data-lgid="P_MHD_ENDDATE_COLON">End Date: </span>
 | |
|             <span>
 | |
|                 <input id="enddatetxt" type="text" style="width: 100px;" value="<%=EndDate %>" /></span>
 | |
|             <input id="searchinputtxt" type="text" style="width: 200px; margin-left: 5px;" autocomplete="off" />
 | |
|             <input class="search" type="button" onclick="OnRefresh();" value="Search" data-lgid="P_MHD_SEARCH" style="margin-left: 5px;" />
 | |
|         </div>
 | |
|         <div class="function_title">
 | |
|             <span class="sbutton iconrefresh" onclick="OnRefresh();" data-lgid="P_MHD_REFRESH">Refresh</span>
 | |
|         </div>
 | |
|         <div class="clear"></div>
 | |
|         <div id="harshdrivinglist"></div>
 | |
|     </div>
 | |
| 
 | |
|     <div id="mask_bg" style="display: none;">
 | |
|         <div class="loading c-spin"></div>
 | |
|     </div>
 | |
| 
 | |
|     <div class="dialog" id="dialog_excluded" style="display: none; width: 400px;">
 | |
|         <div class="dialog-title"><span class="title" data-lgid="P_MHD_EXCLUDED">Excluded</span><em class="dialog-close"></em></div>
 | |
|         <div class="dialog-content">
 | |
|             <table>
 | |
|                 <tr>
 | |
|                     <td style="width: 50px; vertical-align: top;" data-lgid="P_MHD_NOTES_COLON">Notes:</td>
 | |
|                     <td>
 | |
|                         <textarea id="dialog_notes" maxlength="1000" tabindex="1" style="width: 300px; height: 100px; margin-top: 3px;"></textarea></td>
 | |
|                 </tr>
 | |
|             </table>
 | |
|         </div>
 | |
|         <div class="dialog-func">
 | |
|             <input type="button" value="Cancel" class="dialog-close" data-lgid="P_MHD_CANCEL" tabindex="3" />
 | |
|             <input type="button" onclick="OnDialogOK();" value="OK" data-lgid="P_MHD_OK" tabindex="2" />
 | |
|             <div class="clear"></div>
 | |
|         </div>
 | |
|     </div>
 | |
| </asp:Content>
 | |
| 
 |