I want to see Event logs in UI. And for this, I use following code in JavaScript :
var EnergyEvent = Coursetro.setEnergyEvent({}, {fromBlock: 0, toBlock: 'latest'});
EnergyEvent.watch(function(err, result) {
if (err) {
console.log(err)
return;
}
})
What is missed in my JavaScript code ?
You can see full code of my contract and JavaScript code in bellow:
solidity code :
pragma solidity ^0.4.15;
import './SafeMath.sol';
import './Ownable.sol';
contract Weechain is Ownable{
using SafeMath for uint256;
uint256 public energyTotalSupply;
uint256 public powerTotalSupply;
struct Device {
uint256 energyValue;
uint256 powerValue;
}
mapping(address => Device) amount;
event setEnergyEvent(address indexed device, uint256 energy);
event setPowerEvent(address indexed device, uint256 power);
event setPayloadEvent(uint256 indexed SQN, string payload);
// Constructor
function Weechain() {
energyTotalSupply = 0;
powerTotalSupply = 0;
amount[owner].energyValue = energyTotalSupply;
amount[owner].powerValue = powerTotalSupply;
}
function amountOfenergy(address dev) constant returns (uint256 energy) {
return amount[dev].energyValue;
}
function amountOfpower(address dev) constant returns (uint256 power) {
return amount[dev].powerValue;
}
function setPayload(uint256 SQN, string payload) public returns (bool) {
emit setPayloadEvent(SQN, payload);
return true;
}
function setEnergy(address dev, uint256 energy) public returns(bool) {
require(dev != address(0));
amount[dev].energyValue = amount[dev].energyValue.add(energy);
energyTotalSupply = energyTotalSupply.add(energy);
emit setEnergyEvent(dev, energy);
return true;
}
function setPower(address dev, uint256 power) public returns (bool) {
require(dev != address(0));
amount[dev].powerValue = amount[dev].powerValue.add(power);
powerTotalSupply = powerTotalSupply.add(power);
emit setPowerEvent(dev, power);
return true;
}
}
Javascript and HTML code :
<!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">
<title>Weechain Smart Contract</title>
<script src="./node_modules/web3/dist/web3.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
html, body, h1, h2, h3, h4, h5, h6 {
font-family: "Courier New", Courier, monospace
}
</style>
<style>
.input {
background-color: #373E43;
color: black;
}
</style>
<style>
.header {
text-align: center;
background-color: #373E43;
color: white;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 15px;
}
</style>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(odd){background-color: #373E43; color: white;}
tr:nth-child(even){background-color: #373E43; color: white;}
</style>
<style>
.output {
background-color: #373E43;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div class="w3-container">
<div class="header">
<h1>Weechain</h1>
</div>
<!-- <p>Output: <span id="owner"></span>
</p> -->
<div class="output">
<p id="Output" > </p>
</div>
<div class="row">
<div class="input">
<div class="column">
<label for="name" class="col-lg-2 control-label">Device Address</label>
<input id="Address" class="w3-input w3-border w3-animate-input" type="text" style="width:30%">
<label for="name" class="col-lg-2 control-label">Energy</label>
<input id="Energy" class="w3-input w3-border w3-animate-input" type="text" style="width:30%">
<button id="buttonSet" class="w3-button w3-black w3-round-large">Set Energy Value</button>
<button id="buttonGet" class="w3-button w3-black w3-round-large">Get Energy Balance</button>
</div>
<div class="column">
<label for="name" class="col-lg-2 control-label">Device Address</label>
<input id="AddressPower" class="w3-input w3-border w3-animate-input" type="text" style="width:30%">
<label for="name" class="col-lg-2 control-label">Power</label>
<input id="Power" class="w3-input w3-border w3-animate-input" type="text" style="width:30%">
<button id="buttonSetPower" class="w3-button w3-black w3-round-large">Set Power Value</button>
<button id="buttonGetPower" class="w3-button w3-black w3-round-large">Get Power Balance</button>
</div>
<div class="column">
<label for="name" class="col-lg-2 control-label">Sequence Number</label>
<input id="SQN" class="w3-input w3-border w3-animate-input" type="text" style="width:30%">
<label for="name" class="col-lg-2 control-label">Payload</label>
<input id="Payload" class="w3-input w3-border w3-animate-input" type="text" style="width:30%">
<button id="buttonSetPayload" class="w3-button w3-black w3-round-large">Set Payload Value</button>
</div>
</div>
</div>
<div class="row">
<div>
<h2 class="sub-header">Energy Transactions</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Transaction Hash</th>
<th>Device Address</th>
<th>Energy Value</th>
</tr>
</thead>
<tbody id="transactions">
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div>
<h2 class="sub-header">Power Transactions</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Transaction Hash</th>
<th>Device Address</th>
<th>Power Value</th>
</tr>
</thead>
<tbody id="transactionsPower">
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div>
<h2 class="sub-header">Payload Transactions</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Transaction Hash</th>
<th>Payload</th>
</tr>
</thead>
<tbody id="transactionsPayload">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script>
if (typeof web3 !== 'undefined') {
web3 = new Web3(web3.currentProvider);
} else {
web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
}
//this.watchEvents = this.watchEvents.bind(this)
web3.eth.defaultAccount = web3.eth.accounts[0];
/*
var CoursetroContract = web3.eth.contract([{"constant":false,"inputs":[{"name":"_fName","type":"string"},{"name":"_age","type":"uint256"}],"name":"setInstructor","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"getInstructor","outputs":[{"name":"","type":"string"},{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"}]);
*/
var CoursetroContract = web3.eth.contract([{"constant":true,"inputs":[],"name":"energyTotalSupply","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"dev","type":"address"}],"name":"amountOfenergy","outputs":[{"name":"energy","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"owner","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"powerTotalSupply","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"dev","type":"address"},{"name":"energy","type":"uint256"}],"name":"setEnergy","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"SQN","type":"uint256"},{"name":"payload","type":"string"}],"name":"setPayload","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"dev","type":"address"}],"name":"amountOfpower","outputs":[{"name":"power","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"newOwner","type":"address"}],"name":"transferOwnership","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"dev","type":"address"},{"name":"power","type":"uint256"}],"name":"setPower","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"inputs":[],"payable":false,"stateMutability":"nonpayable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"name":"device","type":"address"},{"indexed":false,"name":"energy","type":"uint256"}],"name":"setEnergyEvent","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"device","type":"address"},{"indexed":false,"name":"power","type":"uint256"}],"name":"setPowerEvent","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"SQN","type":"uint256"},{"indexed":false,"name":"payload","type":"string"}],"name":"setPayloadEvent","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"_by","type":"address"},{"indexed":true,"name":"_to","type":"address"}],"name":"ChangementOwnership","type":"event"}]);
var Coursetro = CoursetroContract.at('0x8db88aaa4990408dfe41d6c77a76a09cba95d982');
/*
var utils = require("./utils.js");
var _ = require("lodash");
var Promise = require("bluebird");
module.exports = {
assertEvent: function(contract, filter) {
return new Promise((resolve, reject) => {
var event = contract[filter.event]();
event.watch();
event.get((error, logs) => {
var log = _.filter(logs, filter);
if (log) {
resolve(log);
} else {
throw Error("Failed to find filtered event for " + filter.event);
}
});
event.stopWatching();
});
}
}
*/
/*
var instructorEvent = Coursetro.setEnergyEvent({}, {fromBlock: 0, toBlock: 'latest'});
instructorEvent.watch(function(error, result){
alert(1);
});
*/
/*
var event = testing.event_res(function(error, result) {
if (!error)
console.log(result.args);
else
console.log(error);
});
*/
var EnergyEvent = Coursetro.setEnergyEvent({}, {fromBlock: 0, toBlock: 'latest'});
EnergyEvent.watch(function(err, result) {
if (err) {
console.log(err)
return;
}
// append details of result.args to UI
})
/*
var instructorEvent = Coursetro.setEnergyEvent({}, {fromBlock: 0, toBlock: 'latest'});
instructorEvent.watch(function(error, EventLogs){
if (!error) {
alert(1);
console.log('Event Logs:' + EventLogs);
} else
console.log('Event Logs error:' + error);
});
*/
$("#buttonGet").click(function() {
Coursetro.amountOfenergy($("#Address").val(), function(error, result) {
if (!error) {
$("#Output").html('Energy value of device with address ' + $("#Address").val() + ' equals '+ result.toString());//+' ('+result[1]+')');
console.log('Energy value of device with address \"' + $("#Address").val() + '" equals "'+ result.toString() + '"');
var receipt = web3.eth.getTransactionReceipt('0x5337d09cc54c1ec80970b7c74881f01cbf5653293873d54617b64fad21f6fb68');
console.log(' tx hash: ' + receipt.toString());
/*console.log("address\tfrom\t\tto\tamount\tblockHash\tblockNumber\tevent\tlogIndex\ttransactionHash\ttransactionIndex");*/
} else
console.log(error);
});
});
/*
$("#buttonSet").click(function() {
//Coursetro.setPayload($("#name").val(), $("#age").val());
Coursetro.setEnergy($("#Address").val(), $("#Energy").val());
//Coursetro.setPayload($("#name").val());
});
*/
$("#buttonSet").click(function() {
var estd_gas = Coursetro.setEnergy.estimateGas($("#Address").val(), $("#Energy").val());
console.log(estd_gas);
var params = {
gas: Math.round(estd_gas * 1.25),
from: web3.eth.accounts[0]
};
Coursetro.setEnergy.sendTransaction($("#Address").val(), $("#Energy").val(), params, function(error, TxHash) {
if (!error) {
$("#Output").html('Transaction Hash in Hexadecimal:'+ TxHash.toString());//+' ('+TxHash[1]+')');
$('#transactions').append('<tr><td>' + TxHash.toString() + '</td><td>' + $("#Address").val() + '</td><td>' + $("#Energy").val() + '</td></tr>')
console.log(TxHash.toString());
//var receipt = web3.eth.getTransactionReceipt('0xc7be46f83e4c382995512357b99f97796b1e902c60d2667a068b062776a00dd4');
//var receipt2 = web3.toAscii(TxHash.input);
//console.log(receipt.toString());
//Coursetro.setEnergyEvent({},{fromBlock: 0,toBlock: 'latest'}).watch((error, event) => {})
/*var EnergyEvent = Coursetro.setEnergyEvent({}, {fromBlock: 0, toBlock: 'latest'});
EnergyEvent.watch(function(err, result) {
if (err) {
console.log(err)
return;
}
// append details of result.args to UI
})*/
//console.log(receipt2.toString());
} else
console.log(error);
});
});
////
///////////////////////
$("#buttonSetPower").click(function() {
var estd_gas = Coursetro.setPower.estimateGas($("#Address").val(), $("#Power").val());
console.log(estd_gas);
var params = {
gas: Math.round(estd_gas * 1.25),
from: web3.eth.accounts[0]
};
Coursetro.setPower.sendTransaction($("#Address").val(), $("#Power").val(), params, function(error, TxHash) {
if (!error) {
$("#Output").html('Transaction Hash in Hexadecimal:'+ TxHash.toString());//+' ('+TxHash[1]+')');
$('#transactionsPower').append('<tr><td>' + TxHash.toString() + '</td><td>' + $("#Address").val() + '</td><td>' + $("#Power").val() + '</td></tr>')
console.log(TxHash.toString());
//var receipt = web3.eth.getTransactionReceipt('0xc7be46f83e4c382995512357b99f97796b1e902c60d2667a068b062776a00dd4');
//var receipt2 = web3.toAscii(TxHash.input);
console.log(receipt.toString());
//console.log(receipt2.toString());
} else
console.log(error);
});
});
$("#buttonGetPower").click(function() {
Coursetro.amountOfpower($("#Address").val(), function(error, result) {
if (!error) {
$("#Output").html('Power value of device with address ' + $("#Address").val() + ' equals '+ result.toString());//+' ('+result[1]+')');
console.log('Power value of device with address \"' + $("#Address").val() + '" equals "'+ result.toString() + '"');
//var receipt = web3.eth.getTransactionReceipt('0x5337d09cc54c1ec80970b7c74881f01cbf5653293873d54617b64fad21f6fb68');
console.log(' tx hash: ' + receipt.toString());
/*console.log("address\tfrom\t\tto\tamount\tblockHash\tblockNumber\tevent\tlogIndex\ttransactionHash\ttransactionIndex");*/
} else
console.log(error);
});
});
////////////////////
$("#buttonSetPayload").click(function() {
var estd_gas = Coursetro.setPayload.estimateGas($("#SQN").val(), $("#Payload").val());
console.log(estd_gas);
var params = {
gas: Math.round(estd_gas * 1.25),
from: web3.eth.accounts[0]
};
Coursetro.setPayload.sendTransaction($("#SQN").val(), $("#Payload").val(), params, function(error, TxHash) {
if (!error) {
$("#Output").html('Transaction Hash in Hexadecimal:'+ TxHash.toString());//+' ('+TxHash[1]+')');
$('#transactionsPayload').append('<tr><td>' + TxHash.toString() + '</td><td>' + $("#Payload").val() + '</td></tr>')
console.log(TxHash.toString());
//var receipt = web3.eth.getTransactionReceipt('0xc7be46f83e4c382995512357b99f97796b1e902c60d2667a068b062776a00dd4');
//var receipt2 = web3.toAscii(TxHash.input);
console.log(receipt.toString());
//console.log(receipt2.toString());
} else
console.log(error);
});
});
////////////////
// TODO: trigger event when vote is counted, not when component renders
</script>
</body>
</html>
Note 1 : I used this tutorial : https://media.consensys.net/technical-introduction-to-events-and-logs-in-ethereum-a074d65dd61e
Update : I changed my JavaScript code regarding to comment of User Ismael. However, I do not see still the event logs.