Commits

Anonymous committed c3d44b7

1) added the receipt page.

  • Participants
  • Parent commits 2e38b16

Comments (0)

Files changed (17)

build/web/customerDetailTemplate.html

                     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) {

build/web/index.html

-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <title>Mobile POS</title>
-
-        <!-- Le styles -->
-        <link href="css/bootstrap.css" rel="stylesheet">
-    </head>
-
-    <body>
-        <div class="container">
-            <img src="http://placehold.it/940x150" />
-        </div>
-        <br><br>
-
-        <div class="container">
-            <div class="row">
-                <div class="span6">
-                    <h4> Order Form </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">
-                            Discount: 
-                            <br><br>
-                            Total:
-                        </div>
-
-                        <div class ="span4">
-                            <form>
-                                <Label>Customer's details </Label>
-                                <input class="input-xlarge" id="textCustomerName" type="text" placeholder="Name">
-                                <input class="input-xlarge" id="textCustomerAddress" type="text" placeholder="Address to deliver product to">
-                                <input class="input-xlarge" id="textCustomerContact" type="text" placeholder="Contact No.">
-                                <input class="input-xlarge" id="textCustomerEmail" type="text" placeholder="Email for e-recipet">
-                            </form>
-                        </div>
-                    </div> <!--end of row-->
-
-
-
-                    <div class="row"> <!--start of btm row for pay and cancel order -->
-                        <div class="span2">  
-
-                            <button class="btn btn-large btn-primary" type="button" id="PayBtn" > Pay</button>
-                        </div>
-                        <div class="span2">
-                            <button class="btn btn-large btn-danger" type="button" id="clearFormBtn">Clear Form</button>
-                        </div>
-                    </div> <!-- end of btm row for pay and cancel order -->
-
-
-
-                </div> <!--end of first col -->
-
-                <div class="span6" id="divMainProductCol">  <!--start of second col for product search -->
-
-                    <!--  <jsp:include page="productSearch.jsp"></jsp:include> -->
-                    <!--	<! --#include file="productSearch.html" --> -->
-
-
-
-                </div> <!--end of second col -->
-
-
-
-                <div class="span6" id="divPayment">  <!--start of second col for payment details -->
-                    <!-- <! --#include file="paymentForm.html" --> -->
-                    <!--   <jsp:include page="paymentForm.jsp"></jsp:include> -->
-                </div> <!--end of second col -->
-
-
-            </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/jquery.chromatable.js"></script>
-
-        <script src="js/json2.js"></script>
-
-        <script>
-   
-            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 loadContent() 
-            { 
-                $("#divMainProductCol").load("productSearch.html"); 
-                console.log("came here!");
-                $("#divPayment").load("paymentForm.html");
-            } 
-
-  
-            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(){
-                
-                console.log("readCookie=="+readCookie('login'));
-                
-                if(readCookie('login') ==null)
-                    window.location.replace("login.html");
-   
-                loadContent();
-   
-   
-                //buttons 
-                var btnBackProductSearch = $("#btnBackProductSearch");
-                
-                var payBtn = $("#PayBtn");
-                var clearFormBtn = $("#clearFormBtn");
-                var btnFinish = $("#btnFinish");
-		
-                //either product or payment page
-                var divProduct = $("#divMainProductCol");
-                var divPayment = $("#divPayment");
-		
-                //product info span
-                var productTitle = $("#productTitle");
-       	
-                //customer details form
-                var customerName = $("#textCustomerName");
-                var customerAddress = $("#textCustomerAddress");
-                var customerContact = $("#textCustomerContact");
-                var customerEmail = $("#textCustomerEmail");
-   
-                btnBackProductSearch.click(function() {
-                    divProduct.show();
-                    divPayment.hide();
-                    payBtn.attr("disabled",false);
-                });
-	   
-	   
-	 
-                payBtn.click(function(){
-                    console.log("Pay button clicked!");
-                    
-                    divProduct.hide();
-                    divPayment.show();
-                    payBtn.attr("disabled",true);
-                    //	$("#divProduct").slideUp(300);
-                    //	$("#divPayment").slideDown(300);
-                });
-	
-                clearFormBtn.click(function() {
-                    $("#productTable > tbody").empty();
-                    customerName.val("");
-                    customerAddress.val("");
-                    customerContact.val("");
-                    customerEmail.val("");
-                });
-		
-		
-		
-                btnFinish.click(function() {
-			
-                    console.log("finish!!");
-			
-                    var creditCardNo = $("#textCreditCard").val();
-                    var cw2No = $("#textCW2").val();
-                    var creditExpiryDate = $("#textCreditCardExpiry").val();
-			
-                   
-                    var customerName = $("#textCustomerName").val();
-                    var customerAddress = $("#textCustomerAddress").val();
-                    var customerContact = $("#textCustomerContact").val();
-                    var customerEmail = $("#textCustomerEmail").val();
-			
-                   
-                    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();
-			
-                        allProducts.push(object);
-                    });
-			
-			
-                    for(i=0;i<allProducts.length;i++)
-                    {
-                        console.log(allProducts[i]);
-                    }
-                    
-                    
-                    function productBought(productTitle,qty)
-                    {
-                        this.productTitle = productTitle;
-                        this.qty = qty;
-                    }
-		
-  
-			
-                });
-		
-		
-		
-                //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)
-            {
-               
-                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>"+productPrice+"</td>";
-                var tableTotal = "<td >$"+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>

build/web/login.html

-
-<!DOCTYPE html>
-<html>
-
-
-    <head>
-        <meta charset="utf-8">
-        <title>Mobile POS</title>
-
-        <!-- Le styles -->
-        <link href="css/bootstrap.css" rel="stylesheet">
-        <style type="text/css">
-
-        </style>
-    </head>
-
-    <body>
-        <div class="container">
-            <img src="http://placehold.it/940x150" />
-        </div>
-        <br><br>
-        <div class="container">
-            <div class="span5 offset2">
-                <form name="loginForm" class="form-horizontal" action="index.html" method="post" onSubmit="return validateLoginFields()"  > 
-                    <div class="control-group">
-                        <label class="control-label" for="userId">Email</label>
-                        <div class="controls">
-                            <input input id="userId" type="text" name="userId" placeholder="Email">
-                        </div>
-                    </div>
-                    <div class="control-group">
-                        <label class="control-label" for="userPassword">Password</label>
-                        <div class="controls">
-                            <input id="password" name="userPassword" type="password" placeholder="Password">
-                        </div>
-                    </div>
-                    <div class="control-group">
-                        <div class="controls">
-                            <label class="checkbox">
-                                <input type="checkbox"> Remember me
-                            </label>
-                            <button id="loginBtn" type="submit" class="btn btn-large btn-block btn-primary">Login</button>
-                            <!--<button id="loginBtn" class="btn btn-large btn-block btn-primary">Login</button> -->
-                        </div>
-                    </div>
-                </form>
-            </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>
-   
-            function validateLoginFields() {
-                console.log("came login!!");
-		
-                //resetting the form
-                //document.forms[0].reset();
-		
-                //get the email and password
-                var userEmail = document.loginForm.userId.value;
-                var userPassword = document.loginForm.userPassword.value;
-		
-                if(userEmail.length==0)
-                {
-                    alert("Please fill in your userEmail");
-                    return false;
-                }
-                if(userPassword.length==0)
-                {
-                    alert("Please key in your password");
-                    return false;
-                }
-                
-                if(ajaxCheckValidUser())
-                {
-                    createCookie('login','true',0);
-                }
-                
-            }
-            
-            function ajaxCheckValidUser()
-            {
-                return true;
-            }
-            
-            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;
-            }
-
-            
-        </script>
-
-    </body>
-
-</html>

