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