81 lines
2.7 KiB
TypeScript
81 lines
2.7 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 {useIpStore} from "../../../store";
|
||
|
|
import {NetworkService} from "../../../api/request";
|
||
|
|
import useNetworkStore from "../../../store/useDeviceStore";
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
mac: string;
|
||
|
|
onClose: () => void;
|
||
|
|
currentNote?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
export const NoteDevice = ({ mac, onClose, currentNote}: Props) => {
|
||
|
|
const [note, setNote] = useState(currentNote || '');
|
||
|
|
const { ipAddress } = useIpStore();
|
||
|
|
const { devices, setDevices } = useNetworkStore();
|
||
|
|
|
||
|
|
const handleSave = async () => {
|
||
|
|
try {
|
||
|
|
if (!currentNote && note.trim() !== '') {
|
||
|
|
await NetworkService.addNote(ipAddress, mac, note);
|
||
|
|
}else if (currentNote && note.trim() !== '' && note !== currentNote) {
|
||
|
|
await NetworkService.editNote(ipAddress, mac, note);
|
||
|
|
}else if (currentNote && note.trim() === '') {
|
||
|
|
await NetworkService.deleteNote(ipAddress, mac);
|
||
|
|
}else {
|
||
|
|
onClose();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const updatedDevices = devices.map(device =>
|
||
|
|
device.mac === mac
|
||
|
|
? { ...device, note: note.trim() }
|
||
|
|
: device
|
||
|
|
);
|
||
|
|
setDevices(updatedDevices);
|
||
|
|
onClose();
|
||
|
|
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error saving note:', error);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ModalContainer style={{ height: '250px' }}>
|
||
|
|
<ModalTitle>
|
||
|
|
<h3>{currentNote ? 'Редактирование заметки' : 'Добавление заметки'}</h3>
|
||
|
|
</ModalTitle>
|
||
|
|
|
||
|
|
<ModalContent style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
|
||
|
|
<Input
|
||
|
|
type="text"
|
||
|
|
placeholderText='Введите заметку...'
|
||
|
|
value={note}
|
||
|
|
id='deviceNote'
|
||
|
|
onChange={(value) => setNote(value)}
|
||
|
|
/>
|
||
|
|
</ModalContent>
|
||
|
|
|
||
|
|
<ButtonContainer>
|
||
|
|
<MainButton
|
||
|
|
type="button"
|
||
|
|
size="small"
|
||
|
|
title="Отмена"
|
||
|
|
onClick={onClose}
|
||
|
|
/>
|
||
|
|
<MainButton
|
||
|
|
type="button"
|
||
|
|
size="small"
|
||
|
|
title='Сохранить'
|
||
|
|
onClick={handleSave}
|
||
|
|
/>
|
||
|
|
</ButtonContainer>
|
||
|
|
</ModalContainer>
|
||
|
|
);
|
||
|
|
};
|