sanguu516(박상현)
1 year ago
3 changed files with 495 additions and 37 deletions
@ -1,34 +0,0 @@ |
|||||||
import React, { useEffect, useState } from 'react'; |
|
||||||
import { Search } from 'react-feather'; |
|
||||||
import { BiBuildings, BiGridAlt } from 'react-icons/bi'; |
|
||||||
import { CgTrees } from 'react-icons/cg'; |
|
||||||
import { VscRadioTower } from 'react-icons/vsc'; |
|
||||||
import { useDispatch, useSelector } from 'react-redux'; |
|
||||||
import { |
|
||||||
Button, |
|
||||||
InputGroup, |
|
||||||
ButtonGroup, |
|
||||||
InputGroupAddon, |
|
||||||
Input, |
|
||||||
CustomInput |
|
||||||
} from 'reactstrap'; |
|
||||||
import { |
|
||||||
areaClickAction, |
|
||||||
environmentClickAction, |
|
||||||
mapTypeChangeAction, |
|
||||||
sensorClickAction |
|
||||||
} from '../../../modules/control/map/actions/controlMapActions'; |
|
||||||
|
|
||||||
const Dddd = props => { |
|
||||||
return ( |
|
||||||
<div className=''> |
|
||||||
<div className='layer-content'> |
|
||||||
<div className='layer-ti'> |
|
||||||
<h4>지도유형</h4> |
|
||||||
{/* <button className='btn-icon' outline color='primary'><X size={20} /></button> */} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
export default Dddd; |
|
@ -0,0 +1,491 @@ |
|||||||
|
import React, { useEffect, useState } from 'react'; |
||||||
|
import { Search } from 'react-feather'; |
||||||
|
import { BiBuildings, BiGridAlt } from 'react-icons/bi'; |
||||||
|
import { CgTrees } from 'react-icons/cg'; |
||||||
|
import { VscRadioTower } from 'react-icons/vsc'; |
||||||
|
import { useDispatch, useSelector } from 'react-redux'; |
||||||
|
import Flatpickr from 'react-flatpickr'; |
||||||
|
import '@styles/react/libs/flatpickr/flatpickr.scss'; |
||||||
|
import moment from 'moment'; |
||||||
|
import { |
||||||
|
Button, |
||||||
|
InputGroup, |
||||||
|
ButtonGroup, |
||||||
|
InputGroupAddon, |
||||||
|
Input, |
||||||
|
Row, |
||||||
|
Col, |
||||||
|
FormGroup, |
||||||
|
Label, |
||||||
|
Card, |
||||||
|
CardBody, |
||||||
|
CustomInput |
||||||
|
} from 'reactstrap'; |
||||||
|
import { |
||||||
|
areaClickAction, |
||||||
|
environmentClickAction, |
||||||
|
mapTypeChangeAction, |
||||||
|
sensorClickAction |
||||||
|
} from '../../../../modules/control/map/actions/controlMapActions'; |
||||||
|
|
||||||
|
const FlightPlan = props => { |
||||||
|
return ( |
||||||
|
<div className=''> |
||||||
|
<div className='layer-content'> |
||||||
|
<div className='layer-ti'> |
||||||
|
<h4>LAANC 승인 요청</h4> |
||||||
|
{/* <button className='btn-icon' outline color='primary'> */} |
||||||
|
{/* <X size={20} /> */} |
||||||
|
{/* </button> */} |
||||||
|
<Button.Ripple |
||||||
|
color='danger' |
||||||
|
className='badge badge-danger' |
||||||
|
onClick={() => props.handlerLaanc()} |
||||||
|
> |
||||||
|
취소 |
||||||
|
</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> |
||||||
|
</div> |
||||||
|
<dl> |
||||||
|
<dt> |
||||||
|
<div className='layer-ti'> |
||||||
|
<h4>위치 선택</h4> |
||||||
|
</div> |
||||||
|
<div className='layer-ti'> |
||||||
|
<Button.Ripple |
||||||
|
className='mr-1' |
||||||
|
color='primary' |
||||||
|
onClick={e => handlerDrawType('LINE')} |
||||||
|
disabled={props.isDisabled || props.isDone} |
||||||
|
> |
||||||
|
WayPoint |
||||||
|
</Button.Ripple> |
||||||
|
<Button.Ripple |
||||||
|
className='mr-1' |
||||||
|
color='primary' |
||||||
|
onClick={e => handlerDrawType('CIRCLE')} |
||||||
|
disabled={props.isDisabled || props.isDone} |
||||||
|
> |
||||||
|
Circle |
||||||
|
</Button.Ripple> |
||||||
|
<Button.Ripple |
||||||
|
className='mr-1' |
||||||
|
color='primary' |
||||||
|
onClick={e => handlerDrawType('POLYGON')} |
||||||
|
disabled={props.isDisabled || props.isDone} |
||||||
|
> |
||||||
|
Polygon |
||||||
|
</Button.Ripple> |
||||||
|
<Button.Ripple color='info'>날씨 정보</Button.Ripple> |
||||||
|
</div> |
||||||
|
</dt> |
||||||
|
<div className='search-info-ti d-flex justify-content-between'> |
||||||
|
<h4 className='ti'>조종사 정보</h4> |
||||||
|
</div> |
||||||
|
<div className='search-info-box'> |
||||||
|
<Row> |
||||||
|
<Col className='list-input' lg={3} md={3} sm={12}> |
||||||
|
<FormGroup> |
||||||
|
<Label for='test'> |
||||||
|
<span className='necessary'>*</span>성명 |
||||||
|
</Label> |
||||||
|
<Input |
||||||
|
type='text' |
||||||
|
id='memberName' |
||||||
|
name='memberName' |
||||||
|
// defaultValue={data.memberName}
|
||||||
|
// value={data.memberName || ''}
|
||||||
|
onChange={e => { |
||||||
|
const { name, value } = e.target; |
||||||
|
handleChange({ |
||||||
|
type: 'plan', |
||||||
|
name, |
||||||
|
value |
||||||
|
}); |
||||||
|
}} |
||||||
|
bsSize='sm' |
||||||
|
placeholder='홍길동' |
||||||
|
/> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col className='list-input' lg={5} md={5} sm={12}> |
||||||
|
<FormGroup className='m_ft'> |
||||||
|
<div className='m_ft_box'> |
||||||
|
<Label for='test'> |
||||||
|
<span className='necessary'>*</span> 핸드폰 번호 |
||||||
|
</Label> |
||||||
|
<Input |
||||||
|
type='text' |
||||||
|
id='clncd' |
||||||
|
name='clncd' |
||||||
|
// defaultValue={data.clncd}
|
||||||
|
// value={data.clncd || '+81'}
|
||||||
|
bsSize='sm' |
||||||
|
placeholder='+82' |
||||||
|
onChange={e => { |
||||||
|
const { name, value } = e.target; |
||||||
|
handleChange({ |
||||||
|
type: 'plan', |
||||||
|
name, |
||||||
|
value |
||||||
|
}); |
||||||
|
}} |
||||||
|
readOnly |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className='m_ft_box'> |
||||||
|
<Input |
||||||
|
type='text' |
||||||
|
id='hpno' |
||||||
|
name='hpno' |
||||||
|
// defaultValue={data.hpno}
|
||||||
|
// value={data.hpno || ''}
|
||||||
|
bsSize='sm' |
||||||
|
onChange={e => { |
||||||
|
const { name, value } = e.target; |
||||||
|
handleChange({ |
||||||
|
type: 'plan', |
||||||
|
name, |
||||||
|
value |
||||||
|
}); |
||||||
|
}} |
||||||
|
placeholder='010-0000-0000' |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col className='list-input' lg={3} md={4} sm={12}> |
||||||
|
<FormGroup> |
||||||
|
<Label for='test'> |
||||||
|
<span className='necessary'>*</span>이메일 |
||||||
|
</Label> |
||||||
|
<Input |
||||||
|
type='text' |
||||||
|
id='email' |
||||||
|
name='email' |
||||||
|
// defaultValue={data.email || ''}
|
||||||
|
// value={data.email}
|
||||||
|
bsSize='sm' |
||||||
|
onChange={e => { |
||||||
|
const { name, value } = e.target; |
||||||
|
handleChange({ |
||||||
|
type: 'plan', |
||||||
|
name, |
||||||
|
value |
||||||
|
}); |
||||||
|
}} |
||||||
|
// innerRef={props.data}
|
||||||
|
placeholder='' |
||||||
|
/> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</div> |
||||||
|
<div className='search-info-ti d-flex justify-content-between'> |
||||||
|
<h4 className='ti'>비행 계획 정보</h4> |
||||||
|
</div> |
||||||
|
<div className='search-info-box'> |
||||||
|
<Row> |
||||||
|
<Col className='list-input' lg={4} md={4} sm={12}> |
||||||
|
<FormGroup> |
||||||
|
<Label for='test'> |
||||||
|
<span className='necessary'>*</span> |
||||||
|
비행시작일자 |
||||||
|
</Label> |
||||||
|
<Flatpickr |
||||||
|
className='form-control form-control-sm' |
||||||
|
type='text' |
||||||
|
id='schFltStDt' |
||||||
|
name='schFltStDt' |
||||||
|
data-enable-time |
||||||
|
// defaultValue={data.schFltStDt}
|
||||||
|
// value={data.schFltStDt}
|
||||||
|
onChange={date => { |
||||||
|
const value = |
||||||
|
moment(date[0]).format('YYYY-MM-DD HH:mm:ss') || |
||||||
|
''; |
||||||
|
handleChange({ |
||||||
|
type: 'plan', |
||||||
|
name: 'schFltStDt', |
||||||
|
value |
||||||
|
}); |
||||||
|
}} |
||||||
|
placeholder='비행 시작일자 선택(클릭)' |
||||||
|
/> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col className='list-input' lg={4} md={4} sm={12}> |
||||||
|
<FormGroup> |
||||||
|
<Label for='test'> |
||||||
|
<span className='necessary'>*</span> |
||||||
|
비행종료일자 |
||||||
|
</Label> |
||||||
|
<Flatpickr |
||||||
|
className='form-control form-control-sm' |
||||||
|
type='text' |
||||||
|
id='schFltEndDt' |
||||||
|
name='schFltEndDt' |
||||||
|
data-enable-time |
||||||
|
// defaultValue={data.schFltEndDt}
|
||||||
|
// value={data.schFltEndDt}
|
||||||
|
onChange={date => { |
||||||
|
const value = |
||||||
|
moment(date[0]).format('YYYY-MM-DD HH:mm:ss') || |
||||||
|
''; |
||||||
|
handleChange({ |
||||||
|
type: 'plan', |
||||||
|
name: 'schFltEndDt', |
||||||
|
value |
||||||
|
}); |
||||||
|
}} |
||||||
|
placeholder='비행 종료일자 선택(클릭)' |
||||||
|
// {...{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 |
||||||
|
}); |
||||||
|
}} |
||||||
|
// 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> |
||||||
|
{/* TODO area 다건 표출 */} |
||||||
|
<div className='search-info-ti d-flex justify-content-between'> |
||||||
|
<h4 className='ti'>비행 구역 정보</h4> |
||||||
|
</div> |
||||||
|
<div className='search-info-box'> |
||||||
|
<Row> |
||||||
|
<Col className='list-input' lg={4} md={4} sm={12}> |
||||||
|
<FormGroup> |
||||||
|
<Label for='test'> |
||||||
|
<span className='necessary'>*</span>고도 |
||||||
|
</Label> |
||||||
|
<Input |
||||||
|
type='text' |
||||||
|
id='email' |
||||||
|
name='email' |
||||||
|
// defaultValue={data.email || ''}
|
||||||
|
// value={data.email}
|
||||||
|
bsSize='sm' |
||||||
|
onChange={e => { |
||||||
|
const { name, value } = e.target; |
||||||
|
handleChange({ |
||||||
|
type: 'plan', |
||||||
|
name, |
||||||
|
value |
||||||
|
}); |
||||||
|
}} |
||||||
|
// innerRef={props.data}
|
||||||
|
placeholder='100m' |
||||||
|
/> |
||||||
|
</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='email' |
||||||
|
name='email' |
||||||
|
// defaultValue={data.email || ''}
|
||||||
|
// value={data.email}
|
||||||
|
bsSize='sm' |
||||||
|
onChange={e => { |
||||||
|
const { name, value } = e.target; |
||||||
|
handleChange({ |
||||||
|
type: 'plan', |
||||||
|
name, |
||||||
|
value |
||||||
|
}); |
||||||
|
}} |
||||||
|
// innerRef={props.data}
|
||||||
|
placeholder='' |
||||||
|
/> |
||||||
|
</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='email' |
||||||
|
name='email' |
||||||
|
// defaultValue={data.email || ''}
|
||||||
|
// value={data.email}
|
||||||
|
bsSize='sm' |
||||||
|
onChange={e => { |
||||||
|
const { name, value } = e.target; |
||||||
|
handleChange({ |
||||||
|
type: 'plan', |
||||||
|
name, |
||||||
|
value |
||||||
|
}); |
||||||
|
}} |
||||||
|
// innerRef={props.data}
|
||||||
|
placeholder='100m' |
||||||
|
/> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</div> |
||||||
|
<div className='search-info-ti d-flex justify-content-between'> |
||||||
|
<h4 className='ti'>기체 정보</h4> |
||||||
|
</div> |
||||||
|
<div className='search-info-box'> |
||||||
|
<Row> |
||||||
|
<Col className='list-input' lg={4} md={4} sm={12}> |
||||||
|
<FormGroup> |
||||||
|
<Label for='test'> |
||||||
|
<span className='necessary'>*</span>기체 신고 번호 |
||||||
|
</Label> |
||||||
|
<Input |
||||||
|
type='text' |
||||||
|
id='email' |
||||||
|
name='email' |
||||||
|
// defaultValue={data.email || ''}
|
||||||
|
// value={data.email}
|
||||||
|
bsSize='sm' |
||||||
|
onChange={e => { |
||||||
|
const { name, value } = e.target; |
||||||
|
handleChange({ |
||||||
|
type: 'plan', |
||||||
|
name, |
||||||
|
value |
||||||
|
}); |
||||||
|
}} |
||||||
|
// innerRef={props.data}
|
||||||
|
placeholder='100m' |
||||||
|
/> |
||||||
|
</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='email' |
||||||
|
name='email' |
||||||
|
// defaultValue={data.email || ''}
|
||||||
|
// value={data.email}
|
||||||
|
bsSize='sm' |
||||||
|
onChange={e => { |
||||||
|
const { name, value } = e.target; |
||||||
|
handleChange({ |
||||||
|
type: 'plan', |
||||||
|
name, |
||||||
|
value |
||||||
|
}); |
||||||
|
}} |
||||||
|
// innerRef={props.data}
|
||||||
|
placeholder='100m' |
||||||
|
/> |
||||||
|
</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='email' |
||||||
|
name='email' |
||||||
|
// defaultValue={data.email || ''}
|
||||||
|
// value={data.email}
|
||||||
|
bsSize='sm' |
||||||
|
onChange={e => { |
||||||
|
const { name, value } = e.target; |
||||||
|
handleChange({ |
||||||
|
type: 'plan', |
||||||
|
name, |
||||||
|
value |
||||||
|
}); |
||||||
|
}} |
||||||
|
// innerRef={props.data}
|
||||||
|
placeholder='100m' |
||||||
|
/> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</div> |
||||||
|
<div className='search-info-ti d-flex justify-content-between'> |
||||||
|
<h4 className='ti'>유의사항</h4> |
||||||
|
</div> |
||||||
|
{/* <div className='d-flex align-items-center'> |
||||||
|
<Button.Ripple |
||||||
|
className='mr-1' |
||||||
|
color='primary' |
||||||
|
size='sm' |
||||||
|
onClick={handleSave} |
||||||
|
> |
||||||
|
저장 |
||||||
|
</Button.Ripple> |
||||||
|
{data.planSno ? ( |
||||||
|
<Button.Ripple |
||||||
|
color='danger' |
||||||
|
size='sm' |
||||||
|
onClick={handleDelete} |
||||||
|
> |
||||||
|
삭제 |
||||||
|
</Button.Ripple> |
||||||
|
) : null} |
||||||
|
</div> */} |
||||||
|
</dl> |
||||||
|
</div> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
export default FlightPlan; |
Loading…
Reference in new issue