index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aerohive Stand Alone Tool</title>
    <link type="text/css" rel='stylesheet' href='./css/bootstrap.min.css'>
    <link type="text/css" rel="stylesheet" href="./css/font-awesome.min.css">
    <script type="text/javascript" src='./js/jquery.min.js'></script>
    <script type="text/javascript" src='./js/jquery.qtip.min.js'></script>
    <script type="text/javascript" src='./js/bootstrap.min.js'></script>
    <script type="text/javascript" src='./js/asat.ui.js'></script>
    <link rel="stylesheet" href="./css/asat.css"/>
    <link rel="stylesheet" href="./css/jquery.qtip.min.css"/>
    <link rel="stylesheet" href="./css/ah-styles.min.css"/>
</head>
<script>
    const EventEmitter = require('events').EventEmitter;
    var messenger = new EventEmitter();
    var gui = require('nw.gui');

</script>
<body>
<!-- ============================================ -->
<!-- ================= HEADER =================== -->
<!-- ============================================ -->
<header>
    <!-- Brand and toggle get grouped for better mobile display -->
    <div>
            <span>
                <img id="logo" src="images/aerohive_logo.png">
            </span>
            <span id="asat">
                <span>Aerohive Stand Alone Tool </span><span id="current-release"></span>
            </span>
    </div>
</header>
<!-- ============================================ -->
<!-- ==================== NAV =================== -->
<!-- ============================================ -->
<nav class="ui-content">
    <div>
        <ul class="nav nav-pills nav-stacked">
            <li>
                <a href="#" onclick="main('home')" id="home-button" class="main-button selected">
                            <span class="fa-stack fa-lg">
                              <i class="fa fa-circle-thin fa-stack-2x"></i>
                              <i class="fa fa-home fa-stack-1x "></i>
                            </span>
                    Home
                </a>
            </li>
            <li>
                <a href="#" onclick="main('firewall')" id="firewall-button" class="main-button">
                            <span class="fa-stack fa-lg">
                              <i class="fa fa-circle-thin fa-stack-2x"></i>
                              <i class="fa fa-medkit fa-stack-1x "></i>
                            </span>
                    Troubleshooting
                </a>
            </li>
            <li>
                <a href="#" onclick="main('depl')" id="depl-button" class="main-button">
                            <span class="fa-stack fa-lg">
                              <i class="fa fa-circle-thin fa-stack-2x"></i>
                              <i class="fa fa-cog fa-stack-1x "></i>
                            </span>
                    Deployment
                </a>
            </li>
            <li>
                <a href="#" onclick="main('survey')" id="survey-button" style="display: none;" class="main-button">
                            <span class="fa-stack fa-lg">
                              <i class="fa fa-circle-thin fa-stack-2x"></i>
                              <i class="fa fa-street-view fa-stack-1x "></i>
                            </span>
                    Site Survey
                </a>
            </li>
            <li>
                <a href="#"  onclick="main('update')"id="update-button" class="main-button">
                                <span class="fa-stack fa-lg">
                                  <i class="fa fa-circle-thin fa-stack-2x"></i>
                                  <i class="fa fa-download fa-stack-1x "></i>
                                </span>
                    Update ASAT
                </a>
            </li>
            <li>
                <a href="#" onclick="main('license')" id="license-button" class="main-button" >
                            <span class="fa-stack fa-lg">
                              <i class="fa fa-circle-thin fa-stack-2x"></i>
                              <i class="fa fa-info fa-stack-1x "></i>
                            </span>
                    License
                </a>
            </li>
        </ul>
    </div>
</nav>
<!-- ============================================ -->
<!-- =============== SECTIONS =================== -->
<!-- ============================================ -->

<!-- ============================================ -->
<!-- ==================== HOME ================== -->
<section class="main no-console" id="home">
    <article>
        <h2>Aerohive Stand Alone Tool</h2>
        <p>This is a Free APP built to help Aerohive partners and customers. This APP is designed to provide help
            on site:</p>
        <div class='ui-sec-tle'><h3>Troubleshoot connection issues</h3></div>
                <ul>
                    <li>Aerohive Devices to HiveManager 6 Online servers</li>
                    <li>Aerohive Devices to IDManager services</li>
                    <li>Aerohive Devices to HiveManager NG Online servers</li>
                    <li>Aerohive HiveManager 6 and HiveManager NG Onpremise to Aerohive License server</li>
                    <li>Aerohive HiveManager 6 to IDManager services</li>
                </ul>

            <div class='ui-sec-tle'><h3>Easily deploy new access points</h3></div>
                <ul>
                    <li>Aerohive Devices' CAPWAP client</li>
                    <li>Aerohive Devices' IP Address</li>
                </ul>

                <div class='ui-sec-tle'><h3>Quickly configure an Aerohive Access Point in Site Survey mode</h3></div>
                <ul>
                    <li>Broadcasted SSID</li>
                    <li>Radio parameters</li>
                    <li>IP address parameters</li>
                    <li>IPERF parameters</li>
                </ul>


        </div>
    </article>
