@*******************************************************************************************************//  Status.cshtml - Gbtc////  Copyright © 2016, Grid Protection Alliance.  All Rights Reserved.////  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See//  the NOTICE file distributed with this work for additional information regarding copyright ownership.//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may//  not use this file except in compliance with the License. You may obtain a copy of the License at:////      http://opensource.org/licenses/MIT////  Unless agreed to in writing, the subject software distributed under the License is distributed on an//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the//  License for the specific language governing permissions and limitations.////  Code Modification History://  ----------------------------------------------------------------------------------------------------//  01/15/2016 - J. Ritchie Carroll//       Generated original version of source code.////******************************************************************************************************//  To use in an ASP.NET destination project, include a Users.cshtml view with following content:////  @using GSF.Web//  @section StyleSheets{@Html.Raw(ViewBag.StyleSheetsSection?.ToString())}//  @Html.RenderResource("ModbusAdapters.Status.cshtml")//  @section Scripts{@Html.Raw(ViewBag.ScriptsSection?.ToString())}////******************************************************************************************************//  To use in a self-hosted web project, include a Users.cshtml view with following content:////  @using GSF.Web.Model//  @using <MyAppNameSpace>.Model//  @inherits ExtendedTemplateBase<AppModel>//  @section StyleSheets{@Html.Raw(ViewBag.StyleSheetsSection.ToString())}//  @{Layout = "Layout.cshtml";}//  @Html.RenderResource("ModbusAdapters.Status.cshtml")//  @section Scripts{@Html.Raw(ViewBag.ScriptsSection.ToString())}////*****************************************************************************************************@@* ReSharper disable RedundantUsingDirective *@@* ReSharper disable Html.PathError *@@* ReSharper disable UnknownCssClass *@@* ReSharper disable InlineOutVariableDeclaration *@@using System.Net.Http@using GSF@using GSF.Web@using GSF.Web.Model@using GSF.Web.Shared@using ModbusAdapters.Model@inherits ExtendedTemplateBase@{    // Layout will depend on rendering environment, so do not specify one    ViewBag.Title = "Status";    HttpRequestMessage request = ViewBag.Request;    Dictionary<string, string> parameters = request.QueryParameters();    string parameter, acronymn;     parameters.TryGetValue("ShowMenu", out parameter);     if (string.IsNullOrEmpty(parameter)) {        parameter = "true";    }     parameters.TryGetValue("Acronym", out acronymn);     ViewBag.ShowMenu = parameter.ParseBoolean();}@section StyleSheets {    <style>        html, body {            height: 100%;        }    </style>}@helper SearchFilter(){    @* Make sure to use single quotes in this function: *@    <div class='form-group' style='margin: 0'>        <div class='right-inner-addon'>            <i class='glyphicon glyphicon-search'></i>            <input class='form-control' type='search' id='searchFilter' placeholder='Search'/>        </div>    </div>}@section Scripts {    <script src="@Resources.Root/Shared/Scripts/knockout.js"></script>    <script>        // Define view model for device status        function StatusViewModel() {            const self = this;             // Configuration fields            self.filterText = "";                       // Search filter text             // Observable fields            self.items = ko.observableArray();          // Items to display            self.columnLength = ko.observable(4);       // Columns in each row of items             // Internal fields            self._itemLimit = ko.observable(-1);       // Item query limit             // Properties             // Gets record count            self.recordCount = ko.pureComputed({                read: function() {                    return self.items().length;                }            });             self.itemLimit = ko.pureComputed({                read: self._itemLimit,                write: function(value) {                    if (value < 1)                        value = 1;                     if (value !== self._itemLimit()) {                        self._itemLimit(value);                        self.queryItems();                    }                }            });             // Return an array of rows where each row is an array of items            self.rows = ko.computed(function() {                const result = [];                const columns = parseInt(self.columnLength(), 10);                var row;                 for (var i = 0, j = self.items().length; i < j; i++) {                    if (i % columns === 0) {                        if (row)                            result.push(row);                         row = [];                    }                     if (row)                        row.push(self.items()[i]);                }                 // Push final row                if (row)                    result.push(row);                 return result;            });             self.queryItems = function() {                if (!hubIsConnected)                    return $.Deferred().resolve().promise();                 return dataHub.queryEnabledDevices("@ViewBag.NodeID", self.itemLimit(), self.filterText).done(function(devices) {                    self.items.removeAll();                    self.items(devices);                    $(self).trigger("itemsQueried");                });            }             self.fixAcronym = function(acronym) {                return acronym.replace(/[^A-Za-z0-9]/g, "");            }        }         const viewModel = new StatusViewModel();         $(viewModel).one("itemsQueried", function () {            const acronym = "@Raw(acronymn)";             if (notNull(acronym)) {                $(viewModel).one("itemsQueried", function () {                    $(`#${viewModel.fixAcronym(acronym)}Heading`).click();                });                 $("#searchFilter").val(acronym);                viewModel.filterText = acronym;                viewModel.queryItems();            }        });         const ProgressState = {            Queued: 0,            Processing: 1,            PartialSuccess: 2,            Success: 3,            Fail: 4        };         $(window).on("beforeHubConnected", function (event) {            var deviceProgress = {};             dataHubClient.deviceProgressUpdate = function (deviceName, updates) {                var fixedDeviceName = viewModel.fixAcronym(deviceName);                const messageWell = $(`#${fixedDeviceName}Message`);                const heading = $(`#${fixedDeviceName}Heading`);                var progress = deviceProgress[deviceName];                 // TODO: This function is a mess, all the variable redeclarations are confusing, needs simplification:                $.each(updates, function (_, update) {                    if (!progress) {                        heading.click(function () {                            $.each(viewModel.items(), function (_, item) {                                $(`#${viewModel.fixAcronym(item.Acronym)}Message`).text("");                            });                             var progress = deviceProgress[deviceName];                             $.each(progress.messages, function (_, message) {                                messageWell.append(message).append($("<br>"));                            });                             var progressBar;                            var progressValue;                             progressBar = $(`#${fixedDeviceName}CurrentProgress`);                            progressValue = Math.ceil(progress.progress / progress.progressTotal * 100.0);                             if (isNumber(progressValue)) {                                progressBar.text(progressValue.toString() + "%");                                progressBar.css("width", progressBar.text());                                 if (progressValue < 100 && !progressBar.hasClass("active"))                                    progressBar.addClass("active");                                else if (progressValue == 100 && progressBar.hasClass("active"))                                    progressBar.removeClass("active");                            }                             progressBar = $(`#${fixedDeviceName}OverallProgress`);                            progressValue = Math.ceil(progress.overallProgress / progress.overallProgressTotal * 100.0);                             if (isNumber(progressValue)) {                                progressBar.text(progressValue.toString() + "%");                                progressBar.css("width", progressBar.text());                                 if (progressValue < 100 && !progressBar.hasClass("active"))                                    progressBar.addClass("active");                                else if (progressValue == 100 && progressBar.hasClass("active"))                                    progressBar.removeClass("active");                            }                        });                    }                     if (!progress || update.State === ProgressState.Queued) {                        deviceProgress[deviceName] = progress = {                            state: update.State,                            lastMessageText: "",                            lastErrorMessageText: "",                            progress: 0,                            progressTotal: 1,                            overallProgress: 0,                            overallProgressTotal: 1,                            messages: []                        };                         messageWell.text("");                    }                     if (update.State !== undefined) {                        const panel = $(`#${fixedDeviceName}Panel`);                        panel.removeClass("panel-default panel-primary panel-info panel-success panel-warning panel-danger");                        progress.state = update.State;                         switch (progress.state) {                            case ProgressState.Queued:                                panel.addClass("panel-primary");                                break;                            case ProgressState.Processing:                                panel.addClass("panel-info");                                break;                            case ProgressState.PartialSuccess:                                panel.addClass("panel-warning");                                break;                            case ProgressState.Success:                                panel.addClass("panel-success");                                break;                            case ProgressState.Fail:                                panel.addClass("panel-danger");                                break;                        }                    }                     if (notNull(update.Summary).length > 0)                        heading.text(deviceName + ": " + update.Summary);                     if (notNull(update.Message).length > 0) {                        var messageText = update.Message.substring("[yyyy-MM-dd HH:mm:ss.fff] ".length);                         if (messageText !== progress.lastMessageText) {                            progress.lastMessageText = messageText;                            progress.messages.push(update.Message);                             if (!heading.hasClass("collapsed"))                                messageWell.append(update.Message).append($("<br>"));                        }                    }                     if (notNull(update.ErrorMessage).length > 0) {                        var messageText = update.ErrorMessage.substring("[yyyy-MM-dd HH:mm:ss.fff] ".length);                         if (messageText !== progress.lastErrorMessageText) {                            progress.lastErrorMessageText = messageText;                             var message = `<span style="color: red">${update.ErrorMessage}</span>`                            progress.messages.push(message);                             if (!heading.hasClass("collapsed"))                                messageWell.append(message).append($("<br>"));                        }                    }                     if (update.Progress !== undefined || update.ProgressTotal !== undefined) {                        var progressBar = $(`#${fixedDeviceName}CurrentProgress`);                         if (update.Progress !== undefined)                            progress.progress = update.Progress;                         progress.progressTotal = update.ProgressTotal || progress.progressTotal;                        var progressValue = Math.ceil(progress.progress / progress.progressTotal * 100.0);                         if (!heading.hasClass("collapsed") && isNumber(progressValue)) {                            progressBar.text(progressValue.toString() + "%");                            progressBar.css("width", progressBar.text());                             if (progressValue < 100 && !progressBar.hasClass("active"))                                progressBar.addClass("active");                            else if (progressValue == 100 && progressBar.hasClass("active"))                                progressBar.removeClass("active");                        }                    }                     if (update.OverallProgress !== undefined || update.OverallProgressTotal !== undefined) {                        var progressBar = $(`#${fixedDeviceName}OverallProgress`);                         if (update.OverallProgress !== undefined)                            progress.overallProgress = update.OverallProgress;                         progress.overallProgressTotal = update.OverallProgressTotal || progress.overallProgressTotal;                        var progressValue = Math.ceil(progress.overallProgress / progress.overallProgressTotal * 100.0);                         if (!heading.hasClass("collapsed") && isNumber(progressValue)) {                            progressBar.text(progressValue.toString() + "%");                            progressBar.css("width", progressBar.text());                             if (progressValue < 100 && !progressBar.hasClass("active"))                                progressBar.addClass("active");                            else if (progressValue == 100 && progressBar.hasClass("active"))                                progressBar.removeClass("active");                        }                    }                });            }        });         $(function() {            $("#pageHeader").append("@Raw(SearchFilter().ToString().RemoveDuplicateWhiteSpace().Replace("\r\n", ""))");             $("#titleText").html("Records: <span data-bind='text: recordCount'>calculating...</span>");             $("#searchFilter").on("keyup", function(event) {                if ($("#searchFilter").val().length === 0) {                    $('.panel').show();                } else {                    $('.panel').hide();                    $('.panel').filter(function(i,d) {                        return $(d).attr('id').toLowerCase().indexOf($("#searchFilter").val().toLowerCase()) != -1                    }).show();                }            });             ko.applyBindings(viewModel, document.getElementsByTagName("body")[0]);        });         $(window).on("hubConnected", function (event) {            viewModel.queryItems().done(function () {                dataHub.queryDeviceStatus();            });        });         function queueNow(record) {            if (!hubIsConnected)                return;             serviceHub.sendCommand(`INVOKE ${record.Acronym} QueueTasks`);        }         function queueAll() {            for (let i = 0; i < viewModel.items().length; i++) {                queueNow(viewModel.items()[i]);            }        }    </script>}<div class="bs-example">    <div class="panel-group" id="accordion" data-bind="foreach: items">        <div class="panel panel-default" data-bind="attr: {id: $parent.fixAcronym(Acronym) + 'Panel'}">            <div class="panel-heading" >                <h4 class="panel-title">                    <a data-toggle="collapse" data-parent="#accordion" data-bind="attr: {id: $parent.fixAcronym(Acronym) +'Heading','data-target': '#sm' + $parent.fixAcronym(Acronym)}, text: Acronym"></a>                </h4>            </div>            <div data-bind="attr: {id: 'sm' + $parent.fixAcronym(Acronym)}" class="panel-collapse collapse">                <div class="panel-body">                    <div class="table-cell-wrap" data-bind="attr: {id: $parent.fixAcronym(Acronym) + 'Message'}" style="overflow-y: auto; height: 500px; padding: 5px; margin-bottom: 5px; border: 1px solid; border-color: #ddd"></div>                    <div class="progress" style="margin: 0">                        <div class="progress-bar progress-bar-striped active no-transition" role="progressbar" style="width: 0%" data-bind="attr: {id: $parent.fixAcronym(Acronym) + 'CurrentProgress'}">0%</div>                    </div>                    <div class="progress" style="margin-top: 5px; margin-bottom: -5px">                        <div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 0%" data-bind="attr: {id: $parent.fixAcronym(Acronym) + 'OverallProgress'}">0%</div>                    </div>                </div>                <div class="panel-footer">                    <button type="button" class="btn btn-primary" data-bind="click: queueNow.bind($data)">Queue Processing...</button>                </div>                </div>            </div>        </div>    </div></div>@{    ViewBag.StyleSheetsSection = RenderSection("StyleSheets").ToString();    ViewBag.ScriptsSection = RenderSection("Scripts").ToString();}