<!DOCTYPE html>
<html>
<head>
<!-- Please note that we use https://getmdl.io/components for quick and easy page
styling and for our client components. Look on their website to see how to use
Material Design Lite -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="style.css">
<!-- Please note how we hardcode the use of heat-sdk version, 0.3.3 in this case -->
<script src="https://unpkg.com/heat-sdk@0.3.3/dist/heat-sdk.umd.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function () {
function generateNew() {
var sdk = new heatsdk.HeatSDK()
sdk.api.get("/blockchain/blocks/0/100/false").then(blocks => {
let times = [], prev = blocks[0].timestamp
for (var i=1; i<blocks.length; i++) {
times.push(prev - blocks[i].timestamp)
prev = blocks[i].timestamp
}
console.log(times)
let sum = times.reduce((total, num)=>total + num)
let average = sum / times.length
$("#average").val(average)
$('#average').parent().addClass('is-dirty');
let height = parseInt($("#height").val().replace(/,/g,''))
let currentHeight = blocks[0].height
let blocksToGo = height - currentHeight
let timeToGo = blocksToGo * average
let timeOfBlock = sdk.utils.timestampToDate(blocks[0].timestamp + timeToGo)
$("#date").text(timeOfBlock)
})
}
generateNew()
$("#btn").click(generateNew)
})
</script>
</head>
<body>
<h3>HEAT-SDK | Block height to date</h3>
<h6>With heat-sdk we analyze average block times and determine when to approximately expect a block of a certain height</h6>
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Errupt much when?</h2>
</div>
<div class="mdl-card__supporting-text">
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="average" readonly value="Loading ..">
<label class="mdl-textfield__label" for="average">Average block time (in seconds) ...</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="height" value="777,777">
<label class="mdl-textfield__label" for="height">Block height ...</label>
</div>
<div>
<small>Expected date/time of block</small>
<div class="bigger" id="date"></div>
</div>
</form>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" id="btn">
Refresh
</a>
</div>
</div>
</body>
</html>
body {
padding: 10px;
}
.demo-card-wide.mdl-card {
width: 512px;
}
.demo-card-wide > .mdl-card__title {
color: #fff;
height: 176px;
background: url('https://www.thelocal.it/userdata/images/article/b203eaabd74c6c0883f9e72e2144aba7de3c86ac7e3d44ce2bf1e0000b1143ca.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
color: #fff;
}
.bigger {
font-size: 16px;
margin-bottom: 8px;
}