Сборка фронт части

2025-06-19 13:16:59 +05:00 · 2025-06-19 13:16:59 +05:00 · dfbd387fae
commit dfbd387fae
parent 43f0bc1cdc
176 changed files with 7839 additions and 1032 deletions
--- a/FRONT/DEV/src/components/workSpace/modules/appModules/usersScanner/userScanner.tsx
+++ b/FRONT/DEV/src/components/workSpace/modules/appModules/usersScanner/userScanner.tsx
@ -141,8 +141,8 @@ export default function UserScanner() {
            setLoading(true);
            setScanInitiated(true);
            const res = await NetworkService.scanUser(ipAddress);
+            console.log(res);
            setDevices(res.data.devices || []);
-            console.log(res.data.devices);
        } catch (err) {
            console.error("Ошибка сканирования сети:", err);
            setDevices([])
--- a/FRONT/DEV/src/components/workSpace/modules/appModules/wifiScanner/WifiScanner.tsx
+++ b/FRONT/DEV/src/components/workSpace/modules/appModules/wifiScanner/WifiScanner.tsx
@ -1,17 +1,10 @@
-import { useIpStore } from "../../../../../store";
 import styled, { keyframes } from "styled-components";
 import React, { useState } from "react";
 import { NetworkService } from "../../../../../api/request";
-import useDeviceStore from "../../../../../store/useDeviceStore";
 import WifiDot, {WifiNetworkScanner} from "./modules/WifiDot";
 import ModalWifiScaner from "./modules/ModalWifiScaner";
 import useNetworkStore from "../../../../../store/useDeviceStore";
-
-
-type Option ={
-    value: number,
-    label: string,
-}
+import {useIpStore} from "../../../../../store";

 // Анимации
 const ring1 = keyframes`
@ -73,7 +66,7 @@ const UserLocate = styled.div<{ loading: boolean, scanInitiated: boolean }>`
  position: relative;
  transition: .4s ease;
  transform: scale(1);
-  span {
+  .circel {
    position: absolute;
    display: inline-block;
    background: ${(props) => props.theme.scannerColor};
@ -143,14 +136,15 @@ const ScanBtn = styled.button<{scanInitiated: boolean}>`
 `

 export function WifiScanner() {
-    const ipAddress = '192.168.1.147';
+    const { ipAddress } = useIpStore();
    const [loading, setLoading] = useState(false);
    const [scanInitiated, setScanInitiated] = useState(false);
-    const {wifiNetworks, setWifiNetworks} = useNetworkStore();
+    const { wifiNetworks, setWifiNetworks } = useNetworkStore();
    const [currentNetwork, setCurrentNetwork] = useState<WifiNetworkScanner | null>(null);

        const handleScan = async () => {
            setWifiNetworks([]);
+            setCurrentNetwork(null)
            setLoading(true);
            setScanInitiated(true);
            try {
@ -170,10 +164,10 @@ export function WifiScanner() {
            <TitleWrapper>Сканирование Wi-Fi сети</TitleWrapper>

            <UserLocate loading={loading} scanInitiated={scanInitiated}>
-                <span className="center"></span>
-                <span className="ring1"></span>
-                <span className="ring2"></span>
-                <span className="ring3"></span>
+                <span className="center circel"></span>
+                <span className="ring1 circel"></span>
+                <span className="ring2 circel"></span>
+                <span className="ring3 circel"></span>
                {wifiNetworks.map((network) => (
                    <WifiDot
                        key={network.bssid}
@ -181,21 +175,21 @@ export function WifiScanner() {
                        onSelect={setCurrentNetwork}
                    />
                ))}
-            </UserLocate>

-            {currentNetwork && (
-                <ModalWifiScaner
-                    onClose={() => setCurrentNetwork(null)}
-                    network={currentNetwork}
-                />
-            )}
+                {currentNetwork && (
+                    <ModalWifiScaner
+                        onClose={() => setCurrentNetwork(null)}
+                        network={currentNetwork}
+                    />
+                )}
+            </UserLocate>

            {loading ? (
                <LoadingText>
                    Сканирование сети <ScanningText/>
                </LoadingText>
            ) : (
-                <ScanBtn onClick={handleScan} disabled={loading} scanInitiated={scanInitiated}>
+                <ScanBtn onClick={handleScan} disabled={loading} scanInitiated={wifiNetworks.length > 0 }>
                    {wifiNetworks.length > 0 ? 'Обновить список' : 'Сканировать сеть'}
                </ScanBtn>
            )}
--- a/FRONT/DEV/src/components/workSpace/modules/appModules/wifiScanner/modules/ModalWifiScaner.tsx
+++ b/FRONT/DEV/src/components/workSpace/modules/appModules/wifiScanner/modules/ModalWifiScaner.tsx
@ -1,20 +1,28 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import styled from 'styled-components';
 import {WifiNetworkScanner} from "./WifiDot";
 import {IconComponent} from "../../../../../../const/buttons/icons";
 import {buttonNames} from "../../../../../../const/buttons/names";
+import {ModalMap} from "../../../../../modalwindows/windowsType";
+import {useIpStore, useModalContext} from "../../../../../../store";
+import {Status} from "../../../../../customeNodes/nodes/networkInterface/networkNode/style";
+import SignalSVG from "../../../../../UI/signalSvg";
+import { useTheme } from 'styled-components';
+import useNetworkStore, {DeviceUser} from "../../../../../../store/useDeviceStore";
+import {NetworkService} from "../../../../../../api/request";
+
 const Modal = styled.div`
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: ${(props) => props.theme.secondary};
    border-radius: 24px;
-    padding: 20px 32px;
-    top: 14%;
-    right: 18%;
+    padding: 32px 28px;
+    bottom: -40%;
+    left: 220px;
    position: absolute;
    z-index: 20;
-    min-width: 210px;
+    min-width: 300px;
    &:hover .close-btn{
        opacity: 1;
        visibility: visible;
@ -50,6 +58,12 @@ const ModalTitle = styled.div`
    h4{
        font-weight: normal;
    }
+    .functionalIcons{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 18px;
+    }
 `
 const ModalContent = styled.div`
    display: flex;
@ -62,7 +76,7 @@ const ModalContent = styled.div`
 const ModalRow = styled.div`
    display: flex;
    justify-content: space-between;
-    align-items: center;
+    align-items: start;
    gap: 12px;
    width: 100%;
    font-size: 14px;
@ -71,27 +85,87 @@ const ModalRow = styled.div`
        padding: 0;
        font-size: 1em;
    }
+    p{
+        max-width:180px;
+        text-align: right;
+    }
+`
+const ModalConnect = styled.button`
+    color: ${(props) => props.theme.primary};
+    padding: 10px 12px;
+    font-size: 18px;
+    background-color: ${(props) => props.theme.accent};
+    border-radius: 12px;
+    margin-top: 4px;
+    border: none;
+    outline: none;
+    width: 100%;
+    cursor: pointer;
+    transition: .4s ease;
+    &:hover{
+        background-color: ${(props) => props.theme.accentHover};
+    }
 `

-const SignalBarsWrapper = styled.div`
-  display: flex;
-  align-items: flex-end;
-  gap: 2px;
-  height: 26px;
-  margin-left: 8px;
-`;
-
-const SignalBar = styled.div<{ active: boolean }>`
-  width: 9px;
-  background: ${({ active, theme }) => active ? theme.accent : '#ccc'};
-  border-radius: 2px;
-  
-  &:nth-child(1) { height: 8px; }
-  &:nth-child(2) { height: 14px; }
-  &:nth-child(3) { height: 22px; }
-`;
-
 const ModalWifiScaner = ({ network,onClose }: { network: WifiNetworkScanner, onClose: ()=>void }) => {
+    const { openModal } = useModalContext();
+    const { ipAddress } = useIpStore();
+    const theme = useTheme()
+    const [signal, setSignal] = useState(1);
+    const { wifiNetworks } = useNetworkStore();
+    const [isConnected, setIsConnected] = useState(false);
+
+    useEffect(() => {
+        const getStatus = async () => {
+            try {
+                const response = await NetworkService.statusNetwork(ipAddress);
+                const { status, ssid } = response.data;
+                setIsConnected(
+                    !!network?.ssid &&
+                    ssid === network.ssid &&
+                    status === 'connected'
+                );
+            } catch (error) {
+                setIsConnected(false);
+            }
+        };
+
+        getStatus();
+    }, [network?.ssid, ipAddress]);
+
+    const currentNetwork = wifiNetworks.find(n => n.bssid === network.bssid) || network;
+    const openModalNote = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        openModal(ModalMap['7'], {
+            address: currentNetwork.ssid,
+            currentNote: currentNetwork.note || ''
+        });
+    };
+
+    const openModalNetwork= (e: React.MouseEvent) => {
+        e.stopPropagation();
+        if(isConnected){
+            openModal(ModalMap['9'], {
+                address: currentNetwork.ssid,
+            });
+        }else{
+            openModal(ModalMap['8'], {
+                address: currentNetwork.ssid,
+            });
+        }
+    };
+
+    useEffect(() => {
+        const perc = Number(network.signal);
+
+        switch (true) {
+            case perc >= -50: setSignal(5); break;
+            case perc >= -60: setSignal(4); break;
+            case perc >= -70: setSignal(3); break;
+            case perc >= -80: setSignal(2); break;
+            default: setSignal(1); break;
+        }
+    }, [network.signal])
    return (
        <Modal>
            <CloseBtn className={'close-btn'} onClick={onClose}>
@ -99,11 +173,15 @@ const ModalWifiScaner = ({ network,onClose }: { network: WifiNetworkScanner, onC
            </CloseBtn>
            <ModalTitle>
                <h4>{network.ssid}</h4>
-                <SignalBarsWrapper>
-                    <SignalBar active={network.signal >= -120} />
-                    <SignalBar active={network.signal >= -70} />
-                    <SignalBar active={network.signal >= -50} />
-                </SignalBarsWrapper>
+                <div className={'functionalIcons'}>
+
+                    <span onClick={openModalNote}  style={{cursor: "pointer"}}>
+                        <IconComponent name={buttonNames[16]} width="30" height="30" />
+                    </span>
+                    <Status>
+                        <SignalSVG signal={signal} size={'36px'} color={theme.accent} />
+                    </Status>
+                </div>
            </ModalTitle>
            <ModalContent>
                <ModalRow>
@ -134,6 +212,11 @@ const ModalWifiScaner = ({ network,onClose }: { network: WifiNetworkScanner, onC
                <h6>Скрытая сеть:</h6>
                <p>{network.hidden ? 'Да' : 'Нет'}</p>
            </ModalRow>
+            <ModalRow>
+                <h6>Заметка:</h6>
+                <p>{currentNetwork.note ? currentNetwork.note : '-'}</p>
+            </ModalRow>
+            <ModalConnect onClick={openModalNetwork}>{isConnected ? 'Отключиться' : 'Подключиться'}</ModalConnect>
        </ModalContent>
 </Modal>
    );
--- a/FRONT/DEV/src/components/workSpace/modules/appModules/wifiScanner/modules/WifiDot.tsx
+++ b/FRONT/DEV/src/components/workSpace/modules/appModules/wifiScanner/modules/WifiDot.tsx
@ -10,9 +10,10 @@ export interface WifiNetworkScanner {
    frequency: string;
    vendor: string;
    hidden: boolean;
+    note: string;
 }

-//Точка вайфайл
+//Точка вайфай
 const Dot = styled.div<{ top: string; left: string }>`
    position: absolute;
    top: ${props => props.top};
--- a/FRONT/DEV/src/components/workSpace/modules/workModules/networkInterfaces.tsx
+++ b/FRONT/DEV/src/components/workSpace/modules/workModules/networkInterfaces.tsx
@ -76,7 +76,7 @@ export const NetworkInterfaces = ({ startConnection, ws }: Props) => {
      setHasInited(false)
      initializationAttempt.current = 0;

-      const newSocket = new WebSocket(`ws://${ws}:8001/api/v1`);
+      const newSocket = new WebSocket(`wss://${ws}:8001/api/v1`);

      let connectionTimeout;
      setSocket(newSocket);
--- a/FRONT/DEV/src/components/workSpace/sideBar/toolSpace/devicesBar.tsx
+++ b/FRONT/DEV/src/components/workSpace/sideBar/toolSpace/devicesBar.tsx
@ -115,7 +115,7 @@ export const DevicesBar = () => {

    const checkWebSocketAvailability = async (ip: string): Promise<boolean> => {
        return new Promise((resolve) => {
-            const testSocket = new WebSocket(`ws://${ip}:8001/api/v1`);
+            const testSocket = new WebSocket(`wss://${ip}:8001/api/v1`);
            const timeout = setTimeout(() => {
                    testSocket.close();
                    resolve(false);