btcpayserver/BTCPayServer/Views/PullPayment/ViewPullPayment.cshtml
2020-10-01 21:23:44 +02:00

201 lines
11 KiB
Text

@using NUglify.Helpers
@model BTCPayServer.Models.ViewPullPaymentModel
@addTagHelper *, BundlerMinifier.TagHelpers
@inject BTCPayServer.Services.BTCPayServerEnvironment env
@inject BTCPayServer.HostedServices.CssThemeManager themeManager
@{
ViewData["Title"] = Model.Title;
Layout = null;
}
<!DOCTYPE html>
<html lang="en" @(env.IsDeveloping ? " data-devenv" : "")>
<head>
<title>@ViewData["Title"]</title>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<link href="@Context.Request.GetRelativePathOrAbsolute(themeManager.BootstrapUri)" rel="stylesheet" />
<link href="@Context.Request.GetRelativePathOrAbsolute(themeManager.ThemeUri)" rel="stylesheet" />
<bundle name="wwwroot/bundles/payment-request-bundle.min.css" asp-append-version="true"></bundle>
@if (Model.CustomCSSLink != null)
{
<link href="@Model.CustomCSSLink" rel="stylesheet" />
}
@Safe.Raw(Model.EmbeddedCSS)
<noscript>
<style>
.hide-when-js, [v-cloak] { display: block !important; }
.only-for-js { display: none !important; }
</style>
</noscript>
</head>
<body class="h-100">
<div class="h-100 d-flex flex-column">
@if (Model.IsPending)
{
<nav id="mainNav" class="navbar sticky-top py-3 py-lg-4 d-print-block">
<div class="container">
<form asp-action="ClaimPullPayment" asp-route-pullPaymentId="@Model.Id" class="w-100">
<div class="row align-items-center" style="width:calc(100% + 30px)">
<div class="col-12 mb-3 col-lg-6 mb-lg-0">
<input class="form-control form-control-lg text-monospace w-100" asp-for="Destination" placeholder="Enter destination address to claim funds …" required style="font-size:.9rem;height:42px;">
</div>
<div class="col-12 mb-3 col-sm-6 mb-sm-0 col-lg-3">
<div class="input-group">
<input type="number" class="form-control form-control-lg text-right hide-number-spin" asp-for="ClaimedAmount" max="@Model.AmountDue" min="@Model.MinimumClaim" step="any" placeholder="Amount" required>
<div class="input-group-append">
<span class='input-group-text'>@Model.Currency.ToUpper()</span>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<button class="btn btn-lg btn-primary w-100 text-nowrap" type="submit">Claim Funds</button>
</div>
</div>
</form>
</div>
</nav>
}
<main class="flex-grow-1 py-4">
<div class="container">
<partial name="_StatusMessage" />
@if (!ViewContext.ModelState.IsValid)
{
@Html.ValidationSummary(string.Empty, new { @class = "alert alert-danger pb-0 text-center" })
}
<div class="row">
<div class="col col-12 col-lg-6 mb-4">
<div class="jumbotron h-100 m-0 p-sm-5">
@if (!Model.Title.IsNullOrWhiteSpace())
{
<h2 class="h4 mb-3">@Model.Title</h2>
}
<div class="d-flex align-items-center">
<span class="text-muted text-nowrap">Last Updated</span>
&nbsp;
<span class="text-nowrap">@Model.LastUpdated.ToString("g")</span>
<button type="button" class="btn btn-link d-none d-lg-inline-block d-print-none border-0 p-0 ml-4 only-for-js" id="copyLink">
Copy Link
</button>
</div>
@if (!string.IsNullOrEmpty(Model.ResetIn))
{
<p>
<span class="text-muted text-nowrap">Reset in</span>
&nbsp;
<span class="text-nowrap">@Model.ResetIn</span>
</p>
}
@if (!string.IsNullOrEmpty(Model.Description) && Model.Description != "<br>")
{
<div>@Safe.Raw(Model.Description)</div>
}
</div>
</div>
<div class="col col-12 col-lg-6 mb-4">
<div class="jumbotron h-100 m-0 p-sm-5">
<h2 class="h4 mb-3">Payment Details</h2>
<dl class="mb-0 mt-md-4">
<div class="d-flex flex-column mb-4">
<dt class="h4 font-weight-normal text-nowrap text-primary order-2 order-sm-1 mb-0">@Model.AmountDueFormatted</dt>
<dd class="text-muted order-1 order-sm-2 mb-1">Available claim</dd>
</div>
<div class="progress d-none d-sm-flex mb-sm-4 d-print-none" style="height:5px">
<div class="progress-bar bg-primary" role="progressbar" style="width:@((Model.AmountCollected / Model.Amount) * 100)%"></div>
</div>
<div class="d-flex flex-column mb-4 d-sm-inline-flex mb-sm-0">
<dt class="h4 font-weight-normal text-nowrap order-2 order-sm-1 mb-0">@Model.AmountCollectedFormatted</dt>
<dd class="text-muted order-1 order-sm-2 mb-1">Already claimed</dd>
</div>
<div class="d-flex flex-column mb-0 d-sm-inline-flex float-sm-right">
<dt class="h4 font-weight-normal text-nowrap order-2 order-sm-1 mb-0">@Model.AmountFormatted</dt>
<dd class="text-muted order-1 order-sm-2 mb-1">Claim limit</dd>
</div>
</dl>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="jumbotron h-100 m-0 p-sm-5">
<h2 class="h4 mb-3">Awaiting Claims</h2>
<div class="table-responsive">
@if (Model.Payouts.Any())
{
<table class="table my-0">
<thead>
<tr class="table-borderless">
<th class="font-weight-normal text-secondary" scope="col">Destination</th>
<th class="font-weight-normal text-secondary text-right text-nowrap">Amount requested</th>
<th class="font-weight-normal text-secondary text-right">Status</th>
</tr>
</thead>
<tbody>
@foreach (var invoice in Model.Payouts)
{
<tr>
<td class="text-break">
@invoice.Destination
</td>
<td class="text-right">@invoice.AmountFormatted</td>
<td class="text-right text-nowrap">
@{
string textClass;
switch (invoice.Status)
{
case "Completed":
case "In Progress":
textClass = "text-success";
break;
case "Cancelled":
textClass = "text-danger";
break;
default:
textClass = "text-warning";
break;
}
}
@if (!string.IsNullOrEmpty(invoice.Link))
{
<a class="transaction-link @textClass" href="@invoice.Link">@invoice.Status</a>
}
else
{
<span class="@textClass">@invoice.Status</span>
}
</td>
</tr>
}
</tbody>
</table>
}
else
{
<p class="text-muted">No claim made yet.</p>
}
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="pt-2 pb-4 d-print-none">
<div class="container text-center">
Powered by <a href="https://btcpayserver.org" target="_blank">BTCPay Server</a>
</div>
</footer>
</div>
<script>
document.getElementById("copyLink").addEventListener("click", function (e) {
if (navigator.clipboard) {
e.preventDefault();
navigator.clipboard.writeText(window.location);
e.currentTarget.blur();
}
});
</script>
</body>
</html>