import React, { useState, useRef, useEffect, useMemo } from "react";
|
import {
|
Box,
|
Card,
|
CardContent,
|
Grid,
|
Typography,
|
Tooltip,
|
Table,
|
TableBody,
|
TableCell,
|
TableHead,
|
TableRow,
|
} from '@mui/material';
|
import {
|
useTranslate,
|
useRecordContext,
|
useGetMany,
|
Link,
|
} from 'react-admin';
|
import PanelTypography from "../components/PanelTypography";
|
import * as Common from '@/utils/common';
|
import { styled } from '@mui/material/styles';
|
import { format } from 'date-fns';
|
|
const BusPanel = () => {
|
const record = useRecordContext();
|
const translate = useTranslate();
|
const taskIds = record ? record.taskIds : [];
|
const { isPending, data: tasks } = useGetMany(
|
'tasks',
|
{ ids: taskIds },
|
{ enabled: !!record }
|
);
|
|
if (isPending || !record) return null;
|
|
return (
|
<>
|
<Card sx={{ maxWidth: '80%', margin: 'auto', mt: .5, mb: .5 }}>
|
<CardContent>
|
<Grid container spacing={2}>
|
<Grid item xs={12} sx={{ display: 'flex', justifyContent: 'space-between' }}>
|
<Typography variant="h5" gutterBottom align="left" sx={{
|
maxWidth: { xs: '100px', sm: '180px', md: '260px', lg: '360px' },
|
whiteSpace: 'nowrap',
|
overflow: 'hidden',
|
textOverflow: 'ellipsis',
|
}}>
|
{Common.camelToPascalWithSpaces(translate('table.field.bus.busNo'))}: {record.busNo}
|
</Typography>
|
{/* inherit, primary, secondary, textPrimary, textSecondary, error */}
|
<Typography variant="h5" gutterBottom align="right" >
|
ID: {record.id}
|
</Typography>
|
</Grid>
|
</Grid>
|
<Grid container spacing={2}>
|
<Grid item xs={12} container alignContent="flex-end">
|
<Typography variant="caption" color="textSecondary" sx={{ wordWrap: 'break-word', wordBreak: 'break-all' }}>
|
{Common.camelToPascalWithSpaces(translate('common.field.memo'))}:{record.memo}
|
</Typography>
|
</Grid>
|
</Grid>
|
<Box height={10}> </Box>
|
<Box>
|
<Table size="small">
|
<TableHead>
|
<TableRow>
|
<TableCell>
|
{translate('table.field.task.seqNum')}
|
</TableCell>
|
<TableCellRight>
|
{translate('table.field.task.taskType')}
|
</TableCellRight>
|
<TableCellRight>
|
{translate('table.field.task.taskSts')}
|
</TableCellRight>
|
<TableCellRight>
|
{translate('table.field.task.agvId')}
|
</TableCellRight>
|
<TableCellRight>
|
{translate('table.field.task.ioTime')}
|
</TableCellRight>
|
<TableCellRight>
|
{translate('table.field.task.oriDesc')}
|
</TableCellRight>
|
<TableCellRight>
|
{translate('table.field.task.destDesc')}
|
</TableCellRight>
|
</TableRow>
|
</TableHead>
|
<TableBody>
|
{tasks.map((task) => (
|
<TableRow key={task.id}>
|
<TableCell>
|
<Link to={`/task/${task.id}`}>
|
|
</Link>
|
{task.seqNum}
|
</TableCell>
|
<TableCellRight>
|
{task.taskType$}
|
</TableCellRight>
|
<TableCellRight>
|
{task.taskSts$}
|
</TableCellRight>
|
<TableCellRight>
|
{task.agvId$}
|
</TableCellRight>
|
<TableCellRight>
|
{format(new Date(task.ioTime), 'yyyy-MM-dd HH:mm:ss')}
|
</TableCellRight>
|
<TableCellRight>
|
{task.oriDesc}
|
</TableCellRight>
|
<TableCellRight>
|
{task.destDesc}
|
</TableCellRight>
|
</TableRow>
|
))}
|
</TableBody>
|
</Table>
|
</Box>
|
</CardContent>
|
</Card >
|
</>
|
);
|
};
|
|
const TableCellRight = styled(TableCell)({ textAlign: 'right' });
|
|
export default BusPanel;
|
