Automatically display new blocks via ajax

app.js

@@ -34,6 +34,9 @@ var app = express();
 // view engine setup
 app.set('views', path.join(__dirname, 'views'));
 
+// don't send 304 errors so we can long pull
+app.disable('etag');
+
 // ref: https://blog.stigok.com/post/disable-pug-debug-output-with-expressjs-web-app
 app.engine('pug', (path, options, fn) => {
 	options.debug = false;

app/api/coreApi.js

@@ -492,6 +492,8 @@ function getBlocksByHash(blockHashes) {
 
 			resolve(combinedBlocks);
 		}
+
+		reject();
 	});
 }
 

public/js/index.js

@@ -0,0 +1,86 @@
+$(document).ready(function () {
+
+    let latestBlock = $('#block-0').text();
+    latestBlock = latestBlock.replace(/\,/g, '');
+    latestBlock = parseInt(latestBlock);
+
+    let timestamps = null;
+    let timeago = null;
+
+
+    setInterval(function () {
+
+
+        timestamps = $('.block-timestamp');
+        timeago = $('.block-time-ago');
+
+        for(let i = 0; i < timestamps.length; i++) {
+            let timestamp = timestamps[i].innerText;
+            timeago.eq(i).html(Math.round((Date.now() - timestamp)/1000/60) + " min");
+        }
+
+
+
+        $.get('/newblocks', {blockHeight: latestBlock + 1})
+            .done(data => {
+
+                if(!jQuery.isEmptyObject(data)) {
+
+                    if(data.currencyValue < 0) {
+                        data.currencyValue = 0
+                    }
+
+                    let exchangeRate = '';
+                    if(data.exchangeRate) {
+                        exchangeRate = data.exchangeRate;
+                        let formatExchangedCurrency = data.formatExchangedCurrency;
+
+                        exchangeRate = '<span></span><span data-toggle="tooltip" title="' + formatExchangedCurrency + '"><i class="fas fa-exchange-alt"></i></span>'
+                    }
+
+                    if(data.miner !== '?') {
+                        data.miner = '<span class="tag" data-toogle="tooltip" title="Identified by: ' + data.miner.identifiedBy + '">' + data.miner.name + '</span>';
+                    }
+
+                    $('#block-list').prepend(
+                        '<tr>' +
+                        '<td class="data-cell monospace"><a href="/block-height/' + data.height_number + '">' + data.height + '</a></td>' +
+                        '<td class="data-cell monospace">' + data.time + '<span class="d-none block-timestamp">' + data.timeUTC + '</span>' +'</td>' +
+                        '<td class="data-cell monospace text-right block-time-ago">' + data.timeAgo + '</td>' +
+                        '<td class="data-cell monospace"><span>' + data.miner + '</span></td>' +
+                        '<td class="data-cell monospace text-right">' + data.transactions + '</td>' +
+                        '<td class="data-cell monospace text-right"><span class="monospace">' + data.currencyValueFormatted + ' ' + exchangeRate + '</span></td>' +
+                        '<td class="data-cell monospace text-right">' + data.size + '</td>' +
+                        '<td class="data-cell monospace text-right"><span>' + data.weight + '</span>' +
+                        '<div class="radial-progress" data-progress="' + parseInt(data.radialProgressBarPercent) + '" data-toggle="tooltip" title="' + data.radialProgressBarPercent + '% full">' +
+                            '<div class="circle">' +
+                                '<div class="mask-full">' +
+                                    '<div class="fill"></div>' +
+                                '</div>' +
+                                '<div class="mask-half">' +
+                                    '<div class="fill"></div>' +
+                                    '<div class="fill-mix"></div>' +
+                                '</div>' +
+                            '</div>' +
+                            '<div class="inset">' +
+                            '</div>' +
+                        '</div>' +
+                        '</td>' +
+                        '</tr>'
+                    );
+
+                    $('[data-toggle="tooltip"]').tooltip('dispose');
+                    $('[data-toggle="tooltip"]').tooltip();
+                    //$('[data-toggle="popover"]').popover({html:true, container:"body"});
+                    //$("[data-toggle='toggle']").toggle();
+
+                    latestBlock = latestBlock + 1;
+                }
+
+            })
+            .fail((jqXHR, textStatus, errorThrown) => {
+                console.log(textStatus, errorThrown);
+            });
+
+    }, 5000);
+});

routes/baseActionsRouter.js

@@ -13,6 +13,7 @@ var utils = require('./../app/utils.js');
 var coins = require("./../app/coins.js");
 var config = require("./../app/config.js");
 var coreApi = require("./../app/api/coreApi.js");
