pav
/
pav-fe-kac-pal
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

LAANC시스템 스탭1 html 작업중

pull/2/head
sanguu516(박상현) 1 year ago
parent
4c633ce09f
commit
ab205397a5
3 changed files with 495 additions and 37 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      src/views/control/main/ControlMain.js
  2. 34
      src/views/control/setting/Dddd.js
  3. 491
      src/views/control/setting/LAANC/FlightPlan.js

7
src/views/control/main/ControlMain.js
Unescape View File

@ -19,7 +19,8 @@ import {
objectUnClickAction,
laancModeAction
} from '../../../modules/control/map/actions/controlMapActions';
import Dddd from '../setting/Dddd';
import FlightPlan from '../setting/LAANC/FlightPlan';
import ControlMenuLeft from '../menu/ControlMenuLeft';
import ControlTopPackage from '../menu/ControlTopPackage';
@ -207,8 +208,8 @@ const ControlMain = () => {
{isLaanc ? (
<div className='right-menu active'>
<div className='right-layer active'>
<Dddd />
<div className='right-layer active' style={{ width: '567.58px' }}>
<FlightPlan handlerLaanc={handlerLaanc} />
</div>
</div>
) : (

34
src/views/control/setting/Dddd.js
Unescape View File

@ -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;

491
src/views/control/setting/LAANC/FlightPlan.js
Unescape View File

@ -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;
Write Preview
Loading…
Cancel
Save