Версия 0.0.2

FRONT/BUILD/resources/app/src/const/buttons/icons.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { buttonNames } from "./names";
+import { useTheme } from "styled-components";
+import { Icon } from '@iconify/react';
+
+import exitToApp from '@iconify/icons-ic/twotone-exit-to-app';
+import deleteIcon from '@iconify/icons-ic/baseline-delete';
+import settings from '@iconify/icons-ic/baseline-settings';
+import info from '@iconify/icons-ic/baseline-info';
+import arrowDown from '@iconify/icons-ic/baseline-keyboard-arrow-down';
+import arrowRight from '@iconify/icons-ic/baseline-keyboard-arrow-right';
+import edit from '@iconify/icons-ic/baseline-edit';
+import checkCircle from '@iconify/icons-ic/round-check-circle';
+import cancel from '@iconify/icons-ic/baseline-cancel';
+import admin from '@iconify/icons-ic/baseline-admin-panel-settings';
+import noAdmin from '@iconify/icons-ic/baseline-remove-moderator'
+import refresh from '@iconify/icons-ic/baseline-refresh';
+import close from '@iconify/icons-ic/round-close';
+
+export const ICONS = {
+    [buttonNames[1]]: exitToApp,
+    [buttonNames[2]]: deleteIcon,
+    [buttonNames[3]]: settings,
+    [buttonNames[4]]: info,
+    [buttonNames[5]]: arrowDown,
+    [buttonNames[6]]: arrowRight,
+    [buttonNames[7]]: edit,
+    [buttonNames[8]]: checkCircle,
+    [buttonNames[9]]: cancel,
+    [buttonNames[10]]: admin,
+    [buttonNames[11]]: refresh,
+    [buttonNames[12]]: close,
+    [buttonNames[13]]: noAdmin
+    
+} as const;
+
+type IconName = keyof typeof ICONS;
+
+interface IconsProps {
+    name: IconName,
+    width?: string
+    height?: string
+    setColor?: string
+    onClick?: (event?: React.MouseEvent<SVGSVGElement>) => void;
+}
+
+export const IconComponent = ({ name, width = "24", height = "24", setColor, onClick}: IconsProps) => {
+    const theme = useTheme();
+    return (
+        <Icon 
+            icon={ICONS[name]} 
+            width={width} 
+            height={height} 
+            color={setColor || theme.textColor} 
+            onClick={onClick} 
+        />
+    );
+}

FRONT/BUILD/resources/app/src/const/buttons/names.ts

@@ -0,0 +1,17 @@
+import { names } from "../types/types"
+
+export const buttonNames: names ={
+    1: 'powerOff',
+    2: 'delete',
+    3: 'settings',
+    4: 'information',
+    5: 'arrow-down',
+    6: 'arrow-right',
+    7: 'edit',
+    8: 'accept',
+    9: 'cancel',
+    10: 'admin',
+    11: 'reset',
+    12: 'close',
+    13: 'noAdmin'
+}

FRONT/BUILD/resources/app/src/const/menus/othersMenus/data.ts

@@ -0,0 +1,9 @@
+import { Menu } from "../../types/types";
+import { menusNames } from "./names";
+
+export const menusData: Menu[] = [
+    {
+        id: menusNames[1],
+        isOpen: false
+    }
+]

FRONT/BUILD/resources/app/src/const/menus/othersMenus/names.ts

@@ -0,0 +1,5 @@
+import { names } from "../../types/types"
+
+export const menusNames: names ={
+    1: 'collapse-devices',
+}

FRONT/BUILD/resources/app/src/const/menus/sideBar/components.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import { toolBarNames } from "./names"
+import { DevicesBar } from "../../../components/workSpace/sideBar/toolSpace/devicesBar"
+
+export const COMPONENTS = {
+    [toolBarNames[1]]:(
+        <DevicesBar/>
+    ),
+} as const
+
+type ComponentName = keyof typeof COMPONENTS
+
+interface SpaceProps {
+    name: ComponentName,
+}
+
+export const Space = ({name}: SpaceProps) => {
+    const Component = COMPONENTS[name]
+    return React.cloneElement(Component);
+}

FRONT/BUILD/resources/app/src/const/menus/sideBar/data.ts

@@ -0,0 +1,13 @@
+import { ToolBar } from "../../types/types";
+import { toolBarNames } from "./names";
+
+export const toolBarData: ToolBar = {
+    current: toolBarNames[1],
+    toolSpace: [
+        {
+            id: toolBarNames[1],
+            isOpen: true,
+            isActive: true
+        },
+    ]
+};

