farmcontrol-ui/src/components/Dashboard/common/PrinterMovementPanel.jsx

// PrinterMovementPanel.js
import { useContext, useState } from 'react'
import {
  Flex,
  Space,
  InputNumber,
  Button,
  Radio,
  Dropdown,
  Card,
  message // eslint-disable-line
} from 'antd'
import PropTypes from 'prop-types'
import LevelBedIcon from '../../Icons/LevelBedIcon'
import ArrowLeftIcon from '../../Icons/ArrowLeftIcon'
import ArrowRightIcon from '../../Icons/ArrowRightIcon'
import ArrowUpIcon from '../../Icons/ArrowUpIcon'
import ArrowDownIcon from '../../Icons/ArrowDownIcon'
import HomeIcon from '../../Icons/HomeIcon'
import { ApiServerContext } from '../context/ApiServerContext'

const PrinterMovementPanel = ({ id }) => {
  const { connected, sendObjectAction } = useContext(ApiServerContext)
  const [posValue, setPosValue] = useState(10)
  const [rateValue, setRateValue] = useState(1000)
  const handlePosRadioChange = (e) => {
    const value = e.target.value
    setPosValue(value) // Update posValue state when radio button changes
  }

  const handlePosInputChange = (value) => {
    setPosValue(value) // Update posValue state when input changes
  }

  const handleRateInputChange = (value) => {
    setRateValue(value) // Update rateValue state when input changes
  }

  const handleHomeAxisClick = (axis) => {
    if (id && connected == true) {
      sendObjectAction(id, 'printer', {
        type: 'homeAxis',
        data: {
          axis: axis
        }
      })
    }
  }

  const handleMoveAxisClick = (axis, minus) => {
    const distanceValue = !minus ? posValue * -1 : posValue
    if (id && connected == true) {
      sendObjectAction(id, 'printer', {
        type: 'moveAxis',
        data: {
          axis: axis,
          distance: distanceValue,
          rate: rateValue
        }
      })
    }
    //sendCommand('moveAxis', { axis, pos, rate })
  }

  const handleLevelBedClick = () => {
    //sendCommand('levelBed')
  }

  const homeAxisButtonItems = [
    {
      key: 'homeXYZ',
      label: 'Home XYZ',
      onClick: () => handleHomeAxisClick('ALL')
    },
    {
      key: 'homeXY',
      label: 'Home XY',
      onClick: () => handleHomeAxisClick('X Y')
    },
    {
      key: 'homeX',
      label: 'Home X',
      onClick: () => handleHomeAxisClick('X')
    },
    {
      key: 'homeY',
      label: 'Home Y',
      onClick: () => handleHomeAxisClick('Y')
    },
    {
      key: 'homeZ',
      label: 'Home Z',
      onClick: () => handleHomeAxisClick('Z')
    }
  ]

  return (
    <div style={{ minWidth: 190 }}>
      <Flex vertical gap={'large'} align='center'>
        <Flex horizontal='true' gap='small'>
          <Card size='small' title='XY'>
            <Flex
              vertical
              align='center'
              justify='center'
              gap='small'
              style={{ height: '100%', minHeight: '120px' }}
            >
              <Button
                icon={<ArrowUpIcon />}
                onClick={() => {
                  handleMoveAxisClick('Y', false)
                }}
              />
              <Space>
                <Button
                  icon={<ArrowLeftIcon />}
                  onClick={() => {
                    handleMoveAxisClick('X', false)
                  }}
                />
                <Dropdown
                  menu={{ items: homeAxisButtonItems }}
                  placement='bottom'
                >
                  <Button icon={<HomeIcon />}></Button>
                </Dropdown>
                <Button
                  icon={<ArrowRightIcon />}
                  onClick={() => {
                    handleMoveAxisClick('X', true)
                  }}
                />
              </Space>
              <Button
                icon={<ArrowDownIcon />}
                onClick={() => {
                  handleMoveAxisClick('Y', true)
                }}
              ></Button>
            </Flex>
          </Card>
          <Card size='small' title='Z'>
            <Flex
              vertical
              align='center'
              justify='center'
              gap='small'
              style={{ height: '100%', minHeight: '120px' }}
            >
              <Button
                icon={<ArrowUpIcon />}
                onClick={() => {
                  handleMoveAxisClick('Z', true)
                }}
              />
              <Button
                icon={<LevelBedIcon />}
                onClick={() => {
                  handleLevelBedClick()
                }}
              />
              <Button
                icon={<ArrowDownIcon />}
                onClick={() => {
                  handleMoveAxisClick('Z', false)
                }}
              ></Button>
            </Flex>
          </Card>
          <Card size='small' title='E'>
            <Flex
              vertical
              align='center'
              justify='center'
              gap='small'
              style={{ height: '100%', minHeight: '120px' }}
            >
              <Button
                icon={<ArrowUpIcon />}
                onClick={() => {
                  handleMoveAxisClick('E', true)
                }}
              />
              <Button
                icon={<ArrowDownIcon />}
                onClick={() => {
                  handleMoveAxisClick('E', false)
                }}
              ></Button>
            </Flex>
          </Card>
        </Flex>

        <Flex vertical gap='small'>
          <Radio.Group
            onChange={handlePosRadioChange}
            value={posValue}
            name='posRadio'
            style={{
              display: 'flex',
              justifyContent: 'center'
            }}
            block
          >
            <Radio.Button value={0.1}>0.1</Radio.Button>
            <Radio.Button value={1}>1</Radio.Button>
            <Radio.Button value={10}>10</Radio.Button>
            <Radio.Button value={100}>100</Radio.Button>
          </Radio.Group>

          <Flex horizontal='true' gap='small'>
            <InputNumber
              min={0.1}
              max={100}
              value={posValue}
              suffix='mm'
              onChange={handlePosInputChange}
              placeholder='10 mm'
              name='posInput'
              style={{ flexGrow: 1, minWidth: '125px' }}
            />
            <InputNumber
              min={1}
              max={5000}
              value={rateValue}
              suffix='mm/s'
              onChange={handleRateInputChange}
              placeholder='100 mm/s'
              name='rateInput'
              style={{ flexGrow: 1, minWidth: '125px' }}
            />
          </Flex>
        </Flex>
      </Flex>
    </div>
  )
}

PrinterMovementPanel.propTypes = {
  id: PropTypes.string.isRequired
}

export default PrinterMovementPanel