Disco/Disco.Web/Views/Job/Index.cshtml

@model Disco.Web.Models.Job.IndexModel
@{
    ViewBag.Title = "Jobs";

    if (Authorization.Has(Claims.Job.ShowDailyChart))
    {
        Html.BundleDeferred("~/ClientScripts/Modules/Highcharts");
    }
}
<div class="clearfix columnHost">
    @if (Authorization.Has(Claims.Job.Search))
    {
        <div class="column50">
            <h2>Search Jobs</h2>
            @Html.Partial(MVC.Shared.Views._SearchDialog, "jobs")
        </div>
    }
    @if (Authorization.Has(Claims.Job.ShowDailyChart))
    {
        <div class="column50">
            <h2>Daily Opened &amp; Closed Jobs</h2>
            <div id="chartHostJobDailyOpenedClosed" style="height: 175px;">
            </div>
            @{
                var jsonData = new HtmlString(Json.Encode(Model.DailyOpenedClosedStatistics));
            }
            <script type="text/javascript">
                (function () {
                    var chartData;

                    function buildChart() {
                        $(function () {

                            var data = chartData;

                            var dataTotalOpenJobs = [];
                            var dataOpenedJobs = [];
                            var dataClosedJobs = [];
                            for (var i = 0; i < data.length; i++) {
                                var dataItem = data[i];
                                var dataItemDate = new Date(parseInt(dataItem.Timestamp.substr(6, dataItem.Timestamp.length - 8))).getTime(); // $.datepicker.parseDate('yy-mm-dd', dataItem.Timestamp.substr(0, 10)).getTime();
                                dataTotalOpenJobs.push([dataItemDate, dataItem.TotalJobs]);
                                dataOpenedJobs.push([dataItemDate, dataItem.OpenedJobs]);
                                dataClosedJobs.push([dataItemDate, dataItem.ClosedJobs]);
                            }
                            Highcharts.setOptions({
                                global: {
                                    useUTC: false
                                }
                            });
                            new Highcharts.Chart({
                                chart: {
                                    renderTo: 'chartHostJobDailyOpenedClosed',
                                    height: 175,
                                    animation: false,
                                    style: {
                                        fontFamily: '"Segoe UI", Arial, Verdana, Tahoma, sans-serif'
                                    }
                                },
                                colors: ['#BBBBBB', '#005fab', '#60ab1e'],
                                title: {
                                    text: null
                                },
                                plotOptions: {
                                    series: {
                                        marker: {
                                            radius: 3
                                        },
                                        animation: false
                                    }
                                },
                                legend: {
                                    align: 'left',
                                    verticalAlign: 'top',
                                    y: 0,
                                    floating: true,
                                    borderWidth: 0,
                                    itemStyle: {
                                        color: '#333',
                                        fontWeight: 'normal'
                                    }
                                },
                                xAxis: {
                                    type: 'datetime',
                                    tickInterval: 7 * 24 * 3600 * 1000, // week
                                    tickWidth: 1,
                                    gridLineWidth: 1,
                                    dateTimeLabelFormats: {
                                        week: '%e %b'
                                    }
                                },
                                yAxis: [{
                                    title: {
                                        text: null
                                    },
                                    labels: {
                                        enabled: false
                                    },
                                    min: 0
                                }, {
                                    title: {
                                        text: null
                                    },
                                    labels: {
                                        enabled: false
                                    },
                                    min: 0
                                }],
                                series: [{
                                    name: 'Total Open Jobs',
                                    data: dataTotalOpenJobs,
                                    yAxis: 1
                                }, {
                                    name: 'Closed Jobs',
                                    data: dataClosedJobs
                                }, {
                                    name: 'Opened Jobs',
                                    data: dataOpenedJobs
                                }],
                                credits: {
                                    enabled: false
                                }
                            });
                        });
                    }
                    chartData = $.parseJSON('@(jsonData)');
                    buildChart();
                }());

            </script>
        </div>
    }
</div>
@if (Authorization.Has(Claims.Job.Lists.MyJobs))
{
    <div id="Jobs_Index_MyJobs">
        <h2>My Jobs (@Model.MyJobs.Items.Count())</h2>
        @Html.Partial(MVC.Shared.Views._JobTable, Model.MyJobs, new ViewDataDictionary())
    </div>
}
@if (Authorization.Has(Claims.Job.Lists.StaleJobs))
{
    <div id="Jobs_Index_StaleJobs">
        <h2>Stale Jobs (@Model.StaleJobs.Items.Count())</h2>
        @Html.Partial(MVC.Shared.Views._JobTable, Model.StaleJobs, new ViewDataDictionary())
    </div>
}
@if (Authorization.Has(Claims.Job.Actions.Export))
{
    <div class="actionBar">
        @Html.ActionLinkButton("Export Jobs", MVC.Job.Export())
    </div>
}
@if (Model.PendingEnrollments != null && Model.PendingEnrollments.Count > 0 && Authorization.Has(Claims.Device.Actions.EnrolDevices))
{
    <div id="pendingEnrollments">
        <i class="fa fa-exclamation-circle info"></i>
        <div>There are device enrollments pending approval.</div>
        <a href="@Url.Action(MVC.Config.Enrolment.Status())" class="button small alert" target="_blank">View Enrollments</a>
    </div>
    <script>
        $(function () {
            var layout_PageHeading = $('#layout_PageHeading').height(80);
            $('#pendingEnrollments')
                .detach()
                .appendTo(layout_PageHeading);
        });
    </script>
}