Commits

Anonymous committed a0c86ed Draft

fixed the number overflow bug

  • Participants
  • Parent commits 9f443ef

Comments (0)

Files changed (15)

File build/web/confirmOrderTemplate.html

-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <title>Mobile POS</title>
-
-        <!-- Le styles -->
-        <link href="css/bootstrap.css" rel="stylesheet">
-        <link href="css/pageNatestyle.css" rel="stylesheet">
-        <style>
-            .demo{
-                width:580px;
-                padding:10px;
-                margin:10px auto;
-                border: 1px solid #fff;
-                background-color:#f7f7f7;
-            }
-        </style>
-    </head>
-
-    <body>
-        <div class="container">
-            <img src="http://placehold.it/940x150" />
-        </div>
-        <br><br>
-
-        <div class="container">
-            <div class="row">
-
-
-                <div class="span12" id="divMainProductCol">  <!--start of second col for product search -->
-
-                    <h5> Enter Product ID or name to search </h5>
-                    <p/>
-
-                    <input id="productSearchKey" type="text" placeholder="Product ID or name" class="input-large search-query">
-                    <button type="submit" onclick=searchProduct() class="btn" id="btnProductSearch">Search</button>
-
-                    <div class="row"  id="divSubProductCol">
-
-                    </div>
-
-                    <div class ="pagination" id="productPagination">
-                        <!--
-                          <ul>
-  
-                          <li>Prev</li>
-                          <li><a href="#">1</a></li>
-                          <li><a href="#">2</a></li>
-                          <li><a href="#">3</a></li>
-                          <li><a href="#">4</a></li>
-                          <li><a href="#">Next</a></li>
-                           </ul>
-                        -->
-                    </div>
-
-                    <!--  <div class ="row demo" id ="demo11232">
-                      </div> -->
-
-
-                </div> <!--end of second col -->
-
-
-            </div>
-
-
-
-            <div class="row">
-                <h4> Items added </h4>
-                <table class ="table table-striped" style="background-color:white" id="productTable"  >
-                    <thead>
-                        <tr>
-                            <th >Name &nbsp&nbsp&nbsp&nbsp</th>
-                            <th>Qty</th>
-                            <th>Each</th>
-                            <th>Total</th>
-                            <th></th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    </tbody>
-                </table>
-
-                <br/>
-
-                <div class="row"> <!--start of row-->
-                    <div class="span2">
-                        Tax:      Total:
-                    </div>
-
-
-                </div> <!--end of row-->
-
-                <br/><br/>
-
-                <div class="row"> <!--start of btm row for pay and cancel order -->
-                    <div class="span3">
-                        <button class="btn btn-large btn-danger" type="button" id="clearFormBtn">Remove all products</button>
-                    </div>
-                    <div class="span3">  
-                        <button class="btn btn-large btn-primary" type="button" id="PayBtn" > Pay </button>
-                    </div>
-
-                </div> <!-- end of btm row for pay and cancel order -->
-
-
-
-            </div> <!--end of first col -->
-        </div>
-
-        <!-- jQuery via Google + local fallback, see h5bp.com -->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-
-        <!-- Bootstrap JS: compiled and minified -->
-        <script src="js/bootstrap.min.js"></script>
-
-        <script src="js/jquery.chromatable.js"></script>
-
-        <script src="js/json2.js"></script>
-
-        <script src="js/jquery.paginate.js"></script>
-
-        <script>
-            
-            function validateSearchField() {
-                 
-                var productSearch = $('#productSearchKey').val();
-                if(productSearch.length==0)
-                {
-                    alert("Please do not leave product ID hehe or name blank!");
-                    return false;
-                }
-                
-            }
-            
-            function searchProduct() {
-                
-                var ifFieldValid = validateSearchField();
-                if(ifFieldValid == false)
-                    return;
-                
-                var searchKeyword = $('#productSearchKey').val();
-                
-                console.log("product searchKey val =="+searchKeyword);
-                
-                var url; 
-                if(isNumber(searchKeyword))
-                    url = "http://lowe.jschua.com/DinoPos/api/products/" +searchKeyword;
-                else
-                    url = "http://lowe.jschua.com/DinoPos/api/products/?name=" +searchKeyword;
-                
-                // console.log(url);
-                
-                var totalProductFound = 0;
-                
-                $.ajax({
-                    url: url,
-                    dataType:'json',
-                    async:false,
-                    success:function(data){
-                        clearSearchResult();
-                    
-                        if(data!=null)
-                        {
-                            if(data instanceof Array)
-                            {
-                                // On success, 'data' contains a list of products.
-                                $.each(data, function (key, val) {
-                                    console.log(val.Name);
-                                
-                                    displayProductInfo(val,totalProductFound);
-                                    totalProductFound++;
-                                });
-                            }
-                            else
-                            {
-                                for(var i =0;i<7;i++)
-                                {
-                                    displayProductInfo(data,totalProductFound);
-                                    totalProductFound++;
-                                }
-                                console.log(data.Name);
-                            }
-                        }
-                    }
-                    
-                }).done(createPagnation(totalProductFound));
-               
-            }
-            
-            //global var 
-            var currentPage=1; //edited in showPage
-            var totalPage=0; //set in createPagnation
-             
-            function createPagnation(totalElement)
-            {
-                totalPage = Math.ceil(totalElement/2);
-                
-                var mainUl = document.createElement("ul");
-                console.log("number==!"+totalElement);
-                
-                var subUl = document.createElement("li");
-                subUl.className ="prev disabled"
-                subUl.innerHTML ="<a href=\"#\" onClick=\"showPage(-1)\">Prev</a>";
-                mainUl.appendChild(subUl);
-                //for(var i =1;i<=number;i++)
-                for(var x=1;x<=Math.ceil(totalElement/2);x++)
-                {
-                   
-                    var subUl = document.createElement("li");
-                    subUl.className =x;
-                    if(x==1)
-                        subUl.className = subUl.className +" active";
-                    subUl.innerHTML ="<a href=\"#\" onClick=\"showPage("+x+")\">"+x+"</a>";
-                    // subUl.onclick = showPage(subUl.innerHTML);
-                    //subUl.on("click",showPage(subUl.innerHTML));
-                    mainUl.appendChild(subUl);
-                }
-                var subUl = document.createElement("li");
-                subUl.innerHTML ="<a href=\"#\" onClick=\"showPage(0)\">Next</a>";
-                subUl.className = "next";
-                mainUl.appendChild(subUl);
-                
-                var test = document.getElementById("productPagination");
-                test.appendChild(mainUl);
-                
-            }
-            
-            /**
-             *Method take in the page number depending on what user selected.
-             *if pageNumber == 0, it means user clicked next button
-             *if pageNumber ==-1, it means user clicked previous button
-             */
-            function showPage(pageNumber)
-            {
-            
-                $('#productPagination ul li.'+currentPage).removeClass('active');
-                
-                //-1 = prev, 0 = next
-                if(pageNumber!=-1 && pageNumber!=0){
-                    currentPage = pageNumber;
-                }
-                else if(pageNumber==-1) //prev was selected
-                {
-                    if(currentPage!=1)
-                    {
-                        currentPage = currentPage-1;
-                        pageNumber = currentPage;
-                    }else{
-                        pageNumber=1;
-                    }
-                }
-                else if(pageNumber==0) //next was selected
-                {
-                    if(currentPage!=totalPage){
-                        currentPage = currentPage+1;
-                        pageNumber = currentPage;
-                    }else{
-                        pageNumber=totalPage;
-                    }
-                }
-                
-                
-                $('._current','#divSubProductCol').removeClass('_current').hide();
-                
-                var productNo1;
-                if(pageNumber==1){    
-                    productNo1 = 0;
-                }
-                else{    
-                    productNo1 = (pageNumber-1)*2;
-                }
-                var productNo2 = productNo1+1;
-               
-                
-                $('#productNo_'+productNo1).addClass('_current').show();
-                $('#productNo_'+productNo2).addClass('_current').show();
-              
-              
-              
-                /**
-                 *below code to disable the pageNumber button
-                 */
-                //console.log($('#productPagination ul li.next'));
-                //$('#productPagination ul li.next').addClass('disabled');
-                if(pageNumber!=0 && pageNumber!=-1){
-                    $('#productPagination ul li.'+pageNumber).addClass('active');
-                    $('#productPagination ul li.next').removeClass('disabled');
-                    $('#productPagination ul li.prev').removeClass('disabled');
-                }
-                if(pageNumber ==totalPage){
-                    $('#productPagination ul li.next').addClass('disabled');
-                }
-                if(pageNumber ==1){
-                    $('#productPagination ul li.previous').addClass('disabled');
-                }   
-              
-              
-              
-            }
-            
-            
-            /**
-             *function clear the pagnation and the searchresult
-             */
-            function clearSearchResult()
-            {
-         
-                if($('#divSubProductCol').children().length >0)
-                {
-                    $('#divSubProductCol').empty();
-                }
-                if($('#productPagination').children().length >0)
-                {
-                    $('#productPagination').empty();
-                }
-            }
-            
-            function displayProductInfo(val,productNumbering)
-            {
-                var divInPlace =  document.getElementById("divSubProductCol"); // $('#divSubProductCol');
-                  
-                var mainDiv = document.createElement("div");
-                //mainDiv.className ="row";
-                mainDiv.id = "productNo_"+productNumbering;
-                
-               
-                if(productNumbering >1)
-                {
-                    mainDiv.setAttribute("style", "display:none")
-                    mainDiv.className ="pagedemo";
-                }
-                else
-                {
-                    mainDiv.className ="pagedemo _current";
-                }
-                    
-            
-                var divForImage = document.createElement("div");
-                divForImage.className ="span2";
-                divForImage.innerHTML ="<img src=\""+val.ImageUrl+"\" height=150 width=150>"
-                               
-                var divForProductInfo = document.createElement("div");
-                divForProductInfo.className ="span4";
-                divForProductInfo.setAttribute("id", "div_"+val.Product_ID);
-                var productBrand = "<h3> <span id=\"productBrand\">"+val.Brand+"</span></h4>";
-                var productTitle = "<h4> <span id=\"productTitle\">"+val.Name+"</span></h4>";
-                var productDescription ="<h6> <span id=\"productDescription\">"+val.Description+"</span></h6>";
-                var productPrice = "<h6> Price $<span id=\"productPrice\">"+val.Pricesell+"</span> </h6>";
-                var qtyText ="Qty"
-                //var qtyText = "</p><p class=\"span1\" align=\"left\"> Qty </p>";
-                divForProductInfo.innerHTML= productBrand+productTitle+productDescription+productPrice+qtyText;
-                                
-                var addToCartButton = document.createElement("input");
-                addToCartButton.setAttribute("id",val.Product_ID);
-                addToCartButton.setAttribute("type","button");
-                var info = "addItemToTable("+val.Product_ID+")"
-                addToCartButton.setAttribute("onClick",info);
-                addToCartButton.setAttribute("value","Add this item to cart!");
-                addToCartButton.className ="btn span4";
-                                
-                var qtyTextField = document.createElement("input")
-                qtyTextField.setAttribute("type", "text");
-                qtyTextField.setAttribute("id","qty");
-                qtyTextField.setAttribute("text","1");
-                qtyTextField.className ="input-small";
-                                
-                divForProductInfo.appendChild(qtyTextField);
-                divForProductInfo.appendChild(addToCartButton);
-                                
-                mainDiv.appendChild(divForImage);
-                mainDiv.appendChild(divForProductInfo); 
-               
-                divInPlace.appendChild(mainDiv);
-            }
-            
-            function isNumber (o){
-                return ! isNaN (o-0) && o != null;
-            }
-   
-            function checkFormValidation(){
-                console.log("check form validation");
-  		
-                if($("#textCustomerName").val().length==0)
-                {
-                    alert("Customer name cannot be blank");
-                    return false;
-                }
-                if($("#textCustomerAddress").val().length==0)
-                {
-                    alert("Customer address cannot be blank");
-                    return false;
-                }
-                if($("#textCustomerContact").val().length==0)
-                {
-                    alert("Customer contact cannot be blank");
-                    return false;
-                }
-                if($("#textCustomerEmail").val().length==0)
-                {
-                    alert("Customer email cannot be blank");
-                    return false;
-                }
-                if($("#textCreditCard").val().length==0)
-                {
-                    alert("Customer credit card no cannot be blank");
-                    return false;
-                }
-                if($("#textCW2").val().length==0)
-                {
-                    alert("Customer cw2 cannot be blank");
-                    return false;
-                }
-                if($("#textCreditCardExpiry").val().length==0)
-                {
-                    alert("Customer expiry cannot be blank");
-                    return false;
-                }
-		
-                return false;
-            }
-   
-
-        
-
-  
-            function readCookie(name) {
-                var nameEQ = name + "=";
-                var ca = document.cookie.split(';');
-                for(var i=0;i < ca.length;i++) {
-                    var c = ca[i];
-                    while (c.charAt(0)==' ') c = c.substring(1,c.length);
-                    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
-                }
-                return null;
-            }
-  
-  
-            function createCookie(name,value,days) {
-                if (days) {
-                    var date = new Date();
-                    date.setTime(date.getTime()+(days*24*60*60*1000));
-                    var expires = "; expires="+date.toGMTString();
-                }
-                else var expires = "";
-                document.cookie = name+"="+value+expires+"; path=/";
-            }
-            
-            function readCookie(name) {
-                var nameEQ = name + "=";
-                var ca = document.cookie.split(';');
-                for(var i=0;i < ca.length;i++) {
-                    var c = ca[i];
-                    while (c.charAt(0)==' ') c = c.substring(1,c.length);
-                    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
-                }
-                return null;
-            }
-  
-  
-  
-  
-  
-  
-            $(document).ready(function(){
-                
-                /*  Cookie checking code
-                console.log("readCookie=="+readCookie('login'));
-                
-                if(readCookie('login') ==null)
-                    window.location.replace("login.html");
-   
-                loadContent();
-                 */
-                console.log(readCookie('shoppingCart'));
-                
-                var hehe = new Array();
-                hehe = $.parseJSON(readCookie('shoppingCart'));
-                if(hehe!=null)
-                {
-                    for(var i=0;i<hehe.length;i++)
-                    {        
-                        console.log("productID =="+hehe[i].productId);
-                        console.log("productQty =="+hehe[i].productQty);
-                    }
-                } 
-        
-   
-                
-                var payBtn = $("#PayBtn");
-                var clearFormBtn = $("#clearFormBtn");
-		
-                //either product or payment page
-                var divProduct = $("#divMainProductCol");
-                var divPayment = $("#divPayment");
-		
-                //product info span
-                var productTitle = $("#productTitle");
-       	
-	   
-                clearFormBtn.click(function() {
-                    $("#productTable > tbody").empty();
-                });
-		
-		
-		
-                payBtn.click(function() {
-			
-               	
-                    var allProducts = new Array();
-                    //allProduct[i] = ..
-			
-                  	
-                    $("#productTable tbody tr").each(function() {
-                        
-                        var object = new productBought;
-                        object.productId = $(this).find("#productId").attr('class');
-                        object.productQty = $(this).find("#productQty").html();
-			object.productName= $(this).find("#productId").html();
-                        object.productTotal = $(this).find('#productTotal').html();
-                        object.productEach = $(this).find('#productEach').html();
-                        allProducts.push(object);
-                    });
-			
-			
-                    for(i=0;i<allProducts.length;i++)
-                    {
-                        console.log(allProducts[i]);
-                    }
-                    
-                    
-                    function productBought(productTitle,qty)
-                    {
-                        this.productTitle = productTitle;
-                        this.qty = qty;
-                    }
-		
-                    createCookie('shoppingCart',JSON.stringify(allProducts),0);
-                    
-                    window.location.replace("paymentFormTemplate.html");
-			
-                });
-		
-		
-		
-                //hide the payment at the start
-                divPayment.hide();
-		
-             
-                reinitChromaTable();
-		
-            });
-	
-            function reinitChromaTable()
-            {
-                $('#productTable').chromatable({
-                    width: "100%",
-                    //width: "450px",
-                    height: "300px",
-                    scrolling: "yes"
-	
-                });
-            }
-        
-            function deleteRowItem(o)
-            {
-                //o = button, parent = htmltablecell -> htmltablerow -> htmltablesection 
-                var p = o.parentNode.parentNode;
-                p.parentNode.removeChild(p);
-            };
-            
-            function addItemToTable(productId)
-            {
-                
-                /**
-                 * Check first if existing element exist already
-                 */
-                
-                var totalRowInTable = $('#productTable tbody').children().length;
-                
-                var whetherExistProduct = false;
-            
-                $('#productTable >tbody >tr').each(function(){
-                    var inTableProductId = $(this).find('#productId').attr('class') 
-                
-                    if(inTableProductId == productId ) //item wanted to add already exist in table
-                    {
-                            
-                        //update the qty and total instead
-                        var currentProductQty = $(this).find("#productQty").html();
-                        var currentProductEach = $(this).find('#productEach').html();
-                     
-                        console.log(currentProductQty + " <-- Qty, Each -->"+currentProductEach);
-                     
-                        //finding out the new quantity by adding old quantity + new quantity
-                        var oldProductQty = $('#div_'+productId).find('#qty').val();
-                        var newProductQty = Number(currentProductQty) + Number(oldProductQty);
-                     
-                        //finding out the total by multiplying new qty and product price each
-                        var newTotal = newProductQty * currentProductEach;
-                     
-                        //update the qty field with new qty
-                        $(this).find('#productQty').html(newProductQty);
-                     
-                        //update the total with new total
-                        $(this).find('#productTotal').html('$'+newTotal);
-                     
-                        whetherExistProduct=true;
-                        return;
-                    }
-                    
-                });
-                
-                
-                //product added is a new product
-                if(whetherExistProduct==false)
-                {
-                
-                    var productName = $('#div_'+productId).find('#productTitle').text();
-                    var productPrice = $('#div_'+productId).find('#productPrice').text();
-                    var qtySelected = $('#div_'+productId).find('#qty').val();
-                  
-                    var totalPrice = qtySelected * productPrice;
-                
-                    var tableDetailHeader ="<tr>";
-                    var tableProductTitle ="<td class=\""+productId+"\" id=\"productId\">"+productName+"</td>";
-                    var tableQty = "<td id=\"productQty\">"+qtySelected+"</td>";
-                    var tableEach = "<td id=\"productEach\">"+productPrice+"</td>";
-                    var tableTotal = "<td id=\"productTotal\" >$"+totalPrice+"</td>";
-                    var tableRemoveItemBtn = "<td> <button class=\"btn btn-mini\" onclick=\"deleteRowItem(this)\"> x</button></td>"
-                    var tableDetailFooter ="</tr>";
-                    var entireTable = tableDetailHeader + tableProductTitle + tableQty + tableEach + tableTotal + tableRemoveItemBtn+tableDetailFooter;
-                
-                    $("#productTable > tbody:last").append(entireTable);
-                }  
-                
-               
-                reinitChromaTable();
-            }
-            
-        </script>
-
-    </body>
-
-</html>

