78 lines
2.1 KiB
JavaScript
78 lines
2.1 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import { Progress, Flex, Typography, Space } from 'antd'
|
|
import React, { useState, useContext, useEffect } from 'react'
|
|
import { PrintServerContext } from '../context/PrintServerContext'
|
|
import IdDisplay from './IdDisplay'
|
|
import StateTag from './StateTag'
|
|
|
|
const JobState = ({
|
|
job,
|
|
showProgress = true,
|
|
showStatus = true,
|
|
showId = true,
|
|
showQuantity = true
|
|
}) => {
|
|
const { printServer } = useContext(PrintServerContext)
|
|
const [currentState, setCurrentState] = useState(
|
|
job?.state || { type: 'unknown', progress: 0 }
|
|
)
|
|
const [initialized, setInitialized] = useState(false)
|
|
const { Text } = Typography
|
|
|
|
useEffect(() => {
|
|
if (printServer && !initialized && job?._id) {
|
|
setInitialized(true)
|
|
printServer.on('notify_job_update', (statusUpdate) => {
|
|
if (statusUpdate?._id === job._id && statusUpdate?.state) {
|
|
setCurrentState(statusUpdate.state)
|
|
}
|
|
})
|
|
}
|
|
return () => {
|
|
if (printServer && initialized) {
|
|
printServer.off('notify_job_update')
|
|
}
|
|
}
|
|
}, [printServer, initialized, job?._id])
|
|
|
|
return (
|
|
<Flex gap='small' align={'center'}>
|
|
{showId && (
|
|
<IdDisplay id={job._id} showCopy={false} type='job' longId={false} />
|
|
)}
|
|
{showQuantity && <Text>({job.quantity})</Text>}
|
|
{showStatus && (
|
|
<Space>
|
|
<StateTag state={currentState?.type} />
|
|
</Space>
|
|
)}
|
|
{showProgress &&
|
|
(currentState.type === 'printing' ||
|
|
currentState.type === 'processing') ? (
|
|
<Progress
|
|
percent={Math.round(currentState.progress * 100)}
|
|
status='active'
|
|
style={{ width: '150px', marginBottom: '2px' }}
|
|
/>
|
|
) : null}
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
JobState.propTypes = {
|
|
job: PropTypes.shape({
|
|
_id: PropTypes.string,
|
|
quantity: PropTypes.number,
|
|
state: PropTypes.shape({
|
|
type: PropTypes.string,
|
|
progress: PropTypes.number
|
|
})
|
|
}),
|
|
showProgress: PropTypes.bool,
|
|
showQuantity: PropTypes.bool,
|
|
showId: PropTypes.bool,
|
|
showStatus: PropTypes.bool
|
|
}
|
|
|
|
export default JobState
|