@{
    ViewBag.Title = "Search Queue";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@Scripts.Render("~/Scripts/kendoHelpers.js")
@Scripts.Render("~/Scripts/model/models.js")
@Scripts.Render("~/Scripts/jquery.signalR-2.2.1.js")
<script src="~/signalr/hubs"></script>

<h2>
    @ViewBag.Title
</h2>

<div id="container">
    <div class="panel panel-default" style="margin-top: 25px;">
        <div class="panel-heading">
            Search Processor Status
        </div>
        <div class="panel-body container">
            <div class="form-group col-md-8">
                <label for="statusMessageTB">Status Message</label>
                <input type="text" class="form-control" id="statusMessageTB" name="statusMessageTB" readonly data-bind="value: statusMessage">
            </div>
            <div class="form-group col-md-4">
                <label for="statusUpdateDTTB">Last Update Timestamp</label>
                <input type="text" class="form-control" id="statusUpdateDTTB" name="statusUpdateDTTB" readonly data-bind="value: statusUpdateDT">
            </div>
        </div>
    </div>
    <div id="sessionsGrid"
         data-role="grid"
         data-editable="false"
         data-sortable="{ 'mode' : 'multiple', 'allowUnsort' : true}"
         data-scrollage="true"
         data-pageable="{ 'pagesize' : 20 }"
         data-pagesize="20"
         data-bind="source: sessions"
         data-columns="[
                        { 'field': 'UserName', 'title': 'Owner' },
                        { 'field': 'Name' },
                        { 'field': 'SubmitDT', 'title': 'Submitted', 'template': kendo.template($('#submitDTTemplate').html()) },
                        { 'field': 'StartDT', 'title': 'Started', 'template': kendo.template($('#startDTTemplate').html()) },
                        { 'field': 'EndDT', 'title': 'Ended', 'template': kendo.template($('#endDTTemplate').html()) },
                        { 'field': 'Status' }
                   ]"
         style="min-height: 450px;"></div>
</div>

<script type="text/x-kendo-template" id="submitDTTemplate">
    #= SubmitDT != null ? kendo.toString(kendo.parseDate(SubmitDT), 'MM/dd/yyyy hh:mm:ss tt') : '' #
</script>

<script type="text/x-kendo-template" id="startDTTemplate">
    #= StartDT != null ? kendo.toString(kendo.parseDate(StartDT), 'MM/dd/yyyy hh:mm:ss tt') : '' #
</script>

<script type="text/x-kendo-template" id="endDTTemplate">
    #= EndDT != null ? kendo.toString(kendo.parseDate(EndDT), 'MM/dd/yyyy hh:mm:ss tt') : '' #
</script>

<script type="text/javascript">
    var viewModel = kendo.observable({
        statusMessage: null,
        statusUpdateDT: null,
        sessions: new kendo.data.DataSource({
            pageSize: 20,
            sort: { field: "SubmitDT", dir: "asc" },
            schema: {
                model: {
                    id: 'ID'
                }
            }
        }),
        setData: function (data) {
            this.sessions.data(data);
            kendo.ui.progress($('#sessionsGrid'), false);
        },
        processUpdate: function (searchUpdate) {
            var ds = this.get('sessions');

            if (searchUpdate.Status === 'Ended' || searchUpdate.Status === 'Error') {
                //Search completed => remove from list
                ds.pushDestroy(searchUpdate);
            } else {
                //Update display from search update
                var existing = ds.get(searchUpdate.ID);
                if (existing) {
                    ds.pushUpdate(searchUpdate);

                } else {
                    ds.pushCreate(searchUpdate);
                }
            }
        },
        processStatus: function (statusUpdate) {
            var statusMessage = getValue(statusUpdate.Message, null);
            var statusUpdateDT = getValue(statusUpdate.Timestamp, null);

            this.set('statusMessage', statusMessage);
            this.set('statusUpdateDT', statusUpdateDT != null ? kendo.toString(kendo.parseDate(statusUpdateDT), 'MM/dd/yyyy hh:mm:ss tt') : null);
        }
    });

    var statusHub = $.connection.statusHub;
    statusHub.client.statusUpdate = function (statusUpdate) {
        viewModel.processStatus(statusUpdate);
    };
    statusHub.client.searchUpdate = function (searchUpdate) {
        viewModel.processUpdate(searchUpdate);
    };
    window.hubReady = $.connection.hub.start().done(function () {
        statusHub.server.getCachedStatus().done(function (cachedStatus) {
            viewModel.processStatus(cachedStatus);
        });
    });

    $.connection.hub.disconnected(function () {
        setTimeout(function() {
            $.connection.hub.start();
        }, 5000); // Restart connection after 5 seconds.
    });

    $(document).ready(function () {
        $.ajaxSetup({ cache: false });

        //Find grid container
        var sessionsGrid = $('#sessionsGrid');

        //Bind data model
        kendo.bind($('#container'), viewModel);

        //Display loading indicator
        kendo.ui.progress(sessionsGrid, true);

        //Load sessions data
        $.getJSON('@Url.Action("GetQueue", "Search")',
            null,
            function (results) {
                viewModel.setData(results);
            });
    });
</script>