137 lines
No EOL
3.7 KiB
TypeScript
137 lines
No EOL
3.7 KiB
TypeScript
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;
|
||
status: 'online' | 'offline';
|
||
}
|
||
|
||
const CardWrapper = styled.div<{ status: 'online' | 'offline' }>`
|
||
background: white;
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
margin-bottom: 16px;
|
||
|
||
&:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
|
||
}
|
||
`;
|
||
|
||
const CardHeader = styled.div<{ status: 'online' | 'offline' }>`
|
||
background: ${({ status, theme }) =>
|
||
status === 'online' ? theme.successColor : theme.offlineColor};
|
||
color: white;
|
||
padding: 16px;
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
`;
|
||
|
||
|
||
const CardContent = styled.div<{ isExpanded: boolean }>`
|
||
max-height: 0;
|
||
opacity: 0;
|
||
padding: 0 16px;
|
||
transition: all 0.3s ease;
|
||
color: #333;
|
||
font-size: 14px;
|
||
display: grid;
|
||
gap: 12px;
|
||
|
||
${({ isExpanded }) => isExpanded && css`
|
||
max-height: 500px;
|
||
opacity: 1;
|
||
padding: 16px;
|
||
`}
|
||
`;
|
||
|
||
const InfoRow = styled.div`
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
`;
|
||
|
||
const Label = styled.span`
|
||
font-weight: 500;
|
||
color: #666;
|
||
`;
|
||
|
||
const Value = styled.span`
|
||
color: #333;
|
||
`;
|
||
|
||
|
||
const DeviceCard: React.FC<DeviceCardProps> = ({ device, status }) => {
|
||
const [isExpanded, setIsExpanded] = useState(false);
|
||
const toggleExpanded = () => setIsExpanded(!isExpanded);
|
||
const { openModal } = useModalContext();
|
||
|
||
const openModalNote = (e: React.MouseEvent) => {
|
||
e.stopPropagation();
|
||
openModal(ModalMap['6'], {
|
||
address: device.mac,
|
||
currentNote: device.note || ''
|
||
});
|
||
};
|
||
|
||
|
||
return (
|
||
<CardWrapper status={status} onClick={toggleExpanded}>
|
||
<CardHeader status={status}>
|
||
<p>
|
||
MAC: {device.mac}
|
||
</p>
|
||
<span onClick={openModalNote}>
|
||
<IconComponent name={buttonNames[16]} width="28" height="28" setColor={'white'} />
|
||
</span>
|
||
</CardHeader>
|
||
|
||
<CardContent isExpanded={isExpanded}>
|
||
<InfoRow>
|
||
<Label>Имя:</Label>
|
||
<Value>{device.hostname || 'Неизвестно'}</Value>
|
||
</InfoRow>
|
||
|
||
<InfoRow>
|
||
<Label>Производитель:</Label>
|
||
<Value>{device.vendor || 'Неизвестно'}</Value>
|
||
</InfoRow>
|
||
|
||
<InfoRow>
|
||
<Label>IP адрес:</Label>
|
||
<Value>{device.ip}</Value>
|
||
</InfoRow>
|
||
|
||
{device.open_ports?.length > 0 && (
|
||
<InfoRow>
|
||
<Label>Открытые порты:</Label>
|
||
<Value>{device.open_ports.join(', ')}</Value>
|
||
</InfoRow>
|
||
)}
|
||
|
||
<InfoRow>
|
||
<Label>Последняя активность:</Label>
|
||
<Value>{device.last_seen}</Value>
|
||
</InfoRow>
|
||
|
||
<InfoRow>
|
||
<Label>Заметка:</Label>
|
||
<Value>{device.note || '-'}</Value>
|
||
</InfoRow>
|
||
</CardContent>
|
||
</CardWrapper>
|
||
);
|
||
};
|
||
|
||
export default DeviceCard; |