Commits

St...@Steve-PC  committed 2e38b16

1) Changed banner
2) Added text validation

  • Participants
  • Parent commits 018a445

Comments (0)

Files changed (16)

File build/web/customerDetailTemplate.html

 
     <body>
         <div class="container">
-            <img src="http://placehold.it/940x150" />
+            <img src="img/banner.png" />
         </div>
         <br><br>
 
 
                         <form class="form-horizontal2">
                             <legend>Customer delivery details </legend>
-                            <div class="control-group">
+                            <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">
+                            <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">
+                            <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">
+                            <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 class="row">
 
-                        <button class="btn btn-block btn-primary" id="btnFinish" type="button">Submit delivery detail</button>
+                        <button class="btn btn-block btn-primary" id="btnFinish" type="button">Submit delivery detail!!</button>
 
                     </div>
 
 
         <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();

File build/web/gfv3ee6.dpf

Empty file added.

File build/web/img/banner.png

Added
New image

File build/web/indexTemplate.html

 
     <body>
         <div class="container">
-            <img src="http://placehold.it/940x150" />
+            <img src="img/banner.png" />
         </div>
-        <br><br>
 
         <div class="container">
 
 
 
                 <div class="row"> <!--start of row for displaying of the tax and total -->
-                    <div class="span2">
-                        <h5 id="taxAmt">Tax:</h5>      
-                        <h5 id="totalAmt">Total: </h5>
+                    <div class=" offset10">
+                        <h4 id="totalAmt">Total: </h4>
                     </div>
                 </div> <!--end of row displaying of tax and total-->
 
                 
                     $("#productTable > tbody:last").append(entireTable);
                 }  
+                reUpdateGrandTotal();
                 reinitChromaTable();
             }
             
+            
+            
             function loadItemFromCookie(productId,productQty,productName,productEach,productTotal)
             {
                 // var productName = $('#div_'+productId).find('#productTitle').text();
                     }
                 } 
                      
-   
+                
                 
                 var payBtn = $("#PayBtn");
                 var clearFormBtn = $("#clearFormBtn");
 	   
                 clearFormBtn.click(function() {
                     $("#productTable > tbody").empty();
+                    reUpdateGrandTotal();
                 });
 		
 		
