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

FSM 비행계획서 작성 modal 추가

master
김장현 8 months ago
parent
d2efb34300
commit
216f3c2dda
3 changed files with 564 additions and 221 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. 337
      src/components/modal/control/ControlFsmModal.js
  2. 445
      src/views/control/setting/ControlSetting.js
  3. 3
      tsconfig.paths.json

337
src/components/modal/control/ControlFsmModal.js
Unescape View File

@ -0,0 +1,337 @@
import {
Button,
Row,
Col,
FormGroup,
Label,
Input,
Modal,
ModalHeader,
ModalBody,
CustomInput
} from '@ui';
export default function ControlFsm({ modal, handler }) {
return (
<div className='vertically-centered-modal'>
<Modal
isOpen={modal}
toggle={handler}
className='modal-dialog-centered modal-lg'
>
<ModalHeader toggle={handler}>FSM 비행계획서</ModalHeader>
<ModalBody className='pal-modal-body'>
<div className='fsm-wrap'>
<div className='fsm-box'>
<div className='fsm-ti'>
<h5>비행계획서 상세정보</h5>
<div className='btn-wrap'>
<Button>CHG</Button>
<Button>CNL</Button>
<Button color='success'>비행계획서 제출</Button>
</div>
</div>
<Row>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>서류구분</Label>
<Input type='select' name='select' bsSize='sm' id=''>
<option>비행계획서 작성</option>
</Input>
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>항공기 등록기호</Label>
<Input
type='text'
id=''
bsSize='sm'
placeholder=''
value=''
/>
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>비행계획일자</Label>
<Input
type='text'
id=''
bsSize='sm'
placeholder=''
value=''
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>Priority</Label>
<Input type='select' name='select' bsSize='sm' id=''>
<option>FF</option>
</Input>
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>Filing Time</Label>
<Input
type='text'
id=''
bsSize='sm'
placeholder=''
value=''
/>
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>의뢰부서</Label>
<Input
type='text'
id=''
bsSize='sm'
placeholder=''
value=''
/>
</FormGroup>
</Col>
</Row>
<hr />
<Row>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>Message Type</Label>
<Input type='text' bsSize='sm' id='' />
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>Flight Identity(Callsign)</Label>
<Input type='text' bsSize='sm' id='' />
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>Flight Rules</Label>
<Input type='text' bsSize='sm' id='' />
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>Flight Type</Label>
<Input type='text' bsSize='sm' id='' />
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>Number</Label>
<Input type='text' bsSize='sm' id='' />
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>Aicrraft Type</Label>
<Input type='text' bsSize='sm' id='' />
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>Wake Turb. Cat.</Label>
<Input type='text' bsSize='sm' id='' />
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>Equipment</Label>
<Input type='text' bsSize='sm' id='' />
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>Departure</Label>
<Input type='text' bsSize='sm' id='' />
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>Time</Label>
<Input type='text' bsSize='sm' id='' />
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>Cruising Speed</Label>
<Input type='text' bsSize='sm' id='' />
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>Flight Level</Label>
<Input type='text' bsSize='sm' id='' />
</FormGroup>
</Col>
<Col className='list-input' md='12'>
<FormGroup>
<Label for=''>Route</Label>
<Input type='textarea' bsSize='sm' id='' />
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>Arrival</Label>
<Input type='text' bsSize='sm' id='' />
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>Total EET</Label>
<Input type='text' bsSize='sm' id='' />
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>1st ALTN</Label>
<Input type='text' bsSize='sm' id='' />
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>2st ALTN</Label>
<Input type='text' bsSize='sm' id='' />
</FormGroup>
</Col>
<Col className='list-input' md='12'>
<FormGroup>
<Label for=''>Other information</Label>
<Input type='textarea' bsSize='sm' id='' />
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>E</Label>
<Input type='text' bsSize='sm' id='' />
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>P</Label>
<Input type='text' bsSize='sm' id='' />
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>R/</Label>
<div className='checkbox-inline'>
<CustomInput
inline
type='checkbox'
id='exampleCustomCheckbox'
label='U'
defaultChecked
/>
<CustomInput
inline
type='checkbox'
id='exampleCustomCheckbox2'
label='V'
/>
<CustomInput
inline
type='checkbox'
id='exampleCustomCheckbox3'
label='E'
/>
</div>
</FormGroup>
</Col>
</Row>
<Row>
<Col className='list-input' md='6' sm='12'>
<FormGroup>
<Label for=''>S/</Label>
<div className='checkbox-inline'>
<CustomInput
inline
type='checkbox'
id='4'
label='P'
defaultChecked
/>
<CustomInput inline type='checkbox' id='5' label='D' />
<CustomInput inline type='checkbox' id='6' label='M' />
<CustomInput inline type='checkbox' id='7' label='J' />
</div>
</FormGroup>
</Col>
<Col className='list-input' md='6' sm='12'>
<FormGroup>
<Label for=''>J/</Label>
<div className='checkbox-inline'>
<CustomInput
inline
type='checkbox'
id='8'
label='L'
defaultChecked
/>
<CustomInput inline type='checkbox' id='9' label='F' />
<CustomInput inline type='checkbox' id='10' label='U' />
<CustomInput inline type='checkbox' id='11' label='V' />
</div>
</FormGroup>
</Col>
</Row>
<Row>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>D/Number</Label>
<Input type='text' bsSize='sm' id='' />
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>Capacity</Label>
<Input type='text' bsSize='sm' id='' />
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>Cover</Label>
<Input type='text' bsSize='sm' id='' />
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>Colour</Label>
<Input type='text' bsSize='sm' id='' />
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>A/</Label>
<Input type='text' bsSize='sm' id='' />
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>N/</Label>
<Input type='text' bsSize='sm' id='' />
</FormGroup>
</Col>
<Col className='list-input' md='3' sm='12'>
<FormGroup>
<Label for=''>C/</Label>
<Input type='text' bsSize='sm' id='' />
</FormGroup>
</Col>
</Row>
</div>
</div>
</ModalBody>
</Modal>
</div>
);
}

