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

FRONT/DEV/src/components/UI/Dropdown/DeviceCard.tsx

@@ -1,6 +1,10 @@
-import React from 'react';
+import React, {useState} from 'react';
 import styled, { css } from 'styled-components';
 import { DeviceUser } from "../../../store/useDeviceStore";
+import {buttonNames} from "../../../const/buttons/names";
+import {ModalMap} from "../../modalwindows/windowsType";
+import {IconComponent} from "../../../const/buttons/icons";
+import {useModalContext} from "../../../store";
 
 interface DeviceCardProps {
     device: DeviceUser;
@@ -24,7 +28,7 @@ const CardWrapper = styled.div<{ status: 'online' | 'offline' }>`
 
 const CardHeader = styled.div<{ status: 'online' | 'offline' }>`
     background: ${({ status, theme }) =>
-            status === 'online' ? theme.successColor : theme.errorColor};
+            status === 'online' ? theme.successColor : theme.offlineColor};
     color: white;
     padding: 16px;
     font-size: 18px;
@@ -67,9 +71,19 @@ const Value = styled.span`
   color: #333;
 `;
 
+
 const DeviceCard: React.FC<DeviceCardProps> = ({ device, status }) => {
-    const [isExpanded, setIsExpanded] = React.useState(false);
+    const [isExpanded, setIsExpanded] = useState(false);
     const toggleExpanded = () => setIsExpanded(!isExpanded);
+    const { openModal } = useModalContext();
+
+    const openModalNote = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        openModal(ModalMap['6'], {
+            mac: device.mac,
+            currentNote: device.note || ''
+        });
+    };
 
 
     return (
@@ -78,6 +92,9 @@ const DeviceCard: React.FC<DeviceCardProps> = ({ device, status }) => {
                 <p>
                     MAC: {device.mac}
                 </p>
+                <span onClick={openModalNote}>
+                    <IconComponent name={buttonNames[7]} width="24" height="24" setColor={'white'} />
+                </span>
             </CardHeader>
 
             <CardContent isExpanded={isExpanded}>
@@ -107,6 +124,11 @@ const DeviceCard: React.FC<DeviceCardProps> = ({ device, status }) => {
                     <Label>Последняя активность:</Label>
                     <Value>{device.last_seen}</Value>
                 </InfoRow>
+
+                <InfoRow>
+                    <Label>Заметка:</Label>
+                    <Value>{device.note || '-'}</Value>
+                </InfoRow>
             </CardContent>
         </CardWrapper>
     );