app: notification list view

src/App/LionkApp/Components/Layout/MainLayout.razor

@@ -1,9 +1,12 @@
 @using Lionk.Auth.Identity
+@using Lionk.Notification
 @using Microsoft.AspNetCore.Components.Authorization
 @inherits LayoutComponentBase
 @inject NavigationManager NavManager
+@inject NotificationStateService NotificationState
 @inject UserAuthenticationStateProvider AuthStateProvider
 @inject LionkPalette Theme
+
 <AuthorizeView>
     <MudThemeProvider Theme="@_theme" IsDarkMode="_isDarkMode" />
     <MudPopoverProvider />
@@ -15,7 +18,9 @@
             <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((MouseEventArgs e) => DrawerToggle())" />
             <MudText Typo="Typo.h5" Class="ml-3">Lionk</MudText>
             <MudSpacer />
-            <MudIconButton Icon="@Icons.Material.Filled.CircleNotifications" Color="Color.Primary" OnClick="OnNotificationPressed" />
+            <MudBadge Origin=Origin.CenterLeft Content="@NotificationState.BadgeCounter" Color="Color.Primary">
+                <MudIconButton Icon="@Icons.Material.Filled.CircleNotifications" Color="Color.Primary" OnClick="OnNotificationPressed" />
+            </MudBadge>
             <MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle" />
         </MudAppBar>
         <MudDrawer @bind-Open="_isDrawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2">
@@ -87,6 +92,15 @@
         base.OnInitialized();
         UserName = AuthStateProvider.CurrentUser?.Username ?? "Not Logged In";
         _theme = new MudTheme { PaletteLight = Theme.LightPalette, PaletteDark = Theme.DarkPalette, LayoutProperties = new LayoutProperties() };
+        NotificationState.BadgeCounter = NotificationService.GetUnreadNotificationCount();
+        NotificationState.OnNotificationReceived += IncrementBadgeCounter;
+        NotificationState.OnBadgeCounterChanged += StateHasChanged;
+    }
+
+    public void Dispose()
+    {
+        NotificationState.OnNotificationReceived -= IncrementBadgeCounter;
+        NotificationState.OnBadgeCounterChanged -= StateHasChanged;
     }
 
     private void DarkModeToggle()
@@ -116,6 +130,11 @@
         NavManager.NavigateTo("/auth");
     }
 
+    private void IncrementBadgeCounter()
+    {
+        NotificationState.IncrementBadgeCounter();
+    }
+
     /// <summary>
     /// Switches the dark mode.
     /// </summary>
@@ -125,5 +144,4 @@
             true => Icons.Material.Rounded.LightMode,
             false => Icons.Material.Outlined.DarkMode,
         };
-
 }

src/App/LionkApp/Components/Pages/Notification/Active.razor

@@ -1,31 +1,27 @@
 @page "/active"
+@using Lionk.Notification
+@inject NotificationStateService NotificationState
 
-@if (_forecasts == null)
+@if (notifications != null)
 {
-    <MudProgressCircular Color="Color.Default" Indeterminate="true"/>
-}
-else
-{
-    <MudTable Items="_forecasts" Hover="true" SortLabel="Sort By" Elevation="0" AllowUnsorted="false">
+    <MudTable Items="notifications" Hover="true" SortLabel="Sort by" Elevation="0" AllowUnsorted="false">
         <HeaderContent>
-            <MudTh>
-                <MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<WeatherForecast, object>(x => x.Date)">Date</MudTableSortLabel>
-            </MudTh>
-            <MudTh>
-                <MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x => x.TemperatureC)">Temp. (C)</MudTableSortLabel>
-            </MudTh>
-            <MudTh>
-                <MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x => x.TemperatureF)">Temp. (F)</MudTableSortLabel>
-            </MudTh>
-            <MudTh>
-                <MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x => x.Summary!)">Summary</MudTableSortLabel>
-            </MudTh>
+            <MudTh><MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<NotificationHistory, object>(x => x.Notification.Timestamp)">Date</MudTableSortLabel></MudTh>
+            <MudTh><MudTableSortLabel SortBy="new Func<NotificationHistory, object>(x => x.Notification.Content.Level)">Severity</MudTableSortLabel></MudTh>
+            <MudTh>Title</MudTh>
+            <MudTh>Message</MudTh>
+            <MudTh>Status</MudTh>
+            <MudTh style="text-align: center;">Actions</MudTh>
         </HeaderContent>
         <RowTemplate>
