|  |  |  | 
|---|
|  |  |  | import * as React from 'react'; | 
|---|
|  |  |  | import { useState } from 'react'; | 
|---|
|  |  |  | import { Paper, Typography, Box, AvatarGroup, Avatar } 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 { red } from '@mui/material/colors'; | 
|---|
|  |  |  | import { red, blue } 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({ | 
|---|
|  |  |  | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <Box display="flex" flexDirection="row" alignItems="center" justifyContent='space-between'> | 
|---|
|  |  |  | <PulseSignal | 
|---|
|  |  |  | flag={true} | 
|---|
|  |  |  | flag={record.online} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <Typography variant="caption" > | 
|---|
|  |  |  | vol: | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }} | 
|---|
|  |  |  | > | 
|---|
|  |  |  | {data.map((record) => ( | 
|---|
|  |  |  | <Avatar | 
|---|
|  |  |  | key={record.id} | 
|---|
|  |  |  | title={`${record.seqNum}`} | 
|---|
|  |  |  | > | 
|---|
|  |  |  | {record.seqNum} | 
|---|
|  |  |  | {data.length > 0 ? ( | 
|---|
|  |  |  | data.map((record) => ( | 
|---|
|  |  |  | <Avatar | 
|---|
|  |  |  | key={record.id} | 
|---|
|  |  |  | title={`${record.seqNum}`} | 
|---|
|  |  |  | sx={{ bgcolor: blue[300] }} | 
|---|
|  |  |  | > | 
|---|
|  |  |  | {record.seqNum.slice(0, 4)} | 
|---|
|  |  |  | </Avatar> | 
|---|
|  |  |  | )) | 
|---|
|  |  |  | ) : ( | 
|---|
|  |  |  | <Avatar title="No tasks" > | 
|---|
|  |  |  | N/A | 
|---|
|  |  |  | </Avatar> | 
|---|
|  |  |  | ))} | 
|---|
|  |  |  | )} | 
|---|
|  |  |  | </AvatarGroup> | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | } | 
|---|