86 lines
2.1 KiB
JavaScript
86 lines
2.1 KiB
JavaScript
// PrinterSelect.js
|
|
import PropTypes from 'prop-types'
|
|
import { Progress, Flex, Space, Modal, Button, Typography } from 'antd'
|
|
import StateTag from './StateTag'
|
|
import InfoCircleIcon from '../../Icons/InfoCircleIcon'
|
|
import { useState } from 'react'
|
|
|
|
const { Text } = Typography
|
|
|
|
const StateDisplay = ({
|
|
state,
|
|
showProgress = true,
|
|
showState = true,
|
|
showMessage = true
|
|
}) => {
|
|
const loadingProgressTypes = [
|
|
'loading',
|
|
'processing',
|
|
'queued',
|
|
'printing',
|
|
'used',
|
|
'deploying'
|
|
]
|
|
const orangeProgressTypes = ['used', 'deploying', 'queued']
|
|
const activeProgressTypes = ['printing', 'deploying']
|
|
|
|
const currentState = state || {
|
|
type: 'unknown',
|
|
progress: 0
|
|
}
|
|
const [showMessageModal, setShowMessageModal] = useState(false)
|
|
return (
|
|
<>
|
|
<Flex gap='small' align={'center'}>
|
|
{showState && (
|
|
<Space>
|
|
<StateTag state={currentState.type} />
|
|
</Space>
|
|
)}
|
|
{showProgress &&
|
|
loadingProgressTypes.includes(currentState.type) &&
|
|
currentState?.progress &&
|
|
currentState?.progress > 0 ? (
|
|
<Progress
|
|
percent={Math.round(currentState.progress * 100)}
|
|
status={
|
|
activeProgressTypes.includes(currentState.type) ? 'active' : ''
|
|
}
|
|
strokeColor={
|
|
orangeProgressTypes.includes(currentState.type) ? 'orange' : ''
|
|
}
|
|
style={{ maxWidth: '200px', marginBottom: '2px' }}
|
|
/>
|
|
) : null}
|
|
|
|
{showMessage && currentState?.message && (
|
|
<Button
|
|
type='text'
|
|
size='small'
|
|
style={{ padding: '4px' }}
|
|
onClick={() => setShowMessageModal(true)}
|
|
>
|
|
<InfoCircleIcon />
|
|
</Button>
|
|
)}
|
|
</Flex>
|
|
<Modal
|
|
open={showMessageModal}
|
|
onCancel={() => setShowMessageModal(false)}
|
|
footer={null}
|
|
>
|
|
<Text>{currentState.message}</Text>
|
|
</Modal>
|
|
</>
|
|
)
|
|
}
|
|
|
|
StateDisplay.propTypes = {
|
|
state: PropTypes.object,
|
|
showProgress: PropTypes.bool,
|
|
showState: PropTypes.bool,
|
|
showMessage: PropTypes.bool
|
|
}
|
|
|
|
export default StateDisplay
|