-            <MudTd DataLabel="Date">@context.Date</MudTd>
-            <MudTd DataLabel="Temp. (C)">@context.TemperatureC</MudTd>
-            <MudTd DataLabel="Temp. (F)">@context.TemperatureF</MudTd>
-            <MudTd DataLabel="Summary">@context.Summary</MudTd>
+            <MudTd DataLabel="Date">@context.Notification.Timestamp.ToString("g")</MudTd>
+            <MudTd DataLabel="Severity">@context.Notification.Content.Level.ToString()</MudTd>
+            <MudTd DataLabel="Title">@context.Notification.Content.Title</MudTd>
+            <MudTd DataLabel="Message">@context.Notification.Content.Message</MudTd>
+            <MudTd DataLabel="Status">Unread</MudTd>
+            <MudTd style="text-align: center; vertical-align: middle;">
+                <MudButton Color="Color.Primary" Variant="Variant.Filled" OnClick="@(() => MarkAsRead(@context))">Mark as read</MudButton>
+            </MudTd>
         </RowTemplate>
         <PagerContent>
             <MudTablePager PageSizeOptions="new[] { 50, 100 }"/>
@@ -34,28 +30,25 @@ else
 }
 
 @code {
-    private WeatherForecast[]? _forecasts;
+    List<NotificationHistory>? notifications;
 
-    /// <inheritdoc />
-    protected override async Task OnInitializedAsync()
+    protected override void OnInitialized()
     {
-        // Simulate asynchronous loading to demonstrate a loading indicator
-        await Task.Delay(500);
-
-        var startDate = DateOnly.FromDateTime(DateTime.Now);
-        string[] summaries = ["Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"];
-        _forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast { Date = startDate.AddDays(index), TemperatureC = Random.Shared.Next(-20, 55), Summary = summaries[Random.Shared.Next(summaries.Length)] }).ToArray();
+        LoadUnreadNotifications();
     }
 
-    private class WeatherForecast
+    private void LoadUnreadNotifications()
     {
-        public DateOnly Date { get; init; }
-
-        public int TemperatureC { get; init; }
-
-        public string? Summary { get; init; }
-
-        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
+        notifications = NotificationService.GetNotifications()
+                                           .Where(n => !n.IsRead)
+                                           .ToList();
     }
 
+    private void MarkAsRead(NotificationHistory notification)
+    {
+        notification.Read();
+        NotificationState.DecrementBadgeCounter();
+        LoadUnreadNotifications();
+        StateHasChanged();
+    }
 }

src/App/LionkApp/Components/Pages/Notification/Configuration.razor

@@ -1,14 +1,76 @@
 @page "/configuration"
-@using LionkApp.Components.Model
-@using LionkApp.Components.Widgets.Content
+@inject IDialogService DialogService
+@implements IDisposable
+@using LionkApp.Components.Widgets.Content.Notification
+@using LionkApp.Components.Widgets.Dialogs
+@using Lionk.Notification
+@using System.Collections.ObjectModel
+@using LionkTest.Notifications.Mock
+@using Newtonsoft.Json
 
-<SwitchList SwitchListTitle="Notifier list" Switches="_notifierList"/>
-
-<SwitchList SwitchListTitle="Channel list" Switches="_channelList"/>
+<NotifierList/>
+<ChannelList/>
+<MudButton Variant=Variant.Filled Color=Color.Primary OnClick="SendTestNotification">
+    Send test notification
+</MudButton>
 
 @code {
-    private readonly List<Switch> _notifierList = [new Switch { Label = "Chimpey", IsEnabled = true }, new Switch { Label = "Nastaran", IsEnabled = true }, new Switch { Label = "Ronflex", IsEnabled = true }];
 
-    private readonly List<Switch> _channelList = [new Switch { Label = "Discord", IsEnabled = true }, new Switch { Label = "Telegram", IsEnabled = true }, new Switch { Label = "Push", IsEnabled = true }];
+    // TODO - Remove mock in LionkApp\Components\Pages\Notification\Mock when ready
+
+    private List<INotifier> MockNotifiers = new List<INotifier>
+    {
+        new MockNotifier(Guid.NewGuid(), "Chimpey"),
+        new MockNotifier(Guid.NewGuid(), "Clock alarm"),
+        new MockNotifier(Guid.NewGuid(), "MX321")
+    };
+
+    private List<IChannel> MockChannels = new List<IChannel>
+    {
+        new MockChannel(Guid.NewGuid(), "Discord", new List<IRecipient>(), true),
+        new MockChannel(Guid.NewGuid(), "Telegram", new List<IRecipient>(), false),
+        new MockChannel(Guid.NewGuid(), "Push bullet", new List<IRecipient>(), true)
+    };
+
+    public ReadOnlyCollection<INotifier> Notifiers { get; set; } = new List<INotifier>().AsReadOnly();
+
+    public ReadOnlyCollection<IChannel> Channels { get; set; } = new List<IChannel>().AsReadOnly();
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        NotificationService.AddNotifiers(MockNotifiers[0], MockNotifiers[1], MockNotifiers[2]);
+        NotificationService.AddChannels(MockChannels[0], MockChannels[1], MockChannels[2]);
+        NotificationService.MapNotifierToChannel(MockNotifiers[0], MockChannels[0], MockChannels[1]);
+        NotificationService.MapNotifierToChannel(MockNotifiers[1], MockChannels[1], MockChannels[2]);
+        NotificationService.MapNotifierToChannel(MockNotifiers[2], MockChannels[2], MockChannels[0]);
+
+        Notifiers = NotificationService.Notifiers;
+        Channels = NotificationService.Channels;
+    }
+
+    private void SendTestNotification()
+    {
+        Content content = new(Lionk.Notification.Severity.Information, "Test Notification", "This is a test notification.");
+
+        foreach (INotifier notifier in MockNotifiers)
+        {
+            Notification notification = new(content, notifier);
+            NotificationService.Send(notification);
+        }
+    }
+
+    public void Dispose()
+    {
+        foreach (var notifier in Notifiers.ToList())
+        {
+            NotificationService.RemoveNotifier(notifier);
+        }
 
-}
+        foreach (var channel in Channels.ToList())
+        {
+            NotificationService.RemoveChannel(channel);
+        }
+    }
+}

