120 lines
3.0 KiB
JavaScript
120 lines
3.0 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import { Typography, Tag } from 'antd' // eslint-disable-line
|
|
import {
|
|
CheckCircleOutlined,
|
|
PauseCircleOutlined,
|
|
QuestionCircleOutlined,
|
|
PlayCircleOutlined,
|
|
CloseCircleOutlined
|
|
} from '@ant-design/icons' // eslint-disable-line
|
|
import React, { useState, useContext, useEffect } from 'react'
|
|
import { SocketContext } from '../context/SocketContext'
|
|
|
|
const SubJobCounter = ({
|
|
job,
|
|
showIcon = true,
|
|
state = { type: 'complete' }
|
|
}) => {
|
|
const { socket } = useContext(SocketContext)
|
|
const [initialized, setInitialized] = useState(false)
|
|
var badgeStatus = 'unknown'
|
|
var badgeIcon = <QuestionCircleOutlined />
|
|
const [subJobs, setSubJobs] = useState(job.subJobs)
|
|
|
|
const [count, setCount] = useState(0)
|
|
|
|
useEffect(() => {
|
|
if (socket && !initialized && job?.id) {
|
|
setInitialized(true)
|
|
console.log('on notify_subjob_update')
|
|
socket.on('notify_subjob_update', (statusUpdate) => {
|
|
for (const subJob of job.subJobs) {
|
|
if (statusUpdate?._id === subJob.id && statusUpdate?.state) {
|
|
console.log('statusUpdate', statusUpdate)
|
|
setSubJobs((prev) => [...prev, statusUpdate])
|
|
}
|
|
}
|
|
})
|
|
}
|
|
return () => {
|
|
if (socket && initialized) {
|
|
console.log('off notify_subjob_update')
|
|
socket.off('notify_subjob_update')
|
|
}
|
|
}
|
|
}, [socket, initialized, job?.subJobs, job?.id])
|
|
|
|
switch (state.type) {
|
|
case 'draft':
|
|
badgeStatus = 'default'
|
|
badgeIcon = <QuestionCircleOutlined />
|
|
break
|
|
case 'printing':
|
|
badgeStatus = 'processing'
|
|
badgeIcon = <PlayCircleOutlined />
|
|
break
|
|
case 'complete':
|
|
badgeStatus = 'success'
|
|
badgeIcon = <CheckCircleOutlined />
|
|
break
|
|
case 'failed':
|
|
badgeStatus = 'error'
|
|
badgeIcon = <CloseCircleOutlined />
|
|
break
|
|
case 'queued':
|
|
badgeStatus = 'warning'
|
|
badgeIcon = <PauseCircleOutlined />
|
|
break
|
|
case 'paused':
|
|
badgeStatus = 'warning'
|
|
badgeIcon = <PauseCircleOutlined />
|
|
break
|
|
case 'cancelled':
|
|
badgeIcon = <CloseCircleOutlined />
|
|
break
|
|
default:
|
|
badgeStatus = 'default'
|
|
}
|
|
|
|
useEffect(() => {
|
|
setCount(0)
|
|
for (let subJob of subJobs) {
|
|
if (subJob.state.type === state.type) {
|
|
setCount((prevCount) => prevCount + 1)
|
|
}
|
|
}
|
|
}, [subJobs, state.type])
|
|
|
|
return (
|
|
<Tag
|
|
count={badgeIcon}
|
|
color={badgeStatus}
|
|
icon={showIcon ? badgeIcon : null}
|
|
>
|
|
{count.toString()}
|
|
</Tag>
|
|
)
|
|
}
|
|
|
|
SubJobCounter.propTypes = {
|
|
state: PropTypes.shape({
|
|
type: PropTypes.string
|
|
}),
|
|
job: PropTypes.shape({
|
|
id: PropTypes.string,
|
|
subJobs: PropTypes.arrayOf(
|
|
PropTypes.shape({
|
|
id: PropTypes.string,
|
|
subJobId: PropTypes.string,
|
|
state: PropTypes.shape({
|
|
type: PropTypes.string,
|
|
progress: PropTypes.number
|
|
})
|
|
})
|
|
)
|
|
}),
|
|
showIcon: PropTypes.bool
|
|
}
|
|
|
|
export default SubJobCounter
|