| | |
| | | } from 'react-admin'; |
| | | import PulseSignal from '../components/PulseSignal'; |
| | | import { AgvAvatar } from './AgvAvatar'; |
| | | import { red, blue } from '@mui/material/colors'; |
| | | import { red, blue, blueGrey } from '@mui/material/colors'; |
| | | |
| | | export const AgvCard = (props) => { |
| | | const resource = useResourceContext(); |
| | |
| | | const createPath = useCreatePath(); |
| | | const record = useRecordContext(props); |
| | | if (!record) return null; |
| | | console.log(record); |
| | | |
| | | return ( |
| | | <Link |
| | | to={createPath({ |
| | |
| | | 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="column" alignItems="center"> |
| | | <AgvAvatar /> |
| | | <Box textAlign="center" marginTop={2}> |
| | | <Typography variant="subtitle2"> |
| | | <Typography |
| | | variant="subtitle2" |
| | | color="textSecondary" |
| | | component="div" |
| | | sx={{ fontWeight: 'bold' }} |
| | | > |
| | | {record.agvStatus} |
| | | </Typography> |
| | | <Typography variant="overline" sx={{ opacity: .7 }}> |
| | |
| | | <Avatar |
| | | key={record.id} |
| | | title={`${record.seqNum}`} |
| | | sx={{ bgcolor: blue[300] }} |
| | | sx={{ bgcolor: blueGrey[500] }} |
| | | > |
| | | {record.seqNum.slice(0, 4)} |
| | | </Avatar> |