src/App/LionkApp/Components/Pages/Notification/History.razor

@@ -1,61 +1,32 @@
 @page "/history"
+@using Lionk.Notification
 
-@if (forecasts == null)
+@if (notifications != null)
 {
-    <MudProgressCircular Color="Color.Default" Indeterminate="true"/>
-}
-else
-{
-    <MudTable Items="forecasts" Hover="true" SortLabel="Sort By" Elevation="0" AllowUnsorted="false">
+    <MudTable Items="notifications" Hover="true" SortLabel="Sort by" Elevation="0" AllowUnsorted="false">
         <HeaderContent>
-            <MudTh>
-                <MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<WeatherForecast, object>(x => x.Date)">Date</MudTableSortLabel>
-            </MudTh>
-            <MudTh>
-                <MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x => x.TemperatureC)">Temp. (C)</MudTableSortLabel>
-            </MudTh>
-            <MudTh>
-                <MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x => x.TemperatureF)">Temp. (F)</MudTableSortLabel>
-            </MudTh>
-            <MudTh>
-                <MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x => x.Summary!)">Summary</MudTableSortLabel>
-            </MudTh>
+            <MudTh><MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<NotificationHistory, object>(x => x.Notification.Timestamp)">Date</MudTableSortLabel></MudTh>
+            <MudTh><MudTableSortLabel SortBy="new Func<NotificationHistory, object>(x => x.Notification.Content.Level)">Severity</MudTableSortLabel></MudTh>
+            <MudTh>Title</MudTh>
+            <MudTh>Message</MudTh>
         </HeaderContent>
         <RowTemplate>
-            <MudTd DataLabel="Date">@context.Date</MudTd>
-            <MudTd DataLabel="Temp. (C)">@context.TemperatureC</MudTd>
-            <MudTd DataLabel="Temp. (F)">@context.TemperatureF</MudTd>
-            <MudTd DataLabel="Summary">@context.Summary</MudTd>
+            <MudTd DataLabel="Date">@context.Notification.Timestamp.ToString("g")</MudTd>
+            <MudTd DataLabel="Severity">@context.Notification.Content.Level.ToString()</MudTd>
+            <MudTd DataLabel="Title">@context.Notification.Content.Title</MudTd>
+            <MudTd DataLabel="Message">@context.Notification.Content.Message</MudTd>
         </RowTemplate>
         <PagerContent>
-            <MudTablePager PageSizeOptions="new[] { 50, 100 }"/>
+            <MudTablePager PageSizeOptions="new int[]{50, 100}" />
         </PagerContent>
     </MudTable>
 }
 
 @code {
-    private WeatherForecast[]? forecasts;
-
-    /// <inheritdoc />
-    protected override async Task OnInitializedAsync()
-    {
-        // Simulate asynchronous loading to demonstrate a loading indicator
-        await Task.Delay(500);
-
-        var startDate = DateOnly.FromDateTime(DateTime.Now);
-        string[] summaries = ["Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"];
-        forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast { Date = startDate.AddDays(index), TemperatureC = Random.Shared.Next(-20, 55), Summary = summaries[Random.Shared.Next(summaries.Length)] }).ToArray();
-    }
+    List<NotificationHistory>? notifications;
 
-    private class WeatherForecast
+    protected override void OnInitialized()
     {
-        public DateOnly Date { get; init; }
-
-        public int TemperatureC { get; init; }
-
-        public string? Summary { get; init; }
-
-        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
+        notifications = NotificationService.GetNotifications();
     }
-
 }