build/web/paymentForm.html

-<!DOCTYPE html>
-<html>
-    <head>
-        <link href="css/bootstrap.css" rel="stylesheet">
-    </head>
-    <body>
-        <form>
-            <Label style="font-size:20px">Customer's payment details </Label> <br>
-            <div class="row">
-                <div class="span2">
-                    <Label>Credit Card No </Label><br> 
-                    <Label>CW2/CVC2 </Label><br>
-                    <Label>Credit Card Expiry Date (MMYYYY) </Label><br>
-                </div>
-                <div class="span2">
-                    <input class="input-large"  type="text" style="right:auto" id="textCreditCard"> <br>
-                    <input class="input-large" type="text" align="right" id="textCW2"> <br>
-                    <input class="input-large" type="text" align="right" id="textCreditCardExpiry"> <br>
-                </div>
-            </div>
-        </form>
-
-        <textarea style="width: 380px" rows="5" placeholder="Digital Signature Here! To replace with javascript drawing in future"></textarea>
-        <br>
-
-        <div class="span2">
-            <button class="btn btn-large btn-block btn-primary" type="button" id="btnBackProductSearch"> < product search</button>
-        </div>
-        <form onSubmit="return checkFormValidation()">
-            <div class="span2">
-                <button class="btn btn-large btn-block btn-primary" id="btnFinish" type="submit">Finish</button>
-            </div>
-        </form>
-
-        <script>
-            
-        </script>
-    </body>
-</html>
-
-
-
-                <div class="span6" id="divPayment">  <!--start of second col for payment details -->
-                    <form>
-                        <Label style="font-size:20px">Customer's payment details </Label> <br>
-                        <div class="row">
-                            <div class="span2">
-                                <Label>Credit Card No </Label><br> 
-                                <Label>CW2/CVC2 </Label><br>
-                                <Label>Credit Card Expiry Date (MMYYYY) </Label><br>
-                            </div>
-                            <div class="span2">
-                                <input class="input-large"  type="text" style="right:auto" id="textCreditCard"> <br>
-                                <input class="input-large" type="text" align="right" id="textCW2"> <br>
-                                <input class="input-large" type="text" align="right" id="textCreditCardExpiry"> <br>
-                            </div>
-                        </div>
-                    </form>
-
-                    <textarea style="width: 380px" rows="5" placeholder="Digital Signature Here! To replace with javascript drawing in future"></textarea>
-                    <br>
-
-                    <div class="span2">
-                        <button class="btn btn-large btn-block btn-primary" type="button" id="btnBackProductSearch"> < product search</button>
-                    </div>
-                    <form onSubmit="return checkFormValidation()">
-                        <div class="span2">
-                            <button class="btn btn-large btn-block btn-primary" id="btnFinish" type="submit">Finish</button>
-                        </div>
-                    </form>
-                </div> <!--end of second col -->

build/web/paymentFormTemplate.html

         <div class="container">
             <img src="img/banner.png" />
         </div>
-        <br><br>
 
         <div class="container">
             <div class="row">
-                <div class="span6" id="customerPaymentDetail">  
-                    <h4> Customer payment detail </h4>
+                <div class="span12  " id="div_productExecuteSummary">
+                    <Legend> Summary of order </Legend>
+                    <table class="table table-bordered" id="table_productExecuteSummary">
+                        <thead>
+                            <tr>
+                                <th >Item(Qty)</th>
+                                <th>Total Price</th>
+                            </tr>
+                        </thead>
+
+                        <tbody>
+                        </tbody>
+                    </table>
+
+                    <h5 id="TotalPrice"> </h5>
+                </div>
+            </div>
+            <p/>
+            <div class="row">
+                <div class="span12" id="customerPaymentDetail">  
+                    <Legend> Customer payment detail </Legend>
 
                     <div class="row">
                         <form class="form-horizontal">
                         </form>
 
                     </div>
