+

ab-log.app/Components/Layout/MainLayout.razor

@@ -1,17 +1,35 @@
 @inherits LayoutComponentBase
 
+<MudThemeProvider @bind-IsDarkMode="@_isDarkMode" Theme="_theme" />
+<MudDialogProvider />
+<MudSnackbarProvider />
+
 <div class="page">
-    <div class="sidebar">
-        <NavMenu />
+    <div style="width: @($"{_width}px");" @onmouseover="() => { navRef?.SetModeNav(false); }" @onmouseleave="() => { navRef?.SetModeNav(true); }" class="sidebar">
+        <NavMenu ModeChangeHandle="SetModeNav" @ref="navRef" />
     </div>
 
     <main>
-        <div class="top-row px-4">
-            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
+        <div class="top-row px-4 bg-body-tertiary" style="z-index:5;">
+            <a title="Исходники C# .NET8" href="https://github.com/badhitman/AbLog" target="_blank">GitHub</a>
+            <a title="Официальный магазин оборудования" href="https://ab-log.ru" target="_blank">ab-log</a>
         </div>
-
         <article class="content px-4">
             @Body
         </article>
     </main>
 </div>
+
+@code {
+    NavMenu? navRef;
+    int _width = 75;
+
+    private MudTheme _theme = new();
+    private bool _isDarkMode = true;
+
+    void SetModeNav()
+    {
+        _width = navRef?.IsShort == true ? 75 : 250;
+        StateHasChanged();
+    }
+}

ab-log.app/Components/Layout/MainLayout.razor.css

@@ -27,23 +27,27 @@ main {
         text-decoration: none;
     }
 
-        .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
-            text-decoration: underline;
-        }
+    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
+        text-decoration: underline;
+    }
 
