Commits

Anonymous committed 67fc1a1

Added the following
1) Simple validation

2) Template for ajax calls in code

3) Javascript working for all button
- Clicking finish will retrieve customer info and product selected

  • Participants
  • Parent commits be10beb

Comments (0)

Files changed (3)

img/123.png

Added
New image
    
    <div class="container">
    	<div class="span5 offset2">
-     	<form name="loginForm" class="form-horizontal" action="main1.html" onSubmit="return checkLoginCredential()"> 
+     	<form name="loginForm" class="form-horizontal" action="main1 - Copy.html" onSubmit="return checkLoginCredential()"> 
         <!--<form name="loginForm" class="form-horizontal" method="POST" action="http://localhost:8080/QueueManagentSystem_v0.2-war/webresources/helloworld/VerifyUserName" onSubmit"checkLoginCredential()"> -->
   		<div class="control-group">
    			<label class="control-label" for="userEmail">Email</label>
 		var userEmail = document.loginForm.userEmail.value;
 		var userPassword = document.loginForm.userPassword.value;
 		
-		
+		if(userEmail.length==0)
+		{
+			alert("Please fill in your userEmail");
+			return false;
+		}
+		if(userPassword.length==0)
+		{
+			alert("Please key in your password");
+			return false;
+		}
+		/*
+		$.post("http://localhost:8080/QueueManagentSystem_v0.2-war/webresources/helloworld/VerifyUserName",{userEmail: userEmail,userPassword: userPassword},
+			function(data){
+				console.log("SUCCEED");
+			},"json");
+		*/
 		
 		/*
 		
 	    });
 		*/
 		
-		
+		/*
 		$.post("http://localhost:8080/QueueManagentSystem_v0.2-war/webresources/helloworld/VerifyUserName",{userEmail: userEmail,userPassword: userPassword},
 			function(data){
 				console.log("SUCCEED");
 			},"json");
-		
+		*/
 		//send email and password through json
 		
 		
 	*/
 		//depending on response let the user proceed or not
 		
-		return false;
+		return;
 		
 		
    };

main1 - Copy.html

             <table class ="table table-striped" style="background-color:white" id="productTable"  >
             <thead>
             	<tr>
-            		<th>Name</th>
+            		<th >Name</th>
                 	<th>Qty</th>
                 	<th>Each</th>
                 	<th colspan="2">Total</th>
             
         </div> <!--end of first col -->
         
-        <div class="span6" id="divProduct">  <!--start of second col for product search -->
+        <div class="span6">  <!--start of second col for product search -->
     
         	<h4> Enter Product ID to search </h4>
-            <form class="form-search">
- 			 <input type="text" placeholder="Product ID here" class="input-large search-query">
-  			<button type="submit" class="btn">Search</button>
-			</form>
-            <br>
-    		<div class="row">
+             <p>
+             	<input type="text" placeholder="Product ID here" class="input-large search-query">
+  				<button type="submit" class="btn" id="btnProductSearch">Search</button>
+			</p>
+            <div class="row"  id="divProduct">
             	<div class="span2">
                 	<br>
-                	<img src="img/chairSample.png" height ="100" width="100">
+                	<img src="img/chairSample.png" height ="100" width="100" id="productImage">
                 </div>
-                <div class="span4">
-                	<h4> Hermes Arm Chair </h4>
-                    Hermes Arm Chair would love and support your entire need blar blar blar
-                    <h4>Price:  $520 </h4>
+                <div class="span4" id="divProduct">
+                	<h4> <span id="productTitle"> </span> </h4>
+                    <span id="productDescription"></span>
+                    <h4><span id ="productPrice"></span> </h4>
                     Qty &nbsp; &nbsp;
-                    <input class="span1" type="text" text="1"> 
+                    <input class="span1" type="text" text="1" id="inputProductQty"> 
           			
                     <br><br>
-                    <button type="submit" class="btn btn-large btn-block btn-primary">Add Item to Cart</button>
+                    <button type="submit" class="btn btn-large btn-block btn-primary" id = "btnAddItemToCart">Add Item to Cart</button>
                 </div>
             </div>
         </div> <!--end of second col -->
                     	<Label>Credit Card Expiry Date (MMYYYY) </Label><br>
                     </div>
                     <div class="span2">