-		
                 payBtn.click(function() {
 			
+                    var allProducts = new Array();
+                    
+                    var totalPrice = 0;
+                   
                	
-                    var allProducts = new Array();
-                    //allProduct[i] = ..
-			
-                  	
                     $("#productTable tbody tr").each(function() {
-                        
                         var object = new productBought;
                         object.productId = $(this).find("#productId").attr('class');
                         object.productQty = $(this).find("#productQty").html();
                         object.productTotal = $(this).find('#productTotal').html();
                         object.productEach = $(this).find('#productEach').html();
                         allProducts.push(object);
+                        
+                        var eachSubTotal = $(this).find('#productTotal').html().split("$");
+                        totalPrice = Number(eachSubTotal[1]) + Number(totalPrice);
+                        
                     });
 			
-			
                     for(i=0;i<allProducts.length;i++)
                     {
                         console.log(allProducts[i]);
                     }
                     
-                    
                     function productBought(productTitle,qty)
                     {
                         this.productTitle = productTitle;
                     }
 		
                     createCookie('shoppingCart',JSON.stringify(allProducts),0);
-                    
+                    createCookie('grandTotal',totalPrice,0);
                     
                     /**
                      *code segment for formatting the data and sending to ajax server
 	
                 });
             }
-        
+            function reUpdateGrandTotal()
+            {
+                var totalPrice = 0;
+                $('#productTable >tbody >tr').each(function(){
+                    
+                    var eachSubTotal = $(this).find('#productTotal').html().split("$");
+                    totalPrice = Number(eachSubTotal[1]) + Number(totalPrice);
+                    
+                });
+                
+                $('#totalAmt').text("Total: $"+totalPrice);
+            }
             function deleteRowItem(o)
             {
                 //o = button, parent = htmltablecell -> htmltablerow -> htmltablesection 
                 var p = o.parentNode.parentNode;
                 p.parentNode.removeChild(p);
+                
+                
+                reUpdateGrandTotal();
+                
+             
             };
  
         </script>

File build/web/js/indexTemplate.js

  */
 
 var pageTitleName = "Wei Xin";
-var bannerURL ="http://placehold.it/940x150";
+var bannerURL ="img/banner.png";
 
 

File build/web/js/loginTemplate.js

  */
 
 var pageTitleName = "Wei Xin";
-var bannerURL ="http://placehold.it/940x150";
+var bannerURL ="img/banner.png";
+//var bannerURL ="http://placehold.it/940x150";

File build/web/loginTemplate.html

             <div class="span6 offset2">
                 <form name="loginForm" class="form-horizontal"> 
                     <div class="control-group">
-                        <label class="control-label" for="userId">Email</label>
+                        <label class="control-label" for="userId">User Name</label>
                         <div class="controls" id="lolol">
-                            <input id="userId" type="text" name="userId" placeholder="Email"  class="input-xlarge">
+                            <input id="userId" type="text" name="userId" placeholder="User Name"  class="input-xlarge">
                         </div>
                     </div>
                     <div class="control-group">
                         </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">
-                                <div class="bar" style="width: 40%;"></div>
+                            <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>
                     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;
+                    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+"%");
                 
-                checkValidUserAndRedirect();
-                
-                
-            });
+              
+            }
+            
+          
             
             function checkValidUserAndRedirect()
             {
                         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'))
                         {
-                            createCookie('employeeId',data,3);
-                            createCookie('branchId',1,3);
+                            daysForCookie = 3;
                             createCookie('rememberLogin','true',3);
+                           
                         }
-                        else{
-                            createCookie('employeeId',data,0);
-                            createCookie('branchId',1,0);
-                        }
+                        
+                        createCookie('employeeId',data,daysForCookie);
+                        createCookie('branchId',branchId,daysForCookie);
+                        createCookie('taxPercentage',taxPercentage,daysForCookie);
+                        
                         window.location = "indexTemplate.html";
                     },
                     dataType: "text",

File build/web/paymentFormTemplate.html

 
     <body>
         <div class="container">
-            <img src="http://placehold.it/940x150" />
+            <img src="img/banner.png" />
         </div>
         <br><br>
 
 
                     <div class="row">
                         <form class="form-horizontal">
-                            <div class="control-group">
+                            <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">
+                            <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">
-                                <label class="control-label" for="textCreditCardExpiry">Credit Card Expiry Date (MMYYYY) </label>
+                            <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>
                         <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>
+                <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>
+                        </tbody>
+                    </table>
 
+                    <h5 id="TotalPrice"> </h5>
+                </div>
 
-                    </tbody>
-                </table>
+            </div>
 
-                <h5> Total: </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 validateSearchField() {
+            
+            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;
+            }
             
