119 lines
3.1 KiB
JavaScript
119 lines
3.1 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import { Badge, Progress, Flex, Space, Tag, Typography } from 'antd'
|
|
import { green, red } from '@ant-design/colors'
|
|
import React, { useState, useContext, useEffect } from 'react'
|
|
import { SocketContext } from '../context/SocketContext'
|
|
|
|
const FilamentStockState = ({
|
|
filamentStock,
|
|
showProgress = true,
|
|
showStatus = true,
|
|
showFilamentStockName = true
|
|
}) => {
|
|
const { socket } = useContext(SocketContext)
|
|
const [badgeStatus, setBadgeStatus] = useState('unknown')
|
|
const [badgeText, setBadgeText] = useState('Unknown')
|
|
const [currentState, setCurrentState] = useState(
|
|
filamentStock?.state || {
|
|
type: 'unknown',
|
|
progress: 0
|
|
}
|
|
)
|
|
const [initialized, setInitialized] = useState(false)
|
|
const { Text } = Typography
|
|
|
|
useEffect(() => {
|
|
if (socket && !initialized && filamentStock?._id) {
|
|
setInitialized(true)
|
|
socket.on('notify_filamentstock_update', (statusUpdate) => {
|
|
if (statusUpdate?.id === filamentStock._id && statusUpdate?.state) {
|
|
setCurrentState(statusUpdate.state)
|
|
}
|
|
})
|
|
}
|
|
return () => {
|
|
if (socket && initialized) {
|
|
socket.off('notify_filamentstock_update')
|
|
}
|
|
}
|
|
}, [socket, initialized, filamentStock?._id])
|
|
|
|
useEffect(() => {
|
|
switch (currentState.type) {
|
|
case 'unconsumed':
|
|
setBadgeStatus('success')
|
|
setBadgeText('Unconsumed')
|
|
break
|
|
case 'partiallyconsumed':
|
|
setBadgeStatus('warning')
|
|
setBadgeText('Partially Consumed')
|
|
break
|
|
case 'fullyconsumed':
|
|
setBadgeStatus('error')
|
|
setBadgeText('Fully Consumed')
|
|
break
|
|
case 'error':
|
|
setBadgeStatus('error')
|
|
setBadgeText('Error')
|
|
break
|
|
default:
|
|
setBadgeStatus('default')
|
|
setBadgeText(currentState.type)
|
|
}
|
|
}, [currentState])
|
|
|
|
return (
|
|
<Flex gap='middle' align={'center'}>
|
|
{showFilamentStockName && <Text>{filamentStock.name}</Text>}
|
|
{showStatus && (
|
|
<Space>
|
|
<Tag color={badgeStatus} style={{ marginRight: 0 }}>
|
|
<Flex gap={6}>
|
|
<Badge status={badgeStatus} />
|
|
{badgeText}
|
|
</Flex>
|
|
</Tag>
|
|
</Space>
|
|
)}
|
|
{showProgress && currentState.type === 'partiallyconsumed' ? (
|
|
<Progress
|
|
percent={Math.round(currentState.percent * 100)}
|
|
style={{ width: '150px', marginBottom: '2px' }}
|
|
steps={7}
|
|
strokeColor={[
|
|
green[5],
|
|
green[5],
|
|
green[5],
|
|
green[4],
|
|
green[3],
|
|
red[4],
|
|
red[5]
|
|
]}
|
|
/>
|
|
) : null}
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
FilamentStockState.propTypes = {
|
|
filamentStock: PropTypes.shape({
|
|
_id: PropTypes.string,
|
|
name: PropTypes.string,
|
|
state: PropTypes.shape({
|
|
type: PropTypes.oneOf([
|
|
'unconsumed',
|
|
'partiallyconsumed',
|
|
'fullyconsumed',
|
|
'error',
|
|
'unknown'
|
|
]),
|
|
progress: PropTypes.number
|
|
})
|
|
}),
|
|
showProgress: PropTypes.bool,
|
|
showStatus: PropTypes.bool,
|
|
showFilamentStockName: PropTypes.bool
|
|
}
|
|
|
|
export default FilamentStockState
|