diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css index e1c65320..4b38ddf2 100644 --- a/src/assets/css/custom.css +++ b/src/assets/css/custom.css @@ -1269,9 +1269,11 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;} .distance-check .btn-box{margin-top:6px} .distance-check .btn-box button + button{margin-left:0.4rem} .distance-check .btn-box .btn-icon:hover{box-shadow:none;} -.distance-check .text{margin-top:6px} +.distance-check .text{margin-top:6px;} .distance-check .text p{font-weight:400;} +.distance-check .text p + p{margin-top:4px} .distance-check .text p .finish{display:block;margin-top:-4px;font-weight:400;color:#0090d8} + .list-input .form-group label{font-size: .875rem;font-weight: 500;} .list-input .form-group{margin-bottom:0;} \ No newline at end of file diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx index 52f1261c..386194ad 100644 --- a/src/components/ui/input/index.tsx +++ b/src/components/ui/input/index.tsx @@ -25,6 +25,8 @@ interface Props { disabled?: boolean; onBlur?: (event: React.FocusEvent) => void; onKeyPress?: (event: React.KeyboardEvent) => void; + onKeyDown?: (event: React.KeyboardEvent) => void; + onFocus?: (event: React.FocusEvent) => void; style?: any; } @@ -70,7 +72,9 @@ const CustomInput = forwardRef( placeholder, disabled = false, onKeyPress, - onBlur + onBlur, + onFocus, + onKeyDown }, ref ) => { @@ -94,6 +98,8 @@ const CustomInput = forwardRef( disabled={disabled} onBlur={onBlur} onKeyPress={onKeyPress} + onFocus={onFocus} + onKeyDown={onKeyDown} > {children} diff --git a/src/containers/flight/ControlApprovalsContainer.js b/src/containers/flight/ControlApprovalsContainer.js index 86eab9a3..4e22ba07 100644 --- a/src/containers/flight/ControlApprovalsContainer.js +++ b/src/containers/flight/ControlApprovalsContainer.js @@ -29,10 +29,11 @@ import { setLogout } from '@src/redux/features/account/auth/authThunk'; import logo from '../../assets/images/logo/kac_logo_ icon.svg'; import { AiOutlinePoweroff } from 'react-icons/ai'; import WebsocketClient from '../../components/websocket/WebsocketClient'; -import { Card, ButtonGroup, Button } from '@component/ui'; +import { Card, ButtonGroup, Button, Input } from '@component/ui'; import { FiRotateCw, FiCornerUpLeft } from 'react-icons/fi'; import { X } from 'react-feather'; import mapboxgl from 'mapbox-gl'; +import * as turf from '@turf/turf'; let distanceMarkers = []; @@ -86,6 +87,7 @@ export default function ControlApprovalsContainer({ mode }) { const totalAreaRef = useRef(null); const mouseCursorRef = useRef(null); const distanceBoxRef = useRef(null); + const [metersRadius, setMetersRadius] = useState('0m'); // 비행구역 (관제과) 레이어 const controlLayer = { @@ -310,6 +312,8 @@ export default function ControlApprovalsContainer({ mode }) { dispatch(clientSaveAreaCoordinateList([area])); handlerMapInit(); + setMetersRadius('0m'); + handlerDistanceClose(); }; const handlerMapInit = () => { @@ -710,6 +714,77 @@ export default function ControlApprovalsContainer({ mode }) { 총 거리 : 1050.24m

+

+ {selected && drawObj.getMode() === 'simple_select' && ( + { + const input = e.target; + const { value } = input; + if (e.key === 'Backspace') { + if (input.length > 2) { + input.setSelectionRange( + value.length - 2, + value.length - 2 + ); + } else { + input.setSelectionRange( + value.length - 1, + value.length - 1 + ); + } + } else if (e.key === 'Enter') { + let val = value.replace(/[^\d.]/g, ''); + if (!val) return; + const sources = drawObj.getAll(); + + const option = { + steps: 0, + units: 'meters' + }; + const rad = turf.circle( + sources.features[0].geometry.coordinates[0], + parseInt(val), + option + ); + + drawObj.set({ + type: 'FeatureCollection', + features: [ + { ...sources.features[0] }, + { + type: 'Feature', + properties: {}, + id: 'pal_Polygon_string', + geometry: { ...rad.geometry } + } + ] + }); + } + }} + onChange={e => { + const target = e.target; + const { value, selectionStart } = target; + // const numericValue = value.replace(/[^\d.]/g, ''); + + setMetersRadius( + value + .replace(/^0+/, '') // 맨 앞의 0 제거 + .replace(/[^\d.]/g, '') // 숫자가 아닌 문자 제거 + .replace(/\B(?=(\d{3})+(?!\d))/g, ',') + 'm' + ); + }} + onBlur={() => { + if (metersRadius === 'm') { + setMetersRadius('0m'); + } + }} + /> + )} +

diff --git a/src/containers/flight/OperationApprovalsContainer.js b/src/containers/flight/OperationApprovalsContainer.js index e2e0710e..bc82f5d3 100644 --- a/src/containers/flight/OperationApprovalsContainer.js +++ b/src/containers/flight/OperationApprovalsContainer.js @@ -29,7 +29,7 @@ import { setLogout } from '@src/redux/features/account/auth/authThunk'; import logo from '../../assets/images/logo/kac_logo_ icon.svg'; import { AiOutlinePoweroff } from 'react-icons/ai'; import WebsocketClient from '../../components/websocket/WebsocketClient'; -import { Card, ButtonGroup, Button } from '@component/ui'; +import { Card, ButtonGroup, Button, Input } from '@component/ui'; import { FiRotateCw, FiCornerUpLeft } from 'react-icons/fi'; import { X } from 'react-feather'; @@ -91,6 +91,7 @@ export default function OperationApprovalsContainer({ mode }) { const totalAreaRef = useRef(null); const mouseCursorRef = useRef(null); const distanceBoxRef = useRef(null); + const [metersRadius, setMetersRadius] = useState('0m'); // 비행구역 (운항과) 레이어 const operationLayer = { @@ -359,6 +360,8 @@ export default function OperationApprovalsContainer({ mode }) { setSelected([area[0].planAreaSno]); } setSelectedPlanSno(area[0].planSno); + setMetersRadius('0m'); + handlerDistanceClose(); } else { setSelected([]); setSelectedPlanSno([]); @@ -857,6 +860,79 @@ export default function OperationApprovalsContainer({ mode }) { 총 거리 : 1050.24m

+ +

+ {selectedPlanSno && + drawObj.getMode() === 'simple_select' && ( + { + const input = e.target; + const { value } = input; + if (e.key === 'Backspace') { + if (input.length > 2) { + input.setSelectionRange( + value.length - 2, + value.length - 2 + ); + } else { + input.setSelectionRange( + value.length - 1, + value.length - 1 + ); + } + } else if (e.key === 'Enter') { + let val = value.replace(/[^\d.]/g, ''); + if (!val) return; + const sources = drawObj.getAll(); + + const option = { + steps: 0, + units: 'meters' + }; + const rad = turf.circle( + sources.features[0].geometry.coordinates[0], + parseInt(val), + option + ); + + drawObj.set({ + type: 'FeatureCollection', + features: [ + { ...sources.features[0] }, + { + type: 'Feature', + properties: {}, + id: 'pal_Polygon_string', + geometry: { ...rad.geometry } + } + ] + }); + } + }} + onChange={e => { + const target = e.target; + const { value, selectionStart } = target; + // const numericValue = value.replace(/[^\d.]/g, ''); + + setMetersRadius( + value + .replace(/^0+/, '') // 맨 앞의 0 제거 + .replace(/[^\d.]/g, '') // 숫자가 아닌 문자 제거 + .replace(/\B(?=(\d{3})+(?!\d))/g, ',') + 'm' + ); + }} + onBlur={() => { + if (metersRadius === 'm') { + setMetersRadius('0m'); + } + }} + /> + )} +