index.html

<html>
 
<head>
    <title>Codini &ndash; Mobile Code Assistant with a Touch of Magic</title>
 
    <meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta name="apple-touch-fullscreen" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="default">
 
    <!--import some js libraries and css here-->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/animate.css">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

    <script src="sweet-alert.min.js"></script>
    <link rel="stylesheet" type="text/css" href="sweet-alert.css">
 
    <style>
    .full-screen {
        width: 100%;
        height: 100%;
        margin: 0;
        top: 0;
        left: 0;
    }
    .footer {
        width: 100%;
        height: 20px;
        position: absolute;
        bottom: 10;
        left: 0;
        color: #a3a7a8;
        text-align: center;
    }
    .codini_wrapper {
    	text-align: center
    }
    #codini_logo {
    	margin-top: 20px;
    }
    .ipPrompt {
    	font-size: .7em;
    }
    #ipInput {
        border: 0;
        outline: none;
        border-bottom: 1px;
    }
    input {
    	margin-top: 10px;
    	text-align: center;
    }
    #ipInputArea {
    	text-align: center;
    	margin-top:75px;
    	font-size:2em;
    	color:#c0392b
    }
    .btn-xlarge {
        padding: 18px 28px;
        font-size: 22px;
        line-height: normal;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        display: block;
    }
    .navigationBar {
        height: 50px;
        width: 100%;
        background-color: #fff;
        box-shadow: 0px 3px 1px #e3e5e5;
        -webkit-box-shadow: 0px 3px 1px #e3e5e5;
        -moz-box-shadow: 0px 3px 1px #e3e5e5;
        margin-bottom: 3px;
    }
    #logoImage {
        margin: 5 5 5 5px;
    }
    .logoText {
        font-size: 18px;
        vertical-align: center;
        color: #3498db;
    }
    #left-panel {
        height: 100%;
        overflow-y: scroll;
        background-color: #ecf0f1;
        color: #000;
        box-shadow: 0px 0px 1px #e3e5e5;
        -webkit-box-shadow: 0px 0px 6px #e3e5e5;
        -moz-box-shadow: 0px 0px 1px #e3e5e5;
        padding: 10 10 10 10px;
    }
    #right-panel {
        width: 100%;
        height: 100%;
        background-color: #fff;
        color: #000;
        padding: 2 2 2 2px;
    }
    .currentCodeBox {
        border: 1px solid #1abc9c;
        font-size: 18px;
        height: 40px;
        width: 100%;
        vertical-align: middle;
        padding: 7 3 3 10px;
    }
    .suggestionHeader {
        margin-top: 5px;
        color: #e74c3c;
    }
    .suggestionCodeCategory {
        font-size: 24px;
        margin-bottom: 1px;
    }
    .languageIdentifierPill {
        background-color: #e74c3c;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        min-width: 80px;
        color: #fff;
        float: right;
        text-align: center;
        margin-top: 6px;
    }
    .suggestionHeaderDivider {
        margin-top: -3px;
        border-color: #e74c3c;
    }
    .suggestionsBox {
        margin-top: -10px;
        list-style-type: none;
        color: #95a5a6;
        font-size: 18px;
    }
    .suggestionsBox li {
        cursor: pointer;
    }
    #docuFrameView {
        overflow-y: scroll;
        overflow-x: scroll;
        width: 100%;
        height: 100%;
        border: none;
    }
    body {
        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important;
    }
    </style>
 
    <script>