-               	 		<input class="input-large" = type="text" style="right:auto"> <br>
-                		<input class="input-large" type="text" align="right" > <br>
-                 		<input class="input-large" type="text" align="right" > <br>
+               	 		<input class="input-large" = type="text" style="right:auto" id="textCreditCard"> <br>
+                		<input class="input-large" type="text" align="right" id="textCW2"> <br>
+                 		<input class="input-large" type="text" align="right" id="textCreditCardExpiry"> <br>
                 	</div>
  				</div>
             </form>
             <div class="span2">
             	<button class="btn btn-large btn-block btn-primary" type="button" id="btnBackProductSearch"> < product search</button>
             </div>
-            
+            <form onSubmit="return checkFormValidation()">
             <div class="span2">
-            	<button class="btn btn-large btn-block btn-primary" type="button">Finish</button>
+            	<button class="btn btn-large btn-block btn-primary" id="btnFinish" type="submit">Finish</button>
         	</div>
+            </form>
         
         </div> <!--end of second col -->
     
     
     <script src="js/jquery.chromatable.js"></script>
    
+    <script src="js/json2.js"></script>
+   
    <script>
    
+   function checkFormValidation(){
+   		console.log("check form validation");
+  		
+		if($("#textCustomerName").val().length==0)
+		{
+			alert("Customer name cannot be blank");
+			return false;
+		}
+		if($("#textCustomerAddress").val().length==0)
+		{
+			alert("Customer address cannot be blank");
+			return false;
+		}
+		if($("#textCustomerContact").val().length==0)
+		{
+			alert("Customer contact cannot be blank");
+			return false;
+		}
+		if($("#textCustomerEmail").val().length==0)
+		{
+			alert("Customer email cannot be blank");
+			return false;
+		}
+		if($("#textCreditCard").val().length==0)
+		{
+			alert("Customer credit card no cannot be blank");
+			return false;
+		}
+		if($("#textCW2").val().length==0)
+		{
+			alert("Customer cw2 cannot be blank");
+			return false;
+		}
+		if($("#textCreditCardExpiry").val().length==0)
+		{
+			alert("Customer expiry cannot be blank");
+			return false;
+		}
+		
+		return false;
+   }
+   
   
 	$(document).ready(function(){
    
+   		$("#divProduct").hide();
+   
+   		//buttons 
 		var btnBackProductSearch = $("#btnBackProductSearch");
+		var btnAddItemToCart = $("#btnAddItemToCart");
+		var payBtn = $("#PayBtn");
+		var clearFormBtn = $("#clearFormBtn");
+		var btnProductSearch = $("#btnProductSearch");
+		var btnFinish = $("#btnFinish");
+		
+		//either product or payment page
 		var divProduct = $("#divProduct");
 		var divPayment = $("#divPayment");
-		var payBtn = $("#PayBtn");
-		var clearFormBtn = $("#clearFormBtn");
+		
+		//product info span
+		var productTitle = $("#productTitle");
+		var productDescription = $("#productDescription");
+		var productPrice = $("#productPrice");
+		
+		//Quantity user pressed
+		var inputProductQty = $("#inputProductQty");
+		
+		//table 
    		var productTable = $("#productTable");
    
-   		//customer details
+   		//customer details form
 		var customerName = $("#textCustomerName");
 		var customerAddress = $("#textCustomerAddress");
 		var customerContact = $("#textCustomerContact");
 	   });
 	   
 	   
+	 
 	   payBtn.click(function(){
 			console.log("button clicked!");
 			divProduct.hide();
 			customerEmail.val("");
 		});
 		
