fleet-contractor/Site/AssetView/AssetTimeline.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/AssetView/AssetViewBase.master" AutoEventWireup="true" CodeFile="AssetTimeline.aspx.cs" Inherits="AssetView_AssetTimeline" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link href="<%=GetFileUrlWithVersion("../css/jquery.datetimepicker.css")%>" rel="stylesheet" />
    <script src="<%=GetFileUrlWithVersion("../js/jquery.datetimepicker.full.js")%>"></script>
    <style type="text/css">
        .table-container {
            margin: 4px 10px 0 26px;
        }
        .table-timeline {
            width: 100%;
            border-spacing: 0;
            table-layout: fixed;
        }
        .table-timeline th {
            width: 4.17%;
            border-right: 1px solid white;
            background: #444;
            color: white;
            font-weight: normal;
            font-size: 13px;
            height: 26px;
        }
        .table-timeline th,
        .table-timeline td {
            padding: 0;
        }
        #td-timeline {
            height: 30px;
            position: relative;
        }
        #td-timeline div {
            height: 26px;
            position: absolute;
            background: #64965a;
            top: 2px;
            border-radius: 6px;
        }
        #td-timeline div.no-start {
            border-radius: 0 6px 6px 0;
        }
        #td-timeline div.no-end {
            border-radius: 6px 0 0 6px;
        }
    </style>
    <script type="text/javascript">
        _network.root = '<%=Page.ResolveUrl("~/")%>';
        var wids = [];
        var dict;

        function assetrequest(method, param, callback, error) {
            _network.request("AssetView/SingleAssetView.aspx", -1, method, param, callback, error || function (e) {
                console.log(e);
            });
        }

        function fillWidths() {
            var ths = $('#tr-header').children();
            for (var i = 0; i < ths.length; i++) {
                wids[i] = $(ths[i]).outerWidth();
            }
        }

        $(function () {
            fillWidths();
            dict = {};
            try {
                var search = location.search.substring(1).split('&');
                if (search) {
                    for (var i = 0; i < search.length; i++) {
                        var ss = search[i].split('=');
                        dict[ss[0]] = decodeURIComponent(ss[1]);
                    }
                }
            } catch (e) {
                // failed to load the params, ignore
            }

            $(window).resize(function () {
                fillWidths();
                var ds = $('#td-timeline').children();
                for (var i = 0; i < ds.length; i++) {
                    var div = $(ds[i]);
                    var start = parseFloat(div.attr('start'));
                    var end = parseFloat(div.attr('end'));
                    var left = getOffset(start, wids);
                    var right = getOffset(end, wids);
                    var w = right - left - 1;
                    if (w < 1) { w = 1; }
                    div.css({
                        left: left,
                        width: w
                    });
                }
            });
        });

        function getAssetTimeline(id, date) {
            var params = [dict.cid || '', id, date];
            assetrequest('GetAssetOnOffTimeline', params.join(String.fromCharCode(170)), function (data) {
                var parent = $('#td-timeline').empty();
                for (var i = 0; i < data.length; i++) {
                    var div = $('<div></div>');
                    var startSeconds = data[i].Start;
                    var endSeconds = data[i].End;
                    var start = startSeconds / 3600;
                    var end = endSeconds / 3600;
                    var title = [];
                    if (data[i].HasOn) {
                        title.push('On: ' + hoursToString(startSeconds));
                    } else {
                        div.addClass('no-start');
                    }
                    if (data[i].HasOff) {
                        title.push('Off: ' + hoursToString(endSeconds));
                    } else {
                        div.addClass('no-end');
                    }
                    div.attr({
                        start: start,
                        end: end,
                        title: title.join('\n')
                    });
                    var left = getOffset(start, wids);
                    var right = getOffset(end, wids);
                    var w = right - left - 1;
                    if (w < 1) { w = 1; }
                    div.css({
                        left: left,
                        width: w
                    });
                    parent.append(div);
                }
            });
        }

        function hoursToString(seconds) {
            var s = Math.floor(seconds % 60);
            seconds = Math.floor(seconds / 60);
            var m = seconds % 60;
            var h = Math.floor(seconds / 60);
            return (h < 10 ? '0' : '') + h + ':' + (m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s;
        }

        function OnRefresh(dt) {
            if (dict.id != null) {
                getAssetTimeline(dict.id, dt);
            }
        }

        function getOffset(pos, wids) {
            var n = Math.floor(pos);
            var p = 0;
            for (var i = 0; i < n; i++) {
                p += wids[i];
            }
            p += wids[n] * (pos - n);
            return p;
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div class="table-container">
        <div style="width: 100px; float: left">
            <table class="table-timeline">
                <thead>
                    <tr><th data-lgid="P_MV_TYPE">Type</th></tr>
                </thead>
                <tbody>
                    <tr><td style="height: 30px" data-lgid="P_MV_ONOFFEVENTS">On/Off Events</td></tr>
                </tbody>
            </table>
        </div>
        <div style="margin-left: 100px">
            <table class="table-timeline">
                <thead>
                    <tr id="tr-header">
                        <th>0:00</th><th>1:00</th><th>2:00</th><th>3:00</th>
                        <th>4:00</th><th>5:00</th><th>6:00</th><th>7:00</th>
                        <th>8:00</th><th>9:00</th><th>10:00</th><th>11:00</th>
                        <th>12:00</th><th>13:00</th><th>14:00</th><th>15:00</th>
                        <th>16:00</th><th>17:00</th><th>18:00</th><th>19:00</th>
                        <th>20:00</th><th>21:00</th><th>22:00</th><th>23:00</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="24" id="td-timeline"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</asp:Content>