File build/web/customerDetail.html

+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title id="systemName">Mobile POS</title>
+        <link href="css/bootstrap.css" rel="stylesheet">
+    </head>
+
+    <body>
+        <div class="container">
+            <img id ="mainBanner" src="img/banner.png" />
+        </div>
+        <br><br>
+
+        <div class="container">
+            <div class="row">
+                <div class="span6 offset3" id="customerPaymentDetail">  
+
+
+                    <div class="row">
+
+                        <form class="form-horizontal2">
+                            <legend>Customer delivery details </legend>
+                            <div class="control-group" id="customerNameGroup">
+                                <label class="control-label" for="textCustomerName" >Name </label>
+
+                                <div class="controls">
+                                    <input class="input-xlarge" id="textCustomerName" type="text" placeholder="Name">
+                                </div>
+                            </div>
+                            <div class="control-group" id="customerAddGroup">
+                                <label class="control-label" for="textCustomerAddress" >Address </label>
+
+                                <div class="controls">
+                                    <input class="input-xlarge" id="textCustomerAddress" type="text" placeholder="Address to deliver product to">
+                                </div>
+                            </div>
+                            <div class="control-group" id="customerContactGroup">
+                                <label class="control-label" for="textCustomerContact">Contact No </label>
+
+                                <div class="controls">
+                                    <input class="input-xlarge" id="textCustomerContact" type="text" placeholder="Contact No.">
+                                </div>
+                            </div>
+                            <div class="control-group" id="customerEmailGroup">
+                                <label class="control-label" for="textCustomerEmail">Email</label>
+                                <div class="controls">
+                                    <input class="input-xlarge" id="textCustomerEmail" type="text" placeholder="Email for e-recipet">
+                                </div>
+                            </div>
+                        </form>
+
+                    </div>
+
+                    <div class="row">
+
+                        <button class="btn btn-block btn-primary" id="btnFinish" type="button">Submit delivery detail!!</button>
+
+                    </div>
+
+                </div> <!-- end of col for customer payment details -->
+
+
+            </div>
+
+
+        </div>
+
+
+
+        <!-- jQuery via Google + local fallback, see h5bp.com -->
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+
+        <!-- Bootstrap JS: compiled and minified -->
+        <script src="js/bootstrap.min.js"></script>
+        <script src="js/json2.js"></script>
+        
+         <!-- config java script -->
+        <script src="js/mainConfig.js"></script>
+
+
+        <script>
+            
+            function validateCustomerDetail(){
+                var validInput = true;
+                
+                var userName = $('#textCustomerName').val();
+                var userAddress = $('#textCustomerAddress').val();
+                var userContact = $('#textCustomerContact').val();
+                var userEmail = $('#textCustomerEmail').val();
+                 
+                removeExistingErrorMessage(); 
+                
+                if (userName.length==0){
+                    //alert("credit card no cannot be blank!");
+                    var errorMessage = document.createElement("text");
+                    errorMessage.className="text-error offset1";
+                    errorMessage.id = "customerNameError";
+                    errorMessage.innerHTML = "Name is blank!"
+                    
+                    var controlGroup = document.getElementById("customerNameGroup");
+                    controlGroup.appendChild(errorMessage);
+                    
+                    validInput= false;
+                }
+                if (userAddress.length==0){
+                    var errorMessage = document.createElement("text");
+                    errorMessage.className="text-error offset1";
+                    errorMessage.id = "customerAddError";
+                    errorMessage.innerHTML = "Address is blank!"
+                    
+                    var controlGroup = document.getElementById("customerAddGroup");
+                    controlGroup.appendChild(errorMessage);
+                    
+                    validInput=false;
+                }
+                
+                if (userContact.length==0){
+                    var errorMessage = document.createElement("text");
+                    errorMessage.className="text-error offset1";
+                    errorMessage.id = "customerContactError";
+                    errorMessage.innerHTML = "Contact number is blank!"
+                    
+                    var controlGroup = document.getElementById("customerContactGroup");
+                    controlGroup.appendChild(errorMessage);
+                    
+                    validInput=false;
+                }else if(isNumber(userContact) == false)
+                {
+                    var errorMessage = document.createElement("text");
+                    errorMessage.className="text-error offset1";
+                    errorMessage.id = "customerContactError";
+                    errorMessage.innerHTML = "Contact number should be all numbers!"
+                    
+                    var controlGroup = document.getElementById("customerContactGroup");
+                    controlGroup.appendChild(errorMessage);
+                    
+                    validInput=false;
+                }
+            
+                if (userEmail.length==0){
+                    var errorMessage = document.createElement("text");
+                    errorMessage.className="text-error offset1";
+                    errorMessage.id = "customerEmailError";
+                    errorMessage.innerHTML = "Email is blank!"
+                    
+                    var controlGroup = document.getElementById("customerEmailGroup");
+                    controlGroup.appendChild(errorMessage);
+                    
+                    validInput=false;
+                } 
+            
+                else if(isValidEmailAddress(userEmail) == false)
+                {
+                    var errorMessage = document.createElement("text");
+                    errorMessage.className="text-error offset1";
+                    errorMessage.id = "customerEmailError";
+                    errorMessage.innerHTML = "Wrong email format!"
+                    
+                    var controlGroup = document.getElementById("customerEmailGroup");
+                    controlGroup.appendChild(errorMessage);
+                    
+                    validInput=false;
+                }
+                 
+                return validInput;
+            }
+            
+            function removeExistingErrorMessage(){
+                $('#customerNameError').remove();
+                $('#customerAddError').remove();
+                $('#customerContactError').remove();
+                $('#customerEmailError').remove();
+                
+            }
+            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 isNumber (o){
+                return ! isNaN (o-0) && o != null;
+            }
+            
+            $('#btnFinish').click(function(){
+                
+                if(validateCustomerDetail() ==false)
+                    return;
+                
+                var userName = $('#textCustomerName').val();
+                var userAddress = $('#textCustomerAddress').val();
+                var userContact = $('#textCustomerContact').val();
+                var userEmail = $('#textCustomerEmail').val();
+              
+                var userInfo = {
+                    "Password": "",
+                    "Name": userName,
+                    "Address": userAddress,
+                    "Tel": userContact,
+                    "Fax": "",
+                    "Email": userEmail
+                };
+                $.ajax({
+                    type: "PUT",
+                    url: "http://lowe.jschua.com/DinoPos/api/customers",
+                    async:false,
+                    data: JSON.stringify(userInfo),
+                    contentType: "application/json; charset=utf-8",
+                    success: function (data) {
+                        createCookie('customerDetail',JSON.stringify(userInfo),0);
+                        createCookie('customerId',data,0);
+                        sendOrderFull();
+                        window.location = "paymentSummary.html";
+                    },
+                    dataType: "text",
+                    error: function (jqXHR, textStatus, errorThrown) {
+                        $('#result').text("The following error occured: " + textStatus, errorThrown);
+                    }
+                });
+            
+            });
+            
+            function createCookie(name,value,days) {
+                if (days) {
+                    var date = new Date();
+                    date.setTime(date.getTime()+(days*24*60*60*1000));
+                    var expires = "; expires="+date.toGMTString();
+                }
+                else var expires = "";
+                document.cookie = name+"="+value+expires+"; path=/";
+            }
+            
+            function readCookie(name) {
+                var nameEQ = name + "=";
+                var ca = document.cookie.split(';');
+                for(var i=0;i < ca.length;i++) {
+                    var c = ca[i];
+                    while (c.charAt(0)==' ') c = c.substring(1,c.length);
+                    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+                }
+                return null;
+            }
+            
+            
+            
+            function sendOrderFull()
+            {
+                console.log("reached sendOrderFull");
+                
+                var orderId = readCookie('orderId');
+                var customerId = readCookie('customerId');
+                var receiptId = readCookie('receiptId');
+                var creditCardNo = readCookie('creditCardNo');
+            
+                var orderInfo = { "Order_Id": orderId, "Customer_Id": customerId, "Receiptid": receiptId, "Creditcardno": creditCardNo };
+                $.ajax({
+                    type: "POST",
+                    url: "http://lowe.jschua.com/DinoPos/api/orders",
+                    data: JSON.stringify(orderInfo),
+                    contentType: "application/json; charset=utf-8",
+                    statusCode: {
+                        400: function () {
+                            //    $('#updated').text("400 (Bad Request): Order_ID not valid");
+                        }
+                    },
+                    success: function (data) {
+                        //var str = 'Updated: ' + data + ' records';
+                        //window.location.replace("receiptTemplate");
+                        //$('#updated').text(str);
+                        console.log("SUCCESS IN SEND ORDER WITH DATAQ=="+data);
+                    },
+                    dataType: "text",
+                    error: function (jqXHR, textStatus, errorThrown) {
+                        //$('#updated').text("The following error occured: " + textStatus, errorThrown);
+                    }
+                });
+            
+            
+            
+            
+            
+            }
+            
+            
+            
+            
+            
+            
+            
+            
+            
+            function validateSearchField() {
+                 
+               
+                
+            }
+            
+            
+      
+  
+            function readCookie(name) {
+                var nameEQ = name + "=";
+                var ca = document.cookie.split(';');
+                for(var i=0;i < ca.length;i++) {
+                    var c = ca[i];
+                    while (c.charAt(0)==' ') c = c.substring(1,c.length);
+                    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+                }
+                return null;
+            }
+  
+                            
+            $(document).ready(function(){
+                 runAtStartUp();
+               
+            });
+  
+  
+  
+		
+            //   });
+	
+        
+       
+            
+        </script>
+
+    </body>
+
+</html>