+		
+		
+		
+		
+		
+		
+		btnFinish.click(function() {
+			
+			console.log("finish!!");
+			
+			var creditCardNo = $("#textCreditCard").val();
+			var cw2No = $("#textCW2").val();
+			var creditExpiryDate = $("#textCreditCardExpiry").val();
+			
+			/*
+			$.post( url,
+			{
+				creditNo: creditCardNo,
+				cw2No: cw2No,
+				creditExpiryDate: creditExpiryDate
+			},
+			function()
+			{
+				
+			},
+			"json");
+			*/
+			var customerName = $("#textCustomerName").val();
+			var customerAddress = $("#textCustomerAddress").val();
+			var customerContact = $("#textCustomerContact").val();
+			var customerEmail = $("#textCustomerEmail").val();
+			
+			/*
+			$.post( url,
+			{
+				customerName: customerName,
+				customerAddress:customerAddress,
+				customerContact:customerContact,
+				customerEmail:customerEmail	
+			},
+			function()
+			{
+				
+			},
+			"json");
+			*/
+			
+			
+			var allProducts = new Array();
+			//allProduct[i] = ..
+			
+			console.log($("#productTable tbody tr"));
+			
+			$("#productTable tbody tr").each(function() {
+				
+				var object = new productBought();
+				object.productTitle = $(this).find(" .productTitle").html();
+				object.qty = $(this).find(" .productQty").html();
+				
+				allProducts.push(object);
+				//console.log($(this).find(".productTitle").html());
+				//console.log($(this).find(".productQty").html());
+			});
+			
+			
+			for(i=0;i<allProducts.length;i++)
+			{
+				console.log(allProducts[i]);
+			}
+			/*
+			$.post(url,
+			{
+				allProduct: allProducts
+			},
+			function()
+			{
+			},
+			"json");
+			*/
+			
+			
+		});
+		
+		
+		
+		
+		function productBought(productTitle,qty,priceEach)
+		{
+			this.productTitle = productTitle;
+			this.qty = qty;
+			this.priceEach = priceEach;
+			this.total = function() { return this.qty * this.priceEach };
+		}
+		
+		
+		
+		
+		
+		
+		btnProductSearch.click(function() {
+			//by right is to make ajax call to get json objects
+			//process the json objects display at the screen
+			
+			/* More info at http://api.jquery.com/jQuery.parseJSON/
+			var obj = $.parseJSON(json);
+			var hehe = obj.name; 
+			*/
+			
+			
+			$("#divProduct").show();
+			
+			//assume json object returned for now
+			
+			productTitle.text("Hermes Arm Chair!!");
+			productDescription.text("this is product description");
+			productPrice.text("$100");
+			
+			var imageName = "img/"+123 + ".png"
+			$("#productImage").attr("src",imageName);
+			
+		});
+		
+		btnAddItemToCart.click(function() {
+			
+			//product info span
+			productTitle = $("#productTitle");
+			productDescription = $("#productDescription");
+			productPrice = $("#productPrice");
+			//Quantity user pressed
+			 inputProductQty = $("#inputProductQty");
+				
+			//console.log("productPrice".text());
+			
+			
+			var newProductPrice = productPrice.text().slice(1,productPrice.text().length);
+				
+			var total = parseInt(newProductPrice) * inputProductQty.val();
+					
+			$("#productTable > tbody:last").append("<tr> <td class=\"productTitle\">"+productTitle.text()+"</td> <td class=\"productQty\">"+inputProductQty.val()+"</td> <td>"+productPrice.text()+"</td> <td>$"+total+"</td> <td><button class=\"btn btn-mini\" 	 type=\"button\" onclick=\"deleteRowItem(this)\" id=\"btnDeleteItem\""+i+"> x</button> </td></tr>");		
+		
+		});
+		
 		//hide the payment at the start
 		divPayment.hide();
 		
 			
 		var index = 10;
 		//script to populate the table with mock datas'
-		for(i=1;i<20;i++)
+		for(i=1;i<5;i++)
 		{
+			
+			 $("#productTable > tbody:last")
+                                .append("<tr> <td class=\"productTitle\"> Hermes Chair</td> <td class=\"productQty\" >1</td> <td>$520</td> <td>$520</td> <td><button class=\"btn btn-mini\" type=\"button\" onclick=\"deleteRowItem(this)\" id=\"btnDeleteItem\""+i+"> x</button> </td> </tr>"); 
+								
+			/*
 			$("#productTable > tbody:last")
-				.append("<tr> <td>" +i + ". Hermes Chair</td> <td>4242</td> <td>$520</td> <td>$520</td> <td><button class=\"btn btn-mini\" type=\"button\" onclick=\"deleteRowItem(this)\" id=\"btnDeleteItem\""+i+"> x</button> </tr>");		
+				.append("<tr> <td colspan=\"2\">Hermes Chair</td> <td>4242</td> <td>$520</td> <td>$520</td> <td><button class=\"btn btn-mini\" type=\"button\" onclick=\"deleteRowItem(this)\" id=\"btnDeleteItem\""+i+"> x</button></td> </tr>");	
+				*/
 		}
 		/*
 				'<tr>