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

FRONT/BUILD/resources/app/src/store/adminStore.ts

@@ -0,0 +1,11 @@
+import { create } from 'zustand'
+
+interface AdminState {
+  isAdmin: boolean;
+  setAdmin: (isAdmin: boolean) => void;
+}
+
+export const useAdminStore = create<AdminState>()((set) => ({
+  isAdmin: false,
+  setAdmin: (isAdmin: boolean) => set({ isAdmin }),
+}))

FRONT/BUILD/resources/app/src/store/devicesStore.ts

@@ -0,0 +1,39 @@
+import { create } from 'zustand'
+import { persist, createJSONStorage } from 'zustand/middleware'
+
+export interface Device {
+  number: number
+  address: string
+}
+
+interface DevicesState {
+  devices: Device[]
+  addDevice: (address: string) => void
+  deleteDevice: (number: number) => void
+}
+
+export const useDevicesStore = create<DevicesState>()(
+  persist(
+    (set) => ({
+      devices: [],
+      addDevice: (address) => 
+        set((state) => {
+          const newDevice = {
+            number: state.devices.length + 1,
+            address
+          }
+          return { devices: [...state.devices, newDevice] }
+        }),
+      deleteDevice: (number) =>
+        set((state) => ({
+          devices: state.devices
+            .filter(device => device.number !== number)
+            .map((device, index) => ({ ...device, number: index + 1 }))
+        }))
+    }),
+    {
+      name: 'connectedDevices-storage',
+      storage: createJSONStorage(() => localStorage)
+    }
+  )
+)

FRONT/BUILD/resources/app/src/store/flowStore.ts

@@ -0,0 +1,22 @@
+import { create } from 'zustand';
+
+interface NodesStore {
+  nodes: any[];
+  edges: any[];
+  setNodes: (nodes: any[]) => void;
+  setEdges: (edges: any[]) => void;
+  updateNode: (nodeId: string, newData: any) => void;
+}
+
+export const useNodesStore = create<NodesStore>((set) => ({
+  nodes: [],
+  edges: [],
+  setNodes: (nodes) => set({ nodes }),
+  setEdges: (edges) => set({ edges }),
+  updateNode: (nodeId, newData) =>
+    set((state) => ({
+      nodes: state.nodes.map((node) =>
+        node.id === nodeId ? { ...node, data: { ...node.data, ...newData } } : node
+      ),
+    })),
+}));

FRONT/BUILD/resources/app/src/store/groupStore.ts

@@ -0,0 +1,13 @@
+import {create} from 'zustand';
+
+interface GroupState {
+  groups: { id: string; click: boolean }[];
+  setGroups: (groups: { id: string; click: boolean }[]) => void;
+}
+
+const useGroupStore = create<GroupState>((set) => ({
+  groups: [],
+  setGroups: (groups) => set({ groups }),
+}));
+
+export { useGroupStore };

FRONT/BUILD/resources/app/src/store/index.ts

@@ -0,0 +1,9 @@
+export {useModalContext, ModalProvider} from './modalContext'
+export {useTheme, ThemeProvider} from './themeContext'
+export {usePannableStore} from './pannableStore'
+export {useGroupStore} from './groupStore'
+export {useIpStore} from './ipStore'
+export {useToolBarStore} from './toolBarStore'
+export {useDevicesStore} from './devicesStore'
+export {useMenuStore} from './menusStore'
+export {useWorkSpaceStore} from './workSpaceStore'

FRONT/BUILD/resources/app/src/store/ipStore.ts

@@ -0,0 +1,20 @@
+import {create} from 'zustand'
+import { persist, createJSONStorage } from 'zustand/middleware'
+
+interface IpAddressState {
+  ipAddress: string;
+  setIpAddress: (newIp: string) => void;
+}
+
+export const useIpStore = create<IpAddressState>()(
+  persist(
+    (set)=>({
+      ipAddress: '192:168.1.147',
+      setIpAddress: (newIp: string) => set({ ipAddress: newIp }),
+    }),
+    {
+      name: 'currentIp-storage',
+      storage: createJSONStorage(()=>localStorage)
+    }
+  )
+)

FRONT/BUILD/resources/app/src/store/menusStore.ts

@@ -0,0 +1,28 @@
+
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { Menu } from '../const/types/types';
+import { menusData } from '../const/menus/othersMenus/data';
+
+interface MenuState {
+    menus: Menu[];
+    toggleMenu: (menuId: string) => void;
+}
+
+export const useMenuStore = create<MenuState>()(
+    persist(
+        (set) => ({
+            menus: menusData,
+            toggleMenu: (menuId) =>
+                set((state) => ({
+                    menus: state.menus.map((menu) =>
+                        menu.id === menuId ? { ...menu, isOpen: !menu.isOpen } : menu
+                    ),
+                })),
+        }),
+        {
+            name: 'menus-storage',
+            storage: createJSONStorage(() => localStorage)
+        }
+    )
+);

