Monitor data : Independent addresses and Label feature

Monitor data now reads the local data from indexedDB and displays them before refreshing for new data using API.
Each address can now be refreshed or removed independently.
Added a feature to store label of address in local data.
This commit is contained in:
Sai Raj 2019-02-04 16:23:09 +05:30 committed by GitHub
parent cc690d61b4
commit ac86b0a37d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -2,6 +2,11 @@
<html> <html>
<head> <head>
<title>FLO walletless</title> <title>FLO walletless</title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head> </head>
<body> <body>
<script> <script>
@ -9,6 +14,8 @@
const testnet = `https://testnet.flocha.in`; const testnet = `https://testnet.flocha.in`;
let server = mainnet; let server = mainnet;
window["loadwait"] = false;
window["refreshwait"] = false;
const fee = 0.0005; const fee = 0.0005;
</script> </script>
@ -23,7 +30,7 @@
<button id="GenNewAddrBtn" onclick="GenNewAddr();">Generate New Address</button> <button id="GenNewAddrBtn" onclick="GenNewAddr();">Generate New Address</button>
<button id="RecoverAddrBtn" onclick="RecoverAddr();">Recover FLO Address</button><br/><br/> <button id="RecoverAddrBtn" onclick="RecoverAddr();">Recover FLO Address</button><br/><br/>
<table id="addrDisp" border="1"><tr><td><b>FLO Address</b></td><td><b>Secret (or) Private Key</b></td></tr></table> <table id="addrDisp"><tr><td><b>FLO Address</b></td><td><b>Secret (or) Private Key</b></td></tr></table>
</div> </div>
@ -45,7 +52,7 @@
Enter Address : <input type="text" id="getAddr"><br/> Enter Address : <input type="text" id="getAddr"><br/>
<button id="getData" onclick="monitorData()">Monitor Data</button><br/> <button id="getData" onclick="monitorData()">Monitor Data</button><br/>
<button id="clearLocalData" onclick="clearLocalData()">Clear Local Data</button> <button id="clearLocalData" onclick="clearLocalData()">Clear Local Data</button>
<div id="dispMsg"><h3>Received FLO Data : </h3><br/><table id="dispfloData" border="1"><tr><td>Sender</td><td>Receiver</td><td>Time</td><td>FLO data</td></tr><table></div> <div id="dispMsg"><h3>Received FLO Data : </h3><br/></div>
</div> </div>
@ -58,14 +65,11 @@
function clearLocalData() function clearLocalData()
{ {
var table = document.getElementById("dispfloData"); document.getElementById("dispMsg").innerHTML = '<h3>Received FLO Data : </h3><br/>';
for(var i = table.rows.length - 1; i > 0; i--)
table.deleteRow(i);
var DBDeleteRequest = window.indexedDB.deleteDatabase("FLO_Walletless"); var DBDeleteRequest = window.indexedDB.deleteDatabase("FLO_Walletless");
DBDeleteRequest.onsuccess = function(event) { DBDeleteRequest.onsuccess = function(event) {
console.log("Database deleted successfully"); console.log("Database deleted successfully");
alert("Successfully Cleared Local Data!"); alert("Successfully Cleared Local Data!");
console.log(event.result);
}; };
} }
@ -4908,7 +4912,7 @@ Bitcoin.Util = {
let addrList = addrs.split(','); let addrList = addrs.split(',');
addrList = Array.from(new Set(addrList)); addrList = Array.from(new Set(addrList));
var result = ""; var result = "";
var totBal = 0; var totBal = 0.0;
var flag = 0; var flag = 0;
addrList.forEach(function(addr){ addrList.forEach(function(addr){
if (!validateAddr(addr)){ if (!validateAddr(addr)){
@ -4917,8 +4921,8 @@ Bitcoin.Util = {
} }
var response = ajax("GET",`api/addr/${addr}/balance`); var response = ajax("GET",`api/addr/${addr}/balance`);
if(response){ if(response){
result += `<input type="radio" name="sender" value=${addr} checked> ${addr} ${response} <br/>\n`; result += `<tr><td><input type="radio" name="sender" value=${addr} checked></td><td>${addr}</td><td>${response}</td></tr> \n`;
totBal+=response; totBal+=parseFloat(response);
flag = 1; flag = 1;
}else{ }else{
console.log("error : connection failed!"); console.log("error : connection failed!");
@ -4930,8 +4934,7 @@ Bitcoin.Util = {
document.getElementById("sendBtn").disabled = true; document.getElementById("sendBtn").disabled = true;
return ; return ;
} }
result+=`\nTotal Balance : ${totBal}`; dispBal.innerHTML = `<table>${result}<tr><td colspan="2">Total Balance :</td><td>${totBal}</tr></table>`;
dispBal.innerHTML = result;
document.getElementById("sendBtn").disabled = false; document.getElementById("sendBtn").disabled = false;
} }
@ -4955,9 +4958,7 @@ Bitcoin.Util = {
var trx = bitjs.transaction(); var trx = bitjs.transaction();
var sendAmt = parseFloat(document.getElementById("sendAmt").value); var sendAmt = parseFloat(document.getElementById("sendAmt").value);
var utxoAmt = 0.0; var utxoAmt = 0.0;
console.log(sender+":"+sendAmt);
var x = sendAmt+fee; var x = sendAmt+fee;
console.log(x);
var response = ajax("GET",`api/addr/${sender}/utxo`); var response = ajax("GET",`api/addr/${sender}/utxo`);
var utxos = JSON.parse(response); var utxos = JSON.parse(response);
for(var x = utxos.length-1; x >= 0; x--){ for(var x = utxos.length-1; x >= 0; x--){
@ -4965,14 +4966,12 @@ Bitcoin.Util = {
var txid = utxos[x].txid; var txid = utxos[x].txid;
var index = utxos[x].vout; var index = utxos[x].vout;
var scriptPubKey = utxos[x].scriptPubKey; var scriptPubKey = utxos[x].scriptPubKey;
var bal = utxos[x].amount var bal = utxos[x].amount;
console.log(""+utxoAmt+"::"+txid + " : " + index +" : "+scriptPubKey +":"+bal);
trx.addinput(txid, index, scriptPubKey) trx.addinput(txid, index, scriptPubKey)
utxoAmt += bal; utxoAmt += bal;
}else }else
break; break;
} }
console.log(utxoAmt+":"+(sendAmt+fee));
if(utxoAmt < sendAmt+fee){ if(utxoAmt < sendAmt+fee){
alert("Insufficient balance!"); alert("Insufficient balance!");
return; return;
@ -4990,7 +4989,6 @@ Bitcoin.Util = {
var sendFloData = document.getElementById("flotextdata").value; var sendFloData = document.getElementById("flotextdata").value;
trx.addflodata(sendFloData); trx.addflodata(sendFloData);
console.log(sendFloData);
var wif = prompt("Enter private key"); var wif = prompt("Enter private key");
if (wif.length<1||!verifyWIF(wif,sender)){ if (wif.length<1||!verifyWIF(wif,sender)){
alert("Invalid Private key!"); alert("Invalid Private key!");
@ -5035,121 +5033,214 @@ Bitcoin.Util = {
</script> </script>
<script> <script>
var waitForGlobal = function(param, callback) {
if (!window[param]) {
callback();
} else {
setTimeout(function() {
waitForGlobal(param, callback);
}, 100);
}
};
function monitorData(){ function monitorData(){
var addrList = document.getElementById("getAddr").value; var addrList = document.getElementById("getAddr").value;
addrList = addrList.split(','); addrList = addrList.split(',');
addrList = Array.from(new Set(addrList)); addrList = Array.from(new Set(addrList));
//clear the table var dispMsg = document.getElementById("dispMsg") ;
var table = document.getElementById("dispfloData"); window["refreshwait"] = addrList.length;
for(var i = table.rows.length - 1; i > 0; i--)
table.deleteRow(i);
addrList.forEach(function(addr){ addrList.forEach(function(addr){
if (!validateAddr(addr)){ if (!validateAddr(addr)){
alert(`Invalid address : ${addr}`); alert(`Invalid address : ${addr}`);
window["refreshwait"] -= 1;
return; return;
} }
var addrData = document.getElementById(addr);
if(addrData){
refreshdata(addrData);
window["refreshwait"] -= 1;
return;
}
var idbtmp = indexedDB.open("FLO_Walletless"); waitForGlobal("loadwait", function() {
idbtmp.onerror = function(event) { window["loadwait"] = true;
console.log("Error in opening IndexedDB1!"); var idbtmp = indexedDB.open("FLO_Walletless");
}; idbtmp.onerror = function(event) {
idbtmp.onupgradeneeded = function(event) { console.log("Error in opening IndexedDB!");
console.log("up"); window["loadwait"] = false;
}; };
idbtmp.onsuccess = function(event) { idbtmp.onupgradeneeded = function(event) {
var db = event.target.result; var objectStore = event.target.result.createObjectStore('Label');
var version = db.version; //objectStore.createIndex("label", "label", { unique: false });
console.log("."+db.version); };
if(!db.objectStoreNames.contains(addr)) idbtmp.onsuccess = function(event) {
version = db.version + 1; var db = event.target.result;
db.close();
console.log(":"+version);
var idb = indexedDB.open("FLO_Walletless",version);
idb.onerror = function(event) {
console.log("Error in opening IndexedDB!");
};
idb.onupgradeneeded = function(event) {
var objectStore = event.target.result.createObjectStore(addr, { keyPath: "tx", autoIncrement:true });
objectStore.createIndex("time", "time", { unique: false });
objectStore.createIndex("sender", "sender", { unique: false });
objectStore.createIndex("receiver", "receiver", { unique: false });
objectStore.createIndex("floData", "floData", { unique: false });
objectStore.createIndex("txid", "txid", { unique: true });
};
idb.onsuccess = function(event) {
var db = event.target.result; if(!db.objectStoreNames.contains(addr)){
var obs = db.transaction(addr, "readwrite").objectStore(addr); var newaddr = true;
var countRequest = obs.count(); var version = db.version + 1;
countRequest.onsuccess = function() { }
console.log(countRequest.result);
var response = ajax("GET",`api/addrs/${addr}/txs`);
var nRequired = JSON.parse(response).totalItems - countRequest.result;
console.log(nRequired);
while(true && nRequired){ else {
var response = ajax("GET",`api/addrs/${addr}/txs?from=0&to=${nRequired}`); var newaddr = false;
response = JSON.parse(response); var version = db.version;
if (nRequired + countRequest.result != response.totalItems ){ }
nRequired = response.totalItems - countRequest.result; db.close();
continue; var idb = indexedDB.open("FLO_Walletless",version);
} idb.onerror = function(event) {
console.log("Yes"); console.log("Error in opening IndexedDB!");
var i=1; };
response.items.reverse().forEach(function(tx){ idb.onupgradeneeded = function(event) {
console.log(""+tx.time +":" +i); i++; var objectStore = event.target.result.createObjectStore(addr, { keyPath: "tx", autoIncrement:true });
obs.put({time : tx.time, txid : tx.txid, sender : tx.vin[0].addr, receiver:tx.vout[0].scriptPubKey.addresses[0],floData : tx.floData}); objectStore.createIndex("time", "time", { unique: false });
}); objectStore.createIndex("sender", "sender", { unique: false });
break; objectStore.createIndex("receiver", "receiver", { unique: false });
} objectStore.createIndex("floData", "floData", { unique: false });
objectStore.createIndex("txid", "txid", { unique: true });
};
idb.onsuccess = function(event) {
//window["loadwait"] = false;
var db = event.target.result;
var obslabel = db.transaction('Label', "readwrite").objectStore('Label');
if(newaddr)
obslabel.add('',addr);
var flag = false; var dispMsgAddr = document.createElement('div');
var table=document.getElementById("dispfloData"); dispMsgAddr.id = addr;
var cursorRequest = obs.openCursor(); dispMsgAddr.innerHTML = `<hr><h4>${addr}</h4>Label : <input type="text" id="label" disabled><br>
cursorRequest.onsuccess = function(event) { <button onclick="editLabel(this.parentNode)" style="display:block;">edit</button>
var cursor = event.target.result; <button onclick="saveLabel(this.parentNode)" style="display:none;">save</button>
//console.log("g"); <br>
if(cursor) { <button onclick="refreshdata(this.parentNode)">refresh</button>
// cursor.value contains the current record being iterated through <button onclick="removedata(this.parentNode)">remove</button><br>`;
// this is where you'd do something with the result
console.log(cursor.value.sender+":"+cursor.value.receiver+":"+cursor.value.time+":"+cursor.value.txid+":"+cursor.value.floData);
var time = new Date(cursor.value.time*1000);
var row = table.insertRow(1) ;
row.insertCell(0).innerHTML = cursor.value.sender;
row.insertCell(1).innerHTML = cursor.value.receiver;
row.insertCell(2).innerHTML = time;
row.insertCell(3).innerHTML = cursor.value.floData;
flag = true;
//tmpResult = '<tr><td>'++'</td><td>'++'</td><td>'++'</td><td>'++'</td></tr>' + tmpResult;
cursor.continue();
} else {
if(!flag){
var row1 = table.insertRow(1) ;
var cell1 = row1.insertCell(0);
cell1.innerHTML= "Sorry! No Flo Data received!";
cell1.colSpan = 4
}
var row2 = table.insertRow(1) ;
var cell2 = row2.insertCell(0);
cell2.innerHTML= '<b><center>'+addr+'</center></b>';
cell2.colSpan = 4
} var labelRequest = obslabel.get(addr);
}; labelRequest.onsuccess = function(event){
}; dispMsgAddr.getElementsByTagName('input')[0].value = labelRequest.result;
};
db.close(); var table = document.createElement('table');
}; dispMsgAddr.appendChild(table);
dispMsg.appendChild(dispMsgAddr);
} var row = table.insertRow(0) ;
row.insertCell(0).innerHTML = 'Sender';
row.insertCell(1).innerHTML = 'Receiver';
row.insertCell(2).innerHTML = 'Time';
row.insertCell(3).innerHTML = 'floData';
}); var obs = db.transaction(addr, "readwrite").objectStore(addr);
var cursorRequest = obs.openCursor();
cursorRequest.onsuccess = function(event) {
var cursor = event.target.result;
if(cursor) {
// cursor.value contains the current record being iterated through
// this is where you'd do something with the result
//console.log(cursor.value.sender+":"+cursor.value.receiver+":"+cursor.value.time+":"+cursor.value.txid+":"+cursor.value.floData);
var time = new Date(cursor.value.time*1000);
var row = table.insertRow(1) ;
row.insertCell(0).innerHTML = cursor.value.sender;
row.insertCell(1).innerHTML = cursor.value.receiver;
row.insertCell(2).innerHTML = time;
row.insertCell(3).innerHTML = cursor.value.floData;
//tmpResult = '<tr><td>'++'</td><td>'++'</td><td>'++'</td><td>'++'</td></tr>' + tmpResult;
cursor.continue();
} else {
refreshdata(dispMsgAddr);
}
};
db.close();
window["refreshwait"] -= 1;
};
window["loadwait"] = false;
};
});
});
} }
</script> </script>
<script>
function refreshdata(param){
var addr = param.id;
var table = param.getElementsByTagName('table')[0];
var row = table.insertRow(1) ;
var cell = row.insertCell(0);
cell.innerHTML = "<center>Refreshing...</center>";
cell.colSpan = 4;
waitForGlobal("refreshwait", function() {
var idb = indexedDB.open("FLO_Walletless");
idb.onerror = function(event) {
console.log("Error in opening IndexedDB!");
};
idb.onsuccess = function(event) {
var db = event.target.result;
var obs = db.transaction(addr, "readwrite").objectStore(addr);
var countRequest = obs.count();
countRequest.onsuccess = function() {
console.log(countRequest.result);
var response = ajax("GET",`api/addrs/${addr}/txs`);
var nRequired = JSON.parse(response).totalItems - countRequest.result;
console.log(nRequired);
while(true && nRequired){
var response = ajax("GET",`api/addrs/${addr}/txs?from=0&to=${nRequired}`);
response = JSON.parse(response);
if (nRequired + countRequest.result != response.totalItems ){
nRequired = response.totalItems - countRequest.result;
continue;
}
response.items.reverse().forEach(function(tx){
obs.put({time : tx.time, txid : tx.txid, sender : tx.vin[0].addr, receiver:tx.vout[0].scriptPubKey.addresses[0],floData : tx.floData});
var time = new Date(tx.time*1000);
var row = table.insertRow(2) ;
row.insertCell(0).innerHTML = tx.vin[0].addr;
row.insertCell(1).innerHTML = tx.vout[0].scriptPubKey.addresses[0];
row.insertCell(2).innerHTML = time;
row.insertCell(3).innerHTML = tx.floData;
});
break;
}
table.deleteRow(1);
};
db.close();
};
});
}
function removedata(param){
param.parentNode.removeChild(param);
}
function editLabel(param){
param.getElementsByTagName('input')[0].disabled = false;
param.getElementsByTagName('button')[0].style.display = "none";
param.getElementsByTagName('button')[1].style.display = "block";
}
function saveLabel(param){
label = param.getElementsByTagName('input')[0];
label.disabled = true;
label = label.value;
param.getElementsByTagName('button')[0].style.display = "block";
param.getElementsByTagName('button')[1].style.display = "none";
var idb = indexedDB.open("FLO_Walletless");
idb.onerror = function(event) {
console.log("Error in opening IndexedDB!");
};
idb.onsuccess = function(event) {
var db = event.target.result;
var obslabel = db.transaction('Label', "readwrite").objectStore('Label');
obslabel.put(label,param.id);
db.close();
}
}
</script>
</body> </body>
</html> </html>