85 lines
3.2 KiB
JavaScript
85 lines
3.2 KiB
JavaScript
import React from 'react';
|
|
import { Card, Button, Row, Col, Typography, Space, Tag } from 'antd';
|
|
import { EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
|
|
|
|
const { Text } = Typography;
|
|
|
|
const CardDevice = ({ data, showPreviewModal, showEditModal, showDeleteDialog }) => {
|
|
const getCardStyle = () => {
|
|
const color = '#FF8C42'; // Orange color
|
|
return {
|
|
border: `2px solid ${color}`,
|
|
borderRadius: '8px',
|
|
textAlign: 'center' // Center text
|
|
};
|
|
};
|
|
|
|
const getTitleStyle = () => {
|
|
const backgroundColor = '#FF8C42'; // Orange color
|
|
return {
|
|
backgroundColor,
|
|
color: '#fff',
|
|
padding: '2px 8px',
|
|
borderRadius: '4px',
|
|
display: 'inline-block',
|
|
};
|
|
};
|
|
|
|
return (
|
|
<Row gutter={[16, 16]} style={{ marginTop: '16px', justifyContent: 'center' }}>
|
|
{data.map((item) => (
|
|
<Col xs={24} sm={12} md={8} lg={6} key={item.device_id}>
|
|
<Card
|
|
title={
|
|
<span style={getTitleStyle()}>
|
|
{item.device_name}
|
|
</span>
|
|
}
|
|
style={getCardStyle()}
|
|
actions={[
|
|
<Space size="middle" style={{ display: 'flex', justifyContent: 'center' }}>
|
|
<Button
|
|
type="text"
|
|
style={{ color: '#1890ff' }}
|
|
icon={<EyeOutlined />}
|
|
onClick={() => showPreviewModal(item)}
|
|
/>
|
|
<Button
|
|
type="text"
|
|
style={{ color: '#faad14' }}
|
|
icon={<EditOutlined />}
|
|
onClick={() => showEditModal(item)}
|
|
/>
|
|
<Button
|
|
type="text"
|
|
danger
|
|
icon={<DeleteOutlined />}
|
|
onClick={() => showDeleteDialog(item)}
|
|
/>
|
|
</Space>,
|
|
]}
|
|
>
|
|
<p>
|
|
<Text strong>Code:</Text> {item.device_code}
|
|
</p>
|
|
<p>
|
|
<Text strong>Location:</Text> {item.device_location}
|
|
</p>
|
|
<p>
|
|
<Text strong>IP Address:</Text> {item.ip_address}
|
|
</p>
|
|
<p>
|
|
<Text strong>Status:</Text>{' '}
|
|
<Tag color={item.device_status ? 'green' : 'red'}>
|
|
{item.device_status ? 'Running' : 'Offline'}
|
|
</Tag>
|
|
</p>
|
|
</Card>
|
|
</Col>
|
|
))}
|
|
</Row>
|
|
);
|
|
};
|
|
|
|
export default CardDevice;
|