Mobile POS Front End / web / customerDetailTemplate.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 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>


        <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('customerId',data,0);
                        sendOrderFull();
                    },
                    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(){
                
               
            });
  
  
  
		
            //   });
	
        
       
            
        </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.