import * as React from 'react';
|
import { useState } from 'react';
|
import { Paper, Typography, Box, AvatarGroup, Avatar } from '@mui/material';
|
import {
|
useCreatePath,
|
useRecordContext,
|
Link,
|
useResourceContext,
|
useDataProvider,
|
} from 'react-admin';
|
import PulseSignal from '../components/PulseSignal';
|
import { AgvAvatar } from './AgvAvatar';
|
import { red, blue, blueGrey } from '@mui/material/colors';
|
|
export const AgvCard = (props) => {
|
const resource = useResourceContext();
|
const [elevation, setElevation] = useState(1);
|
const createPath = useCreatePath();
|
const record = useRecordContext(props);
|
if (!record) return null;
|
|
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',
|
...(!record.online && {
|
animation: 'cardBorderPulse 2s infinite',
|
'@keyframes cardBorderPulse': {
|
'0%': {
|
boxShadow: '0 0 2px 1px rgba(255, 0, 0, 0.1)',
|
},
|
'50%': {
|
boxShadow: '0 0 3px 2px rgba(255, 0, 0, 0.3)',
|
},
|
'100%': {
|
boxShadow: '0 0 2px 1px rgba(255, 0, 0, 0.1)',
|
},
|
},
|
})
|
}}
|
elevation={elevation}
|
>
|
<Box display="flex" flexDirection="row" alignItems="center" justifyContent='space-between'>
|
<PulseSignal
|
flag={record.online}
|
/>
|
<Typography variant="caption" >
|
vol:
|
<Box
|
component={"span"}
|
sx={{
|
color: record.vol < record.chargeLine ? red[400] : 'inherit'
|
}}>
|
{record.vol}
|
</Box>
|
</Typography>
|
</Box>
|
<Box display="flex" flexDirection="column" alignItems="center">
|
<AgvAvatar />
|
<Box textAlign="center" marginTop={2}>
|
<Typography
|
variant="subtitle2"
|
color="textSecondary"
|
component="div"
|
sx={{ fontWeight: 'bold' }}
|
>
|
{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">
|
<TaskAvatarGroupIterator taskIds={record.taskIds} />
|
</Box>
|
</Box>
|
</Paper>
|
</Link>
|
);
|
};
|
|
const TaskAvatarGroupIterator = ({ taskIds }) => {
|
const dataProvider = useDataProvider();
|
const [data, setData] = React.useState([]);
|
const [total, setTotal] = React.useState(0);
|
|
React.useEffect(() => {
|
if (taskIds?.length > 0) {
|
dataProvider.getMany('task', { ids: taskIds }).then(res => {
|
if (res.data?.length > 0) {
|
setTotal(res.data.length);
|
setData(res.data);
|
}
|
})
|
}
|
}, [taskIds])
|
|
return (
|
<AvatarGroup
|
max={4}
|
total={total}
|
spacing="medium"
|
sx={{
|
'& .MuiAvatar-circular': {
|
width: 35,
|
height: 25,
|
fontSize: '0.7rem',
|
},
|
}}
|
>
|
{data.length > 0 ? (
|
data.map((record) => (
|
<Avatar
|
key={record.id}
|
title={`${record.seqNum}`}
|
sx={{ bgcolor: blueGrey[500] }}
|
>
|
{record.seqNum.slice(0, 4)}
|
</Avatar>
|
))
|
) : (
|
<Avatar title="No tasks" >
|
N/A
|
</Avatar>
|
)}
|
</AvatarGroup>
|
);
|
}
|