FRONT/BUILD/resources/app/src/store/modalContext.tsx

@@ -0,0 +1,63 @@
+import { createContext, useContext, useState, ReactNode, useCallback } from 'react';
+import { useEffect } from 'react';
+
+interface ModalContextType {
+  isOpen: boolean;
+  modalType: string;
+  modalData: any;
+  openModal: (modalType: string, modalData?: any) => void;
+  closeModal: () => void;
+  closeLoader: () => void;
+}
+
+const ModalContext = createContext<ModalContextType>({
+  isOpen: false,
+  modalType: '',
+  modalData: null,
+  openModal: () => {},
+  closeModal: () => {},
+  closeLoader: () => {},
+});
+
+export const useModalContext = () => useContext(ModalContext);
+
+export function ModalProvider({ children }: { children: ReactNode }) {
+  const [isOpen, setOpen] = useState(false);
+  const [modalType, setType] = useState('');
+  const [modalData, setData] = useState(null);
+
+  const openModal = (type: string, data?: any) => {
+    setOpen(true);
+    setType(type);
+    setData(data);
+  };
+
+  const closeModal = useCallback(() => {
+    setOpen(false);
+    setType('');
+    setData(null);
+
+    window.location.reload()
+  }, []);
+
+  const closeLoader = useCallback(() => {
+    setOpen(false);
+    setType('');
+    setData(null);
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    }
+    else {
+      document.body.style.overflow = 'auto';
+    }
+  }, [isOpen])
+
+  return (
+    <ModalContext.Provider value={{ isOpen, modalType, modalData, openModal, closeModal, closeLoader }}>
+      {children}
+    </ModalContext.Provider>
+  );
+}

FRONT/BUILD/resources/app/src/store/pannableStore.ts

@@ -0,0 +1,11 @@
+import {create} from 'zustand';
+
+interface FlowState {
+  isPanDisabled: boolean;
+  toggleEditingMode: () => void;
+}
+
+export const usePannableStore = create<FlowState>((set) => ({
+  isPanDisabled: false,
+  toggleEditingMode: () => set((state) => ({ isPanDisabled: !state.isPanDisabled })),
+}));

FRONT/BUILD/resources/app/src/store/posStore.ts

@@ -0,0 +1,11 @@
+import { create } from 'zustand'
+
+interface PosState {
+    isNullPos: boolean;
+    setNullPos: (isNullPos: boolean) => void;
+}
+
+export const usePosStore = create<PosState>()((set) => ({
+    isNullPos: false,
+    setNullPos: (isNullPos: boolean) => set({ isNullPos }),
+}))

FRONT/BUILD/resources/app/src/store/themeContext.tsx

@@ -0,0 +1,78 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { ThemeProvider as StyledTheme } from 'styled-components';
+import { light, dark} from '../const/theme/theme';
+import { GlobalStyle } from '../const/theme/globalStyles';
+import { themeNames, ThemName } from '../const/theme/names';
+
+type ThemeContextType = {
+    theme: ThemName;
+    toggleTheme: () => void;
+};
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export const useTheme = () => {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
+    return context;
+};
+
+export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const getSystemTheme = () =>
+        window.matchMedia('(prefers-color-scheme: dark)').matches ? themeNames[2] : themeNames[1];
+
+    const getInitialTheme = () => {
+        let savedTheme = localStorage.getItem('theme') as ThemName;
+        if (!savedTheme) {
+            savedTheme = themeNames[3]; // Устанавливаем значение по умолчанию
+            localStorage.setItem('theme', savedTheme); // Сохраняем без JSON.stringify
+        }
+        return savedTheme;
+    };
+
+    const [theme, setTheme] = useState<ThemName>(getInitialTheme);
+
+    const toggleTheme = () => {
+        setTheme((prev) => {
+            let newTheme: ThemName;
+            if (prev === themeNames[3]) {
+                newTheme = themeNames[1];
+            } else if (prev === themeNames[1]) {
+                newTheme = themeNames[2];
+            } else {
+                newTheme = themeNames[3];
+            }
+            localStorage.setItem('theme', newTheme);
+
+            return newTheme;
+        });
+    };
+
+    useEffect(() => {
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        let currentTheme = localStorage.getItem('theme')
+        const handleChange = () => {
+            if (currentTheme === themeNames[3]) {
+                const newTheme = getSystemTheme();
+
+                setTheme(newTheme);
+                localStorage.setItem('theme', themeNames[3]);
+            }
+        };
+        mediaQuery.addEventListener('change', handleChange);
+        return () => mediaQuery.removeEventListener('change', handleChange);
+    }, [theme]);
+
+    const currentTheme = theme === themeNames[3] ? getSystemTheme() : theme;
+
+    return (
+        <ThemeContext.Provider value={{ theme, toggleTheme }}>
+            <StyledTheme theme={{ ...currentTheme === themeNames[1] ? light : dark, toggleTheme }}>
+                <GlobalStyle />
+                {children}
+            </StyledTheme>
+        </ThemeContext.Provider>
+    );
+};