445
src/views/control/setting/ControlSetting.js
Unescape View File

@ -1,6 +1,7 @@
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
import mapboxgl from 'mapbox-gl';
import { Button, ButtonGroup, CustomInput } from '../../../components/ui/index';
import * as Actions from '../../../modules/menu/actions/menuAction';
import {
@ -14,10 +15,10 @@ import gimPo from '../../../components/map/geojson/gimpoAirportAirArea.json';
import gimPoGrid from '../../../components/map/geojson/airportAirArea.json';
// 김포 선형 공역
import flatGimpo from '../../../components/map/geojson/flatGimpoAirportAirArea.json';
import mapboxgl from 'mapbox-gl';
import ControlFsm from '../../../components/modal/control/ControlFsmModal';
const ControlSetting = props => {
const [isFsmModal, setIsFsmModal] = useState(false);
const dispatch = useDispatch();
const history = useHistory();
@ -152,55 +153,56 @@ const ControlSetting = props => {
};
return (
<div className=''>
<div className='layer-content'>
<div className='layer-ti'>
<h4>지도유형</h4>
</div>
<div className='map-btn'>
<ButtonGroup>
<Button
color={mapControl.mapType === 'TERRAIN' ? 'primary' : ''}
onClick={e => handlerMapType('TERRAIN')}
>
지형지도
</Button>
<Button
color={mapControl.mapType === 'NORMAL' ? 'primary' : ''}
onClick={e => handlerMapType('NORMAL')}
>
일반지도
</Button>
<Button
color={mapControl.mapType === '2D' ? 'primary' : ''}
onClick={e => handlerMapType('2D')}
>
2D
</Button>
</ButtonGroup>
</div>
</div>
<div className='layer-content'>
<div className='layer-ti'>
<h4>허용고도 알림 정보</h4>
</div>
<div className='map-btn'>
<ButtonGroup>
<Button
color={mapControl.areaType === 'linear' ? 'primary' : ''}
onClick={e => handlerAreaClick(e, 'linear')}
>
선형
</Button>
<Button
color={mapControl.areaType === 'square' ? 'primary' : ''}
onClick={e => handlerAreaClick(e, 'square')}
>
격자
</Button>
</ButtonGroup>
<>
<div className=''>
<div className='layer-content'>
<div className='layer-ti'>
<h4>지도유형</h4>
</div>
<div className='map-btn'>
<ButtonGroup>
<Button
color={mapControl.mapType === 'TERRAIN' ? 'primary' : ''}
onClick={e => handlerMapType('TERRAIN')}
>
지형지도
</Button>
<Button
color={mapControl.mapType === 'NORMAL' ? 'primary' : ''}
onClick={e => handlerMapType('NORMAL')}
>
일반지도
</Button>
<Button
color={mapControl.mapType === '2D' ? 'primary' : ''}
onClick={e => handlerMapType('2D')}
>
2D
</Button>
</ButtonGroup>
</div>
</div>
{/* <div className='layer-content-box'>
<div className='layer-content'>
<div className='layer-ti'>
<h4>허용고도 알림 정보</h4>
</div>
<div className='map-btn'>
<ButtonGroup>
<Button
color={mapControl.areaType === 'linear' ? 'primary' : ''}
onClick={e => handlerAreaClick(e, 'linear')}
>
선형
</Button>
<Button
color={mapControl.areaType === 'square' ? 'primary' : ''}
onClick={e => handlerAreaClick(e, 'square')}
>
격자
</Button>
</ButtonGroup>
</div>
{/* <div className='layer-content-box'>
<div className='layer-content-info layer-switch-list'>
<dl>
<dt>
@ -223,182 +225,185 @@ const ControlSetting = props => {
</dl>
</div>
</div> */}
</div>
<div className='layer-content'>
<div className='layer-ti'>
<h4>공역 표출 정보</h4>
</div>
<div className='layer-content-box'>
<div className='layer-content-info layer-switch-list'>
<dl>
<dt>
<div className='list-left-txt'>
<span className='dot-icon color-red'></span>비행금지구역
</div>
<div className='list-right-txt'>
<CustomInput
onClick={e => handlerAreaClick(e, '0001')}
className='custom-control-red'
type='switch'
id='test01'
name='test01'
inline
defaultChecked={mapControl.area0001}
/>
</div>
</dt>
<dt>
<div className='list-left-txt'>
<span className='dot-icon color-pink'></span>비행제한구역
</div>
<div className='list-right-txt'>
<CustomInput
onClick={e => handlerAreaClick(e, '0002')}
className='custom-control-pink'
type='switch'
id='test02'
name='test02'
inline
defaultChecked={mapControl.area0002}
/>
</div>
</dt>
<dt>
<div className='list-left-txt'>
<span className='dot-icon color-orange'></span>관제권(공항)
</div>
<div className='list-right-txt'>
<CustomInput
onClick={e => handlerAreaClick(e, '0003')}
className='custom-control-orange'
type='switch'
id='test03'
name='test03'
inline
defaultChecked={mapControl.area0003}
/>
</div>
</dt>
<dt>
<div className='list-left-txt'>
<span className='dot-icon color-brown'></span>비행장(군사)
</div>
<div className='list-right-txt'>
<CustomInput
onClick={e => handlerAreaClick(e, '0004')}
className='custom-control-brown'
type='switch'
id='test04'
name='test04'
inline
defaultChecked={mapControl.area0004}
/>
</div>
</dt>
<dt>
<div className='list-left-txt'>
<span className='dot-icon color-purple'></span>이착륙장
</div>
<div className='list-right-txt'>
<CustomInput
onClick={e => handlerAreaClick(e, '0005')}
className='custom-control-purple'
type='switch'
id='test05'
name='test05'
inline
defaultChecked={mapControl.area0005}
/>
</div>
</dt>
<dt>
<div className='list-left-txt'>
<span className='dot-icon color-skyblue'></span>
초경량비행장치공역
</div>
<div className='list-right-txt'>
<CustomInput
onClick={e => handlerAreaClick(e, '0006')}
className='custom-control-skyblue'
type='switch'
id='test06'
name='test06'
inline
defaultChecked={mapControl.area0006}
/>
</div>
</dt>
</dl>
<div className='layer-content'>
<div className='layer-ti'>
<h4>공역 표출 정보</h4>
</div>
<div className='layer-content-box'>
<div className='layer-content-info layer-switch-list'>
<dl>
<dt>
<div className='list-left-txt'>
<span className='dot-icon color-red'></span>비행금지구역
</div>
<div className='list-right-txt'>
<CustomInput
onClick={e => handlerAreaClick(e, '0001')}
className='custom-control-red'
type='switch'
id='test01'
name='test01'
inline
defaultChecked={mapControl.area0001}
/>
</div>
</dt>
<dt>
<div className='list-left-txt'>
<span className='dot-icon color-pink'></span>비행제한구역
</div>
<div className='list-right-txt'>
<CustomInput
onClick={e => handlerAreaClick(e, '0002')}
className='custom-control-pink'
type='switch'
id='test02'
name='test02'
inline
defaultChecked={mapControl.area0002}
/>
</div>
</dt>
<dt>
<div className='list-left-txt'>
<span className='dot-icon color-orange'></span>관제권(공항)
</div>
<div className='list-right-txt'>
<CustomInput
onClick={e => handlerAreaClick(e, '0003')}
className='custom-control-orange'
type='switch'
id='test03'
name='test03'
inline
defaultChecked={mapControl.area0003}
/>
</div>
</dt>
<dt>
<div className='list-left-txt'>
<span className='dot-icon color-brown'></span>비행장(군사)
</div>
<div className='list-right-txt'>
<CustomInput
onClick={e => handlerAreaClick(e, '0004')}
className='custom-control-brown'
type='switch'
id='test04'
name='test04'
inline
defaultChecked={mapControl.area0004}
/>
</div>
</dt>
<dt>
<div className='list-left-txt'>
<span className='dot-icon color-purple'></span>이착륙장
</div>
<div className='list-right-txt'>
<CustomInput
onClick={e => handlerAreaClick(e, '0005')}
className='custom-control-purple'
type='switch'
id='test05'
name='test05'
inline
defaultChecked={mapControl.area0005}
/>
</div>
</dt>
<dt>
<div className='list-left-txt'>
<span className='dot-icon color-skyblue'></span>
초경량비행장치공역
</div>
<div className='list-right-txt'>
<CustomInput
onClick={e => handlerAreaClick(e, '0006')}
className='custom-control-skyblue'
type='switch'
id='test06'
name='test06'
inline
defaultChecked={mapControl.area0006}
/>
</div>
</dt>
</dl>
</div>
</div>
</div>
</div>
<div className='layer-content'>
<div className='layer-ti'>
<h4>LAANC 신청하기</h4>
</div>
<button
className='btn btn-primary laanc-btn'
onClick={() => {
localStorage.setItem('topMenuCd', 'laanc');
dispatch(Actions.dispatchTopMenu('laanc'));
history.push(`/laanc/index?map=${true}`);
}}
>
승인요청 바로가기
</button>
</div>
<div className='layer-content'>
<div className='layer-ti'>
<h4>드론 원스톱 민원 시스템</h4>
</div>
<div className='onstop-link'>
<a
className='btn btn-outline-primary'
href='https://drone.onestop.go.kr/'
target='_blank'
>
비행장치 신고
</a>
<a
className='btn btn-outline-primary'
href='https://drone.onestop.go.kr/'
target='_blank'
>
사용사업체 등록
</a>
<a
className='btn btn-outline-primary'
href='https://drone.onestop.go.kr/'
target='_blank'
>
비행승인 신청
</a>
<a
className='btn btn-outline-primary'
href='https://drone.onestop.go.kr/'
target='_blank'
>
특별비행승인 신청
</a>
<a
className='btn btn-outline-primary'
href='https://drone.onestop.go.kr/'
target='_blank'
>
항공촬영 신청
</a>
<Button
className='btn btn-outline-primary'
outline
color='primary'
// href='https://drone.onestop.go.kr/'
// target='_blank'
<div className='layer-content'>
<div className='layer-ti'>
<h4>LAANC 신청하기</h4>
</div>
<button
className='btn btn-primary laanc-btn'
onClick={() => {
localStorage.setItem('topMenuCd', 'laanc');
dispatch(Actions.dispatchTopMenu('laanc'));
history.push(`/laanc/index?map=${true}`);
}}
>
FSM 비행계획서 작성 바로가기
</Button>
승인요청 바로가기
</button>
</div>
<div className='layer-content'>
<div className='layer-ti'>
<h4>드론 원스톱 민원 시스템</h4>
</div>
<div className='onstop-link'>
<a
className='btn btn-outline-primary'
href='https://drone.onestop.go.kr/'
target='_blank'
>
비행장치 신고
</a>
<a
className='btn btn-outline-primary'
href='https://drone.onestop.go.kr/'
target='_blank'
>
사용사업체 등록
</a>
<a
className='btn btn-outline-primary'
href='https://drone.onestop.go.kr/'
target='_blank'
>
비행승인 신청
</a>
<a
className='btn btn-outline-primary'
href='https://drone.onestop.go.kr/'
target='_blank'
>
특별비행승인 신청
</a>
<a
className='btn btn-outline-primary'
href='https://drone.onestop.go.kr/'
target='_blank'
>
항공촬영 신청
</a>
<Button
className='btn btn-outline-primary'
outline
color='primary'
onClick={() => setIsFsmModal(true)}
>
FSM 비행계획서 작성 바로가기
</Button>
</div>
</div>
</div>
</div>
{isFsmModal && (
<ControlFsm modal={true} handler={() => setIsFsmModal(false)} />
)}
</>
);
};

3
tsconfig.paths.json
Unescape View File

@ -11,7 +11,8 @@
"@styles/*": ["src/@core/scss/*"],
"@configs/*": ["src/configs/*"],
"@utils/*": ["src/utility/Utils/*"],
"@hooks/*": ["src/utility/hooks/*"]
"@hooks/*": ["src/utility/hooks/*"],
"@ui/*": ["src/components/ui/*"]
}
}
}

Write Preview
Loading…
Cancel
Save