+
                     <div class="row">
 
                         <button class="btn   btn-primary" type="button" id="btnBackProductSearch"> < Back to product search</button>
                         <button class="btn offset1  btn-primary" id="btnFinish" type="button">Submit payment detail!</button>
 
                     </div> <!-- end of col for customer payment details -->
+
                     <div class="row">
                         <p id="errorMessage" class="text-error offset4"> </p>
                     </div>
                 </div>
 
-
-
-                <div class="span6 " id="div_productExecuteSummary">
-                    <h4> Summary of order </h4>
-                    <table class="table table-bordered" id="table_productExecuteSummary">
-                        <thead>
-                            <tr>
-                                <th >Item(Qty)</th>
-                                <th>Total Price</th>
-                            </tr>
-                        </thead>
-
-                        <tbody>
-                        </tbody>
-                    </table>
-
-                    <h5 id="TotalPrice"> </h5>
-                </div>
-
             </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>
 
 
-        <!-- 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>
-
-
-        <script>
+            <script>
             
             
-            function validateCreditCardField()
-            {
-                var validInput = true;
+                function validateCreditCardField()
+                {
+                    var validInput = true;
                 
-                var userCreditCardNo = $('#textCreditCard').val();
-                var userCw2Code = $('#textCW2').val();
-                var userExpiryDate = $('#textCreditCardExpiry').val();
+                    var userCreditCardNo = $('#textCreditCard').val();
+                    var userCw2Code = $('#textCW2').val();
+                    var userExpiryDate = $('#textCreditCardExpiry').val();
                  
-                removeExistingErrorMessage(); 
+                    removeExistingErrorMessage(); 
                  
-                if (userCreditCardNo.length==0){
-                    //alert("credit card no cannot be blank!");
+                    if (userCreditCardNo.length==0){
+                        //alert("credit card no cannot be blank!");
                 
-                    var errorMessage = document.createElement("text");
-                    errorMessage.className="text-error offset2";
-                    errorMessage.id = "creditNoError";
-                    errorMessage.innerHTML = "Credit card number is blank!"
+                        var errorMessage = document.createElement("text");
+                        errorMessage.className="text-error offset2";
+                        errorMessage.id = "creditNoError";
+                        errorMessage.innerHTML = "Credit card number is blank!"
                     
-                    var controlGroup = document.getElementById("creditCardNoGroup");
-                    controlGroup.appendChild(errorMessage);
+                        var controlGroup = document.getElementById("creditCardNoGroup");
+                        controlGroup.appendChild(errorMessage);
                     
-                    validInput= false;
+                        validInput= false;
+                    }
+                    if (userCw2Code.length==0){
+                        //alert("credit card no cannot be blank!");
+                
+                        var errorMessage = document.createElement("text");
+                        errorMessage.className="text-error offset2";
+                        errorMessage.id = "credCw2Error";
+                        errorMessage.innerHTML = "cw2 number is blank!"
+                    
+                        var controlGroup = document.getElementById("creditCw2Group");
+                        controlGroup.appendChild(errorMessage);
+                    
+                        validInput=false;
+                    }
+                
+                    if (userExpiryDate.length==0){
+                        //alert("credit card no cannot be blank!");
+                
+                        var errorMessage = document.createElement("text");
+                        errorMessage.className="text-error";
+                        errorMessage.id = "creditExpiryError";
+                        errorMessage.innerHTML = "&nbsp&nbsp&nbsp &nbspCredit card expiry date is blank!"
+                    
+                        var controlGroup = document.getElementById("creditCardExpiryGroup");
+                        controlGroup.appendChild(errorMessage);
+                    
+                        validInput=false;
+                    } 
+                    else if(userExpiryDate.length!=4 || !isNumber(userExpiryDate))
+                    {
+                        var errorMessage = document.createElement("text");
+                        errorMessage.className="text-error";
+                        errorMessage.id = "creditExpiryError";
+                        errorMessage.innerHTML = "&nbsp&nbsp&nbsp &nbspDate must in in integer and 4 digits!"
+                    
+                        var controlGroup = document.getElementById("creditCardExpiryGroup");
+                        controlGroup.appendChild(errorMessage);
+                    
+                        validInput=false;
+                    }
+                 
+                    return validInput;
                 }
-                if (userCw2Code.length==0){
-                    //alert("credit card no cannot be blank!");
+            
+                function removeExistingErrorMessage(){
+                    $('#creditNoError').remove();
+                    $('#credCw2Error').remove();
+                    $('#creditExpiryError').remove();
                 
-                    var errorMessage = document.createElement("text");
-                    errorMessage.className="text-error offset2";
-                    errorMessage.id = "credCw2Error";
-                    errorMessage.innerHTML = "cw2 number is blank!"
-                    
-                    var controlGroup = document.getElementById("creditCw2Group");
-                    controlGroup.appendChild(errorMessage);
-                    
-                    validInput=false;
                 }
-                
-                if (userExpiryDate.length==0){
-                    //alert("credit card no cannot be blank!");
-                
-                    var errorMessage = document.createElement("text");
-                    errorMessage.className="text-error";
-                    errorMessage.id = "creditExpiryError";
-                    errorMessage.innerHTML = "&nbsp&nbsp&nbsp &nbspCredit card expiry date is blank!"
-                    
-                    var controlGroup = document.getElementById("creditCardExpiryGroup");
-                    controlGroup.appendChild(errorMessage);
-                    
-                    validInput=false;
-                } 
-                else if(userExpiryDate.length!=4 || isNumber(userExpiryDate))
+            
+            
+                function isNumber (o){
+                    return ! isNaN (o-0) && o != null;
+                }
+            
+                function validateSearchField() {
+                }
+            
+                $('#btnBackProductSearch').click(function()
                 {
-                    var errorMessage = document.createElement("text");
-                    errorMessage.className="text-error";
-                    errorMessage.id = "creditExpiryError";
-                    errorMessage.innerHTML = "&nbsp&nbsp&nbsp &nbspDate must in in integer and 4 digits!"
-                    
-                    var controlGroup = document.getElementById("creditCardExpiryGroup");
-                    controlGroup.appendChild(errorMessage);
-                    
-                    validInput=false;
-                }
-                 
-                return validInput;
-            }
-            
-            function removeExistingErrorMessage(){
-                $('#creditNoError').remove();
-                $('#credCw2Error').remove();
-                $('#creditExpiryError').remove();
-                
-            }
-            
-            
-            function isNumber (o){
-                return ! isNaN (o-0) && o != null;
-            }
-            
-            function validateSearchField() {
-            }
-            
-            $('#btnBackProductSearch').click(function()
-            {
-                window.location = "indexTemplate.html";
-            });
+                    window.location = "indexTemplate.html";
+                });
   
             
-            $('#btnFinish').click(function()
-            {
+                $('#btnFinish').click(function()
+                {
                 
-                if(validateCreditCardField() == false)
-                    return;
+                    if(validateCreditCardField() == false)
+                        return;
                 
-                var orderId = readCookie('orderId');
-                var cardNo = $('#textCreditCard').val();
-                var code = $('#textCW2').val();
-                var expiryDate = $('#textCreditCardExpiry').val();
+                    var orderId = readCookie('orderId');
+                    var cardNo = $('#textCreditCard').val();
+                    var code = $('#textCW2').val();
+                    var expiryDate = $('#textCreditCardExpiry').val();
             
-                console.log("card no=="+cardNo + " code=="+code+" expiryDate=="+expiryDate);
+                    console.log("card no=="+cardNo + " code=="+code+" expiryDate=="+expiryDate);
               
-                var creditCardInfo = { "Order_ID": orderId, "cardno": cardNo, "code": code, "expiryDate": expiryDate };
-                var accepted = false;
-                $.ajax({
-                    type: "POST",
-                    url: "http://lowe.jschua.com/DinoPos/api/creditcards",
-                    async:false,
-                    data: JSON.stringify(creditCardInfo),
-                    contentType: "application/json; charset=utf-8",
-                    statusCode: {
-                        202: function () {
-                            accepted = true;
-                            console.log("gotten 202");
-                            //$('#result').text("202 (Accepted)");
+                    var creditCardInfo = { "Order_ID": orderId, "cardno": cardNo, "code": code, "expiryDate": expiryDate };
+                    var accepted = false;
+                    $.ajax({
+                        type: "POST",
+                        url: "http://lowe.jschua.com/DinoPos/api/creditcards",
+                        async:false,
+                        data: JSON.stringify(creditCardInfo),
+                        contentType: "application/json; charset=utf-8",
+                        statusCode: {
+                            202: function () {
+                                accepted = true;
+                                console.log("gotten 202");
+                                //$('#result').text("202 (Accepted)");
+                            },
+                            406: function () {
+                                console.log("gotten 406");
+                                $('#errorMessage').text("Invalid credit card detail!");
+                                //$('#result').text("406 (Not Acceptable)");
+                            }
                         },
-                        406: function () {
-                            console.log("gotten 406");
-                            $('#errorMessage').text("Invalid credit card detail!");
-                            //$('#result').text("406 (Not Acceptable)");
+                        success: function (data) {
+
+                            createCookie('receiptId',data,0);
+                            createCookie('creditCardNo',cardNo,0);
+                            window.location = "customerDetailTemplate.html";
+                    
+                        },
+                        dataType: "text",
+                        error: function (jqXHR, textStatus, errorThrown) {
+                            $('#result').text("The following error occured: " + textStatus, errorThrown);
                         }
-                    },
-                    success: function (data) {
-
-                        createCookie('receiptId',data,0);
-                        createCookie('creditCardNo',cardNo,0);
-                        window.location = "customerDetailTemplate.html";
-                    
-                    },
-                    dataType: "text",
-                    error: function (jqXHR, textStatus, errorThrown) {
-                        $('#result').text("The following error occured: " + textStatus, errorThrown);
-                    }
-                });
+                    });
              
                 
                 
-            });
+                });
                 
             
             
-            $(document).ready(function(){
+                $(document).ready(function(){
                 
-                getProductDataFromCookieAndDisplay();
-                var orderId = readCookie('orderId');
+                    getProductDataFromCookieAndDisplay();
+                    var orderId = readCookie('orderId');
             
-                var totalPrice = readCookie('grandTotal');
-                $('#TotalPrice').text("Total: $"+totalPrice);
+                    var totalPrice = readCookie('grandTotal');
+                    $('#TotalPrice').text("Total: $"+totalPrice);
             
-            });
+                });
             
-            function getProductDataFromCookieAndDisplay()
-            {
-                var hehe = new Array();
-                hehe = $.parseJSON(readCookie('shoppingCart'));
-                if(hehe!=null)
+                function getProductDataFromCookieAndDisplay()
                 {
-                    for(var i=0;i<hehe.length;i++)
-                    {        
-                        console.log("productID =="+hehe[i].productId);
-                        console.log("productQty =="+hehe[i].productQty);
-                        console.log("productName=="+hehe[i].productName);
-                        console.log("productTotal ="+hehe[i].productTotal);
+                    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);
+                            console.log("productName=="+hehe[i].productName);
+                            console.log("productTotal ="+hehe[i].productTotal);
                              
-                        var productId = hehe[i].productId;
-                        var productName = hehe[i].productName;
-                        var productQty = hehe[i].productQty;
+                            var productId = hehe[i].productId;
+                            var productName = hehe[i].productName;
+                            var productQty = hehe[i].productQty;
                                     
-                        var productTotal = hehe[i].productTotal;
-                        var productNameAndQty = productName+"("+productQty+")";
+                            var productTotal = hehe[i].productTotal;
+                            var productNameAndQty = productName+"("+productQty+")";
                                     
-                        var tableDetailHeader ="<tr>";
-                        var tableProductNameAndQty ="<td class=\""+productId+"\" id=\"productNameAndQty\">"+productNameAndQty+"</td>";
-                        var tableProductTotal ="<td id=\"productTotal\">"+productTotal+"</td>";
-                        var tableDetailFooter ="</tr>";
-                        var entireTable = tableDetailHeader + tableProductNameAndQty + tableProductTotal +tableDetailFooter;
+                            var tableDetailHeader ="<tr>";
+                            var tableProductNameAndQty ="<td class=\""+productId+"\" id=\"productNameAndQty\">"+productNameAndQty+"</td>";
+                            var tableProductTotal ="<td id=\"productTotal\">"+productTotal+"</td>";
+                            var tableDetailFooter ="</tr>";
+                            var entireTable = tableDetailHeader + tableProductNameAndQty + tableProductTotal +tableDetailFooter;
                                     
-                        $("#table_productExecuteSummary > tbody:last").append(entireTable);
+                            $("#table_productExecuteSummary > tbody:last").append(entireTable);
                                     
+                        }
+                    } 
+                }
+  
+                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 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(){
+                //  $(document).ready(function(){
                 
-            /*  Cookie checking code
-                console.log("readCookie=="+readCookie('login'));
+                /*  Cookie checking code
+                    console.log("readCookie=="+readCookie('login'));
                 
-                if(readCookie('login') ==null)
-                    window.location.replace("login.html");
+                    if(readCookie('login') ==null)
+                        window.location.replace("login.html");
    
-                loadContent();
-             */
+                    loadContent();
+                 */
    
                
 		
-            //   });
+                //   });
 	
         
        
             
-        </script>
+            </script>
 
     </body>
 

build/web/paymentSummaryTemplate.html

+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Mobile POS</title>
+
+        <link href="css/bootstrap.css" rel="stylesheet">
+
+    </head>
+
+    <body>
+        <div class="container">
+            <img src="img/banner.png" />
+        </div>
+
+        <div class="container">
+            <div class="row">
+                <div class="span12  " id="div_productExecuteSummary">
+                    <Legend id="receiptId"> Order </Legend>
+                    <table class="table table-bordered" id="table_productExecuteSummary">
+                        <thead>
+                            <tr>
+                                <th >Item(Qty)</th>
+                                <th>Total Price</th>
+                            </tr>
+                        </thead>
+
+                        <tbody>
+                        </tbody>
+                    </table>
+
+                    <h5 id="TotalPrice"> </h5>
+                </div>
+            </div>
+            <p/>
+            <div class="row">
+                <div class="span12  " id="div_customerDetails">
+                    <Legend > Deliver details </Legend>
+
+                    <table class="table table-bordered" id="table_customerDetail">
+                        <thead>
+                            <tr></tr>
+                            <tr>
+                                <th class="span2" >Name </th>
+                                <td  id="td_customerName"></td>
+                            </tr>
+                            <tr>
+                                <th>Address </th>
+                                <td  id="td_customerAddress"> </td>
+                            </tr>
+                            <tr>
+                                <th>Tel </th>
+                                <td  id="td_customerTel"> </td>
+                            </tr>
+                            <tr>
+                                <th>Email </th>
+                                <td  id="td_customerEmail"> </td>
+                            </tr>
+                        </thead>
+
+                    </table>
+
+                </div>
+            </div>
+            <br/><br/>
+            <p class="offset4">
+                <small>Thank you for shopping with iFurniture.</small>
+            </p>
+
+        </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>
+
+
+        <script>
+            
+            
+          
+            
+            
+            $(document).ready(function(){
+                
+                getProductDataFromCookieAndDisplay();
+                var orderId = readCookie('orderId');
+            
+                var totalPrice = readCookie('grandTotal');
+                $('#TotalPrice').text("Total: $"+totalPrice);
+               
+                //load recipt number 
+                $('#receiptId').text("Receipt No - "+readCookie('receiptId'));
+                
+                //set customer delivery info   
+                var customerDetail = $.parseJSON(readCookie('customerDetail'));
+                if(customerDetail!=null)
+                {
+                    $('#td_customerName').text(customerDetail.Name);
+                    $('#td_customerAddress').text(customerDetail.Address);
+                    $('#td_customerTel').text(customerDetail.Tel);
+                    $('#td_customerEmail').text(customerDetail.Email);
+                    
+                } 
+
+
+
+            });
+            
+            function getProductDataFromCookieAndDisplay()
+            {
+                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);
+                        console.log("productName=="+hehe[i].productName);
+                        console.log("productTotal ="+hehe[i].productTotal);
+                             
+                        var productId = hehe[i].productId;
+                        var productName = hehe[i].productName;
+                        var productQty = hehe[i].productQty;
+                                    
+                        var productTotal = hehe[i].productTotal;
+                        var productNameAndQty = productName+"("+productQty+")";
+                                    
+                        var tableDetailHeader ="<tr>";
+                        var tableProductNameAndQty ="<td class=\""+productId+"\" id=\"productNameAndQty\">"+productNameAndQty+"</td>";
+                        var tableProductTotal ="<td id=\"productTotal\">"+productTotal+"</td>";
+                        var tableDetailFooter ="</tr>";
+                        var entireTable = tableDetailHeader + tableProductNameAndQty + tableProductTotal +tableDetailFooter;
+                                    
+                        $("#table_productExecuteSummary > tbody:last").append(entireTable);
+                                    
+                    }
+                } 
+            }
+  
+            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();
+             */
+   
+               
+		
+            //   });
+	
+        
+       
+            
+        </script>
+
+    </body>
+
+</html>

