| | |
| | | } from 'react-admin'; |
| | | import PulseSignal from '../components/PulseSignal'; |
| | | import { AgvAvatar } from './AgvAvatar'; |
| | | import BatteryCharging90Icon from '@mui/icons-material/BatteryCharging90'; |
| | | import { red } from '@mui/material/colors'; |
| | | |
| | | export const AgvCard = (props) => { |
| | | const resource = useResourceContext(); |
| | |
| | | <PulseSignal |
| | | flag={true} |
| | | /> |
| | | <Box display="flex" alignItems="center"> |
| | | <BatteryCharging90Icon |
| | | <Typography variant="caption" > |
| | | vol: |
| | | <Box |
| | | component={"span"} |
| | | sx={{ |
| | | width: 12, |
| | | height: 12, |
| | | color: record.vol > 50 ? 'green' : record.vol > 20 ? 'orange' : 'red', |
| | | }} |
| | | /> |
| | | <Typography variant="body2"> |
| | | color: record.vol < record.chargeLine ? red[400] : 'inherit' |
| | | }}> |
| | | {record.vol} |
| | | </Typography> |
| | | </Box> |
| | | </Box> |
| | | </Typography> |
| | | </Box> |
| | | <Box display="flex" flexDirection="column" alignItems="center"> |
| | | <AgvAvatar /> |