фронт

FRONT/DEV/src/components/workSpace/sideBar/toolSpace/devicesBar.tsx

@@ -18,7 +18,7 @@ const Container = styled.div`
     align-items: center;
     gap: 15px;
     padding: 20px;
-
+    width: 210px;
     p{
         margin: 0;
     }
@@ -115,12 +115,12 @@ export const DevicesBar = () => {
 
     const checkWebSocketAvailability = async (ip: string): Promise<boolean> => {
         return new Promise((resolve) => {
-            const testSocket = new WebSocket(`wss://${ip}:8001/api/v1`);
+            const testSocket = new WebSocket(`ws://${ip}:8001/api/v1`);
             const timeout = setTimeout(() => {
-                testSocket.close();
-                resolve(false);
-            }, 500
-        );
+                    testSocket.close();
+                    resolve(false);
+                }, 500
+            );
 
             testSocket.onopen = () => {
                 clearTimeout(timeout);
@@ -156,8 +156,8 @@ export const DevicesBar = () => {
     };
 
     const handleAddDeviceComplete = (data: string) => {
-        addDevice(data)
-        setIpAddress(data)
+        addDevice(data);
+        switchWs(data);
     };
 
     const handleDelete = (number: number, adress: string) => {
@@ -170,7 +170,6 @@ export const DevicesBar = () => {
     };
 
     const switchWs = async (ip: string) => {
-        // Проверяем доступность WebSocket
         const isAvailable = await checkWebSocketAvailability(ip);
         if (!isAvailable) {
             openModal(ModalMap['3'], {
@@ -179,7 +178,6 @@ export const DevicesBar = () => {
             return;
         }
 
-        // Если WebSocket доступен, обновляем IP и переключаем модуль
         setIpAddress(ip);
         setWorkModule(workSpaceNames[3]);
     };
@@ -198,12 +196,12 @@ export const DevicesBar = () => {
 
             <DeviceBlock>
                 <DeviceControl className="unselectable" onClick={() => switchWs(currentDevice.address)}>
-                    <p>Текущее устройство</p>
+                    <p>Корневой адрес</p>
                 </DeviceControl>
                 {currentDevice.hostname == '' ? (
-                    <Text className="paddingP">Адрес: Загрузка<AnimDot /></Text>
+                    <Text className="paddingP">Название: Загрузка<AnimDot /></Text>
                 ) : (
-                    <p className="paddingP">Адрес: {currentDevice.hostname}</p>
+                    <p className="paddingP">Название: {currentDevice.hostname}</p>
                 )}
             </DeviceBlock>
 

FRONT/DEV/src/components/workSpace/sideBar/toolSpace/toolSpace.tsx

@@ -3,11 +3,15 @@ import { useToolBar } from "../../../../hooks/useToolBar"
 import { Space } from "../../../../const/menus/sideBar/components"
 import styled from "styled-components"
 
-const Container = styled.div`
+const Container = styled.div<{isOpen: boolean}>`
     background-color: ${(props) => props.theme.secondary};
     width: 250px;
     font-size: 14px; 
     flex: 3;
+    
+    overflow: hidden;
+    max-width: ${({isOpen})=>(isOpen ? '250px' : '0')};
+    transition: max-width .4s ease;
 `
 
 export const ToolSpace = () => {
@@ -15,12 +19,12 @@ export const ToolSpace = () => {
     const name = toolBar?.current || ''
     const { isActive, isOpen } = useToolBar(name)
 
-    if (!isActive || !isOpen) {
+    if (!isActive) {
         return null
     }
 
     return (
-        <Container>
+        <Container isOpen={isOpen}>
             <Space name={name} />
         </Container>
     )