| | |
| | | import { Draggable } from '@hello-pangea/dnd'; |
| | | import { Box, Card, Typography, Avatar, Divider, Stack, Slider } from '@mui/material'; |
| | | import { ReferenceField, useRedirect } from 'react-admin'; |
| | | import { Box, Card, Typography, Avatar, Divider, Stack, Slider, useTheme } from '@mui/material'; |
| | | import { ReferenceField, useRedirect, useTranslate } from 'react-admin'; |
| | | import { blueGrey } from '@mui/material/colors'; |
| | | import { styled } from '@mui/material/styles'; |
| | | |
| | | export const MissionCard = ({ mission, index }) => { |
| | | if (!mission) return null; |
| | |
| | | }; |
| | | |
| | | export const MissionCardContent = ({ provided, snapshot, mission, }) => { |
| | | const theme = useTheme(); |
| | | const translate = useTranslate(); |
| | | const redirect = useRedirect(); |
| | | const handleClick = () => { |
| | | redirect(`/mission/${mission.id}/show`, undefined, undefined, undefined, { |
| | | _scrollToTop: false, |
| | | }); |
| | | }; |
| | | |
| | | console.log(mission); |
| | | |
| | | |
| | | return ( |
| | | <Box |
| | |
| | | sx={{ |
| | | width: 30, |
| | | height: 30, |
| | | // bgcolor: blueGrey[500], |
| | | bgcolor: theme.palette.primary.main, |
| | | }} |
| | | > |
| | | {mission.agv} |
| | | </Avatar> |
| | | <Divider orientation="vertical" flexItem sx={{ margin: '0 8px' }} /> |
| | | <Typography variant="h6" noWrap> |
| | | <Typography variant="body1" noWrap> |
| | | {mission.groupNo} |
| | | </Typography> |
| | | </Box> |
| | | <Box sx={{}}> |
| | | <Stack direction="row" justifyContent="space-between"> |
| | | <Box> |
| | | <Stack direction="row" justifyContent="space-between" mb={1}> |
| | | <Typography variant="caption" color="textSecondary"> |
| | | Backpack: {mission.backpack} |
| | | {translate('table.field.mission.backpack')} : {mission.backpack} |
| | | </Typography> |
| | | <Typography variant="caption" color="textPrimary"> |
| | | Code: {mission.destCode} |
| | | {translate('table.field.mission.code')}: {mission.currCode} |
| | | </Typography> |
| | | </Stack> |
| | | <Stack direction="row" justifyContent="space-between"> |
| | | <Divider orientation="horizontal" flexItem /> |
| | | <Stack direction="row" justifyContent="space-between" > |
| | | <Typography variant="overline"> |
| | | Task: [{mission.taskNos.join(',')}] |
| | | {translate('table.field.mission.task')}: [{mission.taskNos.join(',')}] |
| | | </Typography> |
| | | </Stack> |
| | | <Stack direction="row"> |
| | | <Slider /> |
| | | <Stack pl={0.5} pr={0.5} direction="row" spacing={1} alignItems="center" mb={.6}> |
| | | <Slider |
| | | aria-label="Progress" |
| | | defaultValue={mission.progress} |
| | | getAriaValueText={(value) => { |
| | | return `${value}%`; |
| | | }} |
| | | color="secondary" |
| | | size="small" |
| | | marks |
| | | /> |
| | | </Stack> |
| | | </Box> |
| | | </Box> |