</section>
<!-- ============================================ -->
<!-- =================== FIREWALL =============== -->
<section class="main no-console" id="firewall" style="display: none">
    <article>
        <table class="breadcrumb-table firewall">
            <tbody>
            <tr>
                <td>
                    <span>Test Type</span>
                </td>
                <td>
                    <span>Service Type</span>
                </td>
                <td>
                    <span>Test</span>
                </td>
            </tr>
            <tr class="breadcrumb-row firewall">
                <td>
                        <i class="fa fa-circle fa-lg firewall-button" id="firewall-test-type"></i>
                </td>
                <td>
                        <i class="fa fa-circle-o fa-lg firewall-button" id="firewall-service"></i>
                </td>
                <td>
                        <i class="fa fa-circle-o fa-lg firewall-button" id="firewall-test-run"></i>
                </td>
            </tr>
            </tbody>
        </table>
    </article>
    <article id="firewall-test">
    </article>
    <article id="firewall-action" class="action no-console">
    </article>

</section>
<!-- ============================================ -->
<!-- =================== DEPLOYMENT ============= -->
<section class="main no-console" id="depl" style="display: none">
    <article>
        <table class="breadcrumb-table depl">
            <tbody>
            <tr>
                <td>
                    <span>Find</span>
                </td>
                <td>
                    <span>Common</span>
                </td>
                <td>
                    <span>Network</span>
                </td>
                <td>
                    <span>Deploy</span>
                </td>
            </tr>
            <tr class="breadcrumb-row depl">
                <td>
                    <i class="fa fa-circle fa-lg depl-button" id="depl-find"></i>
                </td>
                <td>
                    <i class="fa fa-circle-o fa-lg depl-button" id="depl-common"></i>
                </td>
                <td>
                    <i class="fa fa-circle-o fa-lg depl-button" id="depl-network"></i>
                </td>
                <td>
                    <i class="fa fa-circle-o fa-lg depl-button" id="depl-deploy"></i>
                </td>
            </tr>
            </tbody>
        </table>
    </article>
    <article id="depl-window">
    </article>
    <article id="depl-action" class="action no-console">
    </article>

</section>
<!-- ============================================ -->
<!-- =================== SITE SURVEY ============ -->
<section class="main no-console" id="survey" style="display: none">

</section>

<!-- ============================================ -->
<!-- =================== LICENSE ================ -->
<section class="main no-console" id="license" style="display: none">
</section>
<!-- ============================================ -->
<!-- =================== UPDATES ================ -->
<section class="main no-console" id="update" style="display: none">
</section>
<!-- ============================================ -->
<!-- =================== FOOTER ================= -->
<!-- ============================================ -->

<!-- ============================================ -->
<!-- =================== CONSOLE ================ -->
<footer id="console-footer" class="no-console">
    <a href="#" id="console-button">
        <i id="fa-console" class="fa fa-angle-down fa-lg"></i>
        <span>Console</span>
    </a>
    <div id="console" name="console" class="no-console"></div>
</footer>
<script type="text/javascript" src='js/asat.console.js'></script>
<script>
    $("#current-release").html(gui.App.manifest.version);
    $("#console-button").click(function () {
        if ($("#console-footer").hasClass("console")) {
            $("#console").removeClass("console").addClass("no-console");
            $("#console-footer").removeClass("console").addClass("no-console");
            $("#fa-console").removeClass("fa-angle-down").addClass("fa-angle-up");
            $(".console").removeClass("console").addClass("no-console");
        } else {
            $("#console").removeClass("no-console").addClass("console");
            $("#console-footer").removeClass("no-console").addClass("console");
            $("#fa-console").removeClass("fa-angle-up").addClass("fa-angle-down");
            $(".no-console").removeClass("no-console").addClass("console");
        }
    })
</script>
<!-- ============================================ -->
<!-- ================= JAVASCRIPT =============== -->
<!-- ============================================ -->
<script type="text/javascript" src='js/asat.dhcp.js'></script>

<!-- ============================================ -->
<!-- ================= LICENSE ================== -->
<script type="text/javascript" src='js/asat.license.js'></script>
<!-- ============================================ -->
<!-- ================= UPDATE =================== -->
<script type="text/javascript" src='js/asat.update.js'></script>

<!-- ============================================ -->
<!-- ================= FIREWALL ================= -->
<script type="text/javascript" src='libs/net.udp.js'></script>
<script type="text/javascript" src='libs/net.tcp.js'></script>
<script type="text/javascript" src='libs/net.http.code.js'></script>
<script type="text/javascript" src='libs/net.http.js'></script>
<script type="text/javascript" src='libs/net.https.js'></script>
<script type="text/javascript" src='js/asat.firewall.js'></script>

<!-- ============================================ -->
<!-- ================= DEPLOYMENT =============== -->
<script type="text/javascript" src='js/asat.deployment.js'></script>

<!-- ============================================ -->
<!-- ================= DEPLOYMENT =============== -->
<script type="text/javascript" src='js/asat.survey.js'></script>
<!-- ============================================ -->
<!-- ==================== MAIN ================== -->
<script>
    function main(tab) {
        $(".main").hide();
        $(".main-button").removeClass("selected");
        $('#' + tab).show();
        $('#' + tab + "-button").addClass("selected");
        switch (tab) {
            case "firewall":
                initFirewallTest();
                break;
            case "depl":
                initDeployment();
                break;
            case "survey":
                initSurvey();
                break;
            case "license":
                displayLicense();
                break;
            case "update":
                displayUpdate();
                break;
        }
    }
    var asatConsole = new Console();
    asatConsole.log("All systems are running.");

</script>

</body>
</html>