FRONT/BUILD/resources/app/src/const/menus/sideBar/icons.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import { toolBarNames } from "./names"
+import { useTheme } from "styled-components"
+import { Icon } from '@iconify/react';
+
+import desktop from '@iconify/icons-ic/round-desktop-windows';
+
+export const ICONS = {
+    [toolBarNames[1]]: desktop,
+} as const
+
+
+type IconName = keyof typeof ICONS
+
+interface IconsProps {
+    name: IconName,
+    width?: string
+    height?: string
+    setColor?: string
+}
+
+export const IconComponent = ({ name, width = "24", height = "24", setColor}: IconsProps) => {
+    const theme = useTheme();
+    return (
+        <Icon 
+            icon={ICONS[name]} 
+            width={width} 
+            height={height} 
+            color={setColor || theme.textColor} 
+        />
+    );
+}

FRONT/BUILD/resources/app/src/const/menus/sideBar/names.ts

@@ -0,0 +1,5 @@
+import { names } from "../../types/types"
+
+export const toolBarNames: names ={
+    1: 'toolSpace-devices',
+}

FRONT/BUILD/resources/app/src/const/modals/names.ts

@@ -0,0 +1,8 @@
+import { names } from "../types/types"
+
+export const modalNames: names ={
+    1: 'loader',
+    2: 'ipConfirm',
+    3: 'connectionError',
+    4: 'addDevice'
+}

FRONT/BUILD/resources/app/src/const/theme/globalStyles.ts

@@ -0,0 +1,55 @@
+import { createGlobalStyle } from 'styled-components';
+
+export const GlobalStyle = createGlobalStyle`
+    body {
+        background-color: ${(props) => props.theme.backgroundColor};
+        color: ${(props) => props.theme.textColor};
+        box-sizing: border-box;
+        font-family: sans-serif;
+        box-sizing: border-box;
+        min-height: 100%;
+        height: 100%;
+        margin: 0;
+
+        h1, h2, h3, h4, P{
+            margin: 0;
+            display: unset;
+        }
+    }
+
+    #root{
+        width: 100%;
+        height: 100%;
+        margin: 0; 
+        padding: 0;
+    }
+
+    .react-flow__controls{
+        border-radius: 12px;
+        background-color: ${(props) => props.theme.secondary};
+        button{
+            background-color: ${(props) => props.theme.secondary};
+            border: none;
+            border-radius: 12px;
+
+            &:hover{
+                background-color: ${(props) => props.theme.primary};
+            }
+        }
+
+        .react-flow__controls-button{
+            border-radius: 12px;
+        }   
+    }
+
+    .react-flow__handle{
+        background-color: ${(props) => props.theme.nodeColor};
+    }
+
+    .unselectable {
+            user-select: none;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+        }
+`;

FRONT/BUILD/resources/app/src/const/theme/icons.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Icon } from '@iconify/react';
+import { useTheme } from 'styled-components';
+import { themeNames } from './names';
+
+import light from '@iconify/icons-ic/baseline-brightness-7';
+import dark from '@iconify/icons-ic/baseline-brightness-5';
+import system from '@iconify/icons-ic/baseline-brightness-6';
+
+export const ICONS = {
+    [themeNames[1]]: light,
+    [themeNames[2]]: dark,
+    [themeNames[3]]: system,
+
+} as const;
+
+type IconName = keyof typeof ICONS;
+
+interface IconsProps {
+    name: IconName,
+    width?: string
+    height?: string
+    setColor?: string
+}
+
+export const IconComponent = ({ name, width = "24", height = "24", setColor}: IconsProps) => {
+    const theme = useTheme();
+    return (
+        <Icon 
+            icon={ICONS[name]} 
+            width={width} 
+            height={height} 
+            color={setColor || theme.textColor} 
+        />
+    );
+}

FRONT/BUILD/resources/app/src/const/theme/names.ts

@@ -0,0 +1,10 @@
+import { names } from "../types/types"
+
+export const themeNames: names ={
+    1: 'light',
+    2: 'dark',
+    3: 'system'
+}
+
+const themeType = themeNames[1] || themeNames[2] || themeNames[3]
+export type ThemName = typeof themeType

FRONT/BUILD/resources/app/src/const/theme/theme.ts

@@ -0,0 +1,20 @@
+const baseTheme = {
+    accent: '#007ACC',
+    accentHover: '#4A90E2',
+}
+
+export const light = {
+    ...baseTheme,
+    primary: '#F3F3F3',
+    secondary: '#EDEDED',
+    background: '#E8E8E8',
+    textColor: '#000000',
+};
+
+export const dark = {
+    ...baseTheme,
+    primary: '#1E1E1E',
+    secondary: '#252525',
+    background: '#3A3A3A',
+    textColor: '#FFFFFF',
+};

