Files
SethDiscordBot/WebUI/Components/Notification/NotificationDisplay.razor

56 lines
1.7 KiB
Plaintext
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
@using WebUI.Models
@using WebUI.Services
@inject NotificationService NotificationService
@rendermode InteractiveServer
<link rel="stylesheet" href="Components/Notification/NotificationDisplay.css" />
<div class="notification-container" style="position: fixed; top: 20px; right: 20px; z-index: 1050; display: flex; flex-direction: column; gap: 10px;">
@foreach (var notification in _Notifications)
{
<div class="notification-box @GetCssClass(notification.Type)">
<button class="close-button" @onclick="() => DismissNotification(notification)">×</button>
<div class="notification-message">@notification.Message</div>
<div class="notification-timestamp">@notification.Timestamp.ToString("hh:mm:ss tt")</div>
</div>
}
</div>
@code {
private readonly List<Notification> _Notifications = new();
protected override void OnInitialized()
{
NotificationService.OnNotify += ShowNotification;
}
private void ShowNotification(Notification notification)
{
_ = InvokeAsync(async () =>
{
_Notifications.Add(notification);
StateHasChanged();
await Task.Delay(notification.DelayMs);
_Notifications.Remove(notification);
StateHasChanged();
});
}
private string GetCssClass(NotificationType type) => type switch
{
NotificationType.Success => "alert-success",
NotificationType.Error=> "alert-danger",
NotificationType.Warning => "alert-warning",
NotificationType.Info => "alert-info",
_ => "alert-secondary"
};
private void DismissNotification(Notification notification)
{
_Notifications.Remove(notification);
}
}