-        .top-row ::deep a:first-child {
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
+    .top-row ::deep a:first-child {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 
 @media (max-width: 640.98px) {
-    .top-row {
+    .top-row:not(.auth) {
+        display: none;
+    }
+
+    .top-row.auth {
         justify-content: space-between;
     }
 
-        .top-row ::deep a, .top-row ::deep .btn-link {
-            margin-left: 0;
-        }
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        margin-left: 0;
+    }
 }
 
 @media (min-width: 641px) {
@@ -64,12 +68,6 @@ main {
         z-index: 1;
     }
 
-        .top-row.auth ::deep a:first-child {
-            flex: 1;
-            text-align: right;
-            width: 0;
-        }
-
     .top-row, article {
         padding-left: 2rem !important;
         padding-right: 1.5rem !important;

ab-log.app/Components/Layout/NavMenu.razor

@@ -1,27 +1,157 @@
-<div class="top-row ps-3 navbar navbar-dark">
+@inject IJSRuntime _js_runtime
+
+<style>
+    #main-left-menu > div > a {
+        padding-left: 12px;
+    }
+</style>
+
+<div class="top-row ps-3 navbar navbar-dark">
     <div class="container-fluid">
-        <a class="navbar-brand" href="">ab-log.app</a>
+        <a class="navbar-brand" href="">@(IsShort ? "AB" : "AB-Log Srv")</a>
+        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
+            <span class="navbar-toggler-icon"></span>
+        </button>
     </div>
 </div>
 
-<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
-
-<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
-    <nav class="flex-column">
+<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
+    <nav id="main-left-menu" class="flex-column">
         <div class="nav-item px-3">
-            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
+            <NavLink class="nav-link" href="/hardwares-page">
+                <span class="oi oi-puzzle-piece" aria-hidden="true"></span> @(IsShort ? "" : "Устройства")
             </NavLink>
         </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="counter">
-                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
+        <div class="nav-item px-3" title="Home page">
+            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+                <span class="oi oi-wrench" aria-hidden="true"></span> @(IsShort ? "" : "Настройки")
             </NavLink>
         </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="weather">
-                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
+        <div class="nav-item px-3" title="MQTT config">
+            <NavLink class="nav-link" href="/mqtt-config-page" Match="NavLinkMatch.All">
+                <span class="oi oi-key" aria-hidden="true"></span> @(IsShort ? "" : "MQTT")
             </NavLink>
         </div>
+        @if (IsDebug)
+        {
+            @*<div class="nav-item px-3">
+                <NavLink class="nav-link" href="/scripts-page">
+                    <span class="oi oi-script" aria-hidden="true"></span> @(IsShort ? "" : "Скрипты")
+                </NavLink>
+            </div>
+            <div class="nav-item px-3">
+                <NavLink class="nav-link" href="/triggers-page">
+                    <span class="oi oi-pulse" aria-hidden="true"></span> @(IsShort ? "" : "Тригеры")
+                </NavLink>
+            </div>
+            <div class="nav-item px-3">
+                <NavLink class="nav-link" href="/cameras-page">
+                    <span class="oi oi-camera-slr" aria-hidden="true"></span> @(IsShort ? "" : "Камеры")
+                </NavLink>
+            </div>*@
+        }
     </nav>
 </div>
+
+@code {
+    private bool collapseNavMenu = true;
+
+    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
+
+    [Parameter, EditorRequired]
+    public Action ModeChangeHandle { get; set; } = default!;
+
+#if DEBUG
+    bool IsDebug = true;
+#else
+    bool IsDebug = false;
+#endif
+
+    /// <summary>
+    /// блокировка таймера
+    /// </summary>
+    protected object lock_timer = new();
+    /// <summary>
+    /// Задержка (млс) перед авто-сворачиванием левого меню после потери фокуса (on mouse hover)
+    /// </summary>
+    protected int timer_timeout = 500;
+
+    /// <summary>
+    /// Интервал проверки (млс) задачи авто-сворачивания левого меню после потери фокуса (on mouse leave)
+    /// </summary>
+    protected int timer_step_update = 100;
+
+    /// <summary>
+    /// Оставшееся время до выполнения авто-сворачивания левого меню после потери фокуса (on mouse leave)
+    /// </summary>
+    protected int timer_resource;
+    /// <summary>
+    /// Таймер проверки необходимости выполнить авто-сворачивание левого меню после потери фокуса (on mouse leave)
+    /// </summary>
+    protected Timer? timer;
+
+    public bool IsShort { get; private set; } = true;
+
+    public void SetModeNav(bool mode)
+    {
+        lock (lock_timer)
+        {
+            timer?.Dispose();
+        }
+        if (mode)
+        {
+            InitTimer();
+        }
+        else
+        {
+            IsShort = false;
+            _js_runtime.InvokeVoidAsync("tooltipeHide");
+            InvokeAsync(() =>
+                {
+                    StateHasChanged();
+                    ModeChangeHandle();
+                });
+        }
+    }
+
+    void InitTimer()
+    {
+        lock (lock_timer)
+        {
+            timer?.Dispose();
+            timer_resource = timer_timeout;
+            timer = new Timer(new TimerCallback(PauseRequest), null, 0, timer_step_update);
+        }
+    }
+
+    void PauseRequest(object? obj)
+    {
+        lock (lock_timer)
+        {
+            if (timer_resource > 0)
+            {
+                timer_resource -= timer_step_update;
+            }
+            else
+            {
+                timer?.Dispose();
+                IsShort = true;
+                InvokeAsync(() =>
+                {
+                    StateHasChanged();
+                    ModeChangeHandle();
+                });
+            }
+        }
+    }
+
+    private void ToggleNavMenu()
+    {
+        collapseNavMenu = !collapseNavMenu;
+    }
+
+    protected override void OnInitialized()
+    {
+        timer_resource = timer_timeout;
+    }
+}

ab-log.app/Components/Pages/CamerasPage.razor

@@ -0,0 +1,11 @@
+@page "/cameras-page"
+
+@using SharedLib
+
+@inherits BlazorBusyComponentBaseModel
+
+<PageTitle>Камеры</PageTitle>
+
+@code {
+
+}

ab-log.app/Components/Pages/HardwareConfigPage.razor

@@ -0,0 +1,30 @@
+@page "/hardware-page/{Id:int}"
+
+@using RazorLib.Shared.navs.tabs
+@using RazorLib.Shared.hardwares
+@using RazorLib.Shared;
+@using SharedLib
+
+@inherits BlazorBusyComponentBaseModel
+
+<PageTitle>
+    Управляющий блок #@(Id)
+</PageTitle>
+
+<h1>Настройка управляющего блока</h1>
+
+<CascadingValue Value="@Id">
+    <TabSetComponent>
+        <TabComponent Tooltip="Управляющий блок" Title="Управляющий блок">
+            <HardwareFormComponent />
+        </TabComponent>
+        <TabComponent Tooltip="Ретранслятор" Title="Ретранслятор">
+            <HardwareTranslateMainLayerComponent />
+        </TabComponent>
+    </TabSetComponent>
+</CascadingValue>
+
+@code {
+    [Parameter, EditorRequired]
+    public int Id { get; set; }
+}

ab-log.app/Components/Pages/HardwaresPage.razor

@@ -0,0 +1,49 @@
+@page "/hardwares-page"
+
+@using RazorLib.Shared.hardwares
+@using SharedLib
+
+@inherits BlazorBusyComponentBaseModel
+
+<PageTitle>Устройства</PageTitle>
+
+<nav class="navbar bg-body-tertiary">
+    <div class="container-fluid">
+        <a class="navbar-brand">Устройства</a>
+        <div class="d-flex">
+            <button @onclick="OpeningToggle" class="btn btn-outline-success" type="submit">Добавить</button>
+        </div>
+    </div>
+</nav>
+<br />
+<HardwaresListComponent @ref="refCom" />
+
+@if (IsAddingHardware)
+{
+    <div class="offcanvas offcanvas-end show" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel" aria-modal="true" role="dialog">
+        <div class="offcanvas-header">
+            <h5>
+                Новый контроллер:
+            </h5>
+            <button @onclick="OpeningToggle" type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+        </div>
+        <div class="offcanvas-body">
+            <HardwareFormComponent UpdateFormEvent="OpeningToggle" />
+        </div>
+    </div>
+    <div @onclick="OpeningToggle" class="offcanvas-backdrop fade show"></div>
+}
+
+@code {
+    bool IsAddingHardware = false;
+
+    HardwaresListComponent? refCom;
+
+    void OpeningToggle()
+    {
+        IsAddingHardware = !IsAddingHardware;
+        StateHasChanged();
+        if (!IsAddingHardware)
+            refCom?.ReloadHardwares();
+    }
+}