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

<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">
        var groups;
        otrconfigquery = function (method, param, callback, error) {
            _network.request("OTRConfig/ManageSpeeding.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 === "EventTime")
                        r[j] = { DisplayValue: r["EventTimeStr"], Value: r[j] };
                }
                var fr = { Values: r };
                rows.push(fr);
            }

            grid_dt.setData(rows);
        }

        var grid_dt;
        function InitGridData() {
            grid_dt = new GridView('#speedinglist');
            var list_columns = [
                { name: 'AssetName', caption: "Asset Name", valueIndex: 'AssetName', css: { 'width': 150, 'text-align': 'left' } },
                { name: 'Make', caption: "Make", valueIndex: 'Make', css: { 'width': 100, 'text-align': 'left' } },
                { name: 'Model', caption: "Model", valueIndex: 'Model', css: { 'width': 100, 'text-align': 'left' } },
                { name: 'EventTime', caption: "Event Time", valueIndex: 'EventTime', css: { 'width': 110, 'text-align': 'left' } },
                { name: 'Street', caption: "Street", valueIndex: 'Street', css: { 'width': 100, 'text-align': 'left' } },
                { name: 'City', caption: "City", valueIndex: 'Street', css: { 'width': 100, 'text-align': 'left' } },
                { name: 'State', caption: "State", valueIndex: 'State', css: { 'width': 100, 'text-align': 'left' } },
                { name: 'PostalCode', caption: "Postal Code", valueIndex: 'PostalCode', css: { 'width': 100, 'text-align': 'left' } },
                { name: 'Country', caption: "Country", valueIndex: 'Country', css: { 'width': 100, 'text-align': 'left' } },
                { name: 'TopSpeed', caption: "Top Speed", valueIndex: 'TopSpeed', css: { 'width': 100, 'text-align': 'right' } },
                { name: 'PostedSpeedLimit', caption: "Posted Speed Limit", valueIndex: 'PostedSpeedLimit', css: { 'width': 100, 'text-align': 'right' } },
                { name: 'SpeedingOverage', caption: "Speeding Overage", valueIndex: 'SpeedingOverage', css: { 'width': 100, 'text-align': 'right' } },
                { name: 'Excluded', css: { 'width': 100, '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 = 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;
                if (col.name === "Excluded") {
                    col.isurl = true;
                    col.text = "Excluded";
                    col.events = {
                        onclick: function () {
                            OnExcluded();
                        }
                    };
                    col.classFilter = function (e) {
                        return "icon-col";
                    };
                    col.attrs = { 'title': 'Excluded' };
                }
                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) {
                    uiid = rowdata.Values.ID;
                }
            }
        }
        function OnRefresh() {
            showloading(true);
            var startdate = htmlencode($('#startdatetxt').val());
            var enddate = htmlencode($('#enddatetxt').val());
            otrconfigquery('GetSpeedingEvents', startdate + String.fromCharCode(170) + enddate, function (data) {
                showloading(false);
                if (typeof (data) === "string") {
                    showAlert(data, '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;

            $('#dialog_excluded .dialog-title span.title').text('Excluded');
            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 notes = $('#dialog_notes').val();

            var alerttitle = "Excluded Speeding";
            showloading(true);
            otrconfigquery("ExcludedSpeedingEvents", rowdata.AssetID + String.fromCharCode(170) + rowdata.LogID + String.fromCharCode(170) + notes, function (data) {
                showloading(false);
                if (data !== 'OK') {
                    showAlert(data, alerttitle);
                } else {
                    showAlert('Excluded speeding successfully.', alerttitle);
                    $('#dialog_excluded').hideDialog();
                    OnRefresh();
                }
            }, function (err) {
                showloading(false);
                showAlert('Failed to speeding driving.', alerttitle);
            });
        }

        $(function () {
            setPageTitle(GetTextByKey("P_XXXXXX", "Manage Speedings"), 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]);
                }
            });

            $(window).resize(function () {
                $("#speedinglist").css("height", $(window).height() - $("#speedinglist").offset().top - 4);
                grid_dt && grid_dt.resize();
            }).resize();

        })
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div style="min-width: 400px;">
        <div class="page_title" data-lgid="P_XXXXXX">Manage Speedings</div>
        <div class="search_bar">
            <input type="password" autocomplete="new-password" style="display: none" />
            <span style="padding-left: 5px;">Begin Date:&nbsp;</span>
            <span>
                <input id="startdatetxt" type="text" style="width: 100px;" value="<%=BeginDate %>" /></span>
            <span style="padding-left: 5px;">End Date:&nbsp;</span>
            <span>
                <input id="enddatetxt" type="text" style="width: 100px;" value="<%=EndDate %>" /></span>
            <input class="search" type="button" onclick="OnRefresh();" value="Search" style="margin-left: 5px;" />
        </div>
        <div class="function_title">
            <span class="sbutton iconrefresh" onclick="OnRefresh();">Refresh</span>
        </div>
        <div class="clear"></div>
        <div id="speedinglist"></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">Excluded</span><em class="dialog-close"></em></div>
        <div class="dialog-content">
            <table>
                <tr>
                    <td style="width: 50px; vertical-align: top;">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" tabindex="3" />
            <input type="button" onclick="OnDialogOK();" value="OK" tabindex="2" />
            <div class="clear"></div>
        </div>
    </div>
</asp:Content>