|
|
|
@ -7,19 +7,20 @@ import { useDispatch, useSelector } from 'react-redux';
|
|
|
|
|
import Flatpickr from 'react-flatpickr'; |
|
|
|
|
import '@styles/react/libs/flatpickr/flatpickr.scss'; |
|
|
|
|
import moment from 'moment'; |
|
|
|
|
import { AlertCircle } from 'react-feather'; |
|
|
|
|
import FlightArea from './FlightArea'; |
|
|
|
|
import { |
|
|
|
|
Button, |
|
|
|
|
InputGroup, |
|
|
|
|
ButtonGroup, |
|
|
|
|
InputGroupAddon, |
|
|
|
|
Input, |
|
|
|
|
Row, |
|
|
|
|
Col, |
|
|
|
|
Button, |
|
|
|
|
Modal, |
|
|
|
|
ModalHeader, |
|
|
|
|
ModalBody, |
|
|
|
|
ModalFooter, |
|
|
|
|
Alert, |
|
|
|
|
FormGroup, |
|
|
|
|
Label, |
|
|
|
|
Card, |
|
|
|
|
CardBody, |
|
|
|
|
CustomInput |
|
|
|
|
Input |
|
|
|
|
} from 'reactstrap'; |
|
|
|
|
import { |
|
|
|
|
initFlight, |
|
|
|
@ -33,8 +34,16 @@ import {
|
|
|
|
|
sensorClickAction |
|
|
|
|
} from '../../modules/control/map/actions/controlMapActions'; |
|
|
|
|
|
|
|
|
|
const Apply = ({ data, handlerStep }) => { |
|
|
|
|
const Apply = ({ |
|
|
|
|
data, |
|
|
|
|
handlerStep, |
|
|
|
|
disabledAnimation, |
|
|
|
|
setDisabledAnimation, |
|
|
|
|
centeredModal, |
|
|
|
|
setCenteredModal |
|
|
|
|
}) => { |
|
|
|
|
const [detailData, setDetailData] = useState(initFlightBas.initDetail); |
|
|
|
|
const { user } = useSelector(state => state.authState); |
|
|
|
|
|
|
|
|
|
const history = useHistory(); |
|
|
|
|
// 변경감지
|
|
|
|
@ -52,80 +61,73 @@ const Apply = ({ data, handlerStep }) => {
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className=''> |
|
|
|
|
<div className='layer-content'> |
|
|
|
|
<div className='layer-ti'> |
|
|
|
|
<h4 className='ti'>LAANC 승인 요청</h4> |
|
|
|
|
{/* <button className='btn-icon' outline color='primary'> */} |
|
|
|
|
{/* <X size={20} /> */} |
|
|
|
|
{/* </button> */} |
|
|
|
|
<Button.Ripple |
|
|
|
|
<> |
|
|
|
|
<ModalHeader> |
|
|
|
|
LAANC 승인 요청 |
|
|
|
|
<Button |
|
|
|
|
color='danger' |
|
|
|
|
className='badge badge-danger' |
|
|
|
|
onClick={() => handlerLaanc()} |
|
|
|
|
onClick={() => setDisabledAnimation(!disabledAnimation)} |
|
|
|
|
> |
|
|
|
|
취소 |
|
|
|
|
</Button.Ripple> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<Row> |
|
|
|
|
<Col sm='12'> |
|
|
|
|
<Row> |
|
|
|
|
<Col> |
|
|
|
|
<div className='search-cont search-info pd-0'> |
|
|
|
|
<div className='cont-ti mb-1 d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'> |
|
|
|
|
<div className='final'></div> |
|
|
|
|
</Button> |
|
|
|
|
</ModalHeader> |
|
|
|
|
<ModalBody> |
|
|
|
|
<div className='mb-1'> |
|
|
|
|
<div className='ti'>비행승인 사전결과 확인</div> |
|
|
|
|
<div className='laanc-map-sm'>지도영역</div> |
|
|
|
|
<div className='mt-1'> |
|
|
|
|
<Alert color='danger'> |
|
|
|
|
<div className='alert-body'> |
|
|
|
|
<AlertCircle size={15} />{' '} |
|
|
|
|
<span className='ms-1'>사전 결과 미 승인 대상입니다.</span> |
|
|
|
|
</div> |
|
|
|
|
<dl> |
|
|
|
|
<dt> |
|
|
|
|
<div className='layer-ti'> |
|
|
|
|
<h4>유효성 검사 정보</h4> |
|
|
|
|
</Alert> |
|
|
|
|
</div> |
|
|
|
|
<CustomInput |
|
|
|
|
inline |
|
|
|
|
type='checkbox' |
|
|
|
|
id='pilotYn' |
|
|
|
|
label='조종사자격정보유무' |
|
|
|
|
name='pilotYn' |
|
|
|
|
value='A' |
|
|
|
|
// checked={true}
|
|
|
|
|
// checked={checkState.all}
|
|
|
|
|
// onChange={handleChangeCheckbox}
|
|
|
|
|
<div className='vertically-centered-modal'> |
|
|
|
|
<FlightArea |
|
|
|
|
centeredModal={centeredModal} |
|
|
|
|
setCenteredModal={setCenteredModal} |
|
|
|
|
/> |
|
|
|
|
<CustomInput |
|
|
|
|
inline |
|
|
|
|
type='checkbox' |
|
|
|
|
id='DronYn' |
|
|
|
|
label='기체보험가입여부' |
|
|
|
|
name='DronYn' |
|
|
|
|
value='B' |
|
|
|
|
// checked={true}
|
|
|
|
|
// checked={checkState.all}
|
|
|
|
|
// onChange={handleChangeCheckbox}
|
|
|
|
|
/> |
|
|
|
|
</dt> |
|
|
|
|
|
|
|
|
|
<div className='search-info-ti d-flex justify-content-between'> |
|
|
|
|
<h4 className='ti'>LAANC 승인 사전 결과 확인</h4> |
|
|
|
|
</div> |
|
|
|
|
<CustomInput |
|
|
|
|
inline |
|
|
|
|
type='checkbox' |
|
|
|
|
id='exampleCustomCheckbox' |
|
|
|
|
label='승인 처리를 위해 다음 스텝을 진행해주세요.' |
|
|
|
|
name='aprvlYn' |
|
|
|
|
value='C' |
|
|
|
|
// checked={true}
|
|
|
|
|
// checked={checkState.all}
|
|
|
|
|
// onChange={handleChangeCheckbox}
|
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<Row> |
|
|
|
|
<Col className='list-input' md='6' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<div className='ti'>조종사 정보</div> |
|
|
|
|
<Label for='test'> |
|
|
|
|
<span className='necessary'>*</span>성명 |
|
|
|
|
</Label> |
|
|
|
|
<Input |
|
|
|
|
type='text' |
|
|
|
|
id='memberName' |
|
|
|
|
name='memberName' |
|
|
|
|
size='sm' |
|
|
|
|
placeholder='' |
|
|
|
|
value={user.memberName} |
|
|
|
|
disabled |
|
|
|
|
/> |
|
|
|
|
<div className='search-info-box'> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
<Col className='list-input' md='6' sm='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<div className='ti'>승인 유형</div> |
|
|
|
|
<Label for='test'> |
|
|
|
|
<span className='necessary'>*</span>종류 |
|
|
|
|
</Label> |
|
|
|
|
<Input type='select' name='select' size='sm' id='test' disabled> |
|
|
|
|
<option>상업</option> |
|
|
|
|
<option>비상업</option> |
|
|
|
|
</Input> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
<Col className='list-input' md='12'> |
|
|
|
|
<div className='ti'>비행 계획 정보</div> |
|
|
|
|
<Row> |
|
|
|
|
<Col className='list-input' lg={4} md={4} sm={12}> |
|
|
|
|
<Col className='list-input' md='6'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='test'> |
|
|
|
|
<span className='necessary'>*</span> |
|
|
|
|
비행시작일자 |
|
|
|
|
<span className='necessary'>*</span>비행 시작 일자 |
|
|
|
|
</Label> |
|
|
|
|
<Flatpickr |
|
|
|
|
className='form-control form-control-sm' |
|
|
|
@ -133,12 +135,14 @@ const Apply = ({ data, handlerStep }) => {
|
|
|
|
|
id='schFltStDt' |
|
|
|
|
name='schFltStDt' |
|
|
|
|
data-enable-time |
|
|
|
|
// defaultValue={data.schFltStDt}
|
|
|
|
|
defaultValue={data.schFltStDt} |
|
|
|
|
value={data.schFltStDt} |
|
|
|
|
options={{ |
|
|
|
|
minDate: moment().format('YYYY-MM-DD') |
|
|
|
|
}} |
|
|
|
|
onChange={date => { |
|
|
|
|
const value = |
|
|
|
|
moment(date[0]).format('YYYY-MM-DD HH:mm:ss') || |
|
|
|
|
''; |
|
|
|
|
moment(date[0]).format('YYYY-MM-DD HH:mm:ss') || ''; |
|
|
|
|
handleChange({ |
|
|
|
|
name: 'schFltStDt', |
|
|
|
|
value |
|
|
|
@ -149,11 +153,10 @@ const Apply = ({ data, handlerStep }) => {
|
|
|
|
|
/> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
<Col className='list-input' lg={4} md={4} sm={12}> |
|
|
|
|
<Col className='list-input' md='6'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='test'> |
|
|
|
|
<span className='necessary'>*</span> |
|
|
|
|
비행종료일자 |
|
|
|
|
<span className='necessary'>*</span>비행 종료 일자 |
|
|
|
|
</Label> |
|
|
|
|
<Flatpickr |
|
|
|
|
className='form-control form-control-sm' |
|
|
|
@ -161,185 +164,78 @@ const Apply = ({ data, handlerStep }) => {
|
|
|
|
|
id='schFltEndDt' |
|
|
|
|
name='schFltEndDt' |
|
|
|
|
data-enable-time |
|
|
|
|
// defaultValue={data.schFltEndDt}
|
|
|
|
|
defaultValue={data.schFltEndDt} |
|
|
|
|
value={data.schFltEndDt} |
|
|
|
|
options={{ |
|
|
|
|
minDate: moment().format('YYYY-MM-DD') |
|
|
|
|
}} |
|
|
|
|
onChange={date => { |
|
|
|
|
const value = |
|
|
|
|
moment(date[0]).format('YYYY-MM-DD HH:mm:ss') || |
|
|
|
|
''; |
|
|
|
|
moment(date[0]).format('YYYY-MM-DD HH:mm:ss') || ''; |
|
|
|
|
handleChange({ |
|
|
|
|
name: 'schFltEndDt', |
|
|
|
|
value |
|
|
|
|
}); |
|
|
|
|
}} |
|
|
|
|
disabled |
|
|
|
|
placeholder='비행 종료일자 선택(클릭)' |
|
|
|
|
disabled |
|
|
|
|
// {...{options:{minDate: "today"}}}
|
|
|
|
|
/> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
<Col className='list-input' lg={4} md={4} sm={12}> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='test'> |
|
|
|
|
<span className='necessary'>*</span>비행 목적 |
|
|
|
|
</Label> |
|
|
|
|
<Input |
|
|
|
|
type='select' |
|
|
|
|
id='fltPurpose' |
|
|
|
|
name='fltPurpose' |
|
|
|
|
value={data.fltPurpose} |
|
|
|
|
bsSize='sm' |
|
|
|
|
onChange={e => { |
|
|
|
|
const { name, value } = e.target; |
|
|
|
|
handleChange({ |
|
|
|
|
type: 'plan', |
|
|
|
|
name, |
|
|
|
|
value |
|
|
|
|
}); |
|
|
|
|
}} |
|
|
|
|
disabled |
|
|
|
|
// innerRef={props.data}
|
|
|
|
|
// className={classnames({
|
|
|
|
|
// 'is-invalid': props.errors.arcrftTypeCd
|
|
|
|
|
// })}
|
|
|
|
|
> |
|
|
|
|
{/* TODO CDNOT 코드연동 필요 */} |
|
|
|
|
<option value=''>= 선택 =</option> |
|
|
|
|
<option value='시험비행'>= 시험비행 =</option> |
|
|
|
|
<option value='교육비행'>= 교육비행 =</option> |
|
|
|
|
<option value='사진/영상촬영'> |
|
|
|
|
= 사진/영상촬영 = |
|
|
|
|
</option> |
|
|
|
|
<option value='비행훈련'>= 비행훈련 =</option> |
|
|
|
|
<option value='비행교육'>= 비행교육 =</option> |
|
|
|
|
<option value='비행실기시험'> |
|
|
|
|
= 비행실기시험 = |
|
|
|
|
</option> |
|
|
|
|
</Input> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
</div> |
|
|
|
|
<div className='search-info-box'> |
|
|
|
|
</Col> |
|
|
|
|
|
|
|
|
|
<Col className='list-input' md='12'> |
|
|
|
|
<div className='ti'>기체 정보</div> |
|
|
|
|
<Row> |
|
|
|
|
<Col className='list-input' lg={4} md={4} sm={12}> |
|
|
|
|
<Col className='list-input' md='12'> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='test'> |
|
|
|
|
<span className='necessary'>*</span>고도 |
|
|
|
|
<span className='necessary'>*</span>기체 중량 |
|
|
|
|
</Label> |
|
|
|
|
<Input |
|
|
|
|
type='text' |
|
|
|
|
id='fltElev' |
|
|
|
|
name='fltElev' |
|
|
|
|
// defaultValue={data.email || ''}
|
|
|
|
|
value={data.areaList[0].fltElev} |
|
|
|
|
bsSize='sm' |
|
|
|
|
onChange={e => { |
|
|
|
|
const { name, value } = e.target; |
|
|
|
|
handleChange({ |
|
|
|
|
type: 'area', |
|
|
|
|
name, |
|
|
|
|
value |
|
|
|
|
}); |
|
|
|
|
}} |
|
|
|
|
// innerRef={data}
|
|
|
|
|
placeholder='100m' |
|
|
|
|
id='test' |
|
|
|
|
size='sm' |
|
|
|
|
placeholder='' |
|
|
|
|
disabled |
|
|
|
|
/> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Col> |
|
|
|
|
<Col className='list-input' lg={4} md={4} sm={12}> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='test'> |
|
|
|
|
<span className='necessary'>*</span>반경 |
|
|
|
|
</Label> |
|
|
|
|
<Input |
|
|
|
|
type='text' |
|
|
|
|
id='bufferZone' |
|
|
|
|
name='bufferZone' |
|
|
|
|
// defaultValue={data.email || ''}
|
|
|
|
|
value={data.areaList[0].bufferZone} |
|
|
|
|
bsSize='sm' |
|
|
|
|
onChange={e => { |
|
|
|
|
const { name, value } = e.target; |
|
|
|
|
handleChange({ |
|
|
|
|
type: 'area', |
|
|
|
|
name, |
|
|
|
|
value |
|
|
|
|
}); |
|
|
|
|
}} |
|
|
|
|
// innerRef={data}
|
|
|
|
|
placeholder='100m' |
|
|
|
|
disabled |
|
|
|
|
/> |
|
|
|
|
</FormGroup> |
|
|
|
|
</Row> |
|
|
|
|
</Col> |
|
|
|
|
<Col className='list-input' lg={4} md={4} sm={12}> |
|
|
|
|
<FormGroup> |
|
|
|
|
<Label for='test'> |
|
|
|
|
<span className='necessary'>*</span>비행방식 |
|
|
|
|
</Label> |
|
|
|
|
<Input |
|
|
|
|
type='text' |
|
|
|
|
id='fltMethod' |
|
|
|
|
name='fltMethod' |
|
|
|
|
// defaultValue={data.email || ''}
|
|
|
|
|
value={data.areaList[0].fltMethod} |
|
|
|
|
bsSize='sm' |
|
|
|
|
onChange={e => { |
|
|
|
|
const { name, value } = e.target; |
|
|
|
|
handleChange({ |
|
|
|
|
type: 'area', |
|
|
|
|
name, |
|
|
|
|
value |
|
|
|
|
}); |
|
|
|
|
}} |
|
|
|
|
// innerRef={data}
|
|
|
|
|
placeholder='' |
|
|
|
|
disabled |
|
|
|
|
/> |
|
|
|
|
</FormGroup> |
|
|
|
|
|
|
|
|
|
<Col className='list-input' md='12'> |
|
|
|
|
<div className='ti'>미 승인 사유</div> |
|
|
|
|
<div className='cancel-box'>내용</div> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
</div> |
|
|
|
|
<div className='search-info-ti d-flex justify-content-between'> |
|
|
|
|
<h4 className='ti'>조종사 준수사항 처벌 동의 약관</h4> |
|
|
|
|
</div> |
|
|
|
|
<CustomInput |
|
|
|
|
inline |
|
|
|
|
type='checkbox' |
|
|
|
|
id='aprvlYn' |
|
|
|
|
label='조종자 준수사항 미 준수 시 처벌에 동의합니다.' |
|
|
|
|
name='aprvlYn' |
|
|
|
|
value='D' |
|
|
|
|
// checked={true}
|
|
|
|
|
// checked={checkState.all}
|
|
|
|
|
// onChange={handleChangeCheckbox}
|
|
|
|
|
/> |
|
|
|
|
<div className='d-flex align-items-center'> |
|
|
|
|
<Button.Ripple |
|
|
|
|
color='danger' |
|
|
|
|
bsSize='sm' |
|
|
|
|
onClick={() => handleClick(1)} |
|
|
|
|
> |
|
|
|
|
</ModalBody> |
|
|
|
|
<ModalFooter> |
|
|
|
|
<Button outline color='danger' onClick={() => handlerStep(1)}> |
|
|
|
|
이전 |
|
|
|
|
</Button.Ripple> |
|
|
|
|
<Button.Ripple |
|
|
|
|
className='mr-1' |
|
|
|
|
color='primary' |
|
|
|
|
beSize='sm' |
|
|
|
|
//onClick={() => handleClick(3)}
|
|
|
|
|
</Button> |
|
|
|
|
<ul className='step'> |
|
|
|
|
<li> |
|
|
|
|
<span className='on'></span> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<span className='on'></span> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<span></span> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
<Button |
|
|
|
|
outline |
|
|
|
|
onClick={() => setDisabledAnimation(!disabledAnimation)} |
|
|
|
|
> |
|
|
|
|
다음 |
|
|
|
|
</Button.Ripple> |
|
|
|
|
</div> |
|
|
|
|
</dl> |
|
|
|
|
</div> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
|
</div> |
|
|
|
|
</Button> |
|
|
|
|
</ModalFooter> |
|
|
|
|
</> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
export default Apply; |
|
|
|
|