diff options
Diffstat (limited to 'cmd/faucet/faucet.html')
| -rw-r--r-- | cmd/faucet/faucet.html | 86 |
1 files changed, 81 insertions, 5 deletions
diff --git a/cmd/faucet/faucet.html b/cmd/faucet/faucet.html index 75dad0bdf..5d3b8741b 100644 --- a/cmd/faucet/faucet.html +++ b/cmd/faucet/faucet.html @@ -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}} |