Commits

Anonymous committed 9f443ef

changed all the html pages to be without template

Comments (0)

Files changed (8)

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>

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>
+
+<!DOCTYPE html>
+<html>
+
+    <head>
+        <meta charset="utf-8">
+        <title id="systemName">Mobile POS</title>
+
+        <!-- Le styles -->
+        <link href="css/bootstrap.css" rel="stylesheet">
+        <style type="text/css">
+
+        </style>
+    </head>
+
+    <body>
+        <div class="container">
+            <img id ="mainBanner" src=""/>
+        </div>
+        <br><br>
+        <div class="container">
+            <div class="span6 offset2">
+                <form name="loginForm" class="form-horizontal"> 
+                    <div class="control-group">
+                        <label class="control-label" for="userId">User Name</label>
+                        <div class="controls" id="lolol">
+                            <input id="userId" type="text" name="userId" placeholder="User Name"  class="input-xlarge">
+                        </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"  class="input-xlarge">
+                        </div>
+                    </div>
+                    <div class="control-group">
+                        <label class="control-label" for="userBranch">Branch</label>
+                        <div class="controls">
+                            <select id="listForBranchDetails" class="span6">
+
+                            </select>
+                        </div>
+                    </div>
+                    <div class="control-group">
+                        <div class="controls">
+                            <label class="checkbox">
+                                <input type="checkbox" id="rememberCheckBox"> Remember me
+                            </label>
+                            <button id="loginBtn" type="button" class="btn btn-large btn-block btn-primary">Login</button>
+                            <p id="errorMessage" class="text-error"> </p>
+                            <div class="progress progress-striped active" id="progressBarDiv" style="display:none">
+                                <div class="bar" id="progressBar" style="width: 40%; display:none"></div>
+                            </div>
+                        </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>
+        
+        <!-- config java script -->
+        <script src="js/loginTemplate.js"></script>
+        <script src="js/mainConfig.js"></script>
+        
+        <script>
+   
+            $(document).ready(function(){
+                runAtStartUp();
+                
+                if(readCookie("rememberLogin")=="true")
+                {
+                    window.location = "index.html";
+                }
+                
+                loadBranchDetails();
+                
+            });
+            
+            function loadBranchDetails() {
+                
+                var divInPlace =  document.getElementById("listForBranchDetails");
+                
+                $.getJSON("http://lowe.jschua.com/DinoPos/api/branches/", function (data) {
+                
+                    // On success, 'data' contains a list of branch.
+                    $.each(data, function (key, val) {
+
+                        // Format the text to display.
+                        var branchOption = document.createElement("option");
+                        branchOption.innerHTML = val.Name;
+                        branchOption.id = val.Branch_ID;
+                        branchOption.className = val.Tax_Percentage;
+                        divInPlace.appendChild(branchOption);
+
+                        console.log(val.Name);
+                    
+                    });
+                })
+                .fail(
+                function (jqXHR, textStatus, err) {
+                    $('#allbranch').text('Error: ' + err);
+                });
+            }
+           
+            $('#loginBtn').click(function() {
+                console.log("came login!!");
+                
+                numberOfLoop=0;
+		
+                if(validateField())
+                {
+                    checkValidUserAndRedirect();
+                    tid = setInterval(showProgress, 750);
+                }
+            });
+            
+            function validateField()
+            {
+                //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;
+                }
+                
+                return true;
+            }
+            
+            //global variable for the progress bars.
+            var numberOfLoop = 0;
+            var tid;
+        
+            function showProgress()
+            {
+                console.log("came into show progress");
+                numberOfLoop++;
+                if(numberOfLoop ==6)
+                {    
+                    clearTimeout(tid);
+                    return;
+                }
+                var percentage = Number(numberOfLoop*20);
+                $('#progressBarDiv').attr('style', "");
+                $('#progressBar').attr('style',"width:"+percentage+"%");
+                
+              
+            }
+            
+          
+            
+            function checkValidUserAndRedirect()
+            {
+                
+                var userName = document.loginForm.userId.value;
+                var userPassword = document.loginForm.userPassword.value;
+                
+                console.log("username =="+userName);
+                console.log("userPassword=="+userPassword);
+                
+                
+                var userInfo = { "username": userName, "password": userPassword };
+                $.ajax({
+                    type: "POST",
+                    url: "http://lowe.jschua.com/DinoPos/api/users",
+                    async: true,
+                    data: JSON.stringify(userInfo),
+                    contentType: "application/json; charset=utf-8",
+                    statusCode: {
+                        202: function () {
+                            //$('#result').text("202 (Accepted)");
+
+                        },
+                        406: function () {
+                            //$('#result').text("406 (Not Acceptable)");
+                            $('#errorMessage').text("Invalid login or password. Please try again.");
+                            clearTimeout(tid);
+                            $('#progressBar').attr('style',"width:100%");
+                          
+                        }
+                    },
+                    success: function (data) {
+                        
+                        var x = document.getElementById("listForBranchDetails").selectedIndex;
+                        var branchId = document.getElementsByTagName("option")[x].id;
+                        var taxPercentage = document.getElementsByTagName("option")[x].className;
+                        
+                        var daysForCookie = 0;
+                        
+                        if($('input[id=rememberCheckBox]').is(':checked'))
+                        {
+                            daysForCookie = 3;
+                            createCookie('rememberLogin','true',3);
+                           
+                        }
+                        
+                        createCookie('employeeId',data,daysForCookie);
+                        createCookie('branchId',branchId,daysForCookie);
+                        createCookie('taxPercentage',taxPercentage,daysForCookie);
+                        
+                        window.location = "index.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;
+            }
+
+            
+        </script>
+
+    </body>
+
+</html>

web/loginTemplate.html

-
-<!DOCTYPE html>
-<html>
-
-    <head>
-        <meta charset="utf-8">
-        <title id="systemName">Mobile POS</title>
-
-        <!-- Le styles -->
-        <link href="css/bootstrap.css" rel="stylesheet">
-        <style type="text/css">
-
-        </style>
-    </head>
-
-    <body>
-        <div class="container">
-            <img id ="mainBanner" src=""/>
-        </div>
-        <br><br>
-        <div class="container">
-            <div class="span6 offset2">
-                <form name="loginForm" class="form-horizontal"> 
-                    <div class="control-group">
-                        <label class="control-label" for="userId">User Name</label>
-                        <div class="controls" id="lolol">
-                            <input id="userId" type="text" name="userId" placeholder="User Name"  class="input-xlarge">
-                        </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"  class="input-xlarge">
-                        </div>
-                    </div>
-                    <div class="control-group">
-                        <label class="control-label" for="userBranch">Branch</label>
-                        <div class="controls">
-                            <select id="listForBranchDetails" class="span6">
-
-                            </select>
-                        </div>
-                    </div>
-                    <div class="control-group">
-                        <div class="controls">
-                            <label class="checkbox">
-                                <input type="checkbox" id="rememberCheckBox"> Remember me
-                            </label>
-                            <button id="loginBtn" type="button" class="btn btn-large btn-block btn-primary">Login</button>
-                            <p id="errorMessage" class="text-error"> </p>
-                            <div class="progress progress-striped active" id="progressBarDiv" style="display:none">
-                                <div class="bar" id="progressBar" style="width: 40%; display:none"></div>
-                            </div>
-                        </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>
-        
-        <!-- config java script -->
-        <script src="js/loginTemplate.js"></script>
-        <script src="js/mainConfig.js"></script>
-        
-        <script>
-   
-            $(document).ready(function(){
-                runAtStartUp();
-                
-                if(readCookie("rememberLogin")=="true")
-                {
-                    window.location = "indexTemplate.html";
-                }
-                
-                loadBranchDetails();
-                
-            });
-            
-            function loadBranchDetails() {
-                
-                var divInPlace =  document.getElementById("listForBranchDetails");
-                
-                $.getJSON("http://lowe.jschua.com/DinoPos/api/branches/", function (data) {
-                
-                    // On success, 'data' contains a list of branch.
-                    $.each(data, function (key, val) {
-
-                        // Format the text to display.
-                        var branchOption = document.createElement("option");
-                        branchOption.innerHTML = val.Name;
-                        branchOption.id = val.Branch_ID;
-                        branchOption.className = val.Tax_Percentage;
-                        divInPlace.appendChild(branchOption);
-
-                        console.log(val.Name);
-                    
-                    });
-                })
-                .fail(
-                function (jqXHR, textStatus, err) {
-                    $('#allbranch').text('Error: ' + err);
-                });
-            }
-           
-            $('#loginBtn').click(function() {
-                console.log("came login!!");
-                
-                numberOfLoop=0;
-		
-                if(validateField())
-                {
-                    checkValidUserAndRedirect();
-                    tid = setInterval(showProgress, 750);
-                }
-            });
-            
-            function validateField()
-            {
-                //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;
-                }
-                
-                return true;
-            }
-            
-            //global variable for the progress bars.
-            var numberOfLoop = 0;
-            var tid;
-        
-            function showProgress()
-            {
-                console.log("came into show progress");
-                numberOfLoop++;
-                if(numberOfLoop ==6)
-                {    
-                    clearTimeout(tid);
-                    return;
-                }
-                var percentage = Number(numberOfLoop*20);
-                $('#progressBarDiv').attr('style', "");
-                $('#progressBar').attr('style',"width:"+percentage+"%");
-                
-              
-            }
-            
-          
-            
-            function checkValidUserAndRedirect()
-            {
-                
-                var userName = document.loginForm.userId.value;
-                var userPassword = document.loginForm.userPassword.value;
-                
-                console.log("username =="+userName);
-                console.log("userPassword=="+userPassword);
-                
-                
-                var userInfo = { "username": userName, "password": userPassword };
-                $.ajax({
-                    type: "POST",
-                    url: "http://lowe.jschua.com/DinoPos/api/users",
-                    async: true,
-                    data: JSON.stringify(userInfo),
-                    contentType: "application/json; charset=utf-8",
-                    statusCode: {
-                        202: function () {
-                            //$('#result').text("202 (Accepted)");
-
-                        },
-                        406: function () {
-                            //$('#result').text("406 (Not Acceptable)");
-                            $('#errorMessage').text("Invalid login or password. Please try again.");
-                            clearTimeout(tid);
-                            $('#progressBar').attr('style',"width:100%");
-                          
-                        }
-                    },
-                    success: function (data) {
-                        
-                        var x = document.getElementById("listForBranchDetails").selectedIndex;
-                        var branchId = document.getElementsByTagName("option")[x].id;
-                        var taxPercentage = document.getElementsByTagName("option")[x].className;
-                        
-                        var daysForCookie = 0;
-                        
-                        if($('input[id=rememberCheckBox]').is(':checked'))
-                        {
-                            daysForCookie = 3;
-                            createCookie('rememberLogin','true',3);
-                           
-                        }
-                        
-                        createCookie('employeeId',data,daysForCookie);
-                        createCookie('branchId',branchId,daysForCookie);
-                        createCookie('taxPercentage',taxPercentage,daysForCookie);
-                        
-                        window.location = "indexTemplate.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;
-            }
-
-            
-        </script>
-
-    </body>
-
-</html>

web/paymentForm.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>
+
+        <div class="container">
+            <div class="row">
+                <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">
+                            <div class="control-group" id="creditCardNoGroup">
+                                <label class="control-label" for="textCreditCard" >Credit Card No </label>
+
+                                <div class="controls">
+                                    <input class="input-large"  type="text"  id="textCreditCard"> <br>
+                                </div>
+                            </div>
+                            <div class="control-group" id="creditCw2Group">
+                                <label class="control-label" for="textCW2" >CW2/CVC2 </label>
+
+                                <div class="controls">
+                                    <input class="input-large" type="text"  id="textCW2"> <br>
+                                </div>
+                            </div>
+                            <div class="control-group" id="creditCardExpiryGroup">
+                                <label class="control-label" for="textCreditCardExpiry">Credit Card Expiry Date (MMYY) </label>
+
+                                <div class="controls">
+                                    <input class="input-large" type="text"  id="textCreditCardExpiry"> <br>
+                                </div>
+                            </div>
+                        </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>
+
+
+            <!-- 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 validateCreditCardField()
+                {
+                    var validInput = true;
+                
+                    var userCreditCardNo = $('#textCreditCard').val();
+                    var userCw2Code = $('#textCW2').val();
+                    var userExpiryDate = $('#textCreditCardExpiry').val();
+                 
+                    removeExistingErrorMessage(); 
+                 
+                    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 controlGroup = document.getElementById("creditCardNoGroup");
+                        controlGroup.appendChild(errorMessage);
+                    
+                        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;
+                }
+            
+                function removeExistingErrorMessage(){
+                    $('#creditNoError').remove();
+                    $('#credCw2Error').remove();
+                    $('#creditExpiryError').remove();
+                
+                }
+            
+            
+                function isNumber (o){
+                    return ! isNaN (o-0) && o != null;
+                }
+            
+                function validateSearchField() {
+                }
+            
+                $('#btnBackProductSearch').click(function()
+                {
+                    window.location = "index.html";
+                });
+  
+            
+                $('#btnFinish').click(function()
+                {
+                
+                    if(validateCreditCardField() == false)
+                        return;
+                
+                    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);
+              
+                    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)");
+                            }
+                        },
+                        success: function (data) {
+
+                            createCookie('receiptId',data,0);
+                            createCookie('creditCardNo',cardNo,0);
+                            window.location = "customerDetail.html";
+                    
+                        },
+                        dataType: "text",
+                        error: function (jqXHR, textStatus, errorThrown) {
+                            $('#result').text("The following error occured: " + textStatus, errorThrown);
+                        }
+                    });
+             
+                
+                
+                });
+                
+            
+            
+                $(document).ready(function(){
+                     runAtStartUp();
+                     
+                    getProductDataFromCookieAndDisplay();
+                    var orderId = readCookie('orderId');
+            
+                    var totalPrice = readCookie('grandTotal');
+                    $('#TotalPrice').text("Total: $"+totalPrice);
+            
+                });
+            
+                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>

