Add filament stock management to ControlPrinter component with modal integration for loading and unloading filament. Implement new actions for pausing, resuming, and canceling jobs, enhancing printer control functionality.

src/components/Dashboard/Production/Printers/ControlPrinter.jsx

@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect, useContext } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Space, Flex, Card, Splitter, Divider } from 'antd'
+import { Space, Flex, Card, Splitter, Divider, Modal } from 'antd'
 import loglevel from 'loglevel'
 import config from '../../../../config.js'
 import useCollapseState from '../../hooks/useCollapseState.js'
@@ -28,6 +28,9 @@ import { useMediaQuery } from 'react-responsive'
 import AlertsDisplay from '../../common/AlertsDisplay.jsx'
 import { ApiServerContext } from '../../context/ApiServerContext.jsx'
 
+import LoadFilamentStock from '../../Inventory/FilamentStocks/LoadFilamentStock.jsx'
+import UnloadFilamentStock from '../../Inventory/FilamentStocks/UnloadFilamentStock.jsx'
+
 const log = loglevel.getLogger('ControlPrinter')
 log.setLevel(config.logLevel)
 
@@ -57,6 +60,9 @@ const ControlPrinter = () => {
       collapseState.movement
   )
 
+  const [loadFilamentStockOpen, setLoadFilamentStockOpen] = useState(false)
+  const [unloadFilamentStockOpen, setUnloadFilamentStockOpen] = useState(false)
+
   useEffect(() => {
     setSideBarVisible(
       collapseState.temperature ||
@@ -122,6 +128,39 @@ const ControlPrinter = () => {
         })
       }
       return true
+    },
+    pauseJob: () => {
+      if (connected == true) {
+        sendObjectAction(printerId, 'printer', {
+          type: 'pauseJob'
+        })
+      }
+      return true
+    },
+
+    resumeJob: () => {
+      if (connected == true) {
+        sendObjectAction(printerId, 'printer', {
+          type: 'resumeJob'
+        })
+      }
+      return true
+    },
+    cancelJob: () => {
+      if (connected == true) {
+        sendObjectAction(printerId, 'printer', {
+          type: 'cancelJob'
+        })
+      }
+      return true
+    },
+    loadFilamentStock: () => {
+      setLoadFilamentStockOpen(true)
+      return true
+    },
+    unloadFilamentStock: () => {
+      setUnloadFilamentStockOpen(true)
+      return true
     }
   }
 
@@ -146,6 +185,7 @@ const ControlPrinter = () => {
   )
 
   return (
+    <>
       <Flex
         gap='large'
         vertical='true'
@@ -272,7 +312,15 @@ const ControlPrinter = () => {
                                   'moonraker.host': false,
                                   tags: false,
                                   firmware: false,
-                                alerts: false
+                                  alerts: false,
+                                  online: false,
+                                  active: false,
+                                  currentFilamentStock: false,
+                                  'currentFilamentStock._id': false,
+                                  currentJob: false,
+                                  'currentJob._id': false,
+                                  currentSubJob: false,
+                                  'currentSubJob._id': false
                                 }}
                                 objectData={printerObjectData}
                                 type='printer'
@@ -333,7 +381,7 @@ const ControlPrinter = () => {
                         {objectFormState.objectData?.currentSubJob?._id ? (
                           <ObjectForm
                             id={objectFormState.objectData.currentSubJob._id}
-                          type='subjob'
+                            type='subJob'
                             onStateChange={() => {}}
                           >
                             {({
@@ -370,10 +418,12 @@ const ControlPrinter = () => {
                           updateCollapseState('filamentStock', expanded)
                         }
                       >
-                      {objectFormState.objectData?.currentFilamentStock?._id ? (
+                        {objectFormState.objectData?.currentFilamentStock
+                          ?._id ? (
                           <ObjectForm
                             id={
-                            objectFormState.objectData.currentFilamentStock._id
+                              objectFormState.objectData.currentFilamentStock
+                                ._id
                             }
                             type='filamentStock'
                             onStateChange={() => {}}
@@ -438,6 +488,35 @@ const ControlPrinter = () => {
           </Flex>
         </div>
       </Flex>
+      <Modal
+        open={loadFilamentStockOpen}
+        onCancel={() => setLoadFilamentStockOpen(false)}
+        footer={null}
+        width='700px'
+        destroyOnHidden={true}
+      >
+        <LoadFilamentStock
+          printer={objectFormState.objectData}
+          onOk={() => setLoadFilamentStockOpen(false)}
+          reset={false}
+          filamentStockLoaded={false}
+        />
+      </Modal>
+      <Modal
+        open={unloadFilamentStockOpen}
+        onCancel={() => setUnloadFilamentStockOpen(false)}
+        footer={null}
+        width='700px'
+        destroyOnHidden={true}
+      >
+        <UnloadFilamentStock
+          printer={objectFormState.objectData}
+          onOk={() => setUnloadFilamentStockOpen(false)}
+          reset={false}
+          filamentStockLoaded={false}
+        />
+      </Modal>
+    </>
   )
 }