File build/web/customerDetailTemplate.html

-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <title id="systemName">Mobile POS</title>
-        <link href="css/bootstrap.css" rel="stylesheet">
-    </head>
-
-    <body>
-        <div class="container">
-            <img id ="mainBanner" src="img/banner.png" />
-        </div>
-        <br><br>
-
-        <div class="container">
-            <div class="row">
-                <div class="span6 offset3" id="customerPaymentDetail">  
-
-
-                    <div class="row">
-
-                        <form class="form-horizontal2">
-                            <legend>Customer delivery details </legend>
-                            <div class="control-group" id="customerNameGroup">
-                                <label class="control-label" for="textCustomerName" >Name </label>
-
-                                <div class="controls">
-                                    <input class="input-xlarge" id="textCustomerName" type="text" placeholder="Name">
-                                </div>
-                            </div>
-                            <div class="control-group" id="customerAddGroup">
-                                <label class="control-label" for="textCustomerAddress" >Address </label>
-
-                                <div class="controls">
-                                    <input class="input-xlarge" id="textCustomerAddress" type="text" placeholder="Address to deliver product to">
-                                </div>
-                            </div>
-                            <div class="control-group" id="customerContactGroup">
-                                <label class="control-label" for="textCustomerContact">Contact No </label>
-
-                                <div class="controls">
-                                    <input class="input-xlarge" id="textCustomerContact" type="text" placeholder="Contact No.">
-                                </div>
-                            </div>
-                            <div class="control-group" id="customerEmailGroup">
-                                <label class="control-label" for="textCustomerEmail">Email</label>
-                                <div class="controls">
-                                    <input class="input-xlarge" id="textCustomerEmail" type="text" placeholder="Email for e-recipet">
-                                </div>
-                            </div>
-                        </form>
-
-                    </div>
-
-                    <div class="row">
-
-                        <button class="btn btn-block btn-primary" id="btnFinish" type="button">Submit delivery detail!!</button>
-
-                    </div>
-
-                </div> <!-- end of col for customer payment details -->
-
-
-            </div>
-
-
-        </div>
-
-
-
-        <!-- jQuery via Google + local fallback, see h5bp.com -->
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-
-        <!-- Bootstrap JS: compiled and minified -->
-        <script src="js/bootstrap.min.js"></script>
-        <script src="js/json2.js"></script>
-        
-         <!-- config java script -->
-        <script src="js/mainConfig.js"></script>
-
-
-        <script>
-            
-            function validateCustomerDetail(){
-                var validInput = true;
-                
-                var userName = $('#textCustomerName').val();
-                var userAddress = $('#textCustomerAddress').val();
-                var userContact = $('#textCustomerContact').val();
-                var userEmail = $('#textCustomerEmail').val();
-                 
-                removeExistingErrorMessage(); 
-                
-                if (userName.length==0){
-                    //alert("credit card no cannot be blank!");
-                    var errorMessage = document.createElement("text");
-                    errorMessage.className="text-error offset1";
-                    errorMessage.id = "customerNameError";
-                    errorMessage.innerHTML = "Name is blank!"
-                    
-                    var controlGroup = document.getElementById("customerNameGroup");
-                    controlGroup.appendChild(errorMessage);
-                    
-                    validInput= false;
-                }
-                if (userAddress.length==0){
-                    var errorMessage = document.createElement("text");
-                    errorMessage.className="text-error offset1";
-                    errorMessage.id = "customerAddError";
-                    errorMessage.innerHTML = "Address is blank!"
-                    
-                    var controlGroup = document.getElementById("customerAddGroup");
-                    controlGroup.appendChild(errorMessage);
-                    
-                    validInput=false;
-                }
-                
-                if (userContact.length==0){
-                    var errorMessage = document.createElement("text");
-                    errorMessage.className="text-error offset1";
-                    errorMessage.id = "customerContactError";
-                    errorMessage.innerHTML = "Contact number is blank!"
-                    
-                    var controlGroup = document.getElementById("customerContactGroup");
-                    controlGroup.appendChild(errorMessage);
-                    
-                    validInput=false;
-                }else if(isNumber(userContact) == false)
-                {
-                    var errorMessage = document.createElement("text");
-                    errorMessage.className="text-error offset1";
-                    errorMessage.id = "customerContactError";
-                    errorMessage.innerHTML = "Contact number should be all numbers!"
-                    
-                    var controlGroup = document.getElementById("customerContactGroup");
-                    controlGroup.appendChild(errorMessage);
-                    
-                    validInput=false;
-                }
-            
-                if (userEmail.length==0){
-                    var errorMessage = document.createElement("text");
-                    errorMessage.className="text-error offset1";
-                    errorMessage.id = "customerEmailError";
-                    errorMessage.innerHTML = "Email is blank!"
-                    
-                    var controlGroup = document.getElementById("customerEmailGroup");
-                    controlGroup.appendChild(errorMessage);
-                    
-                    validInput=false;
-                } 
-            
-                else if(isValidEmailAddress(userEmail) == false)
-                {
-                    var errorMessage = document.createElement("text");
-                    errorMessage.className="text-error offset1";
-                    errorMessage.id = "customerEmailError";
-                    errorMessage.innerHTML = "Wrong email format!"
-                    
-                    var controlGroup = document.getElementById("customerEmailGroup");
-                    controlGroup.appendChild(errorMessage);
-                    
-                    validInput=false;
-                }
-                 
-                return validInput;
-            }
-            
-            function removeExistingErrorMessage(){
-                $('#customerNameError').remove();
-                $('#customerAddError').remove();
-                $('#customerContactError').remove();
-                $('#customerEmailError').remove();
-                
-            }
-            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 isNumber (o){
-                return ! isNaN (o-0) && o != null;
-            }
-            
-            $('#btnFinish').click(function(){
-                
-                if(validateCustomerDetail() ==false)
-                    return;
-                
-                var userName = $('#textCustomerName').val();
-                var userAddress = $('#textCustomerAddress').val();
-                var userContact = $('#textCustomerContact').val();
-                var userEmail = $('#textCustomerEmail').val();
-              
-                var userInfo = {
-                    "Password": "",
-                    "Name": userName,
-                    "Address": userAddress,
-                    "Tel": userContact,
-                    "Fax": "",
-                    "Email": userEmail
-                };
-                $.ajax({
-                    type: "PUT",
-                    url: "http://lowe.jschua.com/DinoPos/api/customers",
-                    async:false,
-                    data: JSON.stringify(userInfo),
-                    contentType: "application/json; charset=utf-8",
-                    success: function (data) {
-                        createCookie('customerDetail',JSON.stringify(userInfo),0);
-                        createCookie('customerId',data,0);
-                        sendOrderFull();
-                        window.location = "paymentSummaryTemplate.html";
-                    },
-                    dataType: "text",
-                    error: function (jqXHR, textStatus, errorThrown) {
-                        $('#result').text("The following error occured: " + textStatus, errorThrown);
-                    }
-                });
-            
-            });
-            
-            function createCookie(name,value,days) {
-                if (days) {
-                    var date = new Date();
-                    date.setTime(date.getTime()+(days*24*60*60*1000));
-                    var expires = "; expires="+date.toGMTString();
-                }
-                else var expires = "";
-                document.cookie = name+"="+value+expires+"; path=/";
-            }
-            
-            function readCookie(name) {
-                var nameEQ = name + "=";
-                var ca = document.cookie.split(';');
-                for(var i=0;i < ca.length;i++) {
-                    var c = ca[i];
-                    while (c.charAt(0)==' ') c = c.substring(1,c.length);
-                    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
-                }
-                return null;
-            }
-            
-            
-            
-            function sendOrderFull()
-            {
-                console.log("reached sendOrderFull");
-                
-                var orderId = readCookie('orderId');
-                var customerId = readCookie('customerId');
-                var receiptId = readCookie('receiptId');
-                var creditCardNo = readCookie('creditCardNo');
-            
-                var orderInfo = { "Order_Id": orderId, "Customer_Id": customerId, "Receiptid": receiptId, "Creditcardno": creditCardNo };
-                $.ajax({
-                    type: "POST",
-                    url: "http://lowe.jschua.com/DinoPos/api/orders",
-                    data: JSON.stringify(orderInfo),
-                    contentType: "application/json; charset=utf-8",
-                    statusCode: {
-                        400: function () {
-                            //    $('#updated').text("400 (Bad Request): Order_ID not valid");
-                        }
-                    },
-                    success: function (data) {
-                        //var str = 'Updated: ' + data + ' records';
-                        //window.location.replace("receiptTemplate");
-                        //$('#updated').text(str);
-                        console.log("SUCCESS IN SEND ORDER WITH DATAQ=="+data);
-                    },
-                    dataType: "text",
-                    error: function (jqXHR, textStatus, errorThrown) {
-                        //$('#updated').text("The following error occured: " + textStatus, errorThrown);
-                    }
-                });
-            
-            
-            
-            
-            
-            }
-            
-            
-            
-            
-            
-            
-            
-            
-            
-            function validateSearchField() {
-                 
-               
-                
-            }
-            
-            
-      
-  
-            function readCookie(name) {
-                var nameEQ = name + "=";
-                var ca = document.cookie.split(';');
-                for(var i=0;i < ca.length;i++) {
-                    var c = ca[i];
-                    while (c.charAt(0)==' ') c = c.substring(1,c.length);
-                    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
-                }
-                return null;
-            }
-  
-                            
-            $(document).ready(function(){
-                 runAtStartUp();
-               
-            });
-  
-  
-  
-		
-            //   });
-	
-        
-       
-            
-        </script>
-
-    </body>
-
-</html>

