<%@ 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>