Source

Mobile POS Front End / web / paymentFormTemplate.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Mobile POS</title>

        <link href="css/bootstrap.css" rel="stylesheet">

    </head>

    <body>
        <div class="container">
            <img src="img/banner.png" />
        </div>
        <br><br>

        <div class="container">
            <div class="row">
                <div class="span6" id="customerPaymentDetail">  
                    <h4> Customer payment detail </h4>

                    <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 class="span6 " id="div_productExecuteSummary">
                    <h4> Summary of order </h4>
                    <table class="table table-bordered" id="table_productExecuteSummary">
                        <thead>
                            <tr>
                                <th >Item(Qty)</th>
                                <th>Total Price</th>
                            </tr>
                        </thead>

                        <tbody>
                        </tbody>
                    </table>

                    <h5 id="TotalPrice"> </h5>
                </div>

            </div>


        </div>



        <!-- jQuery via Google + local fallback, see h5bp.com -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <!-- Bootstrap JS: compiled and minified -->
        <script src="js/bootstrap.min.js"></script>
        <script src="js/json2.js"></script>


        <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(){
                
                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>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.