File build/web/index.html

+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title id="systemName">Mobile xxPOS</title>
+        <link href="css/bootstrap.css" rel="stylesheet">
+    </head>
+
+    <body>
+        <div class="container">
+            <img id ="mainBanner" />
+        </div>
+
+        <div class="container">
+
+            <div class="row" class="span12" id="divMainProductCol"> <!-- start of product search and search result row -->
+
+                <h5> Enter Product ID or name to search </h5>
+                <p/>
+
+                <input id="productSearchKey" type="text" placeholder="Product ID or name" class="input-large search-query" >
+                <button type="submit" onclick=searchProduct() class="btn" id="btnProductSearch">Search</button>
+                <text id="searchErrorMsg" class="text-error">
+                <!-- div for displaying of product -->
+                <div class="row"  id="divSubProductCol">
+
+                </div>
+
+                <!-- div for displaying of page numberings -->
+                <div class ="pagination" id="productPagination"> 
+
+                </div>
+
+
+            </div> <!--end of product search and search result row -->
+
+            <div class="row">  <!-- start of items added table -->
+
+                <h4> Items added </h4>
+                <table class ="table table-striped" style="background-color:white" id="productTable"  >
+                    <thead>
+                        <tr>
+                            <th >Name &nbsp&nbsp&nbsp&nbsp</th>
+                            <th>Qty</th>
+                            <th>Each</th>
+                            <th>Total</th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                    </tbody>
+                </table>
+
+
+                <div class="row"> <!--start of row for displaying of the tax and total -->
+                    <div class=" offset10">
+                        <h4 id="totalAmt">Total: </h4>
+                    </div>
+                </div> <!--end of row displaying of tax and total-->
+
+                <br/>
+
+                <div class="row"> <!--start of btm row for pay and remove all product button -->
+                    <div class="span3">
+                        <button class="btn btn-large btn-danger btn-block" type="button" id="clearFormBtn">Remove all products</button>
+                    </div>
+                    <div class="span3 offset6">
+                        <button class="btn-large btn-block btn-primary span3" type="button" id="PayBtn" > Pay </button>
+                    </div>
+                </div> <!-- end of btm row for pay and cancel order -->
+
+
+
+            </div> <!--end of table added row -->
+
+        </div> <!-- end of container -->
+
+        <!-- jQuery via Google + local fallback, see h5bp.com -->
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+        <!-- Bootstrap JS: compiled and minified -->
+        <script src="js/bootstrap.min.js"></script>
+        <script src="js/jquery.chromatable.js"></script>
+        <script src="js/json2.js"></script>
+        <script src="js/jquery.paginate.js"></script>
+
+        <!-- config java script -->
+        <script src="js/mainConfig.js"></script>
+
+        <script>
+            
+            function validateSearchField()
+            {
+                if($('#productSearchKey').val().length==0)
+                {   
+                    $('#searchErrorMsg').text("Search field can't be blank!");
+                    return false;
+                }
+                else{
+                    $('#searchErrorMsg').text("");
+                }
+            }
+           
+            function searchProduct() {
+                
+                //checking if search field is not blank
+                var ifFieldValid = validateSearchField();
+                if(ifFieldValid == false)
+                    return;
+                
+                
+                var searchKeyword = $('#productSearchKey').val();
+                
+                //deciding which restful api to use depending on search keyword
+                var url; 
+                if(isNumber(searchKeyword))
+                    url = "http://lowe.jschua.com/DinoPos/api/products/" +searchKeyword;
+                else
+                    url = "http://lowe.jschua.com/DinoPos/api/products/?name=" +searchKeyword;
+                
+      
+                var totalProductFound = 0;
+                
+                $.ajax({
+                    url: url,
+                    dataType:'json',
+                    async:false,
+                    success:function(data){
+                        clearSearchResult();
+                    
+                        if(data!=null)
+                        {
+                            if(data instanceof Array)
+                            {
+                                // On success, 'data' contains a list of products.
+                                $.each(data, function (key, val) {
+                            
+                                
+                                    displayProductInfo(val,totalProductFound);
+                                    totalProductFound++;
+                                });
+                            }
+                            else
+                            {
+   
+                                displayProductInfo(data,totalProductFound);
+                                totalProductFound++;
+                           
+                            }
+                        }
+                    }
+                }).done(createPagnation(totalProductFound));
+               
+            }
+            
+            //global var 
+            var currentPage=1; //edited in showPage
+            var totalPage=0; //set in createPagnation
+             
+            /**
+             * Method create the page numbering after a search result
+             */
+            function createPagnation(totalElement)
+            {
+                if(totalElement !=0) //no point running the code if there's no search result
+                {
+                    totalPage = Math.ceil(totalElement/2);
+                
+                    //creating the main list
+                    var mainUl = document.createElement("ul");
+                
+                    //creating sub list for all the page numbers / prev / next buttons
+                    var subUl = document.createElement("li");
+                    subUl.className ="prev disabled"
+                    subUl.innerHTML ="<a href=\"#\" onClick=\"showPage(-1)\">Prev</a>";
+                    mainUl.appendChild(subUl);
+                    //for(var i =1;i<=number;i++)
+                    for(var x=1;x<=Math.ceil(totalElement/2);x++)
+                    {
+                   
+                        var subUl = document.createElement("li");
+                        subUl.className =x;
+                        if(x==1)
+                            subUl.className = subUl.className +" active";
+                        subUl.innerHTML ="<a href=\"#\" onClick=\"showPage("+x+")\">"+x+"</a>";
+                        // subUl.onclick = showPage(subUl.innerHTML);
+                        //subUl.on("click",showPage(subUl.innerHTML));
+                        mainUl.appendChild(subUl);
+                    }
+                    var subUl = document.createElement("li");
+                    subUl.innerHTML ="<a href=\"#\" onClick=\"showPage(0)\">Next</a>";
+                    subUl.className = "next";
+                    mainUl.appendChild(subUl);
+                
+                    var test = document.getElementById("productPagination");
+                    test.appendChild(mainUl);
+                }
+            }
+            
+            /**
+             *Method is meant for the "enter" key listener for searching of product.
+             *
+             */
+            $("#productSearchKey").keyup(function(event){
+                if(event.keyCode == 13){
+                    $("#btnProductSearch").click();
+                }
+            });
+
+            
+            /**
+             *Method take in the page number depending on what user selected.
+             *if pageNumber == 0, it means user clicked next button
+             *if pageNumber ==-1, it means user clicked previous button
+             */
+            function showPage(pageNumber)
+            {
+                //set the previously selected page as not active
+                $('#productPagination ul li.'+currentPage).removeClass('active');
+                
+                //-1 = prev, 0 = next
+                if(pageNumber!=-1 && pageNumber!=0){
+                    currentPage = pageNumber;
+                }
+                else if(pageNumber==-1) //prev was selected
+                {
+                    if(currentPage!=1)
+                    {
+                        currentPage = currentPage-1;
+                        pageNumber = currentPage;
+                    }else{
+                        pageNumber=1;
+                    }
+                }
+                else if(pageNumber==0) //next was selected
+                {
+                    if(currentPage!=totalPage){
+                        currentPage = currentPage+1;
+                        pageNumber = currentPage;
+                    }else{
+                        pageNumber=totalPage;
+                    }
+                }
+                
+                //hide the current page product
+                $('._current','#divSubProductCol').removeClass('_current').hide();
+                
+                var productNo1;
+                if(pageNumber==1){    
+                    productNo1 = 0;
+                }
+                else{    
+                    productNo1 = (pageNumber-1)*2;
+                }
+                var productNo2 = productNo1+1;
+               
+                //show the selected page product
+                $('#productNo_'+productNo1).addClass('_current').fadeIn();
+                $('#productNo_'+productNo2).addClass('_current').fadeIn();
+               
+                //below code to disable the pageNumber button
+                if(pageNumber!=0 && pageNumber!=-1){
+                    $('#productPagination ul li.'+pageNumber).addClass('active');
+                    $('#productPagination ul li.next').removeClass('disabled');
+                    $('#productPagination ul li.prev').removeClass('disabled');
+                }
+                if(pageNumber ==totalPage){
+                    $('#productPagination ul li.next').addClass('disabled');
+                }
+                if(pageNumber ==1){
+                    $('#productPagination ul li.previous').addClass('disabled');
+                }   
+            }
+            
+            
+            /**
+             *function clear the pagnation and the searchresult
+             */
+            function clearSearchResult()
+            {
+                if($('#divSubProductCol').children().length >0) {
+                    $('#divSubProductCol').empty();
+                }
+                if($('#productPagination').children().length >0) {
+                    $('#productPagination').empty();
+                }
+            }
+            
+            function displayProductInfo(val,productNumbering)
+            {
+                var divInPlace =  document.getElementById("divSubProductCol");
+                  
+                var mainDiv = document.createElement("div");
+                mainDiv.id = "productNo_"+productNumbering;
+                
+                if(productNumbering >1)
+                {
+                    mainDiv.setAttribute("style", "display:none")
+                    mainDiv.className ="pagedemo";
+                }
+                else
+                {
+                    mainDiv.className ="pagedemo _current";
+                }
+                
+                //creating the image layout
+                var divForImage = document.createElement("div");
+                divForImage.className ="span2";
+                divForImage.innerHTML ="<img src=\""+val.ImageUrl+"\" height=150 width=150>"
+                               
+                //creating the product brand, title, description and price layout
+                var divForProductInfo = document.createElement("div");
+                divForProductInfo.className ="span4";
+                divForProductInfo.setAttribute("id", "div_"+val.Product_ID);
+                var productBrand = "<h3> <span id=\"productBrand\">"+val.Brand+"</span></h4>";
+                var productTitle = "<h4> <span id=\"productTitle\">"+val.Name+"</span></h4>";
+                var productDescription ="<h6> <span id=\"productDescription\">"+val.Description+"</span></h6>";
+                var productPrice = "<h6> Price $<span id=\"productPrice\">"+val.Pricesell+"</span> </h6>";
+                divForProductInfo.innerHTML= productBrand+productTitle+productDescription+productPrice;
+                
+                //creating the quantity input
+                var qtyForm = document.createElement("form");
+                qtyForm.className ="form-horizontal";   
+                var divForQtyForm = document.createElement("div");
+                divForQtyForm.className = "control-group";
+                
+                var labelForErrorMsg = document.createElement("label");
+                labelForErrorMsg.className ="control-label text-error";
+                labelForErrorMsg.setAttribute("id","errorMsg_"+val.Product_ID);
+                
+                var divForControl = document.createElement("div");
+                divForControl.className = "controls";
+                var inputForQty =document.createElement("input");
+                inputForQty.setAttribute("type", "text");
+                inputForQty.setAttribute("id","qty_"+val.Product_ID);
+                inputForQty.setAttribute("placeholder","Quantity");
+                inputForQty.className ="input-small";
+                divForControl.appendChild(inputForQty);
+                divForQtyForm.appendChild(labelForErrorMsg);
+                divForQtyForm.appendChild(divForControl);
+                qtyForm.appendChild(divForQtyForm);
+             
+                //creating the add to cart button
+                var addToCartButton = document.createElement("input");
+                addToCartButton.setAttribute("id",val.Product_ID);
+                addToCartButton.setAttribute("type","button");
+                var info = "addItemToTable("+val.Product_ID+")"
+                addToCartButton.setAttribute("onClick",info);
+                addToCartButton.setAttribute("value","Add this item to cart!");
+                addToCartButton.className ="btn btn-info span4";                
+                                
+                //adding the quantity text input and add to cart button into the product info page
+                divForProductInfo.appendChild(qtyForm);
+                divForProductInfo.appendChild(addToCartButton);
+                                
+                //adding the image and product info div into the main div
+                mainDiv.appendChild(divForImage);
+                mainDiv.appendChild(divForProductInfo); 
+               
+                //appending the div.
+                divInPlace.appendChild(mainDiv);
+            }
+            
+                       
+            function addItemToTable(productId)
+            {
+                //check if the user has keyed in qty
+                if($('#qty_'+productId).val().length==0) 
+                {
+                    $('#errorMsg_'+productId).text("Qty can't be blank!");
+                    return;
+                }
+                
+                var whetherExistProduct = false;
+            
+                //loop through the table to check if the exact product has been added before
+                //if added before, just update qty.
+                $('#productTable >tbody >tr').each(function(){
+                
+                    var inTableProductId = $(this).find('#productId').attr('class') 
+                
+                    if(inTableProductId == productId ) //item wanted to add already exist in table
+                    {
+                        //update the qty and total instead
+                        var currentProductQty = $(this).find("#productQty").html();
+                        var currentProductEach = $(this).find('#productEach').html();
+                      
+                        //finding out the new quantity by adding old quantity + new quantity
+                        var oldProductQty = $('#div_'+productId).find('#qty_'+productId).val();
+                        var newProductQty = Number(currentProductQty) + Number(oldProductQty);
+                     
+                        //finding out the total by multiplying new qty and product price each
+                        var newTotal = (newProductQty * currentProductEach).toFixed(2);
+                     
+                        //update the qty field with new qty
+                        $(this).find('#productQty').html(newProductQty);
+                     
+                        //update the total with new total
+                        $(this).find('#productTotal').html('$'+newTotal);
+                     
+                        whetherExistProduct=true;
+                        return;
+                    }
+                    
+                });
+                
+                
+                //product added is a new product - create a new row for it.
+                if(whetherExistProduct==false)
+                {
+                
+                    var productName = $('#div_'+productId).find('#productTitle').text();
+                    var productPrice = Number($('#div_'+productId).find('#productPrice').text());
+                    var qtySelected = $('#div_'+productId).find('#qty_'+productId).val();
+                  
+                    var totalPrice = qtySelected * productPrice;
+                
+                    var tableDetailHeader ="<tr>";
+                    var tableProductTitle ="<td class=\""+productId+"\" id=\"productId\">"+productName+"</td>";
+                    var tableQty = "<td id=\"productQty\">"+qtySelected+"</td>";
+                    var tableEach = "<td id=\"productEach\">"+(productPrice).toFixed(2)+"</td>";
+                    var tableTotal = "<td id=\"productTotal\" >$"+(totalPrice).toFixed(2)+"</td>";
+                    var tableRemoveItemBtn = "<td> <button class=\"btn btn-mini\" onclick=\"deleteRowItem(this)\"> x</button></td>"
+                    var tableDetailFooter ="</tr>";
+                    var entireTable = tableDetailHeader + tableProductTitle + tableQty + tableEach + tableTotal + tableRemoveItemBtn+tableDetailFooter;
+                
+                    $("#productTable > tbody:last").append(entireTable);
+                }  
+                reUpdateGrandTotal();
+                reinitChromaTable();
+            }
+            
+            
+            
+            function loadItemFromCookie(productId,productQty,productName,productEach,productTotal)
+            {
+                // var productName = $('#div_'+productId).find('#productTitle').text();
+                // var productPrice = $('#div_'+productId).find('#productPrice').text();
+                // var qtySelected = $('#div_'+productId).find('#qty_'+productId).val();
+                  
+                // var totalPrice = qtySelected * productPrice;
+                
+                var tableDetailHeader ="<tr>";
+                var tableProductTitle ="<td class=\""+productId+"\" id=\"productId\">"+productName+"</td>";
+                var tableQty = "<td id=\"productQty\">"+productQty+"</td>";
+                var tableEach = "<td id=\"productEach\">"+productEach+"</td>";
+                var tableTotal = "<td id=\"productTotal\" >"+productTotal+"</td>";
+                var tableRemoveItemBtn = "<td> <button class=\"btn btn-mini\" onclick=\"deleteRowItem(this)\"> x</button></td>"
+                var tableDetailFooter ="</tr>";
+                var entireTable = tableDetailHeader + tableProductTitle + tableQty + tableEach + tableTotal + tableRemoveItemBtn+tableDetailFooter;
+                
+                $("#productTable > tbody:last").append(entireTable);
+                
+                reinitChromaTable();
+            }
+            
+            function isNumber (o){
+                return ! isNaN (o-0) && o != null;
+            }
+   
+   
+            function createCookie(name,value,days) {
+                if (days) {
+                    var date = new Date();
+                    date.setTime(date.getTime()+(days*24*60*60*1000));
+                    var expires = "; expires="+date.toGMTString();
+                }
+                else var expires = "";
+                document.cookie = name+"="+value+expires+"; path=/";
+            }
+            
+            function readCookie(name) {
+                var nameEQ = name + "=";
+                var ca = document.cookie.split(';');
+                for(var i=0;i < ca.length;i++) {
+                    var c = ca[i];
+                    while (c.charAt(0)==' ') c = c.substring(1,c.length);
+                    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+                }
+                return null;
+            }
+  
+            $(document).ready(function(){
+                
+                runAtStartUp();
+                console.log("shopping cart cookies =="+readCookie('shoppingCart'));
+                    
+                var hehe = new Array();
+                hehe = $.parseJSON(readCookie('shoppingCart'));
+                if(hehe!=null)
+                {
+                    for(var i=0;i<hehe.length;i++)
+                    {        
+                        loadItemFromCookie(hehe[i].productId,+hehe[i].productQty,hehe[i].productName,hehe[i].productEach,hehe[i].productTotal);
+                        
+                    }
+                } 
+                     
+                
+                
+                var payBtn = $("#PayBtn");
+                var clearFormBtn = $("#clearFormBtn");
+		
+                //either product or payment page
+                var divProduct = $("#divMainProductCol");
+                var divPayment = $("#divPayment");
+		
+                //product info span
+                var productTitle = $("#productTitle");
+       	
+	   
+                clearFormBtn.click(function() {
+                    $("#productTable > tbody").empty();
+                    reUpdateGrandTotal();
+                });
+		
+		
+                payBtn.click(function() {
+			
+                    var allProducts = new Array();
+                    
+                    var totalPrice = 0;
+                   
+               	
+                    $("#productTable tbody tr").each(function() {
+                        var object = new productBought;
+                        object.productId = $(this).find("#productId").attr('class');
+                        object.productQty = $(this).find("#productQty").html();
+                        object.productName= $(this).find("#productId").html();
+                        object.productTotal = $(this).find('#productTotal').html();
+                        object.productEach = $(this).find('#productEach').html();
+                        allProducts.push(object);
+                        
+                        var eachSubTotal = $(this).find('#productTotal').html().split("$");
+                        totalPrice = Number(eachSubTotal[1]) + Number(totalPrice);
+                        
+                    });
+			
+                    for(i=0;i<allProducts.length;i++)
+                    {
+                        console.log(allProducts[i]);
+                    }
+                    
+                    function productBought(productTitle,qty)
+                    {
+                        this.productTitle = productTitle;
+                        this.qty = qty;
+                    }
+		
+                    createCookie('shoppingCart',JSON.stringify(allProducts),0);
+                    createCookie('grandTotal',totalPrice,0);
+                    
+                    /**
+                     *code segment for formatting the data and sending to ajax server
+                     */
+                    var productArray = new Array();
+                    var productQtyArray = new Array();
+                    
+                    for(var i =0;i<allProducts.length;i++)
+                    {
+                        productArray.push(allProducts[i].productId);
+                        productQtyArray.push(allProducts[i].productQty);
+                    }
+                    
+                    console.log("ProductArray=="+productArray);
+                    console.log("ProductQtyArray=="+productQtyArray);
+                        
+                    var branchId = readCookie('branchId');
+                    var employeeId = readCookie('employeeId');
+                    //var orderInfo = { "Branch_ID": $('#branchID').val(), "Employee_ID": $('#employeeID').val(), "Product_ID": [1,1,1], "Quantity": [1,2,3] };
+                    //var orderInfo = { "Branch_ID": 1, "Employee_ID": 1, "Product_ID": "["+productArray+"]", "Quantity": "["+productQtyArray+"]" };
+                    var orderInfo = { "Branch_ID": branchId, "Employee_ID": employeeId, "Product_ID": productArray, "Quantity": productQtyArray};
+                    $.ajax({
+                        type: "PUT",
+                        url: "http://lowe.jschua.com/DinoPos/api/orders",
+                        data: JSON.stringify(orderInfo),
+                        contentType: "application/json; charset=utf-8",
+                        success: function(data) {
+                            console.log("Success!!!");
+                            createCookie('orderId',data,0);
+                            window.location = "paymentForm.html";
+                        },
+                        dataType: "text",
+                        error: function (jqXHR, textStatus, errorThrown) {
+                            $('#result').text("The following error occured: " + textStatus, errorThrown);
+                        }
+                    });
+                 
+                  
+                });
+		
+		
+		
+                //hide the payment at the start
+                divPayment.hide();
+		
+             
+                reinitChromaTable();
+		
+            });
+	
+            function reinitChromaTable()
+            {
+                $('#productTable').chromatable({
+                    width: "100%",
+                    //width: "450px",
+                    height: "300px",
+                    scrolling: "yes"
+	
+                });
+            }
+            function reUpdateGrandTotal()
+            {
+                var totalPrice = 0;
+                $('#productTable >tbody >tr').each(function(){
+                    
+                    var eachSubTotal = $(this).find('#productTotal').html().split("$");
+                    totalPrice = Number(eachSubTotal[1]) + Number(totalPrice);
+                    
+                });
+                
+                $('#totalAmt').text("Total: $"+totalPrice);
+            }
+            function deleteRowItem(o)
+            {
+                //o = button, parent = htmltablecell -> htmltablerow -> htmltablesection 
+                var p = o.parentNode.parentNode;
+                p.parentNode.removeChild(p);
+                
+                
+                reUpdateGrandTotal();
+                
+             
+            };
+ 
+        </script>
+
+    </body>
+
+</html>

File build/web/indexTemplate.html

-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <title id="systemName">Mobile POS</title>
-        <link href="css/bootstrap.css" rel="stylesheet">
-    </head>
-
-    <body>
-        <div class="container">
-            <img id ="mainBanner" />
-        </div>
-
-        <div class="container">
-
-            <div class="row" class="span12" id="divMainProductCol"> <!-- start of product search and search result row -->
-
-                <h5> Enter Product ID or name to search </h5>