Source

Mobile POS Front End / ForJieSheng.html

Full commit
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Mobile POS</title>
    
    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
  
    </style>
   </head>
   
   <body>
    <div class="container">
    	<img src="http://placehold.it/940x150" />
   </div>
   <br><br>
   
   <div class="container">
   	<div class="span5 offset2">
     	<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>
   		 	<div class="controls">
      			<input type="text" name="userEmail" placeholder="Email">
    		</div>
  		</div>
  		<div class="control-group">
    		<label class="control-label" for="userPassword">Password</label>
    		<div class="controls">
      			<input type="password" name="userPassword" placeholder="Password">
    		</div>
  		</div>
  		<div class="control-group">
    		<div class="controls">
      			<label class="checkbox">
        			<input type="checkbox"> Remember me
				</label>
                <button id="loginBtn" type="submit" class="btn btn-large btn-block btn-primary">Login</button>
      			<!--<button id="loginBtn" class="btn btn-large btn-block btn-primary">Login</button> -->
    		</div>
  		</div>
		</form>
   	</div>
   </div>  
   	<!-- jQuery via Google + local fallback, see h5bp.com -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

	<!-- Bootstrap JS: compiled and minified -->
    <script src="js/bootstrap.min.js"></script>
   
   <script>
   
   function checkLoginCredential() {
   		console.log("came login!!");
		
	
		//get the email and password
		var userEmail = document.loginForm.userEmail.value;
		var userPassword = document.loginForm.userPassword.value;
		
	
		
		/**
		JIE SHENG POST REQUEST TO VERIFY USERNAME / PASSWORD 
		
		Steve- can't do a post due to cross origin
		**/
		
		var userInfo = {"userName":"admin","userPassword":"1234"};
		$.ajax({
			type: "POST",
			url: "http://lowe.jschua.com/DinoPos/api/users",
			data: JSON.stringify(userInfo),//userInfo,//JSON.stringify({ userEmailInfo: userInfo}),
			contentType: "application/json; charset=utf-8",
			statusCode:{
				202: function() {console.log("recieve status code 202!");},
				406: function() {console.log("recieve status code 406!");},
			},
			dataType: "text",
			success: function(result){
				console.log("SUCCEED IN POSTING");
				console.log(result);
			},
			error: function(jqXHR,textStatus,errorThrown){
				console.log("the following error occurred: "+textStatus,errorThrown);
			},
			failure: function(errMsg){
				console.log(errMsg);
			}
		});
		
		
		/**
		JIE SHENG GET REQUEST TO GET PRODUCT INFO BASED ON PRODUCT ID
		**/
		$.ajax({
			type:"GET",
			url:"http://lowe.jschua.com/DinoPos/api/products/1",
			dataType:"json",
			success: function(result){
				console.log("Success in getting productID");
				console.log(result);
				console.log(result.Brand);
			},
			error: function(jqXHR,textStatus,errorThrown){
				console.log("the following error occurred: "+textStatus,errorThrown);
			}
		});
		
		
		/**
		JIE SHENG GET REQUEST TO GET PRODUCT INFO BASED ON PRODUCT NAME
		
		Steve - whats the url to search based on name / category 
		**/
		/*
		$.ajax({
			type:"GET",
			url:"http://lowe.jschua.com/DinoPos/api/products/Wash-Bashin",
			dataType:"json",
			success: function(result){
				console.log("Success in getting productID");
				console.log(result);
				console.log(result.Brand);
			},
			error: function(jqXHR,textStatus,errorThrown){
				console.log("the following error occurred: "+textStatus,errorThrown);
			}
		});
		*/
		
		
		
		
	
		/**
		JIE SHENG POST REQUEST TO SEND CUSTOMER'S DETAILS
		
		Steve- can't do a post due to cross origin
		
		No post URL avail yet
		**/
		var customerDetails = {"customerName":"James","customerAddress":"Block 511","customerContact":1234,"customerEmail":"steve@hehe.com"};
		var post = $.ajax({
			type: "POST",
			url: "???",
			data: JSON.stringify(customerDetails),
			contentType: "application/json; charset=utf-8",
			statusCode:{
				202: function() {console.log("recieve status code 202!");},
				406: function() {console.log("recieve status code 406!");},
			},
			dataType: "text",
			success: function(result){
				console.log("SUCCEED IN POSTING");
				console.log("customerID =="+result);
			},
			error: function(jqXHR,textStatus,errorThrown){
				console.log("the following error occurred: "+textStatus,errorThrown);
			},
			failure: function(errMsg){
				console.log(errMsg);
			}
		});
		
		post.done(function(p){
			console.log("done! and here's the customer's detail" +p);
			sendCustomerOrder(p);	
		});
		
		post.fail(function(p){
			console.log("failed!");
		});
		
	
	
		/**
		JIE SHENG POST for custID/orders BASED ON given custID
		
		Steve- can't do a post due to cross origin
		
		**/
		function sendCustomerOrder(custID)
		{
			var order = [];
			order.push( {"Product_ID":1,"Quantity":2});
			order.push( {"Product_ID":2,"Quantity":4});
			var fullOrderDetails = {"custID":custID,"Order":order};	
			
			var postCustomerOrder = $.ajax({
				type: "POST",
				url: "http://lowe.jschua.com/DinoPos/api/transactions",
				data: JSON.stringify(fullOrderDetails),
				contentType: "application/json; charset=utf-8",
				statusCode:{
					202: function() {console.log("recieve status code 202!");},
					406: function() {console.log("recieve status code 406!");},
				},
				dataType: "text",
				success: function(result){
					console.log("SUCCEED IN POSTING");
					console.log("customerID =="+result);
				},
				error: function(jqXHR,textStatus,errorThrown){
					console.log("the following error occurred: "+textStatus,errorThrown);
				},
				failure: function(errMsg){
					console.log(errMsg);
				}
			});
			
			post.done(function(p){
				console.log("done! and here's the transactionID" +p);
				sendCreditCardInfo(p);	
			});
		
			post.fail(function(p){
				console.log("failed!");
			});
			
		}

		
		/**
		JIE SHENG POST to send cardno,code,expirydate based on given transactioNID
		
		Steve- can't do a post due to cross origin
		
		**/
		function sendCreditCardInfo(transactionID)
		{
			var creditCardInfo = {"transactionID":transactionID,"cardNo":1234123412341234,"code":999, "expiryDate":1234};
			$.ajax({
				type: "POST",
				url: "http://lowe.jschua.com/DinoPos/api/creditcards",
				data: JSON.stringify(transactionID),
				contentType: "application/json; charset=utf-8",
				statusCode:{
					202: function() {console.log("recieve status code 202!");},
					406: function() {console.log("recieve status code 406!");},
				},
				dataType: "text",
				success: function(result){
					console.log("SUCCEED IN POSTING");
					console.log(result);
				},
				error: function(jqXHR,textStatus,errorThrown){
					console.log("the following error occurred: "+textStatus,errorThrown);
				},
				failure: function(errMsg){
					console.log(errMsg);
				}
			});
			
		}
		
		
		return false;
		
		
   };
   
 
   
   </script>
   
   </body>
   
</html>