-        $('#btnBackProductSearch').click(function()
-        {
-            window.location = "indexTemplate.html";
-        });
+            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()
-        {
-            console.log("came here!");
-            var orderId = readCookie('orderId');
-            var cardNo = $('#textCreditCard').val();
-            var code = $('#textCW2').val();
-            var expiryDate = $('#textCreditCardExpiry').val();
+            $('#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);
+                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");
-                        //$('#result').text("406 (Not Acceptable)");
-                    }
-                },
-                success: function (data) {
+                    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);
-                }
-            });
+                    },
+                    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');
+            
+                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(){
                 
-            getProductDataFromCookieAndDisplay();
+            /*  Cookie checking code
+                console.log("readCookie=="+readCookie('login'));
                 
-            var orderId = readCookie('orderId');
-                
-      
-                
-        
-        });
-            
-        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");
+                if(readCookie('login') ==null)
+                    window.location.replace("login.html");
    
-            loadContent();
-         */
+                loadContent();
+             */
    
                
 		
-        //   });
+            //   });
 	
         
        
             
-    </script>
+        </script>
 
-</body>
+    </body>
 
 </html>

File dist/PosWebHtml.war

Binary file modified.

File web/customerDetailTemplate.html

 
     <body>
         <div class="container">
-            <img src="http://placehold.it/940x150" />
+            <img src="img/banner.png" />
         </div>
         <br><br>
 
 
                         <form class="form-horizontal2">
                             <legend>Customer delivery details </legend>
-                            <div class="control-group">
+                            <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">
+                            <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">
+                            <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">
+                            <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 class="row">
 
-                        <button class="btn btn-block btn-primary" id="btnFinish" type="button">Submit delivery detail</button>
+                        <button class="btn btn-block btn-primary" id="btnFinish" type="button">Submit delivery detail!!</button>
 
                     </div>
 
 
         <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();

File web/img/banner.png

Added
New image

File web/indexTemplate.html

 
     <body>
         <div class="container">
-            <img src="http://placehold.it/940x150" />
+            <img src="img/banner.png" />
         </div>
-        <br><br>
 
         <div class="container">
 
 
 
                 <div class="row"> <!--start of row for displaying of the tax and total -->
-                    <div class="span2">
-                        <h5 id="taxAmt">Tax:</h5>      
-                        <h5 id="totalAmt">Total: </h5>
+                    <div class=" offset10">
+                        <h4 id="totalAmt">Total: </h4>
                     </div>
                 </div> <!--end of row displaying of tax and total-->
 
                 
                     $("#productTable > tbody:last").append(entireTable);
                 }  
+                reUpdateGrandTotal();
                 reinitChromaTable();
             }
             
+            
+            
             function loadItemFromCookie(productId,productQty,productName,productEach,productTotal)
             {
                 // var productName = $('#div_'+productId).find('#productTitle').text();
                     }
                 } 
                      
-   
+                
                 
                 var payBtn = $("#PayBtn");
                 var clearFormBtn = $("#clearFormBtn");
 	   
                 clearFormBtn.click(function() {
                     $("#productTable > tbody").empty();
+                    reUpdateGrandTotal();
                 });
 		
 		
