84 lines
2.8 KiB
TypeScript
84 lines
2.8 KiB
TypeScript
|
// components/modalContainers/NoteDevice.tsx
|
|||
|
|
import { ModalContainer, ModalTitle, ModalContent, ButtonContainer } from "../style";
|
|||
|
|
import { MainButton } from "../../UI/buttons/mainButton";
|
|||
|
|
import Input from "../../UI/inputs/input";
|
|||
|
|
import { useState } from "react";
|
|||
|
|
import {NetworkService} from "../../../api/request";
|
|||
|
|
import useNetworkStore from "../../../store/useDeviceStore";
|
|||
|
|
import RouterLoader from "../../UI/routerLoader";
|
|||
|
|
import {useTheme} from "styled-components";
|
|||
|
|
import {useIpStore} from "../../../store";
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
address: string;
|
|||
|
|
onClose: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
export const ConnectNetwork = ({address, onClose}: Props) => {
|
|||
|
|
const [password, setPassword] = useState('');
|
|||
|
|
const theme = useTheme();
|
|||
|
|
const { ipAddress } = useIpStore();
|
|||
|
|
const [error, setError] = useState('');
|
|||
|
|
const [isLoading, setIsLoading] = useState(false);
|
|||
|
|
|
|||
|
|
const handleSave = async () => {
|
|||
|
|
try {
|
|||
|
|
setIsLoading(true);
|
|||
|
|
setError('')
|
|||
|
|
const res = await NetworkService.connectNetwork(ipAddress, password, address);
|
|||
|
|
if(res.status === 200) {
|
|||
|
|
onClose()
|
|||
|
|
}else{
|
|||
|
|
setError(res.data.detail)
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error connection:', error);
|
|||
|
|
setError('Ошибка подключения к сети')
|
|||
|
|
}finally {
|
|||
|
|
setIsLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<ModalContainer style={{ height: '230px' }}>
|
|||
|
|
<ModalTitle>
|
|||
|
|
<h3>Подключение к сети</h3>
|
|||
|
|
</ModalTitle>
|
|||
|
|
|
|||
|
|
<ModalContent style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
|
|||
|
|
<Input
|
|||
|
|
type="password"
|
|||
|
|
placeholderText='Введите пароль...'
|
|||
|
|
value={password}
|
|||
|
|
id='deviceNote'
|
|||
|
|
onChange={(value) => setPassword(value)}
|
|||
|
|
/>
|
|||
|
|
<p style={{ color: 'red', marginLeft: '10px', fontSize: '14px', textAlign: 'right' }}>
|
|||
|
|
{error}
|
|||
|
|
</p>
|
|||
|
|
</ModalContent>
|
|||
|
|
|
|||
|
|
<ButtonContainer>
|
|||
|
|
<MainButton
|
|||
|
|
type="button"
|
|||
|
|
size="small"
|
|||
|
|
title="Отмена"
|
|||
|
|
onClick={onClose}
|
|||
|
|
/>
|
|||
|
|
<MainButton
|
|||
|
|
type="button"
|
|||
|
|
size="small"
|
|||
|
|
color={theme.successColor}
|
|||
|
|
hoverColor={theme.successColor}
|
|||
|
|
title='Подключиться'
|
|||
|
|
onClick={handleSave}
|
|||
|
|
/>
|
|||
|
|
</ButtonContainer>
|
|||
|
|
|
|||
|
|
{isLoading && <RouterLoader loaderText='Попытка подключения к сети'/>}
|
|||
|
|
</ModalContainer>
|
|||
|
|
);
|
|||
|
|
};
|