build/web/productSearch.html

-<!DOCTYPE html>
-<html>
-    <head>
-        <link href="css/bootstrap.css" rel="stylesheet">
-    </head>
-    <body>
-        <h4> Enter Product ID to search </h4>
-        <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>
-
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-        <script src="js/bootstrap.min.js"></script>
-        <script src="js/jquery.chromatable.js"></script>
-        <script src="js/json2.js"></script>
-
-        <script>
-            function validateSearchField() {
-                 
-                var productSearch = document.productSearchKey.value;
-                if(productSearch.length==0)
-                {
-                    alert("Please do not leave product ID hehe or name blank!");
-                    return false;
-                }
-                else
-                    return true;
-            }
-            
-            function searchProduct() {
-                
-                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);
-                
-                $.getJSON(url,
-                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);
-                                
-                            });
-                    
-                        }
-                        else
-                        {
-                            displayProductInfo(data);
-                            console.log(data.Name);
-                        }
-                    }
-                })
-                
-            }
-            
-            function clearSearchResult()
-            {
-         
-                if($('#divSubProductCol').children().length >0)
-                {
-                    $('#divSubProductCol').empty();
-                }
-            }
-            
-            function displayProductInfo(val)
-            {
-                var divInPlace =  document.getElementById("divSubProductCol"); // $('#divSubProductCol');
-                if(!divInPlace) console.log("can't find divSubProductCol!");
-                
-                console.log(divInPlace);
-                
-                var mainDiv = document.createElement("div");
-                mainDiv.className ="row";
-                                
-                var divForImage = document.createElement("div");
-                divForImage.className ="span2";
-                val.imageUrl = "http://www.ikea.com/PIAimages/0159232_PE315670_S3.JPG"
-                divForImage.innerHTML ="<img src=\""+val.imageUrl+"\" height=100 width=100>"
-                               
-                var divForProductInfo = document.createElement("div");
-                divForProductInfo.className ="span4";
-                divForProductInfo.setAttribute("id", "div_"+val.Product_ID);
-                var productBrand = "<h3> <span id=\"productBrand\">"+val.Brand+"</span></h3>";
-                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= 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;
-            }
-            /*
-            var btnAddItemToCart = $("#btnAddItemToCart");
-            btnAddItemToCart.click(function() {
-			
-                //product info span
-                productTitle = $("#productTitle");
-                productDescription = $("#productDescription");
-                productPrice = $("#productPrice");
-                //Quantity user pressed
-                inputProductQty = $("#inputProductQty");
-				
-                //console.log("productPrice".text());
-			
-			
-                var newProductPrice = productPrice.text().slice(1,productPrice.text().length);
-				
-                var total = parseInt(newProductPrice) * inputProductQty.val();
-					
-                $("#productTable > tbody:last").append("<tr> <td class=\"productTitle\">"+productTitle.text()+"</td> <td class=\"productQty\">"+inputProductQty.val()+"</td> <td>"+productPrice.text()+"</td> <td>$"+total+"</td> <td><button class=\"btn btn-mini\" 	 type=\"button\" onclick=\"deleteRowItem(this)\" id=\"btnDeleteItem\""+i+"> x</button> </td></tr>");		
-		
-            });
-             */
-        </script>
-
-    </body>
-
-
-</html>

