|  |  |  | 
|---|
|  |  |  | } 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> | 
|---|