import * as React from 'react';
|
import { useState } from 'react';
|
import { Paper, Typography, Box, Chip, Stack } from '@mui/material';
|
import ContactsIcon from '@mui/icons-material/AccountCircle';
|
import DealIcon from '@mui/icons-material/MonetizationOn';
|
import {
|
useCreatePath,
|
SelectField,
|
useRecordContext,
|
Link,
|
useResourceContext,
|
} from 'react-admin';
|
import PulseSignal from '../components/PulseSignal';
|
import { AgvAvatar } from './AgvAvatar';
|
import BatteryCharging90Icon from '@mui/icons-material/BatteryCharging90';
|
|
export const AgvCard = (props) => {
|
const resource = useResourceContext();
|
const [elevation, setElevation] = useState(1);
|
const createPath = useCreatePath();
|
const record = useRecordContext(props);
|
if (!record) return null;
|
|
console.log(record);
|
|
|
return (
|
<Link
|
to={createPath({
|
resource: resource,
|
id: record.id,
|
type: 'show',
|
})}
|
underline="none"
|
onMouseEnter={() => setElevation(3)}
|
onMouseLeave={() => setElevation(1)}
|
>
|
<Paper
|
sx={{
|
height: 200,
|
display: 'flex',
|
flexDirection: 'column',
|
justifyContent: 'space-between',
|
padding: '1em',
|
}}
|
elevation={elevation}
|
>
|
<Box display="flex" flexDirection="row" alignItems="center" justifyContent='space-between'>
|
<PulseSignal
|
flag={true}
|
/>
|
<Box display="flex" alignItems="center">
|
<BatteryCharging90Icon
|
sx={{
|
width: 12,
|
height: 12,
|
color: record.vol > 50 ? 'green' : record.vol > 20 ? 'orange' : 'red',
|
}}
|
/>
|
<Typography variant="body2">
|
{record.vol}
|
</Typography>
|
</Box>
|
</Box>
|
<Box display="flex" flexDirection="column" alignItems="center">
|
<AgvAvatar />
|
<Box textAlign="center" marginTop={1}>
|
<Typography variant="subtitle2">
|
{record.agvStatus}
|
</Typography>
|
<Typography variant="overline" sx={{ opacity: .7 }}>
|
code: {record.code}
|
</Typography>
|
</Box>
|
</Box>
|
<Box display="flex" justifyContent="space-around" width="100%">
|
<Box display="flex" alignItems="center">
|
<ContactsIcon color="disabled" sx={{ mr: 1 }} />
|
<div>
|
<Typography variant="subtitle2" sx={{ mb: -1 }}>
|
{record.nb_contacts}
|
</Typography>
|
<Typography variant="caption" color="textSecondary">
|
{record.nb_contacts
|
? record.nb_contacts > 1
|
? 'contacts'
|
: 'contact'
|
: 'contact'}
|
</Typography>
|
</div>
|
</Box>
|
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
<DealIcon color="disabled" sx={{ mr: 1 }} />
|
<div>
|
<Typography variant="subtitle2" sx={{ mb: -1 }}>
|
{record.nb_deals}
|
</Typography>
|
<Typography variant="caption" color="textSecondary">
|
{record.nb_deals
|
? record.nb_deals > 1
|
? 'deals'
|
: 'deal'
|
: 'deal'}
|
</Typography>
|
</div>
|
</Box>
|
</Box>
|
</Paper>
|
</Link>
|
);
|
};
|