build/web/test.html

-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <title>Mobile POS</title>
-
-        <!-- Le styles -->
-        <link href="css/bootstrap.css" rel="stylesheet">
-    </head>
-
-    <body>
-        <div class="container">
-            <img src="http://placehold.it/940x150" />
-        </div>
-        <br><br>
-
-        <div class="container">
-           dsadasd
-        </div>
-
-  
-    </body>
-
-</html>

dist/PosWebHtml.war

Binary file modified.

web/customerDetailTemplate.html

                     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) {

web/index.html

-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <title>Mobile POS</title>
-
-        <!-- Le styles -->
-        <link href="css/bootstrap.css" rel="stylesheet">
-    </head>
-
-    <body>
-        <div class="container">
-            <img src="http://placehold.it/940x150" />
-        </div>
-        <br><br>
-
-        <div class="container">
-            <div class="row">
-                <div class="span6">
-                    <h4> Order Form </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">
-                            Discount: 
-                            <br><br>
-                            Total:
-                        </div>
-
-                        <div class ="span4">
-                            <form>
-                                <Label>Customer's details </Label>
-                                <input class="input-xlarge" id="textCustomerName" type="text" placeholder="Name">
-                                <input class="input-xlarge" id="textCustomerAddress" type="text" placeholder="Address to deliver product to">
-                                <input class="input-xlarge" id="textCustomerContact" type="text" placeholder="Contact No.">
-                                <input class="input-xlarge" id="textCustomerEmail" type="text" placeholder="Email for e-recipet">
-                            </form>
-                        </div>
-                    </div> <!--end of row-->
-
-
-
-                    <div class="row"> <!--start of btm row for pay and cancel order -->
-                        <div class="span2">  
-
-                            <button class="btn btn-large btn-primary" type="button" id="PayBtn" > Pay</button>
-                        </div>
-                        <div class="span2">
-                            <button class="btn btn-large btn-danger" type="button" id="clearFormBtn">Clear Form</button>
-                        </div>
-                    </div> <!-- end of btm row for pay and cancel order -->
-
-
-
-                </div> <!--end of first col -->
-
-                <div class="span6" id="divMainProductCol">  <!--start of second col for product search -->
-
-                    <!--  <jsp:include page="productSearch.jsp"></jsp:include> -->
-                    <!--	<! --#include file="productSearch.html" --> -->
-
-
-
-                </div> <!--end of second col -->
-
-
-
-                <div class="span6" id="divPayment">  <!--start of second col for payment details -->
-                    <!-- <! --#include file="paymentForm.html" --> -->
-                    <!--   <jsp:include page="paymentForm.jsp"></jsp:include> -->
-                </div> <!--end of second col -->
-
-
-            </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/jquery.chromatable.js"></script>
-
-        <script src="js/json2.js"></script>
-
-        <script>
-   
-            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 loadContent() 
-            { 
-                $("#divMainProductCol").load("productSearch.html"); 
-                console.log("came here!");
-                $("#divPayment").load("paymentForm.html");
-            } 
-
-  
-            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(){
-                
-                console.log("readCookie=="+readCookie('login'));
-                
-                if(readCookie('login') ==null)
-                    window.location.replace("login.html");
-   
-                loadContent();
-   
-   
-                //buttons 
-                var btnBackProductSearch = $("#btnBackProductSearch");
-                
-                var payBtn = $("#PayBtn");
-                var clearFormBtn = $("#clearFormBtn");
-                var btnFinish = $("#btnFinish");
-		
-                //either product or payment page
-                var divProduct = $("#divMainProductCol");
-                var divPayment = $("#divPayment");
-		
-                //product info span
-                var productTitle = $("#productTitle");
-       	
-                //customer details form
-                var customerName = $("#textCustomerName");
-                var customerAddress = $("#textCustomerAddress");
-                var customerContact = $("#textCustomerContact");
-                var customerEmail = $("#textCustomerEmail");
-   
-                btnBackProductSearch.click(function() {
-                    divProduct.show();
-                    divPayment.hide();
-                    payBtn.attr("disabled",false);
-                });
-	   
-	   
-	 
-                payBtn.click(function(){
-                    console.log("Pay button clicked!");
-                    
-                    divProduct.hide();
-                    divPayment.show();
-                    payBtn.attr("disabled",true);
-                    //	$("#divProduct").slideUp(300);
-                    //	$("#divPayment").slideDown(300);
-                });
-	
-                clearFormBtn.click(function() {
-                    $("#productTable > tbody").empty();
-                    customerName.val("");
-                    customerAddress.val("");
-                    customerContact.val("");
-                    customerEmail.val("");
-                });
-		
-		
-		
-                btnFinish.click(function() {
-			
-                    console.log("finish!!");
-			
-                    var creditCardNo = $("#textCreditCard").val();
-                    var cw2No = $("#textCW2").val();
-                    var creditExpiryDate = $("#textCreditCardExpiry").val();
-			
-                   
-                    var customerName = $("#textCustomerName").val();
-                    var customerAddress = $("#textCustomerAddress").val();
-                    var customerContact = $("#textCustomerContact").val();
-                    var customerEmail = $("#textCustomerEmail").val();
-			
-                   
-                    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();
-			
-                        allProducts.push(object);
-                    });
-			
-			
-                    for(i=0;i<allProducts.length;i++)
-                    {
-                        console.log(allProducts[i]);
-                    }
-                    
-                    
-                    function productBought(productTitle,qty)
-                    {
-                        this.productTitle = productTitle;
-                        this.qty = qty;
-                    }
-		
-  
-			
-                });
-		
-		
-		
-                //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)
-            {
-               
-                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>"+productPrice+"</td>";
-                var tableTotal = "<td >$"+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>

web/login.html

-
-<!DOCTYPE html>
-<html>
-
-
-    <head>
-        <meta charset="utf-8">
-        <title>Mobile POS</title>
-
-        <!-- Le styles -->
-        <link href="css/bootstrap.css" rel="stylesheet">
-        <style type="text/css">
-
-        </style>
-    </head>
-
-    <body>
-        <div class="container">
-            <img src="http://placehold.it/940x150" />
-        </div>
-        <br><br>
-        <div class="container">
-            <div class="span5 offset2">
-                <form name="loginForm" class="form-horizontal" action="index.html" method="post" onSubmit="return validateLoginFields()"  > 
-                    <div class="control-group">
-                        <label class="control-label" for="userId">Email</label>
-                        <div class="controls">
-                            <input input id="userId" type="text" name="userId" placeholder="Email">
-                        </div>
-                    </div>
-                    <div class="control-group">
-                        <label class="control-label" for="userPassword">Password</label>
-                        <div class="controls">
-                            <input id="password" name="userPassword" type="password" placeholder="Password">
-                        </div>
-                    </div>
-                    <div class="control-group">
-                        <div class="controls">
-                            <label class="checkbox">
-                                <input type="checkbox"> Remember me
-                            </label>
-                            <button id="loginBtn" type="submit" class="btn btn-large btn-block btn-primary">Login</button>
-                            <!--<button id="loginBtn" class="btn btn-large btn-block btn-primary">Login</button> -->
-                        </div>
-                    </div>
-                </form>
-            </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>
-   
-            function validateLoginFields() {
-                console.log("came login!!");
-		
-                //resetting the form
-                //document.forms[0].reset();
-		
-                //get the email and password
-                var userEmail = document.loginForm.userId.value;
-                var userPassword = document.loginForm.userPassword.value;
-		
-                if(userEmail.length==0)
-                {
-                    alert("Please fill in your userEmail");
-                    return false;
-                }
-                if(userPassword.length==0)
-                {
-                    alert("Please key in your password");
-                    return false;
-                }
-                
-                if(ajaxCheckValidUser())
-                {
-                    createCookie('login','true',0);
-                }
-                
-            }
-            
-            function ajaxCheckValidUser()
-            {
-                return true;
-            }
-            
-            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;
-            }
-
-            
-        </script>
-
-    </body>
-
-</html>