//    console.log = function() {};
 
    function loadLocalFrame(url) {
        console.log("frame loaded with url " + url);
        $("#docuFrameView").attr('src', url);
    }
 
    function connectToWebsocketServer(ipAddress,callback) {
        console.log("connection attempt being made");
        var connected=0;
        //attempt to establish websocket connection
        var connection = new WebSocket('ws://' + ipAddress + ':8080');
        connection.onopen=function(e){
            callback(true)
            connected=1;
            connection.onmessage = function(e) {
                //					console.log(e.data);
                var parsee = $.parseJSON(e.data);
     
                $(".currentCodeBox").html(parsee['word']);
                $(".languageIdentifierPill").html(parsee['syntax']);
     
                var listHtml = '';
                for (index in parsee['matches']) {
                    var a = parsee['matches'][index];
                    //console.log(a);
                    var suggestedWord = a['TokenIdentifier']['Name'];
     
                    console.log("suggestedword" + suggestedWord)
     
                    var suggestedUrl = a['Path']['#text'];
                    console.log(suggestedUrl);
                    var n = suggestedUrl.search("/API/");
                    var linkingUrl = "docs/" + parsee['syntax'] + ".docset/Contents/Resources/Documents/" + suggestedUrl;
                    
                    var suggestedWordHtml1 = suggestedWord.substring(0,suggestedWord.indexOf(parsee['word'])) + "<b>"
                    var suggestedWordHtml2 = parsee['word'] + "</b>"
                    var suggestedWordHtml3 = suggestedWord.substring(suggestedWord.indexOf(parsee['word'])+parsee['word'].length)
                    var finalProduct = "<li onclick=\"loadLocalFrame('" + linkingUrl + "')\">" + suggestedWordHtml1+suggestedWordHtml2+suggestedWordHtml3 + "</li>";
                    listHtml += finalProduct;
                }
                $(".suggestionsBox").html(listHtml);
            }
            
        }
        connection.onerror = function(e) {
            console.log("callback false on the openSocket event--failed")
            //location.reload(true);
            //window.location.href="http://codini.zarv.tk/#fatalWebsocketError";
            callback(false)
        }

        //for stupid devices like the iPad on which onerror isn't called for a while until the connection times out:
        setTimeout(function(){
            if(connected==0){
                callback(false);
            }
        },500);
    }
    var ipEntered = 0;
    $("document").ready(function() {
        window.scrollTo(0, 0);
        $("body").css("overflow-x", "hidden");
        //let's query the local storage for a saved IP
        var previouslySavedIp = localStorage.getItem("hostIp");
        if (previouslySavedIp !== undefined) {
            $('#ipSelectModal').modal('show');
        } else {
            connectToWebsocketServer(previouslySavedIp);
        }
 
        //event handler for modal dismiss and ip save function
        $("#saveIpButton").click(function() {

            console.log("button clicked");
            connectToWebsocketServer($("#ipInput").val(), function(success){
                if(success){
                    console.log("connection success");
                //animate the switching of displays
                $("#splash-screen").addClass('animated bounceOutDown');
                setTimeout(function() {
                    $("#splash-screen").removeClass('bounceOutDown')
                    $("#splash-screen").css('opacity', '0')
                    $("#splash-screen").html($("#main-content").html())
     
                    $("#splash-screen").css('opacity', '1')
                    $("#splash-screen").addClass('bounceInUp')
                }, 1000)
     
                //handle the ip and websocket creation
                ipEntered = 1;
                if (typeof(Storage) !== "undefined") { //if the browser supports local data storage
                    localStorage.setItem("hostIp", $("#ipInput").val());
                    console.log("ip in local storage");
                }
                console.log("ip saved");
                }
                else{
                    console.log("failure of connection; error should be showing");
                    $("#splash-screen").addClass('animated shake');
                    sweetAlert("Oops...", "Error! Connection to server failed. Perhaps you entered the wrong IP address or aren't on the same network as your dev computer?", "error");
                }
            });
        }); //end saveIP event handler for button press after modal dismiss
 
        //delete the cached ip and reload the page
        $("#disconnectButton").click(function() {
            localStorage.setItem("hostIp", null);
            location.reload(true);
        });
 
 
        //ip address validator
        var pattern = /\b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b/;
 
        $('#ipInput').keyup(function() {
 
            var currInput = $('#ipInput').val();
            if (currInput != "localhost") {
 
                var success = pattern.test(currInput);
 
                if (success == true && currInput.split(".").length == 4) {
                    $("#ipInputArea").css({
                        "color": "#2ecc71"
                    }); //GREEN!
                    $("#saveIpButton").fadeIn();
 
                } else {
                    $("#ipInputArea").css({
                        "color": "#c0392b"
                    });
                    $("#saveIpButton").fadeOut();
 
                }
            } else {
                $("#ipInputArea").css({
                    "color": "#2ecc71"
                }); //GREEN!
                $("#saveIpButton").fadeIn();
            }
        });
 
    }); //end onLoad function
    </script>
