|
|
@@ -49,7 +49,7 @@
|
|
|
<div class="row">
|
|
|
<div class="col-lg-8 col-lg-offset-2">
|
|
|
<div class="input-group">
|
|
|
- <input id="gist" type="text" class="form-control" placeholder="Social network URL containing your Ethereum address...">
|
|
|
+ <input id="url" name="url" type="text" class="form-control" placeholder="Social network URL containing your Ethereum address...">
|
|
|
<span class="input-group-btn">
|
|
|
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Give me Ether <i class="fa fa-caret-down" aria-hidden="true"></i></button>
|
|
|
<ul class="dropdown-menu dropdown-menu-right">{{range $idx, $amount := .Amounts}}
|
|
|
@@ -106,10 +106,22 @@
|
|
|
var attempt = 0;
|
|
|
var server;
|
|
|
var tier = 0;
|
|
|
+ var requests = [];
|
|
|
|
|
|
+ // Define a function that creates closures to drop old requests
|
|
|
+ var dropper = function(hash) {
|
|
|
+ return function() {
|
|
|
+ for (var i=0; i<requests.length; i++) {
|
|
|
+ if (requests[i].tx.hash == hash) {
|
|
|
+ requests.splice(i, 1);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
// Define the function that submits a gist url to the server
|
|
|
var submit = function({{if .Recaptcha}}captcha{{end}}) {
|
|
|
- server.send(JSON.stringify({url: $("#gist")[0].value, tier: tier{{if .Recaptcha}}, captcha: captcha{{end}}}));{{if .Recaptcha}}
|
|
|
+ server.send(JSON.stringify({url: $("#url")[0].value, tier: tier{{if .Recaptcha}}, captcha: captcha{{end}}}));{{if .Recaptcha}}
|
|
|
grecaptcha.reset();{{end}}
|
|
|
};
|
|
|
// Define a method to reconnect upon server loss
|
|
|
@@ -143,18 +155,82 @@
|
|
|
noty({layout: 'topCenter', text: msg.error, type: 'error', timeout: 5000, progressBar: true});
|
|
|
}
|
|
|
if (msg.success !== undefined) {
|
|
|
- noty({layout: 'topCenter', text: msg.success, type: 'success', timeout: 15000, progressBar: true});
|
|
|
+ noty({layout: 'topCenter', text: msg.success, type: 'success', timeout: 5000, progressBar: true});
|
|
|
}
|
|
|
if (msg.requests !== undefined && msg.requests !== null) {
|
|
|
+ // Mark all previous requests missing as done
|
|
|
+ for (var i=0; i<requests.length; i++) {
|
|
|
+ if (msg.requests.length > 0 && msg.requests[0].tx.hash == requests[i].tx.hash) {
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ if (requests[i].time != "") {
|
|
|
+ requests[i].time = "";
|
|
|
+ setTimeout(dropper(requests[i].tx.hash), 3000);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // Append any new requests into our local collection
|
|
|
+ var common = -1;
|
|
|
+ if (requests.length > 0) {
|
|
|
+ for (var i=0; i<msg.requests.length; i++) {
|
|
|
+ if (requests[requests.length-1].tx.hash == msg.requests[i].tx.hash) {
|
|
|
+ common = i;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ for (var i=common+1; i<msg.requests.length; i++) {
|
|
|
+ requests.push(msg.requests[i]);
|
|
|
+ }
|
|
|
+ // Iterate over our entire local collection and re-render the funding table
|
|
|
var content = "";
|
|
|
- for (var i=0; i<msg.requests.length; i++) {
|
|
|
- content += "<tr><td><div style=\"background: url('" + msg.requests[i].avatar + "'); background-size: cover; width:32px; height: 32px; border-radius: 4px;\"></div></td><td><pre>" + msg.requests[i].account + "</pre></td><td style=\"width: 100%; text-align: center; vertical-align: middle;\">" + moment.duration(moment(msg.requests[i].time).unix()-moment().unix(), 'seconds').humanize(true) + "</td></tr>";
|
|
|
+ for (var i=0; i<requests.length; i++) {
|
|
|
+ var done = requests[i].time == "";
|
|
|
+ var elapsed = moment().unix()-moment(requests[i].time).unix();
|
|
|
+
|
|
|
+ content += "<tr id='" + requests[i].tx.hash + "'>";
|
|
|
+ content += " <td><div style=\"background: url('" + requests[i].avatar + "'); background-size: cover; width:32px; height: 32px; border-radius: 4px;\"></div></td>";
|
|
|
+ content += " <td><pre>" + requests[i].account + "</pre></td>";
|
|
|
+ content += " <td style=\"width: 100%; text-align: center; vertical-align: middle;\">";
|
|
|
+ if (done) {
|
|
|
+ content += " funded";
|
|
|
+ } else {
|
|
|
+ content += " <span id='time-" + i + "' class='timer'>" + moment.duration(-elapsed, 'seconds').humanize(true) + "</span>";
|
|
|
+ }
|
|
|
+ content += " <div class='progress' style='height: 4px; margin: 0;'>";
|
|
|
+ if (done) {
|
|
|
+ content += " <div class='progress-bar progress-bar-success' role='progressbar' aria-valuenow='30' style='width:100%;'></div>";
|
|
|
+ } else if (elapsed > 30) {
|
|
|
+ content += " <div class='progress-bar progress-bar-danger progress-bar-striped active' role='progressbar' aria-valuenow='30' style='width:100%;'></div>";
|
|
|
+ } else {
|
|
|
+ content += " <div class='progress-bar progress-bar-striped active' role='progressbar' aria-valuenow='" + elapsed + "' style='width:" + (elapsed * 100 / 30) + "%;'></div>";
|
|
|
+ }
|
|
|
+ content += " </div>";
|
|
|
+ content += " </td>";
|
|
|
+ content += "</tr>";
|
|
|
}
|
|
|
$("#requests").html("<tbody>" + content + "</tbody>");
|
|
|
}
|
|
|
}
|
|
|
server.onclose = function() { setTimeout(reconnect, 3000); };
|
|
|
}
|
|
|
+ // Start a UI updater to push the progress bars forward until they are done
|
|
|
+ setInterval(function() {
|
|
|
+ $('.progress-bar').each(function() {
|
|
|
+ var progress = Number($(this).attr('aria-valuenow')) + 1;
|
|
|
+ if (progress < 30) {
|
|
|
+ $(this).attr('aria-valuenow', progress);
|
|
|
+ $(this).css('width', (progress * 100 / 30) + '%');
|
|
|
+ } else if (progress == 30) {
|
|
|
+ $(this).css('width', '100%');
|
|
|
+ $(this).addClass("progress-bar-danger");
|
|
|
+ }
|
|
|
+ })
|
|
|
+ $('.timer').each(function() {
|
|
|
+ var index = Number($(this).attr('id').substring(5));
|
|
|
+ $(this).html(moment.duration(moment(requests[index].time).unix()-moment().unix(), 'seconds').humanize(true));
|
|
|
+ })
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
// Establish a websocket connection to the API server
|
|
|
reconnect();
|
|
|
</script>{{if .Recaptcha}}
|
Péter Szilágyi