-		
                 payBtn.click(function() {
 			
+                    var allProducts = new Array();
+                    
+                    var totalPrice = 0;
+                   
                	
-                    var allProducts = new Array();
-                    //allProduct[i] = ..
-			
-                  	
                     $("#productTable tbody tr").each(function() {
-                        
                         var object = new productBought;
                         object.productId = $(this).find("#productId").attr('class');
                         object.productQty = $(this).find("#productQty").html();
                         object.productTotal = $(this).find('#productTotal').html();
                         object.productEach = $(this).find('#productEach').html();
                         allProducts.push(object);
+                        
+                        var eachSubTotal = $(this).find('#productTotal').html().split("$");
+                        totalPrice = Number(eachSubTotal[1]) + Number(totalPrice);
+                        
                     });
 			
-			
                     for(i=0;i<allProducts.length;i++)
                     {
                         console.log(allProducts[i]);
                     }
                     
-                    
                     function productBought(productTitle,qty)
                     {
                         this.productTitle = productTitle;
                     }
 		
                     createCookie('shoppingCart',JSON.stringify(allProducts),0);
-                    
+                    createCookie('grandTotal',totalPrice,0);
                     
                     /**
                      *code segment for formatting the data and sending to ajax server
 	
                 });
             }
-        
+            function reUpdateGrandTotal()
+            {
+                var totalPrice = 0;
+                $('#productTable >tbody >tr').each(function(){
+                    
+                    var eachSubTotal = $(this).find('#productTotal').html().split("$");
+                    totalPrice = Number(eachSubTotal[1]) + Number(totalPrice);
+                    
+                });
+                
+                $('#totalAmt').text("Total: $"+totalPrice);
+            }
             function deleteRowItem(o)
             {
                 //o = button, parent = htmltablecell -> htmltablerow -> htmltablesection 
                 var p = o.parentNode.parentNode;
                 p.parentNode.removeChild(p);
+                
+                
+                reUpdateGrandTotal();
+                
+             
             };
  
         </script>

File web/js/indexTemplate.js

  */
 
 var pageTitleName = "Wei Xin";
-var bannerURL ="http://placehold.it/940x150";
+var bannerURL ="img/banner.png";
 
 

File web/js/loginTemplate.js

  */
 
 var pageTitleName = "Wei Xin";
-var bannerURL ="http://placehold.it/940x150";
+var bannerURL ="img/banner.png";
+//var bannerURL ="http://placehold.it/940x150";

File web/loginTemplate.html

             <div class="span6 offset2">
                 <form name="loginForm" class="form-horizontal"> 
                     <div class="control-group">
-                        <label class="control-label" for="userId">Email</label>
+                        <label class="control-label" for="userId">User Name</label>
                         <div class="controls" id="lolol">
-                            <input id="userId" type="text" name="userId" placeholder="Email"  class="input-xlarge">
+                            <input id="userId" type="text" name="userId" placeholder="User Name"  class="input-xlarge">
                         </div>
                     </div>
                     <div class="control-group">
                         </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">
-                                <div class="bar" style="width: 40%;"></div>
+                            <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>
                     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;
+                    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+"%");
                 
-                checkValidUserAndRedirect();
-                
-                
-            });
+              
+            }
+            
+          
             
             function checkValidUserAndRedirect()
             {
                         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'))
                         {
-                            createCookie('employeeId',data,3);
-                            createCookie('branchId',1,3);
+                            daysForCookie = 3;
                             createCookie('rememberLogin','true',3);
+                           
                         }
-                        else{
-                            createCookie('employeeId',data,0);
-                            createCookie('branchId',1,0);
-                        }
+                        
+                        createCookie('employeeId',data,daysForCookie);
+                        createCookie('branchId',branchId,daysForCookie);
+                        createCookie('taxPercentage',taxPercentage,daysForCookie);
+                        
                         window.location = "indexTemplate.html";
                     },
                     dataType: "text",

File web/paymentFormTemplate.html

 
     <body>
         <div class="container">
-            <img src="http://placehold.it/940x150" />
+            <img src="img/banner.png" />
         </div>
         <br><br>
 
 
                     <div class="row">
                         <form class="form-horizontal">
-                            <div class="control-group">
+                            <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">
+                            <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">
-                                <label class="control-label" for="textCreditCardExpiry">Credit Card Expiry Date (MMYYYY) </label>
+                            <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>
                         <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>
+                <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>
+                        </tbody>
+                    </table>
 
+                    <h5 id="TotalPrice"> </h5>
+                </div>
 
-                    </tbody>
-                </table>
+            </div>
 
-                <h5> Total: </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 validateSearchField() {
+            
+            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;
+            }
             
-        $('#btnBackProductSearch').click(function()
-        {
-            window.location = "indexTemplate.html";
-        });
+            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()
-        {
-            console.log("came here!");
-            var orderId = readCookie('orderId');
-            var cardNo = $('#textCreditCard').val();
-            var code = $('#textCW2').val();
-            var expiryDate = $('#textCreditCardExpiry').val();
+            $('#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);
+                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");
-                        //$('#result').text("406 (Not Acceptable)");
-                    }
-                },
-                success: function (data) {
+                    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);
-                }
-            });
+                    },
+                    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');
+            
+                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(){
                 
-            getProductDataFromCookieAndDisplay();
+            /*  Cookie checking code
+                console.log("readCookie=="+readCookie('login'));
                 
-            var orderId = readCookie('orderId');
-                
-      
-                
-        
-        });
-            
-        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");
+                if(readCookie('login') ==null)
+                    window.location.replace("login.html");
    
-            loadContent();
-         */
+                loadContent();
+             */
    
                
 		
-        //   });
+            //   });
 	
         
        
             
-    </script>
+        </script>
 
-</body>
+    </body>
 
 </html>