wifi-pineapple-community/modules/src/Terminal/html/inject.html

<style>
.terminal-container {
    width: 100%;
    position: fixed;
    bottom: 0;
    margin-bottom: 0;
    background-color: #2b2b2b;
    border-width: 1px 0 0 0;
    border-radius: 4px 4px 0 0;
    z-index: 999;
}

.terminal-content {
    width: 100%;
    border: 0;
}

#terminal-panel {
    cursor: n-resize;
}

.terminal-collapse {
    width: 16px;
    content: url('/img/chevron_up.svg');
    vertical-align: middle;
}

.terminal-collapse.collapsed {
    content: url('/img/chevron_down.svg');
}

.module-content {
    padding-bottom: 60px;
}
</style>

<div id="terminal-module" class="panel panel-default terminal-container collapse">
    <div id="terminal-panel" class="panel-heading">
        <a id="terminal-close" class="close">&times;</a>
        <h4 class="panel-title">
            <span data-toggle="collapse" data-target="#terminal" class="terminal-collapse chevron pointer"></span>
            Terminal
            <img id="terminal-socket-status" width="10px" src="modules/Terminal/img/disconnected-dot.png">
        </h4>
    </div>
    <div id="terminal" class="panel-collapse collapse"></div>
</div>

<script type="text/javascript">
$(function() {
    //registerController('TerminalController', ['$scope', '$api', function($scope, $api){
    var $scope = {};
    var $api = window.pineapple;

    $scope.status = false;

    $scope.openTerminalPanel = (function () {
        $('#terminal-open').addClass('active');
        $('#terminal-module').collapse('show');
        $('#terminal').collapse('show').append('<iframe id="terminal-iframe" class="terminal-content"src="modules/Terminal/html/iframe.html"></iframe>');

        var iframe = document.getElementById("terminal-iframe");
        if (typeof iframe.contentWindow.addEventListener != "undefined") {
            iframe.contentWindow.addEventListener("wsterminal", function(event) {
                if (event.detail.status) {
                    var statusImage = (event.detail.status ? "connected-dot.png" : "disconnected-dot.png");
                    $("#terminal-socket-status").attr("src", "modules/Terminal/img/" + statusImage);
                }
            });
        }

        $("#terminal").resizable({
            handleSelector: "#terminal-panel",
            resizeWidth: false,
            resizeHeightFrom: "top",
            onDrag: function(event, el) {
                $("#terminal-iframe").height( el.height() );
            },
        });
    });

    $scope.closeTerminalPanel = (function () {
        $('#terminal-open').removeClass('active');
        $('#terminal-module').collapse('hide');
        $('#terminal').empty();
    });

    $scope.openTerminal = (function () {
        if ($scope.status) {
            return;
        }

        $api.request({
            module: 'Terminal',
            action: 'startTerminal'
        }, function(data) {
            if (data.error === undefined && data.success){
                $scope.status = true;
                $scope.openTerminalPanel();
            }
        });
    });

    $scope.closeTerminal = (function () {
        $api.request({
            module: 'Terminal',
            action: 'stopTerminal'
        }, function(data) {
            if (data.error === undefined && data.success){
                $scope.status = false;
                $scope.closeTerminalPanel();
            }
        });
    });

    $scope.checkStatus = (function () {
        $api.request({
            module: 'Terminal',
            action: 'getStatus'
        }, function(data) {
            if (data.error === undefined && data.status){
                $scope.status = true;
                $scope.openTerminalPanel();
            }
        });
    });

    $('#terminal-open').click(function(event) {
        $scope.openTerminal();
    });

    $('#terminal-close').click(function(event) {
        $scope.closeTerminal();
    });

    $scope.checkStatus();
});
</script>