progress bar

This commit is contained in:
hunterlester 2016-12-07 12:24:36 -08:00
parent a38db26829
commit 25b44fc919
3 changed files with 28 additions and 67 deletions

View file

@ -27,63 +27,12 @@ i.fa {
font-weight: 600; font-weight: 600;
} }
.nav-tabs { .input-spacing {
display: inline-block; margin: 5%;
border: none;
width: 100%;
} }
.nav-tabs>li { .progress {
margin-right: 5%; margin-top: 2%;
}
.nav-tabs>li>a {
font-size: 1.2em;
color: #000000;
border: none;
margin-right: 99px;
border-radius: 100%;
height: 40px;
width: 40px;
margin-bottom: 5%;
margin: 0 auto;
background-color: #ccc;
}
.nav-tabs>li.active>a {
border: none;
color: #000000;
background-color: rgb(30, 115, 190);
border-radius: 100%;
height: 40px;
width: 40px;
margin-bottom: 5%;
margin: 0 auto;
}
.nav-tabs>li.active>a:link {
border: none;
}
.nav-tabs>li.active>a:hover {
background-color: rgb(30, 115, 190);
border-radius: 100%;
height: 40px;
width: 40px;
margin-bottom: 5%;
}
.nav-tabs>li>a:hover {
background-color: #ccc;
border-radius: 100%;
height: 40px;
width: 40px;
margin-bottom: 5%;
margin: 0 auto;
}
.nav-tabs>li>a:active {
background-color: rgb(30, 115, 190);
} }
.proposalBlock { .proposalBlock {

View file

@ -73,6 +73,8 @@
if (validProposal) { if (validProposal) {
document.getElementById('step_two').click(); document.getElementById('step_two').click();
document.getElementsByClassName('progress-bar')[0].style.width = "50%";
document.getElementsByClassName('progress-bar')[0].innerText = "Generated wallet commands";
proposal.walletCommands(); proposal.walletCommands();
@ -114,16 +116,18 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-xs-10 col-xs-offset-2"> <div class="col-xs-12">
<ul class="nav nav-tabs"> <div class="progress">
<li class="active"><a id="step_one" data-toggle="tab" href="#step1"></a>Initial proposal form</li> <div class="progress-bar" role="progressbar" aria-valuenow="25"
aria-valuemin="0" aria-valuemax="100" style="width:25%">
<li><a id="step_two" data-toggle="tab" href="#step2"></a>Generated wallet commands</li> Create proposal
</div>
<li><a id="step_three" data-toggle="tab" href="#step3"></a>Awaiting confirmations...</li> </div>
<ul class="nav nav-pills">
<li><a id="step_four" data-toggle="tab" href="#step4"></a>Completed proposal code</li> <li class="active"><a id="step_one" data-toggle="tab" href="#step1">Form</a></li>
<li><a id="step_two" data-toggle="tab" href="#step2">Commands</a></li>
<li><a id="step_three" data-toggle="tab" href="#step3">Progress</a></li>
<li><a id="step_four" data-toggle="tab" href="#step4">Complete</a></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -208,8 +212,12 @@
</div> </div>
<div class="col-xs-4"> <div class="col-xs-4">
<input type="submit" class="btn btn-success" id="btnPrepare" value="Create Proposal"> <input type="submit" class="btn btn-success" id="btnPrepare" value="Create Proposal">
<input type="submit" class="btn btn-primary hidden" id="btnEdit" value="Edit Proposal"> <div class="input-spacing">
<input type="submit" class="btn btn-primary hidden" id="btnNew" value="New Proposal"> <input type="submit" class="btn btn-primary hidden" id="btnEdit" value="Edit Proposal">
</div>
<div class="input-spacing">
<input type="submit" class="btn btn-primary hidden" id="btnNew" value="New Proposal">
</div>
</div> </div>
</div> </div>

View file

@ -29,6 +29,8 @@ function transactionListener(proposal) {
txidfield.attr("disabled", true); txidfield.attr("disabled", true);
$('.walletCommands#walletCommandsProgress').removeClass('hidden'); $('.walletCommands#walletCommandsProgress').removeClass('hidden');
document.getElementById('step_three').click(); document.getElementById('step_three').click();
document.getElementsByClassName('progress-bar')[0].style.width = "75%";
document.getElementsByClassName('progress-bar')[0].innerText = "Awaiting network confirmations...";
var txid = data.tx; var txid = data.tx;
var confirmations = data.confirmations; var confirmations = data.confirmations;
var conftxt; var conftxt;
@ -128,6 +130,8 @@ function transactionListener(proposal) {
$("#progresstxt").text("Your transaction has " + confirmations + " confirmations. You can now submit the proposal."); $("#progresstxt").text("Your transaction has " + confirmations + " confirmations. You can now submit the proposal.");
$('.walletCommands#walletCommandsSubmit').removeClass('hidden'); $('.walletCommands#walletCommandsSubmit').removeClass('hidden');
document.getElementById('step_four').click(); document.getElementById('step_four').click();
document.getElementsByClassName('progress-bar')[0].style.width = "100%";
document.getElementsByClassName('progress-bar')[0].innerText = "Success";
} }
$("#progressbar").progressbar({value: progbarval}) $("#progressbar").progressbar({value: progbarval})
.children('.ui-progressbar-value') .children('.ui-progressbar-value')