mirrors/btcpayserver
1
0
Fork 0
mirror of https://github.com/btcpayserver/btcpayserver.git synced 2025-03-11 01:35:22 +01:00
Code Issues Projects Releases Packages Wiki Activity

Custom date range filtering modal

Browse source
This commit is contained in:
rockstardev 2019-05-11 18:31:52 -05:00 • committed by Nicolas Dorier
parent 6de5d0bce8
commit 7f9c2439c4
3 changed files with 112 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
BTCPayServer/Views/Invoice/ListInvoices.cshtml
View file

@ -7,6 +7,7 @@
<script src="~/modal/btcpay.js"></script>
}
@Html.HiddenFor(a=>a.Count)
<section>
<div class="container">
@ -84,6 +85,7 @@
<a class="dropdown-item last24" href="/invoices?Count=@Model.Count&timezoneoffset=0&SearchTerm=startDate%3Alast24">Last 24 hours</a>
<a class="dropdown-item last72" href="/invoices?Count=@Model.Count&timezoneoffset=0&SearchTerm=startDate%3Alast72">Last 3 days</a>
<a class="dropdown-item last168" href="/invoices?Count=@Model.Count&timezoneoffset=0&SearchTerm=startDate%3Alast168">Last 7 days</a>
<button type="button" class="dropdown-item" data-toggle="modal" data-target="#customRangeModal" data-backdrop="static">Custom Range</button>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="/invoices">Unfiltered</a>
</div>
@ -95,6 +97,84 @@
</div>
</div>
@* Custom Range Modal *@
<div class="modal fade" id="customRangeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 550px;">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Filter invoices by Custom Range</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
<label for="staticEmail" class="col-sm-3 col-form-label">Start Date</label>
<div class="col-sm-9">
<div class="input-group">
<input id="dtpStartDate" class="form-control flatdtpicker" type="datetime-local"
data-fdtp='{ "enableTime": true, "enableSeconds": true, "dateFormat": "Y-m-d H:i:S", "time_24hr": true, "defaultHour": 0 }'
placeholder="Start Date" />
<div class="input-group-append">
<button type="button" class="btn btn-primary input-group-clear" title="Clear">
<span class=" fa fa-times"></span>
</button>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">End Date</label>
<div class="col-sm-9">
<div class="input-group">
<input id="dtpEndDate" class="form-control flatdtpicker" type="datetime-local"
data-fdtp='{ "enableTime": true, "enableSeconds": true, "dateFormat": "Y-m-d H:i:S", "time_24hr": true, "defaultHour": 0 }'
placeholder="End Date" />
<div class="input-group-append">
<button type="button" class="btn btn-primary input-group-clear" title="Clear">
<span class=" fa fa-times"></span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button id="btnCustomRangeDate" type="button" class="btn btn-primary">Filter</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#btnCustomRangeDate').on('click', function (sender) {
var filterString = "";
var dtpStartDate = $("#dtpStartDate").val();
if (dtpStartDate !== null && dtpStartDate !== "") {
filterString = "startDate%3A" + dtpStartDate;
}
var dtpEndDate = $("#dtpEndDate").val();
if (dtpEndDate !== null && dtpEndDate !== "") {
if (filterString !== "") {
filterString += ",";
}
filterString += "endDate%3A" + dtpEndDate;
}
if (filterString !== "") {
var redirectUri = "/invoices?Count=" + $("#Count").val() +
"&timezoneoffset=" + $("#TimezoneOffset").val() +
"&SearchTerm=" + filterString;
window.location.href = redirectUri;
} else {
$("#dtpStartDate").next().trigger("focus");
}
})
</script>
@* Custom Range Modal *@
<div class="row">
<table class="table table-sm table-responsive-md">
<thead>

8
BTCPayServer/Views/Shared/SyncModal.cshtml
View file

@ -1,6 +1,8 @@
@inject BTCPayServer.HostedServices.NBXplorerDashboard dashboard
<!-- Modal -->
<div id="modalDialog" class="modal-dialog animated bounceInRight">
<div id="modalDialog" class="modal-dialog animated bounceInRight"
style="z-index:1000">
@* Z-Index less then other bootstrap modals (1050) *@
<!-- Modal content-->
<div class="modal-content">
@ -48,8 +50,8 @@
{
<li>The node is synchronized (Height: @line.Status.BitcoinStatus.Headers)</li>
@if (line.Status.BitcoinStatus.IsSynched &&
line.Status.SyncHeight.HasValue &&
line.Status.SyncHeight.Value < line.Status.BitcoinStatus.Headers)
line.Status.SyncHeight.HasValue &&
line.Status.SyncHeight.Value < line.Status.BitcoinStatus.Headers)
{
<li>NBXplorer is synchronizing... (Height: @line.Status.SyncHeight.Value)</li>
}

45
BTCPayServer/wwwroot/main/site.js
View file

@ -10,24 +10,33 @@
// intializing date time pickers throughts website
$(".flatdtpicker").each(function () {
var element = $(this);
var min = element.attr("min");
var max = element.attr("max");
var defaultDate = element.attr("value");
element.flatpickr({
enableTime: true,
enableSeconds: true,
dateFormat: 'Z',
altInput: true,
altFormat: 'Y-m-d H:i:S',
minDate: min,
maxDate: max,
defaultDate: defaultDate,
time_24hr: true,
defaultHour: 0,
parseDate: function (date) {
return moment(date).toDate();
}
});
var fdtp = element.attr("data-fdtp");
// support for initializing with special options per instance
if (fdtp) {
var parsed = JSON.parse(fdtp);
element.flatpickr(parsed);
} else {
var min = element.attr("min");
var max = element.attr("max");
var defaultDate = element.attr("value");
element.flatpickr({
enableTime: true,
enableSeconds: true,
dateFormat: 'Z',
altInput: true,
altFormat: 'Y-m-d H:i:S',
minDate: min,
maxDate: max,
defaultDate: defaultDate,
time_24hr: true,
defaultHour: 0,
parseDate: function (date) {
// check with Kukks if this is still needed with new date format
return moment(date).toDate();
}
});
}
});