web/paymentForm.html

-<!DOCTYPE html>
-<html>
-    <head>
-        <link href="css/bootstrap.css" rel="stylesheet">
-    </head>
-    <body>
-        <form>
-            <Label style="font-size:20px">Customer's payment details </Label> <br>
-            <div class="row">
-                <div class="span2">
-                    <Label>Credit Card No </Label><br> 
-                    <Label>CW2/CVC2 </Label><br>
-                    <Label>Credit Card Expiry Date (MMYYYY) </Label><br>
-                </div>
-                <div class="span2">
-                    <input class="input-large"  type="text" style="right:auto" id="textCreditCard"> <br>
-                    <input class="input-large" type="text" align="right" id="textCW2"> <br>
-                    <input class="input-large" type="text" align="right" id="textCreditCardExpiry"> <br>
-                </div>
-            </div>
-        </form>
-
-        <textarea style="width: 380px" rows="5" placeholder="Digital Signature Here! To replace with javascript drawing in future"></textarea>
-        <br>
-
-        <div class="span2">
-            <button class="btn btn-large btn-block btn-primary" type="button" id="btnBackProductSearch"> < product search</button>
-        </div>
-        <form onSubmit="return checkFormValidation()">
-            <div class="span2">
-                <button class="btn btn-large btn-block btn-primary" id="btnFinish" type="submit">Finish</button>
-            </div>
-        </form>
-
-        <script>
-            
-        </script>
-    </body>
-</html>
-
-
-
-                <div class="span6" id="divPayment">  <!--start of second col for payment details -->
-                    <form>
-                        <Label style="font-size:20px">Customer's payment details </Label> <br>
-                        <div class="row">
-                            <div class="span2">
-                                <Label>Credit Card No </Label><br> 
-                                <Label>CW2/CVC2 </Label><br>
-                                <Label>Credit Card Expiry Date (MMYYYY) </Label><br>
-                            </div>
-                            <div class="span2">
-                                <input class="input-large"  type="text" style="right:auto" id="textCreditCard"> <br>
-                                <input class="input-large" type="text" align="right" id="textCW2"> <br>
-                                <input class="input-large" type="text" align="right" id="textCreditCardExpiry"> <br>
-                            </div>
-                        </div>
-                    </form>
-
-                    <textarea style="width: 380px" rows="5" placeholder="Digital Signature Here! To replace with javascript drawing in future"></textarea>
-                    <br>
-
-                    <div class="span2">
-                        <button class="btn btn-large btn-block btn-primary" type="button" id="btnBackProductSearch"> < product search</button>
-                    </div>
-                    <form onSubmit="return checkFormValidation()">
-                        <div class="span2">
-                            <button class="btn btn-large btn-block btn-primary" id="btnFinish" type="submit">Finish</button>
-                        </div>
-                    </form>
-                </div> <!--end of second col -->

