web UI improvements

Author: AlekUnderwater

Properties/PublishProfiles/FolderProfile.pubxml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- https://go.microsoft.com/fwlink/?LinkID=208121. -->
+<Project>
+  <PropertyGroup>
+    <Configuration>Release</Configuration>
+    <Platform>Any CPU</Platform>
+    <PublishDir>bin\Release\net8.0\publish\osx-x64\</PublishDir>
+    <PublishProtocol>FileSystem</PublishProtocol>
+    <_TargetId>Folder</_TargetId>
+    <TargetFramework>net8.0</TargetFramework>
+    <RuntimeIdentifier>osx-x64</RuntimeIdentifier>
+    <SelfContained>false</SelfContained>
+    <PublishSingleFile>true</PublishSingleFile>
+  </PropertyGroup>
+</Project>

wwwroot/app.js

@@ -4,13 +4,13 @@ class DeviceConfig {
         this.ws = null;
         this.isConnected = false;
         this.deviceInfo = null;
-        this.maxLogEntries = 200; // Максимальное количество записей в логе
+        this.maxLogEntries = 32; // Максимальное количество записей в логе
 
         this.initWebSocket();
         this.initEventListeners();
         this.updateUI();
-
         this.setDefaultFlags();
+        this.initLogToggle();
     }
 
     initWebSocket() {
@@ -73,6 +73,48 @@ class DeviceConfig {
         }                
     }
 
+    initLogToggle() {
+        const logPanel = document.querySelector('.log-panel');
+        const logHeader = logPanel ? logPanel.querySelector('h2') : null;
+        const logContainer = document.getElementById('logContainer');
+
+        if (!logHeader || !logContainer) {
+            console.warn('Log elements not found');
+            return;
+        }
+
+        // Делаем заголовок кликабельным
+        logHeader.style.cursor = 'pointer';
+        logHeader.style.userSelect = 'none';
+
+        // По умолчанию скрываем лог
+        logContainer.style.display = 'none';
+
+        // Удаляем старый индикатор если есть
+        const oldIcon = logHeader.querySelector('.log-toggle-icon');
+        if (oldIcon) oldIcon.remove();
+
+        // Добавляем индикатор состояния
+        const toggleIcon = document.createElement('span');
+        toggleIcon.className = 'log-toggle-icon';
+        toggleIcon.textContent = ' ▶';
+        logHeader.appendChild(toggleIcon);
+
+        // Обработчик клика
+        logHeader.addEventListener('click', () => {
+            const isHidden = logContainer.style.display === 'none';
+
+            if (isHidden) {
+                logContainer.style.display = 'block';
+                toggleIcon.textContent = ' ▼';
+                logContainer.scrollTop = logContainer.scrollHeight;
+            } else {
+                logContainer.style.display = 'none';
+                toggleIcon.textContent = ' ▶';
+            }
+        });
+    }
+
     handleMessage(message) {
         switch (message.type) {
             case 'device_status':

wwwroot/style.css

@@ -355,14 +355,25 @@ select.form-control {
     justify-content: space-between;
     align-items: center;
     margin-bottom: 10px;
+    cursor: pointer; 
+    user-select: none; 
 }
 
+    .log-header:hover {
+        opacity: 0.8; 
+    }
+
     .log-header h2 {
         margin-bottom: 0;
         border-bottom: none;
         padding-bottom: 0;
     }
 
+.log-toggle-icon {
+    font-size: 0.8em; 
+    margin-left: 10px;
+}
+
 .btn-small {
     padding: 5px 14px;
     font-size: 11px;