Добавление заметок

FRONT/DEV/src/components/modalwindows/modalContainers/NoteDevice.tsx

@@ -0,0 +1,81 @@
+// 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>
+    );
+};

FRONT/DEV/src/components/modalwindows/modalWindow.tsx

@@ -3,6 +3,7 @@ import { IpConfirm, ConnectionError, AddDevice, RightsConfirm } from "./modalCon
 import { ModalMap } from "./windowsType";
 import Loader from "../UI/loader";
 import { ModalWindow } from "./style";
+import {NoteDevice} from "./modalContainers/NoteDevice";
 
 type Props = {
     isOpen: boolean,
@@ -35,6 +36,13 @@ export default function WindowComponent({ isOpen, type, data }: Props) {
                             message={data.message}
                         />
                     }
+                    {type === ModalMap['6'] && (
+                        <NoteDevice
+                            mac={data.mac}
+                            currentNote={data.currentNote}
+                            onClose={closeLoader}
+                        />
+                    )}
 
                     {type === ModalMap['4'] && (
                         <AddDevice onSave={data?.onSave} onClose={closeLoader} />

FRONT/DEV/src/components/modalwindows/style.ts

@@ -24,7 +24,7 @@ export const ModalContainer = styled.div<{height?: string}>`
     flex-direction: column;
     justify-content: space-between;
     gap: 15px;          
-    height: ${(props) => props.height ? props.height : '200px'};
+    height: ${(props) => props.height ? props.height : '230px'};
     width: 520px;
 `
 

FRONT/DEV/src/components/modalwindows/windowsType.ts

@@ -5,5 +5,6 @@ export const ModalMap: ModalType = {
     '2': 'loader',
     '3': 'connectionError',
     '4': 'addDevice',
-    '5': 'sudo'
+    '5': 'sudo',
+    '6': 'noteDevice',
 }