web/paymentFormTemplate.html

         <div class="container">
             <img src="img/banner.png" />
         </div>
-        <br><br>
 
         <div class="container">
             <div class="row">
-                <div class="span6" id="customerPaymentDetail">  
-                    <h4> Customer payment detail </h4>
+                <div class="span12  " id="div_productExecuteSummary">
+                    <Legend> Summary of order </Legend>
+                    <table class="table table-bordered" id="table_productExecuteSummary">
+                        <thead>
+                            <tr>
+                                <th >Item(Qty)</th>
+                                <th>Total Price</th>
+                            </tr>
+                        </thead>
+
+                        <tbody>
+                        </tbody>
+                    </table>
+
+                    <h5 id="TotalPrice"> </h5>
+                </div>
+            </div>
+            <p/>
+            <div class="row">
+                <div class="span12" id="customerPaymentDetail">  
+                    <Legend> Customer payment detail </Legend>
 
                     <div class="row">
                         <form class="form-horizontal">
                         </form>
 
                     </div>
+
                     <div class="row">
 
                         <button class="btn   btn-primary" type="button" id="btnBackProductSearch"> < Back to product search</button>
                         <button class="btn offset1  btn-primary" id="btnFinish" type="button">Submit payment detail!</button>
 
                     </div> <!-- end of col for customer payment details -->
+
                     <div class="row">
                         <p id="errorMessage" class="text-error offset4"> </p>
                     </div>
                 </div>
 
-
-
-                <div class="span6 " id="div_productExecuteSummary">
-                    <h4> Summary of order </h4>
-                    <table class="table table-bordered" id="table_productExecuteSummary">
-                        <thead>
-                            <tr>
-                                <th >Item(Qty)</th>
-                                <th>Total Price</th>
-                            </tr>
-                        </thead>
-
-                        <tbody>
-                        </tbody>
-                    </table>
-
-                    <h5 id="TotalPrice"> </h5>
-                </div>
-
             </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>
 
 
-        <!-- 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>
-
-
-        <script>
+            <script>
             
             
-            function validateCreditCardField()
-            {
-                var validInput = true;
+                function validateCreditCardField()
+                {