фронт
This commit is contained in:
test
parent
eb1f18f53e
commit
d67ea17fd7
160 changed files with 2611 additions and 5680 deletions
|
|
@ -1,11 +0,0 @@
|
|||
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 }),
|
||||
}))
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
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)
|
||||
}
|
||||
)
|
||||
)
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
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
|
||||
),
|
||||
})),
|
||||
}));
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
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 };
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
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'
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
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: 'localhost',
|
||||
setIpAddress: (newIp: string) => set({ ipAddress: newIp }),
|
||||
}),
|
||||
{
|
||||
name: 'currentIp-storage',
|
||||
storage: createJSONStorage(()=>localStorage)
|
||||
}
|
||||
)
|
||||
)
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
|
||||
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)
|
||||
}
|
||||
)
|
||||
);
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import {create} from 'zustand';
|
||||
|
||||
interface FlowState {
|
||||
isPanDisabled: boolean;
|
||||
toggleEditingMode: () => void;
|
||||
}
|
||||
|
||||
export const usePannableStore = create<FlowState>((set) => ({
|
||||
isPanDisabled: false,
|
||||
toggleEditingMode: () => set((state) => ({ isPanDisabled: !state.isPanDisabled })),
|
||||
}));
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
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 }),
|
||||
}))
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
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>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
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),
|
||||
}
|
||||
)
|
||||
);
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
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)
|
||||
}
|
||||
)
|
||||
)
|
||||
Loading…
Add table
Add a link
Reference in a new issue