Added new InfoCollapse sections for Online Printers and Queued Jobs in ProductionOverview, including ObjectTable components for data display and updated collapse states for better user interaction.

This commit is contained in:
Tom Butcher 2025-12-09 02:10:35 +00:00
parent 5f33ed69fb
commit d8bfc19917

View File

@ -7,6 +7,7 @@ import InfoCollapse from '../common/InfoCollapse'
import ScrollBox from '../common/ScrollBox'
import { ApiServerContext } from '../context/ApiServerContext'
import ObjectTable from '../common/ObjectTable'
const ProductionOverview = () => {
const { connected } = useContext(ApiServerContext)
@ -16,6 +17,7 @@ const ProductionOverview = () => {
{
printerStats: true,
printerHistory: true,
onlinePrinters: true,
jobStats: true,
productionStats: true,
jobStatsDetails: true
@ -40,6 +42,7 @@ const ProductionOverview = () => {
<InfoCollapse
title='Printer Statistics'
icon={null}
canCollapse={false}
active={collapseState.printerStats}
onToggle={(isActive) =>
updateCollapseState('printerStats', isActive)
@ -60,6 +63,7 @@ const ProductionOverview = () => {
<InfoCollapse
title='Job Statistics'
icon={null}
canCollapse={false}
active={collapseState.jobStats}
onToggle={(isActive) => updateCollapseState('jobStats', isActive)}
className='no-t-padding-collapse'
@ -76,7 +80,7 @@ const ProductionOverview = () => {
</InfoCollapse>
<Flex gap='large' wrap='wrap'>
<Flex flex={1} vertical style={{ minWidth: '300px' }}>
<Flex flex={1} vertical style={{ minWidth: '300px' }} gap='large'>
<InfoCollapse
title='Printer History'
icon={null}
@ -89,8 +93,20 @@ const ProductionOverview = () => {
>
<HistoryDisplay objectType='printer' />
</InfoCollapse>
<InfoCollapse
title='Online Printers'
icon={null}
active={collapseState.onlinePrinters}
onToggle={(isActive) =>
updateCollapseState('onlinePrinters', isActive)
}
collapseKey='onlinePrinters'
canCollapse={false}
>
<ObjectTable type='printer' masterFilter={{ online: true }} />
</InfoCollapse>
</Flex>
<Flex flex={1} vertical style={{ minWidth: '300px' }}>
<Flex flex={1} vertical style={{ minWidth: '300px' }} gap='large'>
<InfoCollapse
title='Job History'
icon={null}
@ -103,6 +119,21 @@ const ProductionOverview = () => {
>
<HistoryDisplay objectType='job' />
</InfoCollapse>
<InfoCollapse
title='Queued Jobs'
icon={null}
active={collapseState.queuedJobs}
onToggle={(isActive) =>
updateCollapseState('queuedJobs', isActive)
}
canCollapse={false}
collapseKey='queuedJobs'
>
<ObjectTable
type='job'
masterFilter={{ 'state.type': 'queued' }}
/>
</InfoCollapse>
</Flex>
</Flex>
</Flex>