+const rpcApi = require("./../app/api/rpcApi");
 
 router.get("/", function(req, res) {
 	if (req.session.host == null || req.session.host.trim() == "") {
@@ -1022,8 +1023,50 @@ router.get("/fun", function(req, res) {
 	});
 
 	res.locals.historicalData = sortedList;
-	
+
 	res.render("fun");
 });
 
+router.get('/newblocks', (req, res) => {
+
+    rpcApi.getBlocksByHeight([parseInt(req.query.blockHeight)]).then((latestBlocks) => {
+
+    	if(latestBlocks) {
+
+			let block = latestBlocks[0];
+
+			let miner = '?';
+			if(typeof(block.miner) !== 'undefined' && block.miner !== null) {
+				miner = block.miner;
+			}
+
+			let exchangeRate = (global.exchangeRate) ? global.exchangeRate : null;
+
+			let currencyValue = new Decimal(block.totalFees).dividedBy(block.tx.length);
+			let currencyFormatType = req.session.currencyFormatType;
+			let formatExchangedCurrency = utils.formatExchangedCurrency(currencyValue);
+
+			let height = block.height.toLocaleString();
+			let height_number = block.height;
+			let timeUTC = new Date(parseInt(block.time) * 1000).getTime();
+			let time = moment.utc(new Date(parseInt(block.time) * 1000)).format("Y-MM-DD HH:mm:ss");
+			let timeAgo = moment.duration(moment.utc(new Date()).diff(moment.utc(new Date(parseInt(block.time) * 1000)))).format('m') + ' min';
+			let transactions = block.tx.length.toLocaleString();
+			let currencyValueFormatted = utils.formatCurrencyAmount(currencyValue, currencyFormatType);
+			let size = block.size.toLocaleString();
+			let weight = block.weight.toLocaleString();
+			let radialProgressBarPercent = new Decimal(100 * block.weight / coinConfig.maxBlockWeight).toDecimalPlaces(2);
+
+			res.send({height: height, height_number: height_number, time: time, timeUTC: timeUTC, timeAgo: timeAgo, miner: miner, transactions: transactions,
+				currencyValue: currencyValue, currencyValueFormatted: currencyValueFormatted, size: size, weight: weight, radialProgressBarPercent: radialProgressBarPercent
+				, currencyFormatType: currencyFormatType, exchangeRate: exchangeRate, formatExchangedCurrency: formatExchangedCurrency});
+        } else {
+    		res.status(200).send({});
+		}
+	})
+	.catch(err => {
+		res.status(200).send(err);
+	});
+});
+
 module.exports = router;

views/includes/blocks-list.pug

@@ -12,23 +12,24 @@ table(class="table table-striped table-responsive-sm mb-0")
 
 			if (blocks && blocks.length > 0 && blocks[0].weight)
 				th(class="data-header text-right") Weight (wu)
-	tbody
+	tbody(id="block-list")
 		each block, blockIndex in blocks
 			if (block)
 				tr
 					td(class="data-cell monospace")
-						a(href=("/block-height/" + block.height)) #{block.height.toLocaleString()}
+						a(id=("block-" + blockIndex) href=("/block-height/" + block.height)) #{block.height.toLocaleString()}
 
 						if (global.specialBlocks && global.specialBlocks[block.hash])
 							span  
 							a(data-toggle="tooltip", title=(coinConfig.name + " Fun! See block for details"))
 								i(class="fas fa-certificate text-primary")
 					td(class="data-cell monospace") #{moment.utc(new Date(parseInt(block.time) * 1000)).format("Y-MM-DD HH:mm:ss")}
+						span(class="d-none block-timestamp")=new Date(parseInt(block.time) * 1000).getTime()
 
 					- var timeAgo = moment.duration(moment.utc(new Date()).diff(moment.utc(new Date(parseInt(block.time) * 1000))));
-					td(class="data-cell monospace text-right") #{timeAgo.format()}
+					td(class="data-cell monospace text-right block-time-ago") #{timeAgo.format("m") + " min"}
 					td(class="data-cell monospace")
-						if (block.miner && block.miner.name)
+						if (block.miner)
 							span(data-toggle="tooltip", title=("Identified by: " + block.miner.identifiedBy), class="tag") #{block.miner.name}
 						else
 							span ?

views/index.pug

@@ -173,4 +173,5 @@ block content
 								td(class="monospace") #{new Decimal(item.txrate).toDecimalPlaces(4)}
 
 block endOfBody
-	script(async, defer, src="https://buttons.github.io/buttons.js")
+	script(async, defer, src="https://buttons.github.io/buttons.js")
+	script(src="/js/index.js")