</head>
 
<body>
    <!--MODAL & ALERT SETUP-->
 
 
    <!-- ipSelectScreen -->
    <div id="splash-screen" style="max-width:100%;z-index: 99999;">
        <!-- <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4"></div>
            <div class="col-lg-4 col-md-4 col-sm-4">
                <h1 style="text-align:center;color:#3498db;margin-top:12%;">Codini</h1>
                <div class="row">
                    <div class="col-lg-2 col-md-2 col-sm-2"></div>
                    <div class="col-lg-8 col-md-8 col-sm-8">
                        <img src="codini-logo.svg" width="100%" id="codini_logo" />
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-2"></div>
                </div>
                <div id="ipInputArea" style="margin-top:10px;font-size:2em;color:#c0392b">
                    <center>
                        <span>IP:</span>
                        <input style="width:45%" type="text" id="ipInput" placeholder="192.168.1.1"></input>
                    </center>
                    <button class="btn btn-xlarge" id="saveIpButton" style="margin-top:10px;margin-left:auto;margin-right:auto;color:#fff;background-color:2ecc71;display:none;">Get Started</button>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4"></div>
        </div> -->
 
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-offset-4">
                <h1 style="font-size:3em;text-align:center;color:#3498db;margin-top:12%;">Codini</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-offset-4">
            	<div class="codini_wrapper">
                	<img src="codini-logo.svg" width="60%" id="codini_logo" />
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-offset-4">
                <div id="ipInputArea">
 
                    <div class="ipPrompt">Enter IP of your computer</div>
                    <input style="width:100%" type="text" id="ipInput" placeholder="192.168.1.1" autofocus></input>
                    <button class="btn btn-xlarge" id="saveIpButton" style="margin-top:10px;margin-left:auto;margin-right:auto;color:#fff;background-color:2ecc71;display:none;">Get Started</button>
 
                </div>
            </div>
        </div>
 
    </div>
 
    <!--start page content-->
    <div id="main-content" style="display:none !important; z-index: 0;">
        <nav class="navigationBar" role="navigation">
            <a href="#">
                <img id="logoImage" src="codini-logo.svg" width="40px" />
                <span class="logoText">Codini</span>
            </a>
            <a href="#">
                <div class="btn btn-warning btn-small pull-right" style="margin-left:7px;margin-top:5px;margin-right:5px;" id="disconnectButton">Disconnect</div>
            </a>
            <a target="_blank" href="https://github.com/jakeaglass/codini">
                <div style="margin-top:5px;" class="btn btn-default btn-small pull-right"><i style="color:#000;" class="logoText fa fa-github"></i></div>
            </a>
        </nav>
 
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6">
                <div id="left-panel">
                    <div class="currentCodeBox"></div>
                    <div class="suggestionHeader">
                        <span class="suggestionCodeCategory">Results</span>
                        <span class="languageIdentifierPill"></span>
                    </div>
                    <hr class="suggestionHeaderDivider"></hr>
                    <ul class="suggestionsBox">
                    </ul>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6">
                <div id="right-panel">
                    <iframe id="docuFrameView" url="http://google.com"></iframe>
                </div>
            </div>
        </div>
 
    </div>
 
    <!--<footer class="footer">&copy; 2014 Jake Glass, Kevin Vincent, and Mihir Trivedi</footer>-->