Добавление камеры на сервер

cmd/server/web/js/app.js

@@ -12,6 +12,8 @@ import {
 
 import { initAccordion } from "./accordion.js";
 import { drawChart } from "./chart.js";
+import { initResize } from "./layout.js";
+import { initCamera } from "./camera.js";
 
 let lastChart = 0;
 let connectionLost = false;
@@ -23,6 +25,29 @@ let pollTimer = null;
 window.addEventListener("DOMContentLoaded", () => {
     initDOM();
     initAccordion();
+    initCamera();
+    initResize();
+});
+
+document.addEventListener("keydown", (e) => {
+    switch(e.key.toLowerCase()) {
+        case 'c':
+            // Переключение камеры
+            const camBtn = document.getElementById('camToggle');
+            if (camBtn) camBtn.click();
+            break;
+        case 'f':
+            // На весь экран для левой панели
+            if (leftPanel) {
+                leftPanel.style.width = "100%";
+                if (rightPanel) rightPanel.style.display = "none";
+            }
+            break;
+        case 'escape':
+            if (rightPanel) rightPanel.style.display = "flex";
+            applyRatio(0.6); // 60% левая, 40% правая
+            break;
+    }
 });
 
 // ================= UPDATE =================

cmd/server/web/js/camera.js

@@ -0,0 +1,73 @@
+//camera.js
+let rightPanel, camImage, camClose;
+let isOpen = false;
+let streamUrl;
+
+export function initCamera() {
+    rightPanel = document.getElementById("rightPanel");
+    camImage = document.getElementById("camImage");
+    camClose = document.getElementById("camClose");
+    const btn = document.getElementById("camToggle");
+
+    streamUrl = "http://192.168.77.1:1984/api/stream.mjpeg?src=cam";
+
+    function open() {
+        if (isOpen) return;
+
+        isOpen = true;
+        rightPanel.classList.remove("hidden");
+        camImage.src = streamUrl + "&t=" + Date.now();
+        
+        // Обновляем текст кнопки
+        if (btn) {
+            btn.querySelector('.cam-btn-text').textContent = 'Скрыть';
+        }
+        
+        console.log("[camera] Камера открыта");
+        updateResizerVisibility();
+    }
+
+    function close() {
+        if (!isOpen) return;
+
+        isOpen = false;
+        camImage.src = "about:blank";
+        
+        setTimeout(() => {
+            camImage.src = "";
+        }, 50);
+
+        rightPanel.classList.add("hidden");
+        
+        // Обновляем текст кнопки
+        if (btn) {
+            btn.querySelector('.cam-btn-text').textContent = 'Камера';
+        }
+        
+        console.log("[camera] Камера закрыта");
+        updateResizerVisibility();
+    }
+
+    function toggle() {
+        isOpen ? close() : open();
+    }
+
+    // Обработчики событий
+    btn?.addEventListener("click", toggle);
+    camClose?.addEventListener("click", close);
+
+    // Горячие клавиши
+    document.addEventListener("keydown", (e) => {
+        if (e.key === 'c' || e.key === 'C') {
+            toggle();
+        }
+        if (e.key === 'Escape' && isOpen) {
+            close();
+        }
+    });
+
+    // Автозапуск камеры
+    open();
+    
+    console.log("[camera] Модуль камеры инициализирован");
+}

cmd/server/web/js/layout.js

@@ -0,0 +1,92 @@
+//layout.js
+let leftPanel, rightPanel, dragBar;
+let isDragging = false;
+
+export function initResize() {
+    leftPanel = document.getElementById("leftPanel");
+    rightPanel = document.getElementById("rightPanel");
+    dragBar = document.getElementById("dragBar");
+
+    if (!leftPanel || !rightPanel || !dragBar) return;
+
+    // Загрузка сохранённых пропорций
+    const savedRatio = localStorage.getItem('layoutRatio');
+    if (savedRatio) {
+        const ratio = parseFloat(savedRatio);
+        applyRatio(ratio);
+    }
+
+    dragBar.addEventListener("mousedown", (e) => {
+        isDragging = true;
+        document.body.style.cursor = "col-resize";
+        document.body.style.userSelect = "none";
+        e.preventDefault();
+    });
+
+    document.addEventListener("mouseup", () => {
+        if (isDragging) {
+            isDragging = false;
+            document.body.style.cursor = "default";
+            document.body.style.userSelect = "";
+            
+            // Сохраняем пропорции
+            const total = window.innerWidth;
+            const leftWidth = leftPanel.getBoundingClientRect().width;
+            const ratio = leftWidth / total;
+            localStorage.setItem('layoutRatio', ratio.toString());
+        }
+    });
+
+    // ЕДИНСТВЕННЫЙ обработчик mousemove
+    document.addEventListener("mousemove", (e) => {
+        if (!isDragging) return;
+        if (rightPanel.classList.contains("hidden")) return; // Не ресайзим если камера скрыта
+
+        const total = window.innerWidth;
+        let leftWidth = e.clientX;
+
+        // Минимальные размеры
+        const minWidth = 300;
+        if (leftWidth < minWidth) leftWidth = minWidth;
+        if (leftWidth > total - minWidth) leftWidth = total - minWidth;
+
+        const rightWidth = total - leftWidth - dragBar.offsetWidth;
+
+        leftPanel.style.flex = "none";
+        rightPanel.style.flex = "none";
+        leftPanel.style.width = leftWidth + "px";
+        rightPanel.style.width = rightWidth + "px";
+    });
+
+    // Адаптация при ресайзе окна
+    window.addEventListener("resize", () => {
+        if (rightPanel.classList.contains("hidden")) return;
+        
+        const total = window.innerWidth;
+        const leftWidth = leftPanel.getBoundingClientRect().width;
+        const ratio = leftWidth / total;
+        if (ratio > 0.2 && ratio < 0.8) {
+            applyRatio(ratio);
+        }
+    });
+}
+
+function applyRatio(ratio) {
+    const total = window.innerWidth;
+    const leftWidth = Math.floor(total * ratio);
+    const rightWidth = total - leftWidth - dragBar.offsetWidth;
+    
+    leftPanel.style.flex = "none";
+    rightPanel.style.flex = "none";
+    leftPanel.style.width = leftWidth + "px";
+    rightPanel.style.width = rightWidth + "px";
+}
+
+export function updateResizerVisibility() {
+    if (!dragBar) return;
+    if (rightPanel?.classList.contains("hidden")) {
+        dragBar.classList.add("hidden");
+    } else {
+        dragBar.classList.remove("hidden");
+    }
+}