16-12-2022

ECM.JobRunner.Web/Shared/MainLayout.razor

@@ -1,10 +1,12 @@
-@inherits LayoutComponentBase
+@using ECM.JobRunner.Web.Data;
+@inherits LayoutComponentBase
+@inject WcfService Wcf
 
 <PageTitle>ECM.JobRunner.Web</PageTitle>
 
-<div class="page">
+<div class=@(connected ? "page connected" : "page disconnected")>
     <div class="sidebar">
-        <NavMenu />
+        <NavMenu connected="connected" />
     </div>
 
     <main>
@@ -17,3 +19,19 @@
         </article>
     </main>
 </div>
+
+@code {
+    private bool connected = true;
+
+    protected override Task OnInitializedAsync()
+    {
+        Wcf.ConnectedChanged += Wcf_ConnectedChanged;
+        return Task.FromResult(true);
+    }
+
+    public void Wcf_ConnectedChanged(object? sender, bool status)
+    {
+        connected = status;
+        InvokeAsync(StateHasChanged);
+    }
+}

ECM.JobRunner.Web/Shared/NavMenu.razor

@@ -1,6 +1,17 @@
 <div class="top-row ps-3 navbar navbar-dark">
     <div class="container-fluid">
-        <a class="navbar-brand" href="">ECM Job Runner</a>
+        <a class="navbar-brand" href="">
+            ECM Job Runner
+            @if (!connected)
+            {
+                <span title="Offline!">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-emoji-dizzy text-danger" viewBox="0 0 16 16">
+                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+                        <path d="M9.146 5.146a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708.708l-.647.646.647.646a.5.5 0 0 1-.708.708l-.646-.647-.646.647a.5.5 0 1 1-.708-.708l.647-.646-.647-.646a.5.5 0 0 1 0-.708zm-5 0a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 1 1 .708.708l-.647.646.647.646a.5.5 0 1 1-.708.708L5.5 7.207l-.646.647a.5.5 0 1 1-.708-.708l.647-.646-.647-.646a.5.5 0 0 1 0-.708zM10 11a2 2 0 1 1-4 0 2 2 0 0 1 4 0z" />
+                    </svg>
+                </span>
+            }
+        </a>
         <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
             <span class="navbar-toggler-icon"></span>
         </button>
@@ -46,6 +57,9 @@
 </div>
 
 @code {
+    [Parameter]
+    public bool connected { get; set; }
+
     private bool collapseNavMenu = true;
 
     private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;