feat(Toasts) Adding toasts

Components/Feedback/AlertComponent.razor

@@ -1,4 +1,5 @@
-<div class="alertContainer @Type.ToString().ToLower()">
+@using Model.Feedback
+<div class="alertContainer @Type.ToLower()">
     @if (Title != null) {
         <div class="alertTitle">
             @Title
@@ -21,24 +22,25 @@
         width: 100%;
     }
 
-    .alertContainer.@SeverityType.Warning.ToString().ToLower() {
-        border-color: #2a2000;
-        background-color: #ffbf0029;
+
+    .alertContainer.@SeverityType.Warning.ToLower() {
+        background-color: var(--severity-warning-color);
+        border-color: var(--severity-warning-border-color);
     }
 
-    .alertContainer.@SeverityType.Error.ToString().ToLower() {
-        border-color: #290102;
-        background-color: #4C2C33;
+    .alertContainer.@SeverityType.Error.ToLower() {
+        background-color: var(--severity-error-color);
+        border-color: var(--severity-error-border-color);
     }
 
-    .alertContainer.@SeverityType.Information.ToString().ToLower() {
-        border-color: #030129;
-        background-color: #2c3a4c;
+    .alertContainer.@SeverityType.Information.ToLower() {
+        background-color: var(--severity-information-color);
+        border-color: var(--severity-information-border-color);
     }
 
-    .alertContainer.@SeverityType.Success.ToString().ToLower() {
-        border-color: #042901;
-        background-color: #2E4C2C;
+    .alertContainer.@SeverityType.Success.ToLower() {
+        background-color: var(--severity-success-color);
+        border-color: var(--severity-success-border-color);
     }
 
     .alertTitle {
@@ -56,6 +58,6 @@
     public RenderFragment? Message { get; set; }
 
     [Parameter]
-    public SeverityType Type { get; set; } = SeverityType.Warning;
+    public string Type { get; set; } = SeverityType.Warning;
 
 }

Components/Feedback/SeverityType.cs

@@ -1,8 +0,0 @@
-namespace Components.Feedback;
-
-public enum SeverityType {
-    Warning,
-    Information,
-    Error,
-    Success
-}

Components/Feedback/ToastComponent.razor

@@ -0,0 +1,114 @@
+@using Services
+@inject IToastService toastService
+
+@implements IDisposable
+
+@if (Toast == null)
+{
+    <div>Add toast object...</div>
+}
+else
+{
+    <div class="toastContainer @Toast.SeverityType.ToLower() @FadeoutStyle">
+            <div class="toastTitle">
+                @Toast.Title
+            </div>
+            <div>
+                @Toast.Message
+            </div>
+    </div>    
+}
+
+<style>
+    .toastContainer {
+        border: 4px solid;
+        border-radius: 4px;
+        padding: 16px;
+        display: flex;
+        flex-direction: column;
+        justify-items: stretch;
+        width: 100%;
+        
+        opacity: 1;
+    }
+    
+    .fadeout {
+        transition: opacity 3s ease-in;
+        opacity: 0;
+    }
+
+    .toastContainer.@SeverityType.Warning.ToLower() {
+        background-color: var(--severity-warning-color);
+        border-color: var(--severity-warning-border-color);
+    }
+
+    .toastContainer.@SeverityType.Error.ToLower() {
+        background-color: var(--severity-error-color);
+        border-color: var(--severity-error-border-color);
+    }
+
+    .toastContainer.@SeverityType.Information.ToLower() {
+        background-color: var(--severity-information-color);
+        border-color: var(--severity-information-border-color);
+    }
+
+    .toastContainer.@SeverityType.Success.ToLower() {
+        background-color: var(--severity-success-color);
+        border-color: var(--severity-success-border-color);
+    }
+
+    .toastTitle {
+        font-weight: 800;
+    }
+
+</style>
+
+@code {
+    [Parameter]
+    public ToastModel? Toast { get; set; } = default!;
+
+    private bool isFadingOut = false;
+
+    private string FadeoutStyle => isFadingOut ? "fadeout" : "";
+
+    private int removalTime = 150000;
+    private int fadeoutTime = 4000;
+    
+    //private int fade
+
+    private Timer removalTimer = null!;
+    private Timer fadeoutTimer = null!;
+
+    protected override void OnInitialized()
+    {
+#if DEBUG
+        removalTime = 5000;
+#endif
+
+        removalTimer = new Timer(removalTime);
+        removalTimer.Elapsed += OnRemoval!;
+        removalTimer.Enabled = true;
+        
+        fadeoutTimer = new Timer(removalTime - fadeoutTime);
+        fadeoutTimer.Elapsed += OnFadeout!;
+        fadeoutTimer.Enabled = true;
+    }
+
+    void OnFadeout(object source, ElapsedEventArgs eventArgs)
+    {
+        isFadingOut = true;
+        
+        StateHasChanged();
+    }
+    
+    void OnRemoval(object source, ElapsedEventArgs eventArgs)
+    {
+        toastService.RemoveToast(Toast!);
+    }
+
+    public void Dispose()
+    {
+        removalTimer.Dispose();
+        fadeoutTimer.Dispose();
+    }
+}