@*******************************************************************************************************
//  RemoteConsole.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.
//
//*****************************************************************************************************@
@using GSF.Web
@using GSF.Web.Model
@using GSF.Web.Shared
@using System.Net.Http
@inherits ExtendedTemplateBase
@{
    ViewBag.Title = "Remote Service Console";
}
@section StyleSheets {
    <style>
        html, body {
            height: 100%;
        }

        .remote-console {
            background-color:black;
            padding:10px;
            overflow: auto;
        }

        /* Auto font resize CSS for remote console window - targeting fixed 80 char width without wrap */
        @@media screen {
            .remote-console {
                font-size: 5.25px;
            }
        }
        
        @@media screen and (min-width: 430px) {
            .remote-console {
                font-size: 7px;
            }
        }

        @@media screen and (min-width: 470px) {
            .remote-console {
                font-size: 8px;
            }
        }

        @@media screen and (min-width: 515px) {
            .remote-console {
                font-size: 9px;
            }
        }

        @@media screen and (min-width: 550px) {
            .remote-console {
                font-size: 10px;
            }
        }

        @@media screen and (min-width: 600px) {
            .remote-console {
                font-size: 11px;
            }
        }

        @@media screen and (min-width: 635px) {
            .remote-console {
                font-size: 12px;
            }
        }

        @@media screen and (min-width: 685px) {
            .remote-console {
                font-size: 13px;
            }
        }

        @@media screen and (min-width: 725px) {
            .remote-console {
                font-size: 14px;
            }
        }
    </style>
}
@{
    HttpRequestMessage request = ViewBag.Request;
    Dictionary<string, string> parameters = request.QueryParameters();
    string filter;
    string command;
    if (!parameters.TryGetValue("filter", out filter)) {
        filter = "Filter -Remove 0";
    }

    if (!parameters.TryGetValue("command", out command)) {
        command = "";
    }

}
@section Scripts {
    <script src="@Resources.Root/Shared/Scripts/js.cookie.js")"></script>
    <script>
        const defaultRemoteConsoleEntries = 100;
        const minimumRemoteConsoleEntries = 10;
        var overRemoteConsole = false;
        var totalRemoteConsoleEntries = Cookies.get("totalRemoteConsoleEntries");

        function scrollRemoteConsoleToBottom() {
            var remoteConsole = $("#remoteConsoleWindow");
            remoteConsole.scrollTop(remoteConsole[0].scrollHeight);
        }

        // Register SignalR client functions before hub connection
        $(window).on("beforeHubConnected", function (event) {
            // Create a function that the hub can call to broadcast new remote console messages
            serviceHubClient.broadcastMessage = function (message, color) {
                // Html encode message
                var encodedMessage = $("<div />").text(message).html();
                var remoteConsole = $("#remoteConsoleWindow");

                remoteConsole.append("<span style='color: " + color + "'>" + encodedMessage + "</span>");

                if (remoteConsole[0].childElementCount > totalRemoteConsoleEntries)
                    remoteConsole.find(":first-child").remove();

                if (!overRemoteConsole)
                    scrollRemoteConsoleToBottom();
            }
        });

        $(function () {
            // Initialize default setting for total remote console entries
            if (totalRemoteConsoleEntries === undefined)
                totalRemoteConsoleEntries = defaultRemoteConsoleEntries;

            // Set initial text input values
            $("#remoteConsoleTotalEntriesTextInput").val(totalRemoteConsoleEntries.toString());
            $("#remoteConsoleTotalEntriesTextInput").attr("min", minimumRemoteConsoleEntries.toString());

            $("#remoteConsoleSettingsShowButton").click(function () {
                $("#remoteConsoleSettingsForm").toggle();

                if ($("#remoteConsoleSettingsForm").is(":visible"))
                    $("#remoteConsoleTotalEntriesTextInput").focus();
            });

            $("#setTotalRemoteConsoleEntriesButton").click(function () {
                totalRemoteConsoleEntries = parseInt($("#remoteConsoleTotalEntriesTextInput").val());

                if (totalRemoteConsoleEntries < minimumRemoteConsoleEntries)
                    totalRemoteConsoleEntries = minimumRemoteConsoleEntries;

                Cookies.set("totalRemoteConsoleEntries", totalRemoteConsoleEntries, { expires: 365 });
                $("#remoteConsoleTotalEntriesTextInput").val(totalRemoteConsoleEntries.toString());
                $("#remoteConsoleSettingsForm").hide();
            });

            // Prevent default form submission when user presses enter
            $("#remoteConsoleSettingsForm").submit(function () {
                return false;
            });

            $("#remoteConsoleTotalEntriesTextInput").keyup(function (event) {
                if (event.keyCode === 13)
                    $("#setTotalRemoteConsoleEntriesButton").click();
            });

            // Auto-hide pop-up form when user clicks outside form area
            $("#remoteConsoleSettingsForm").focusout(function () {
                if (!$("#remoteConsoleSettingsForm").is(":hover") && !$("#remoteConsoleSettingsShowButton").is(":hover"))
                    $("#remoteConsoleSettingsForm").hide();
            });

            $("#remoteConsoleSettingsCloseButton").click(function () {
                $("#remoteConsoleSettingsForm").hide();
            });

            // Set the client filter to the value of the
            // filter parameter that came from the URL
            $(window).on("hubConnected", function (event) {
                serviceHub.sendCommand("@Raw(filter.JavaScriptEncode())").done(function () {
                    var command = "@Raw(command.JavaScriptEncode())"
                    if (command !== "")
                        serviceHub.sendCommand(command);
                });
            });

            $("#remoteConsoleWindow").mouseenter(function () {
                $("#remoteConsolePausedLabel").show();
                overRemoteConsole = true;
            });

            $("#remoteConsoleWindow").mouseleave(function () {
                $("#remoteConsolePausedLabel").hide();
                overRemoteConsole = false;
                scrollRemoteConsoleToBottom();
            });

            $(window).resize(function () {
                scrollRemoteConsoleToBottom();
            });

            $(window).on("onMessageVisibiltyChanged", function (event) {
                scrollRemoteConsoleToBottom();
            });

            $("#sendCommandButton").click(function () {
                // Call the send command method on the hub
                if (hubIsConnected)
                    serviceHub.sendCommand($("#commandTextInput").val());

                // Clear text box and reset focus for next command
                $("#commandTextInput").val("").focus();
            });

            $("#commandTextInput").keyup(function (event) {
                if (event.keyCode === 13)
                    $("#sendCommandButton").click();
            });

            $("#bodyContainer").addClass("fill-height");
            $("#commandTextInput").focus();
        });
    </script>
}
@{
    ViewBag.StyleSheetsSection = RenderSection("StyleSheets").ToString();
    ViewBag.ScriptsSection = RenderSection("Scripts").ToString();
}
<div class="well" content-fill-height>
    <button class="btn btn-link btn-xs" id="remoteConsoleSettingsShowButton">Settings</button>
    <label class="small pull-right" id="remoteConsolePausedLabel" style="display: none"><small><em>Scrolling paused during mouse interaction...</em></small></label>
    <div class="well well-sm floating-form" id="remoteConsoleSettingsForm" style="z-index: 1000">
        <form class="form-inline" role="form">
            <div class="form-group form-group-sm">
                <a href="#" class="close" aria-label="close" id="remoteConsoleSettingsCloseButton">&times;</a>
                <label for="remoteConsoleTotalEntriesTextInput">Total console entries:</label>
                <div class="input-group col-xs-4" style="min-width: 100px">
                    <input type="number" class="form-control input-sm" id="remoteConsoleTotalEntriesTextInput">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default btn-xs input-sm" id="setTotalRemoteConsoleEntriesButton">Set</button>
                    </span>
                </div>
            </div>
        </form>
    </div>
    <pre id="remoteConsoleWindow" class="small remote-console fill-height"></pre>
    <div class="input-group">
        <input type="text" id="commandTextInput" class="form-control" placeholder="Server command..." />
        <span class="input-group-btn">
            <button type="button" id="sendCommandButton" class="btn btn-default" hub-dependent>Send</button>
        </span>
    </div>
</div>