web/paymentFormTemplate.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>
-
-        <div class="container">
-            <div class="row">
-                <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">
-                            <div class="control-group" id="creditCardNoGroup">
-                                <label class="control-label" for="textCreditCard" >Credit Card No </label>
-
-                                <div class="controls">
-                                    <input class="input-large"  type="text"  id="textCreditCard"> <br>
-                                </div>
-                            </div>
-                            <div class="control-group" id="creditCw2Group">
-                                <label class="control-label" for="textCW2" >CW2/CVC2 </label>
-
-                                <div class="controls">
-                                    <input class="input-large" type="text"  id="textCW2"> <br>
-                                </div>
-                            </div>
-                            <div class="control-group" id="creditCardExpiryGroup">
-                                <label class="control-label" for="textCreditCardExpiry">Credit Card Expiry Date (MMYY) </label>
-
-                                <div class="controls">
-                                    <input class="input-large" type="text"  id="textCreditCardExpiry"> <br>
-                                </div>
-                            </div>
-                        </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>
-
-
-            <!-- 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 validateCreditCardField()
-                {
-                    var validInput = true;
-                
-                    var userCreditCardNo = $('#textCreditCard').val();
-                    var userCw2Code = $('#textCW2').val();
-                    var userExpiryDate = $('#textCreditCardExpiry').val();
-                 
-                    removeExistingErrorMessage(); 
-                 
-                    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 controlGroup = document.getElementById("creditCardNoGroup");
-                        controlGroup.appendChild(errorMessage);
-                    
-                        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;
-                }
-            
-                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";
-                });
-  
-            
-                $('#btnFinish').click(function()
-                {
-                
-                    if(validateCreditCardField() == false)
-                        return;
-                
-                    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);
-              
-                    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)");
-                            }
-                        },
-                        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(){
-                     runAtStartUp();
-                     
-                    getProductDataFromCookieAndDisplay();
-                    var orderId = readCookie('orderId');
-            
-                    var totalPrice = readCookie('grandTotal');
-                    $('#TotalPrice').text("Total: $"+totalPrice);
-            
-                });
-            
-                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>

web/paymentSummary.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>
+
+        <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>
+
+         <!-- config java script -->
+        <script src="js/mainConfig.js"></script>
+
+        <script>
+            
+            $(document).ready(function(){
+                
+                 runAtStartUp();
+                
+                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>

web/paymentSummaryTemplate.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>
-
-        <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>
-
-         <!-- config java script -->
-        <script src="js/mainConfig.js"></script>
-
-        <script>
-            
-            $(document).ready(function(){
-                
-                 runAtStartUp();
-                
-                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(){