Distributor.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="author" content="Sumit Kute">
    <title>Retail Finance Use Case Demo</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/main.css">
	<!-- <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> -->
	<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="js/web3.min.js"></script>
	<script src="js/contractabi.js"></script>
	<script src="js/common.js"></script>
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col">
				<nav class="navbar sticky-top navbar-expand-md navbar-light" style="background-color:skyblue">
					<a class="navbar-brand" href="#">Retail Finance</a>
					<div class="collapse navbar-collapse" id="navbarSupportedContent">
					<ul class="navbar-nav mr-auto">
						<li class="nav-item">
						<a class="nav-link" href="Manufacturer.html">	Manufacturer</a>
						</li>
						<li class="nav-item ">
						<a class="nav-link" href="Retailer.html">Retail </a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="Bank.html">Bank </a>
						</li>
						<li class="nav-item active">
							<a class="nav-link" href="Distributor.html">Distributor <span class="sr-only">(current)</span></a>
						</li>
					</ul>
					</div>
				</nav>
			</div>
		</div>
		<div class="row">
			<div class="col">
				<h2></h2>
				<h2><span class="badge badge-secondary">NodeInfo</span></h2>
				<form>
					<div class="form-group">
					<label for="nodeAddress">Distributor Node</label>
					<input id="nodeInfo" type="text" class="form-control" readonly>
					</div>
				</form>
				<h2><span class="badge badge-secondary">Account Setup</span></h2>
				<form>
					<div class="form-group">
					<label for="retailContractAddress">Retail Contract Address</label>
					<input id="contractaddress" type="text" class="form-control"  aria-describedby="contractHelp">
					<small id="contractHelp" class="form-text text-muted">Please enter your deployed contract address hash</small>
					</div>
					<div class="form-row">
					<div class="form-group col-md-6">
						<label for="retailContractAddress">Account Address</label>
						<input id="accountAddress" type="text" class="form-control">
					</div>
					<div class="form-group col-md-6">
						<label for="retailContractAddress">Account Password</label>
						<input id="accountpass" type="password" class="form-control">
					</div>
					</div> 
					<div class="form-group">
						<label for="retailContractAddress">Node Endpoint</label>
						<input id="nodeEndPoint" type="text" class="form-control" aria-describedby="endpointHelp">
						<small id="endpointHelp" class="form-text text-muted">wss://node.blockchain.azure.com:3300/3TBibxPKZWTyfQV1CmIS46</small>
					</div>
					<div class="form-group">
						<div>
							<button id="SaveConfig" type="button" class="btn btn-primary">Connect</button>
						</div>
						<div id="divLoading" class="spinner-border" role="status" hidden>
							<span class="sr-only">Loading...</span>
						</div>
					</div>
				</form>
			</div>
			<div class="col">
				<h2><span class="badge badge-secondary">Compute Discount</span></h2>
				<form>
					<div class="form-group">
						<label for="lbprice">Price</label>
						<input id="lcprice" type="text" class="form-control">
					</div>
					<div class="form-group">
						<label for="lbdiscount">Discount</label>
						<input id="lcdiscount" type="text" class="form-control">
					</div>
					<button id="Calculate" type="button" class="btn btn-primary" disabled>Provide Discount</button>
					<div id="ordId" class="alert alert-success" role="alert" hidden>
					</div>
				</form>
				<h2><span class="badge badge-secondary">Load Order</span></h2>
				<form>
					<div class="form-group">
						<input id="orderId" type="text" class="form-control" placeholder="Order Id" aria-describedby="FetchOrder">
						<div class="input-group">
							<button class="btn btn-outline-primary" type="button" id="FetchOrder">Fetch a Order</button>
						</div>
					</div>
					<div class="form-group">
						<table class="table table-sm">
							<thead>
							<tr>
								<th scope="col">Order#</th>
								<th scope="col">Item Name</th>
								<th scope="col">Quantity</th>
								<th scope="col">Price</th>
								<th scope="col">State</th>
								<th scope="col">Next Step</th>
							</tr>
							</thead>
							<tbody>
							<tr>
								<th id="loId" scope="row"></th>
								<td id="loitem"></td>
								<td id="loqty"></td>
								<td id="loprice"></td>
								<td id="lostate"></td>
								<td id="lonextstate"></td>
							</tr>
							</tbody>
						</table>
					</div>
					<div class="form-row">
						<div class="form-group col-md-2">
							<button type="button" id="CheckCredit" class="btn btn-md btn-primary" disabled="">Check Credit</button>
						</div>
						<div class="form-group col-md-2">
							<button type="button" id="PlaceOrder" class="btn btn-md btn-primary" disabled="">Place Order</button>
						</div>
						<div class="form-group col-md-2">
							<button type="button" id="DeliverOrder" class="btn btn-md btn-primary" disabled="">Deliver Order</button>
						</div>
						<div class="form-group col-md-2">
							<button type="button" id="CloseOrder" class="btn btn-md btn-primary" disabled="">Close Order</button>
						</div>
					</div>
				</form>
				<form>
				<div class="form-group">
				<button id="FetchAllOrders" type="button" class="btn btn-lg btn-primary" disabled>Load All Order</button></td>
				</div>
				<div id="allOrdersDiv" class="form-group">
					<table id="allOrderTable" class="table table-dark">
						<thead>
						<tr>
							<th scope="col">Order Id</th>
							<th scope="col">Order Item</th>
							<th scope="col">Order Quantity</th>
							<th scope="col">Order Price</th>
							<th scope="col">Order State</th>
						</tr>
						</thead>
						<tbody id="OrderDataTable">
						</tbody>
					</table>
				</div>
				</form>
				<h2>Status :  &nbsp  <span id="lcordId"></span></h2>
			</div>
		</div>
    </div>
    <script>
		
		$( document ).ready(function() {
			console.log( "ready!" );
			var addr;
			var account;
			var accountpass;
			var	web2conn;
			var mycontract;
			var ordersEvent;
            InitDistributorConfig(); 
			 
			$('#SaveConfig').click(function() {

				addr = $('#contractaddress').val().trim();	
				account = 	$('#accountAddress').val().trim();
				accountpass = 	$('#accountpass').val().trim();
				nodeEndPoint = $('#nodeEndPoint').val().trim();
				
				if (typeof web3 !== 'undefined') {
						web3 = new Web3(web3.currentProvider);
				} else {
					// set the provider you want from Web3.providers
					web2conn = new Web3(new Web3.providers.WebsocketProvider(nodeEndPoint));
					//web3.setProvider(web2conn)
				}
				
				web2conn.eth.personal.unlockAccount(account,accountpass,0).then(console.log('Account unlocked!'));	
				mycontract = new web2conn.eth.Contract(contractAbi, addr);
				mycontract.events.OrderList({
					filter: {}, // Using an array means OR: e.g. 20 or 23
					fromBlock: 0
				},function (error, event) {
					console.log(event);
					if(event.returnValues[1])
					{
						var table =  $('#OrderDataTable');
						var html = '<tr>';
						html +='<tr>';
						html +='<th scope="row">';
						html +=event.returnValues[1].id;
						html +='</th>';
						html +='<td>';
						html +=event.returnValues[1].itemname;
						html +='</td>';
						html +='<td>';
						html +=event.returnValues[1].quantity;
						html +='</td>';
						html +='<td>';
						html +=event.returnValues[1].price;
						html +='</td>';
						html +='<td>';
						html +=OrderStateEnum.properties[event.returnValues[1].State].name;
						html +='</td>';
						html +='</tr>'
						table.append(html);
					}
				});
				$('#SaveConfig').attr("disabled", true);
				$('#divLoading').attr("hidden",false);
				web2conn.eth.getNodeInfo(function(error, result){
				if(error)
				{
					console.log( "error" ,error);
					$('#SaveConfig').attr("disabled",false);
				}
				else
				{
					console.log( "result",result );
					$('#nodeInfo').val(result);
					$("#FetchOrder").attr("disabled", false);
					$("#FetchAllOrders").attr("disabled", false);
					$('#SaveConfig').attr("disabled",false);
					$('#divLoading').attr("hidden",true);
					$('#OrderCreate').attr("disabled",false);
					fetchAllOrders();
				}});

			});
			function fetchAllOrders() {
				//Clear the table
				var table =  $('#OrderDataTable');
				table.empty();
				const tx = {from: account,to: addr,
				gas: 45000000,data: mycontract.methods.getAllOrders().encodeABI()};
				web2conn.eth.sendTransaction(tx).then(function(result, error) {
					if(error){
						console.log( "Transaction error" ,error);
					} else {
						console.log(result);
					}
				});
			}
			$('#FetchAllOrders').click(function() {
				fetchAllOrders();
			});
			$('#FetchOrder').click(function() {
				$('#orders').text('');
				var _orderId = $('#orderId').val();
				mycontract.methods.orders(_orderId).call().then(function(data)
				{
					$('#loId').text(data.id);
					$('#loitem').text(data.itemname);
					$('#loqty').text(data.quantity);
					$('#loprice').text(data.price);
					$('#lostate').text(OrderStateEnum.properties[data.State].name);
					$('#lonextstate').text(OrderNextStateEnum.properties[data.NextState].name + " By " + OrderNextStateEnum.properties[data.NextState].owner)
					//$('#lototal').text(data.total);
					switch(data.State) {
							case "0":
								{
									$("#Calculate").attr("disabled", false);
									$("#CheckCredit").attr("disabled", true);
								}
								break;
								case "1":
								{
									$("#Calculate").attr("disabled", true);
									$("#CheckCredit").attr("disabled", false);
								}
								break;
								case "2":
								{
									$("#Calculate").attr("disabled", true);
									$("#CheckCredit").attr("disabled", true);
									$("#ApproveCredit").attr("disabled", false);
								}
								break;
								case "3":
								{
									$("#Calculate").attr("disabled", true);
									$("#CheckCredit").attr("disabled", true);
									$("#ApproveCredit").attr("disabled", true);
									$("#PlaceOrder").attr("disabled", false);
								}
								break;
								case "4":
								{
									$("#Calculate").attr("disabled", true);
									$("#CheckCredit").attr("disabled", true);
									$("#ApproveCredit").attr("disabled", true);
									$("#PlaceOrder").attr("disabled", true);
									$("#OrderReady").attr("disabled", false);
								}
								break;
								case "5":
								{
									$("#Calculate").attr("disabled", true);
									$("#CheckCredit").attr("disabled", true);
									$("#ApproveCredit").attr("disabled", true);
									$("#PlaceOrder").attr("disabled", true);
									$("#OrderReady").attr("disabled", true);
									$("#TransferMoney").attr("disabled", false);
								}
								break;
								case "6":
								{
									$("#Calculate").attr("disabled", true);
									$("#CheckCredit").attr("disabled", true);
									$("#ApproveCredit").attr("disabled", true);
									$("#PlaceOrder").attr("disabled", true);
									$("#OrderReady").attr("disabled", true);
									$("#TransferMoney").attr("disabled", true);
									$("#DeliverOrder").attr("disabled", false);
								}
									break;
								case "7":
								{	
									$("#Calculate").attr("disabled", true);
									$("#CheckCredit").attr("disabled", true);
									$("#ApproveCredit").attr("disabled", true);
									$("#PlaceOrder").attr("disabled", true);
									$("#OrderReady").attr("disabled", true);
									$("#TransferMoney").attr("disabled", true);
									$("#DeliverOrder").attr("disabled", true);
									$("#CheckOrder").attr("disabled", false);
								}
								break;
								case "8":
								{
									$("#Calculate").attr("disabled", true);
									$("#CheckCredit").attr("disabled", true);
									$("#ApproveCredit").attr("disabled", true);
									$("#PlaceOrder").attr("disabled", true);
									$("#OrderReady").attr("disabled", true);
									$("#TransferMoney").attr("disabled", true);
									$("#DeliverOrder").attr("disabled", true);
									$("#CheckOrder").attr("disabled", true);
									$("#CloseOrder").attr("disabled", false);
								}
								break;
								case "9":
								{
									$("#Calculate").attr("disabled", true);
									$("#CheckCredit").attr("disabled", true);
									$("#ApproveCredit").attr("disabled", true);
									$("#PlaceOrder").attr("disabled", true);
									$("#OrderReady").attr("disabled", true);
									$("#TransferMoney").attr("disabled", true);
									$("#DeliverOrder").attr("disabled", true);
									$("#CheckOrder").attr("disabled", true);
									$("#CloseOrder").attr("disabled", true);
								}
								break;
								case "10":
								{
									$("#Calculate").attr("disabled", true);
									$("#CheckCredit").attr("disabled", true);
									$("#ApproveCredit").attr("disabled", true);
									$("#PlaceOrder").attr("disabled", true);
									$("#OrderReady").attr("disabled", true);
									$("#TransferMoney").attr("disabled", true);
									$("#DeliverOrder").attr("disabled", true);
									$("#CheckOrder").attr("disabled", true);
									$("#CloseOrder").attr("disabled", true);
								}
								break;
								default:
									$('#lostate').text("No Status Found");
							}
				});
			});
			$('#PlaceOrder').click(function() {
				$('#lcordId').text('');
				var _id = $('#orderId').val();
				const tx = {from: account,to: addr,
				gas: 45000000,data: mycontract.methods.PlaceOrder(_id).encodeABI()};
				web2conn.eth.sendTransaction(tx).then(function(result, error) {
					if(error){
						console.log( "Transaction error" ,error);
					} else {
						$("#PlaceOrder").attr("disabled", true);
						$("#OrderReady").attr("disabled", false);
						$('#lcordId').text('Order Placed');
					}
				});
			});
			
			$('#DeliverOrder').click(function() {
				$('#lcordId').text('');
				var _id = $('#orderId').val();
				const tx = {from: account,to: addr,
				gas: 45000000,data: mycontract.methods.DeliverOrder(_id).encodeABI()};
				web2conn.eth.sendTransaction(tx).then(function(result, error) {
					if(error){
						console.log( "Transaction error" ,error);
					} else {
						$("#DeliverOrder").attr("disabled", true);
						$("#CheckOrder").attr("disabled", false);
						$('#lcordId').text('Order Delivered to Retailer');
					}
				});
			});
			$('#CloseOrder').click(function() {
				$('#lcordId').text('');
				var _id = $('#orderId').val();
				const tx = {from: account,to: addr,
				gas: 45000000,data: mycontract.methods.CloseOrder(_id).encodeABI()};
				web2conn.eth.sendTransaction(tx).then(function(result, error) {
					if(error){
						console.log( "Transaction error" ,error);
					} else {
						$("#CloseOrder").attr("disabled", true);
						$('#lcordId').text('Order Closed..Hurahhh');
					}
				});
			});
			$('#Calculate').click(function() {
				$('#lcordId').text('');
				var _id = $('#orderId').val();
			    var _price = $('#lcprice').val();
				var _discount = $('#lcdiscount').val();
				const tx = {from: account,to: addr,
				gas: 4500000,data: mycontract.methods.Calculate(_id,_price,_discount).encodeABI()};
				web2conn.eth.sendTransaction(tx).then(function(result, error) {
					if(error){
						console.log( "Transaction error" ,error);
					} else {
						$("#Calculate").attr("disabled", true);
						$("#CheckCredit").attr("disabled", false);
						$('#lcordId').text('Discount Applied');
					}
				});
			});
			$('#CheckCredit').click(function() {
				$('#lcordId').text('');
				var _id = $('#orderId').val();
				const tx = {from: account,to: addr,
				gas: 45000000,data: mycontract.methods.CheckCredit(_id).encodeABI()};
				web2conn.eth.sendTransaction(tx).then(function(result, error) {
					if(error){
						console.log( "Transaction error" ,error);
					} else {
						$("#CheckCredit").attr("disabled", true);
						$("#ApproveCredit").attr("disabled", false);
						$('#lcordId').text('Send to Bank');
					}
				});
			});
		});
	</script>
</body>
</html>