58 lines
2 KiB
TypeScript
58 lines
2 KiB
TypeScript
|
import Input from "../../UI/inputs/input"
|
|||
|
|
import { MainButton } from "../../UI/buttons/mainButton";
|
|||
|
|
import { useState } from "react";
|
|||
|
|
import { ModalContainer, ModalTitle, ModalContent, ModalText, ButtonContainer } from "../style"
|
|||
|
|
import { validateIPAddress } from "../../../utils/nodeController/validator";
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
onSave?: (data: string) => void;
|
|||
|
|
onClose: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export const AddDevice = ({ onSave, onClose }: Props) => {
|
|||
|
|
const [ipAddress, setIpAddress] = useState('')
|
|||
|
|
const [error, setError] = useState(false)
|
|||
|
|
|
|||
|
|
const handleSubmit = () => {
|
|||
|
|
if (!validateIPAddress(ipAddress)) {
|
|||
|
|
setError(true)
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// e.preventDefault(); // Предотвращаем перезагрузку страницы
|
|||
|
|
if (onSave && ipAddress) {
|
|||
|
|
setError(false)
|
|||
|
|
onSave(ipAddress);
|
|||
|
|
onClose();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<ModalContainer style={{ height: '230px' }}>
|
|||
|
|
{/* <form onSubmit={handleSubmit}> */}
|
|||
|
|
<ModalTitle>
|
|||
|
|
<h3>Добавление узла</h3>
|
|||
|
|
</ModalTitle>
|
|||
|
|
|
|||
|
|
<ModalContent style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
|
|||
|
|
<Input
|
|||
|
|
type="text"
|
|||
|
|
placeholderText='Введите адрес узла...'
|
|||
|
|
id="newIp"
|
|||
|
|
value={ipAddress}
|
|||
|
|
onChange={(id, value) => setIpAddress(value)}
|
|||
|
|
/>
|
|||
|
|
{error && (
|
|||
|
|
<p style={{ color: 'red', marginTop: '5px' }}>
|
|||
|
|
Некорректный адрес узла
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</ModalContent>
|
|||
|
|
|
|||
|
|
<ButtonContainer>
|
|||
|
|
<MainButton type="button" size="small" title="Отмена" onClick={onClose} />
|
|||
|
|
<MainButton type="submit" size="small" title="Сохранить" onClick={handleSubmit} />
|
|||
|
|
</ButtonContainer>
|
|||
|
|
{/* </form> */}
|
|||
|
|
</ModalContainer>
|
|||
|
|
)
|
|||
|
|
}
|