FRONT/BUILD/resources/app/src/store/toolBarStore.ts

@@ -0,0 +1,50 @@
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { toolBarData } from '../const/menus/sideBar/data';
+import { ToolBar } from '../const/types/types';
+
+interface MenuState {
+    toolBar: ToolBar;
+    toggleMenu: (menuId: string) => void;
+    initialize: () => void;
+}
+
+export const useToolBarStore = create<MenuState>()(
+    persist(
+        (set, get) => ({
+            toolBar: toolBarData,
+            toggleMenu: (menuId) => set((state) => {
+                const updatedToolBar = state.toolBar.toolSpace.map((menu) => {
+                    if (menu.id === menuId) {
+                        return {
+                            ...menu,
+                            isOpen: !menu.isOpen,
+                            isActive: true,
+                        };
+                    } else {
+                        return {
+                            ...menu,
+                            isActive: false,
+                            isOpen: false
+                        };
+                    }
+                });
+
+                return {
+                    toolBar: {
+                        ...state.toolBar,
+                        current: menuId,
+                        toolSpace: updatedToolBar,
+                    },
+                };
+            }),
+            initialize: () => {
+                set({ toolBar: toolBarData });
+            },
+        }),
+        {
+            name: 'toolBar-storage',
+            storage: createJSONStorage(() => localStorage),
+        }
+    )
+);

FRONT/BUILD/resources/app/src/store/useDeviceStore.ts

@@ -0,0 +1,51 @@
+import { create } from 'zustand';
+
+export interface DeviceUser {
+    ip: string;
+    mac: string;
+    hostname: string;
+    vendor: string;
+    open_ports: string[];
+    status: string;
+    last_seen: string;
+    note: string;
+}
+
+export interface WifiNetworkScanner {
+    ssid: string;
+    bssid: string;
+    channel: number;
+    signal: number;
+    encryption: string;
+    frequency: string;
+    vendor: string;
+    hidden: boolean;
+    note: string;
+}
+
+interface NetworkStore {
+    devices: DeviceUser[];
+    setDevices: (devices: DeviceUser[]) => void;
+    addDevice: (device: DeviceUser) => void;
+    wifiNetworks: WifiNetworkScanner[];
+    setWifiNetworks: (networks: WifiNetworkScanner[]) => void;
+    addWifiNetwork: (network: WifiNetworkScanner) => void;
+
+    clearAll: () => void;
+}
+
+const useNetworkStore = create<NetworkStore>((set) => ({
+    devices: [],
+    setDevices: (devices) => set({ devices }),
+    addDevice: (device) =>
+        set((state) => ({ devices: [...state.devices, device] })),
+
+    wifiNetworks: [],
+    setWifiNetworks: (networks) => set({ wifiNetworks: networks }),
+    addWifiNetwork: (network) =>
+        set((state) => ({ wifiNetworks: [...state.wifiNetworks, network] })),
+
+    clearAll: () => set({ devices: [], wifiNetworks: [] })
+}));
+
+export default useNetworkStore;

FRONT/BUILD/resources/app/src/store/workSpaceStore.ts

@@ -0,0 +1,26 @@
+import { create } from 'zustand'
+import { persist, createJSONStorage } from 'zustand/middleware'
+import { workSpaceNames } from '../const/workspace/names';
+
+interface WorkSpaceState {
+    workModule: string;
+    setWorkModule: (newModule: string) => void;
+    initialize: () => void;
+}
+
+export const useWorkSpaceStore = create<WorkSpaceState>()(
+    persist(
+        (set) => ({
+            workModule: workSpaceNames[1],
+            setWorkModule: (newModule: string) => set({ workModule: newModule }),
+            initialize: () => {
+                set({  workModule: workSpaceNames[1]});
+            },
+        }),
+        
+        {
+            name: 'workSpace-storage',
+            storage: createJSONStorage(() => localStorage)
+        }
+    )
+)