mirror of
https://github.com/btcpayserver/btcpayserver.git
synced 2025-02-20 13:34:37 +01:00
Non blocking modal that shows sync progress
Ref: https://forkbitpay.slack.com/archives/C7M093Z55/p1515557792000053
This commit is contained in:
lepipele
parent
c9b5f89f17
commit
f8189c64a4
3 changed files with 1679 additions and 96 deletions
94
BTCPayServer/Views/Shared/SyncModal.cshtml
Normal file
94
BTCPayServer/Views/Shared/SyncModal.cshtml
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
@inject BTCPayServer.HostedServices.NBXplorerDashboard dashboard
|
||||
<!-- Modal -->
|
||||
<div id="modalDialog" class="modal-dialog animated bounceInRight">
|
||||
|
||||
<!-- Modal content-->
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Your nodes are synching...</h4>
|
||||
<button type="button" class="close" onclick="dismissSyncModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
Some of your nodes are still synching...<br />
|
||||
BTCPay Server will not work correctly until it is over.
|
||||
</p>
|
||||
@foreach (var line in dashboard.GetAll())
|
||||
{
|
||||
<h4>@line.Network.CryptoCode</h4>
|
||||
@if (line.Status == null)
|
||||
{
|
||||
<ul>
|
||||
<li>The node is offline</li>
|
||||
@if (line.Error != null)
|
||||
{
|
||||
<li>Last error: @line.Error</li>
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
else
|
||||
{
|
||||
<ul>
|
||||
<li>NBXplorer headers height: @line.Status.ChainHeight</li>
|
||||
@if (line.Status.BitcoinStatus == null)
|
||||
{
|
||||
if (line.State == BTCPayServer.HostedServices.NBXplorerState.Synching)
|
||||
{
|
||||
<li>The node is starting...</li>
|
||||
}
|
||||
else
|
||||
{
|
||||
<li>The node is offline</li>
|
||||
@if (line.Error != null)
|
||||
{
|
||||
<li>Last error: @line.Error</li>
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (line.Status.BitcoinStatus.IsSynched)
|
||||
{
|
||||
<li>The node is synched (Height: @line.Status.BitcoinStatus.Headers)</li>
|
||||
@if (line.Status.BitcoinStatus.IsSynched &&
|
||||
line.Status.SyncHeight.HasValue &&
|
||||
line.Status.SyncHeight.Value < line.Status.BitcoinStatus.Headers)
|
||||
{
|
||||
<li>NBXplorer is synching... (Height: @line.Status.SyncHeight.Value)</li>
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
<li>Node headers height: @line.Status.BitcoinStatus.Headers</li>
|
||||
<li>Validated blocks: @line.Status.BitcoinStatus.Blocks</li>
|
||||
}
|
||||
</ul>
|
||||
@if (!line.Status.IsFullySynched && line.Status.BitcoinStatus != null)
|
||||
{
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="@((int)(line.Status.BitcoinStatus.VerificationProgress * 100))"
|
||||
aria-valuemin="0" aria-valuemax="100" style="width:@((int)(line.Status.BitcoinStatus.VerificationProgress * 100))%">
|
||||
@((int)(line.Status.BitcoinStatus.VerificationProgress * 100))%
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<link href="~/vendor/animatecss/animate.css" rel="stylesheet" />
|
||||
<script type="text/javascript">
|
||||
function dismissSyncModal() {
|
||||
$("#modalDialog").addClass('animated bounceOutRight')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
#modalDialog {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
margin: 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
<body id="page-top">
|
||||
|
||||
@{
|
||||
if(ViewBag.AlwaysShrinkNavBar == null)
|
||||
if (ViewBag.AlwaysShrinkNavBar == null)
|
||||
{
|
||||
ViewBag.AlwaysShrinkNavBar = true;
|
||||
}
|
||||
|
|
@ -54,9 +54,9 @@
|
|||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarResponsive">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
@if(SignInManager.IsSignedIn(User))
|
||||
@if (SignInManager.IsSignedIn(User))
|
||||
{
|
||||
@if(User.IsInRole(Roles.ServerAdmin))
|
||||
@if (User.IsInRole(Roles.ServerAdmin))
|
||||
{
|
||||
<li class="nav-item"><a asp-area="" asp-controller="Server" asp-action="ListUsers" class="nav-link js-scroll-trigger">Server settings</a></li>
|
||||
}
|
||||
|
|
@ -80,93 +80,6 @@
|
|||
|
||||
@RenderBody()
|
||||
|
||||
|
||||
@if(!dashboard.IsFullySynched())
|
||||
{
|
||||
<!-- Modal -->
|
||||
<div id="synching-modal" class="modal fade" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
|
||||
<!-- Modal content-->
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Your nodes are synching...</h4>
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
Some of your nodes are still synching...<br />
|
||||
BTCPay Server will not work correctly until it is over.
|
||||
</p>
|
||||
@foreach(var line in dashboard.GetAll())
|
||||
{
|
||||
<h4>@line.Network.CryptoCode</h4>
|
||||
@if(line.Status == null)
|
||||
{
|
||||
<ul>
|
||||
<li>The node is offline</li>
|
||||
@if(line.Error != null)
|
||||
{
|
||||
<li>Last error: @line.Error</li>
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
else
|
||||
{
|
||||
<ul>
|
||||
<li>NBXplorer headers height: @line.Status.ChainHeight</li>
|
||||
@if(line.Status.BitcoinStatus == null)
|
||||
{
|
||||
if(line.State == BTCPayServer.HostedServices.NBXplorerState.Synching)
|
||||
{
|
||||
<li>The node is starting...</li>
|
||||
}
|
||||
else
|
||||
{
|
||||
<li>The node is offline</li>
|
||||
@if(line.Error != null)
|
||||
{
|
||||
<li>Last error: @line.Error</li>
|
||||
}
|
||||
}
|
||||
}
|
||||
else if(line.Status.BitcoinStatus.IsSynched)
|
||||
{
|
||||
<li>The node is synched (Height: @line.Status.BitcoinStatus.Headers)</li>
|
||||
@if(line.Status.BitcoinStatus.IsSynched &&
|
||||
line.Status.SyncHeight.HasValue &&
|
||||
line.Status.SyncHeight.Value < line.Status.BitcoinStatus.Headers)
|
||||
{
|
||||
<li>NBXplorer is synching... (Height: @line.Status.SyncHeight.Value)</li>
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
<li>Node headers height: @line.Status.BitcoinStatus.Headers</li>
|
||||
<li>Validated blocks: @line.Status.BitcoinStatus.Blocks</li>
|
||||
}
|
||||
</ul>
|
||||
@if(!line.Status.IsFullySynched && line.Status.BitcoinStatus != null)
|
||||
{
|
||||
<div class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow="@((int)(line.Status.BitcoinStatus.VerificationProgress * 100))"
|
||||
aria-valuemin="0" aria-valuemax="100" style="width:@((int)(line.Status.BitcoinStatus.VerificationProgress * 100))%">
|
||||
@((int)(line.Status.BitcoinStatus.VerificationProgress * 100))%
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<footer class="bg-dark">
|
||||
<div class="container text-right"><span style="font-size:8px;">@env.ToString()</span></div>
|
||||
</footer>
|
||||
|
|
@ -184,13 +97,10 @@
|
|||
<!-- Custom scripts for this template -->
|
||||
<script src="~/js/creative.js"></script>
|
||||
|
||||
@if(!dashboard.IsFullySynched())
|
||||
|
||||
@if (!dashboard.IsFullySynched())
|
||||
{
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$("#synching-modal").modal();
|
||||
});
|
||||
</script>
|
||||
@Html.Partial("SyncModal")
|
||||
}
|
||||
|
||||
@RenderSection("Scripts", required: false)
|
||||
|
|
|
|||
1579
BTCPayServer/wwwroot/vendor/animatecss/animate.css
vendored
Normal file
1579
BTCPayServer/wwwroot/vendor/animatecss/animate.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Reference in a new issue