Source

POS Front End Updated UI / templates / pastOrder.html

Full commit
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <title id="systemName">Mobile POS</title>
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
    </head>
    <body>
        <div class="navbar-inner ">
            <div class="container">
                <div class="navbar ">
                    <!-- HOME BTN -->
                    <a class="btn btn-info pull-left" href="/" style="display: inline-block">
                        <i class="icon-arrow-left"></i>Home </a>
                    <a class="brand" style="margin-left: 250px">&nbsp;&nbsp; Retrieve Past Order </a>

                </div>
            </div>
        </div>

        <!--Div for user to input email-->
        <div class="container" id="inputEmailDiv">
            <div class="span2"></div>
            <div class="span7">
                <br/>

                <!--Email address -->
                <div class="row well" style="margin-left: 10px"> 
                    <form class="form-horizontal2 ">
                        <legend> Enter the email you have registered with us </legend>

                        <div class="control-group">
                            <label class="control-label" for="emailAddress">Email Address </label>
                            <div class="controls">
                                <input type="text" id="emailAddress" placeholder="Email Address">
                            </div>
                        </div>

                    </form>
                    <p class="text-info">
                        <small>Note: only the last 5 orders will be retrieved </small>
                    </p>
                    <p class="text-warning" id ="errorMessageNoOrder" style="display: none" >

                    </p>
                    <button class="btn  btn-info pull-right" id="btnRetrieveOrder" type="button">Retrieve my past order!</button>

                </div>

            </div>
        </div>
        <!-- End of user input div -->

        <!-- Start of retrieved order div -->
        <div class ="container" id ="retrievedOrder" style="display: none" >
            <div class="row-fluid">
                <!-- navigation for recipet -->
                <div class="span3">
                    <br>
                    <ul class="nav nav-list affix-top" id="receiptNav">
                        <li class="nav-header">Orders ( Recent at the top)</li>
                    </ul>

                </div>

                <!-- reciept details -->
                <div class="span8" style="margin-left:50px" >
                    </br>
                    <h4 style="margin-left:-20px"> Products Ordered </h4>
                    <div id="receiptDetail">
                    </div>
                </div>

            </div>
        </div>
        <!-- End of retrieved order div --> 


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>

        <script>
            
            var hasOrders = 0;
            
            $('#btnRetrieveOrder').click(function() 
            {
                
                if(validateEmailInput() == false){
                    $('#errorMessageNoOrder').show();
                    return;
                }
                
                getEmailDetail();
                
          
                if(hasOrders)
                {
                    console.log("came inside here have order");
                    $('#inputEmailDiv').hide();
                    $('#retrievedOrder').show();
                }
                else {
                    console.log("no orders");
                    var errorMsgDiv =  document.getElementById("errorMessageNoOrder");
                    errorMsgDiv.innerHTML = "No orders found!";
                    $('#errorMessageNoOrder').show();
                }

                
            });
            
            function validateEmailInput() {
                var email = $('#emailAddress').val();
                var errorMsgDiv =  document.getElementById("errorMessageNoOrder");
                    
                if(email.toString().length ==0)
                {
                    errorMsgDiv.innerHTML = "Email can't be empty!";
                    return false;
                }
                
                if(isValidEmailAddress(email) == false){
                    errorMsgDiv.innerHTML = "Invalid email format!";
                    return false;
                }
                return true;
                
            }
            
            function isValidEmailAddress(emailAddress) {
                var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
                return pattern.test(emailAddress);
            };

            
            function getEmailDetail()
            {
                var email = $('#emailAddress').val();
                console.log("finding product email = " + email);
                
                $.ajax({
                    url:  "http://lowe.jschua.com/DinoPos/api/orders/?email=" + email,
                    dataType: 'json',
                    async:false,
                    success:function(data) {
                        $.each(data, function (key, val) {
                            var receiptId = val.Receiptid;
                            var orderId = val.Order_ID;
                        
                            hasOrders = 1;
                       
                            if(key <5) 
                            {
                                //add the receipt id to the list
                                if(key ==0) 
                                {
                                    var receiptNavDetail =  '<li id=\"'+orderId+'\" class=\"active\" onclick=\"loadReceipetDetail('+orderId+')\"><a href=\"#\"><br>Receipt id: '+ receiptId +'<i class=\"icon-chevron-right pull-right\"></i></a></li>';
                                    loadReceipetDetail(orderId);
                                }
                                else
                                    var receiptNavDetail =  '<li id=\"'+orderId+'\" onclick=\"loadReceipetDetail('+orderId+')\"><a href=\"#\"><br>Receipt id: '+ receiptId +'<i class=\"icon-chevron-right pull-right\"></i></a></li>';
                                $('#receiptNav').append(receiptNavDetail);
                            }
                        });
                    }
                });
            }
            
            function loadReceipetDetail(orderId){
                console.log("finding order id =  !" +orderId); 
                
                setFieldActive(orderId);
                
                this.className ="active";
                
                clearExistingProduct();
                
                $.getJSON("http://lowe.jschua.com/DinoPos/api/orders/" + orderId,
                function (val) {
                   
                    $.each(val.OrderDets, function (key2, det) {
                        loadProductDetail(det.Product_ID,det.Quantity,det.Netprice);
                    });
                        
                })
                .fail(
                function (jqXHR, textStatus, err) {
                    console.log('error :'+err);
                });
                
                
            }
            
            function loadProductDetail(productId,quantityOrdered,totalPrice) {
                
                console.log("searching for product id =="+productId);
                
                $.getJSON("http://lowe.jschua.com/DinoPos/api/products/" + productId,
                function (val) {
                    
                    var divInPlace =  document.getElementById("receiptDetail");
            
                    //creating display content
                    
                    //creating row well
                    var mainDiv = document.createElement("div");
                    mainDiv.className = "row well";
                    
                    //creating image left col
                    var leftDiv = document.createElement("div");
                    leftDiv.className="span3";
                    var productImageHtml = "<img class=\"img-rounded\" style=\"margin-left:10px\" src =\" "+val.ImageUrl+" \" >";
                    leftDiv.innerHTML = productImageHtml;
                
                    //creating the right col (product info)
                    var rightDiv = document.createElement("div")
                    rightDiv.className ="span3";
                    var productBrand = "<h6> Product Brand: " + val.Brand + "</h6>";
                    var priceQtyTotal = "<p> Name: "+ val.Name + "</br> Price Each: "+val.Pricesell +"</br> Quantity ordered: "+quantityOrdered+ "</br> Sub Total: "+totalPrice+" </p>";
                    rightDiv.innerHTML = productBrand + priceQtyTotal;
                    
                    mainDiv.appendChild(leftDiv);
                    mainDiv.appendChild(rightDiv);
                    
                    divInPlace.appendChild(mainDiv);
                    //$('#receiptDetail').appendChild(mainDiv);
                    
                })
                .fail(
                function (jqXHR, textStatus, err) {
                    console.log("Error =="+err);
                });

            }
            
            function setFieldActive(orderId) {
                
                var node = document.getElementById("receiptNav").childNodes;
                
                for(i=0;i<node.length;i++)
                {
                    if(node[i].id != orderId)
                        node[i].className = "";
                    else
                        node[i].className ="active";
                }
               
            }
            
            function clearExistingProduct() {
                 
                var myNode = document.getElementById("receiptDetail");
               
                while (myNode.firstChild) {
                    myNode.removeChild(myNode.firstChild);
                }
                
            }
        
            
        </script>
    </body>
</html>