mirrors/btcpayserver
1
0
Fork 0
mirror of https://github.com/btcpayserver/btcpayserver.git synced 2025-02-20 13:34:37 +01:00
Code Issues Projects Releases Packages Wiki Activity

Invoice: Improve events display (#5775)

Browse source 
Closes #5773.

- Adds seconds to the displayed date and time
- Adds a tooltip that displays the full date and time including milliseconds
- Reintroduced the colored text in case of unusual events/states (this didn't work before)
This commit is contained in:
d11n 2024-02-21 14:08:28 +01:00 • committed by GitHub
parent 42a8160768
commit 4943c84655
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 16 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
BTCPayServer.Abstractions/Extensions/ViewsRazor.cs
View file

@ -101,6 +101,14 @@ namespace BTCPayServer.Abstractions.Extensions
return categoryAndPageMatch && idMatch ? ActivePageClass : null;
}
public static HtmlString ToBrowserDate(this DateTimeOffset date, string netFormat, string jsDateFormat = "short", string jsTimeFormat = "short")
{
var dateTime = date.ToString("o", CultureInfo.InvariantCulture);
var displayDate = date.ToString(netFormat, CultureInfo.InvariantCulture);
var tooltip = dateTime.Replace("T", " ");
return new HtmlString($"<time datetime=\"{dateTime}\" data-date-style=\"{jsDateFormat}\" data-time-style=\"{jsTimeFormat}\" data-initial=\"localized\" data-bs-toggle=\"tooltip\" data-bs-title=\"{tooltip}\">{displayDate}</time>");
}
public static HtmlString ToBrowserDate(this DateTimeOffset date, DateDisplayFormat format = DateDisplayFormat.Localized)
{
var relative = date.ToTimeAgo();

1
BTCPayServer.Data/Data/InvoiceEventData.cs
View file

@ -40,7 +40,6 @@ namespace BTCPayServer.Data
{
return Severity switch
{
EventSeverity.Info => "info",
EventSeverity.Error => "danger",
EventSeverity.Success => "success",
EventSeverity.Warning => "warning",

9
BTCPayServer/Views/UIInvoice/Invoice.cshtml
View file

@ -577,7 +577,7 @@
<span>@blob.Limit @blob.Currency</span>
</td>
<td>
<span> @refund.PullPaymentData.StartDate.ToBrowserDate() </span>
<span>@refund.PullPaymentData.StartDate.ToBrowserDate()</span>
</td>
</tr>
}
@ -598,9 +598,10 @@
<tbody>
@foreach (var evt in Model.Events)
{
<tr class="text-@evt.GetCssClass()">
<td>@evt.Timestamp.ToBrowserDate()</td>
<td>@evt.Message</td>
var cssClass = string.IsNullOrEmpty(evt.GetCssClass()) ? null : $"text-{evt.GetCssClass()}";
<tr>
<td class="@cssClass">@evt.Timestamp.ToBrowserDate("o", "short", "medium")</td>
<td class="@cssClass">@evt.Message</td>
</tr>
}
</tbody>

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

@ -2,15 +2,14 @@ const baseUrl = Object.values(document.scripts).find(s => s.src.includes('/main/
const flatpickrInstances = [];
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
const dtFormatOpts = { dateStyle: 'short', timeStyle: 'short' };
const formatDateTimes = format => {
// select only elements which haven't been initialized before, those without data-localized
document.querySelectorAll("time[datetime]:not([data-localized])").forEach($el => {
const date = new Date($el.getAttribute("datetime"));
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
const { dateStyle = 'short', timeStyle = 'short' } = $el.dataset;
// initialize and set localized attribute
$el.dataset.localized = new Intl.DateTimeFormat('default', dtFormatOpts).format(date);
$el.dataset.localized = new Intl.DateTimeFormat('default', { dateStyle, timeStyle }).format(date);
// set text to chosen mode
const mode = format || $el.dataset.initial;
if ($el.dataset[mode]) $el.innerText = $el.dataset[mode];