FRONT/BUILD/resources/app/src/const/types/types.ts

@@ -0,0 +1,213 @@
+export interface IEdge {
+    source: string
+    sourceHandle: string
+    target: string
+    targetHandle: string
+    id: string
+    type: string
+    style?: any
+}
+
+export interface ICanvas {
+    nodes: any[],
+    edges: IEdge[]
+}
+
+export interface IpRoutes {
+    destination: string
+    prefix: number,
+    next_hop: string
+    metric: number
+}
+
+export interface ResponseIpConf {
+    address: string,
+    method: string,
+    gateway: string,
+    dns: string[]
+    routes: IpRoutes[]
+}
+
+export interface ResponseNetIp {
+    configurations: ResponseIpConf[]
+}
+
+export interface ResponseNetwork {
+    name: string,
+    type: string,
+    mac_address: string,
+    device_state: string,
+    active_connection: string,
+    device_mtu: string,
+    strength: string,
+    ipv4: ResponseNetIp
+    ipv6: ResponseNetIp
+}
+
+export interface ResponseData {
+    interfaces: ResponseNetwork[],
+    container_x: number,
+    container_y: number,
+    id: number | string
+}
+
+export interface OutputIpData {
+    ipType: string,
+    ipAdress: string,
+    ipGate: string,
+    ipDns: string[]
+    ipRoutese: IpRoutes[]
+    ipVersion: string
+}
+
+export interface IPosition {
+    x: number;
+    y: number;
+}
+
+export interface IStyle {
+    width: number,
+    height: number,
+    borderType?: string;
+    borderColor?: string;
+    backgroundColor?: string
+}
+
+export interface NetworkData {
+    device: string
+    type: string
+    mac: string
+    mtu: string,
+    state: string,
+    connection: string
+    id?: string,
+    strength?: string
+}
+
+export interface IpData {
+    ipType: string,
+    ipAdress: string,
+    ipGate: string,
+    ipDns: string[]
+    ipRoutese: IpRoutes[]
+    ipVersion: string
+}
+
+
+export interface NetworkNode {
+    id: string;
+    position: IPosition;
+    data: {
+        networkData: NetworkData,
+        style: IStyle,
+        height: any,
+        visible: boolean
+    }
+    type: string;
+    parentId: string,
+    extent: string,
+}
+
+export interface PortNode {
+    id: string
+    position: IPosition
+    data: {
+        id: string
+        label: string
+        port?: string
+        style: IStyle
+    }
+    type: string,
+    parentId?: string,
+    extent?: string,
+}
+
+export interface IpNode {
+    id: string;
+    position: IPosition;
+    parentId: string
+    extent: string
+    draggable: boolean,
+    data: {
+        ipData: IpData;
+        interfaceData:{
+            device: string,
+            connection: string
+        }
+        route: boolean
+        style: IStyle
+    };
+    hidden?: boolean
+    type: string;
+}
+
+export interface NodeGroup {
+    id: string
+    position: IPosition
+    parentId?: string
+    extent?: string
+    draggable?: boolean,
+    data: {
+        id?: string
+        label?: string
+        height?: any
+        style: IStyle
+    },
+    hidden?: boolean
+    type: string
+}
+
+
+export interface OutputIpArray {
+    route: boolean,
+    ipData: OutputIpData[]
+}
+
+export interface MainData {
+    networkData: NetworkData
+    ipArrays: OutputIpArray[]
+}
+
+export interface Interfaces {
+    mainData: MainData[]
+    container_x: number,
+    container_y: number
+}
+
+export interface IData{
+    activation: ResponseData
+    deactivation: ResponseData
+}
+
+export interface changeIp {
+    currentIp: string
+    newIp: string
+    currentGate: string
+    newGate: string
+    currentDns: string[]
+    newDns: string[]
+    device: string
+    connection: string
+    version: string
+    prefix: number
+}
+
+export interface WorkSpace {
+    id: string,
+    isActive: boolean
+}
+
+export interface Menu {
+    id: string,
+    isOpen: boolean,
+    isActive?: boolean
+}
+
+export interface ToolBar{
+    toolSpace: Menu[]
+    current: string
+}
+
+export type names = Record<number, string>;
+
+export type NetworkInterface = NetworkNode | PortNode | NodeGroup | IpNode

FRONT/BUILD/resources/app/src/const/workspace/names.ts

@@ -0,0 +1,8 @@
+import { names } from "../types/types"
+
+export const workSpaceNames: names ={
+    1: 'helloWindow',
+    2: 'aboutFromWork',
+    3: 'networkInterfaces',
+    4: 'aboutFromHello'
+}