Files
container.training/dockercoins/webui/files/index.html
2017-09-27 12:20:08 +02:00

112 lines
2.8 KiB
HTML

<!doctype html>
<html>
<head>
<title>DockerCoin Miner WebUI</title>
<link rel="stylesheet" type="text/css" href="rickshaw.min.css">
<style>
#graph {
background-color: #eee;
width: 800px;
height: 400px;
}
#tweet {
color: royalblue;
}
</style>
<script src="jquery.js"></script>
<script src="d3.min.js"></script>
<script src="rickshaw.min.js"></script>
<script>
String.prototype.format = function () {
var args = arguments;
return this.replace(/\{(\d+)\}/g, function (m, n) { return args[n]; });
};
var series = [];
var points = []
var graph = null;
function refresh () {
$.ajax({ url: "json" }).done(function (data) {
series.push(data);
while (series.length < 250) {
data = JSON.parse(JSON.stringify(data));
data.now -= 1;
series.unshift(data);
}
while (series.length > 250) {
series.shift();
}
while (points.length > 0) {
points.pop();
}
var speed;
for (var i=0; i<series.length-1; i++) {
// Compute instantaneous speed
var s1 = series[i];
var s2 = series[i+1];
speed = (s2.hashes-s1.hashes)/(s2.now-s1.now);
points.push({ x: s2.now, y: speed });
}
$("#speed").text("~" + speed.toFixed(1) + " hashes/second");
var msg = ("I'm attending a @docker orchestration workshop, "
+ "and my #DockerCoins mining rig is crunching "
+ speed.toFixed(1) + " hashes/second! W00T!");
$("#tweet").attr(
"href",
"https://twitter.com/intent/tweet?text="+encodeURIComponent(msg)
);
if (graph == null) {
graph = new Rickshaw.Graph({
renderer: "area",
stroke: true,
width: 800,
height: 400,
element: $("#graph")[0],
preserve: true,
series: [
{ name: "Coins",
color: "steelblue",
data: points
}
]
});
graph.render();
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph,
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
ticksTreatment: "glow"
});
yAxis.render();
} else {
graph.update();
$("text").css({
"font-size": "15px",
"font-weight": "normal",
"opacity": 0.5,
});
}
});
}
$(function () {
setInterval(refresh, 1000);
});
</script>
</head>
<body>
<h1>DockerCoin Miner WebUI</h1>
<div id="graph"></div>
<h2>
Current mining speed:
<span id="speed">-</span>
<a id="tweet" href="#">(Tweet this!)</a>
</h2>
</body>
</html>