노승철
2 years ago
12 changed files with 792 additions and 2 deletions
@ -0,0 +1,122 @@
|
||||
import React from 'react'; |
||||
import { |
||||
Card, |
||||
CardBody, |
||||
Col,
|
||||
FormGroup, |
||||
Input, |
||||
Label, |
||||
Row,
|
||||
Button
|
||||
} from 'reactstrap'; |
||||
|
||||
const FlightPlanAreaForm = () => { |
||||
|
||||
return (
|
||||
<Card> |
||||
<CardBody>
|
||||
<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> |
||||
<h4>상세 정보</h4> |
||||
</div> |
||||
<div className='final'> |
||||
{/* {props.type === 'update' ? ( |
||||
<span>최종 수정일자 : {props.updateDt}</span> |
||||
) : null} */} |
||||
</div> |
||||
</div> |
||||
|
||||
<dl> |
||||
<dt>
|
||||
<div className='search-info-box'> |
||||
<Row> |
||||
<Col className='list-input' lg={6} md={6} sm={12}> |
||||
<FormGroup> |
||||
<Label for='test'> |
||||
<span className='necessary'>*</span>주소 |
||||
</Label> |
||||
<Input |
||||
type='text' |
||||
id='ownerNm' |
||||
name='ownerNm'
|
||||
size='sm' |
||||
placeholder=''
|
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
<div className='search-info-box'> |
||||
<Row> |
||||
<Col className='list-input' lg={6} md={6} sm={12}> |
||||
<FormGroup> |
||||
<Label for='test'> |
||||
<span className='necessary'>*</span>좌표 |
||||
</Label> |
||||
<Input |
||||
type='text' |
||||
id='ownerNm' |
||||
name='ownerNm'
|
||||
size='sm' |
||||
placeholder=''
|
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
<div className='search-info-box'> |
||||
<Row> |
||||
<Col className='list-input' lg={4} md={6} sm={12}> |
||||
<FormGroup> |
||||
<Label for='test'> |
||||
<span className='necessary'>*</span>반경(m) |
||||
</Label> |
||||
<Input |
||||
type='text' |
||||
id='ownerNm' |
||||
name='ownerNm'
|
||||
size='sm' |
||||
placeholder=''
|
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
<div className='search-info-box'> |
||||
<Row> |
||||
<Col className='list-input' sm={2}> |
||||
<FormGroup> |
||||
<Label for='test'> |
||||
<span className='necessary'>*</span>고도(m/ft) |
||||
</Label> |
||||
<Input |
||||
type='text' |
||||
id='ownerNm' |
||||
name='ownerNm'
|
||||
size='sm' |
||||
placeholder='m'
|
||||
/> |
||||
</FormGroup> |
||||
<FormGroup>
|
||||
<Input |
||||
type='text' |
||||
id='ownerNm' |
||||
name='ownerNm'
|
||||
size='sm' |
||||
placeholder='ft'
|
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
</dt> |
||||
</dl> |
||||
|
||||
</div> |
||||
</CardBody> |
||||
</Card> |
||||
) |
||||
} |
||||
|
||||
export default FlightPlanAreaForm; |
@ -0,0 +1,51 @@
|
||||
import React, { useEffect, useState } from 'react'; |
||||
import { |
||||
Card, |
||||
CardBody,
|
||||
} from 'reactstrap'; |
||||
|
||||
const FlightPlanAreaMap = () => { |
||||
const naver = window.naver; |
||||
const [map, setMap] = useState(); |
||||
|
||||
useEffect(() => { |
||||
NaverMapInit(); |
||||
}, []); |
||||
useEffect(() => {
|
||||
}, [map]); |
||||
|
||||
const NaverMapInit = () => { |
||||
const mapOptions = { |
||||
center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547), |
||||
zoom: 10, |
||||
zoomControl: true, |
||||
mapTypeId: naver.maps.MapTypeId.HYBRID, |
||||
zoomControlOptions: { |
||||
position: naver.maps.Position.TOP_LEFT, |
||||
|
||||
style: naver.maps.ZoomControlStyle.SMALL |
||||
} |
||||
};
|
||||
|
||||
setMap(new naver.maps.Map('map', mapOptions));
|
||||
}; |
||||
|
||||
|
||||
return ( |
||||
<Card> |
||||
<CardBody>
|
||||
<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> |
||||
<h4>지도 영역</h4> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div id="map" style={{ width: '100%', height: '50vh'}}></div> |
||||
</CardBody> |
||||
</Card> |
||||
) |
||||
} |
||||
|
||||
export default FlightPlanAreaMap; |
@ -0,0 +1,378 @@
|
||||
import React from 'react'; |
||||
import { |
||||
Card, |
||||
CardBody, |
||||
Col,
|
||||
FormGroup, |
||||
Input, |
||||
Label, |
||||
Row,
|
||||
Button
|
||||
} from 'reactstrap'; |
||||
import Flatpickr from 'react-flatpickr'; |
||||
|
||||
|
||||
const FlightPlanForm = (props) => { |
||||
return ( |
||||
<Row> |
||||
<Col sm='12'> |
||||
<Card> |
||||
<CardBody className='pt-2 card-body-tab-cont'>
|
||||
<Row> |
||||
<Col> |
||||
<Card> |
||||
<CardBody className='pal-card-body'> |
||||
<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> |
||||
<h4> 상세정보</h4> |
||||
</div> |
||||
<div className='final'> |
||||
{/* {props.type === 'update' ? ( |
||||
<span>최종 수정일자 : {props.updateDt}</span> |
||||
) : null} */} |
||||
</div> |
||||
</div> |
||||
|
||||
<dl> |
||||
<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={4} md={6} sm={12}> |
||||
<FormGroup> |
||||
<Label for='test'>성명</Label> |
||||
<Input |
||||
type='text' |
||||
id='applicantNm' |
||||
name='applicantNm' |
||||
size='sm' |
||||
// innerRef={props.data}
|
||||
placeholder='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' lg={4} md={6} sm={12}> |
||||
<FormGroup> |
||||
<Label for='test'>생년월일</Label> |
||||
<Input |
||||
type='text' |
||||
id='applicantBirthDt' |
||||
name='applicantBirthDt' |
||||
size='sm'
|
||||
// innerRef={props.data}
|
||||
placeholder='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' lg={4} md={6} sm={12}> |
||||
<FormGroup> |
||||
<Label for='test'>전화번호</Label> |
||||
<Input |
||||
type='text' |
||||
id='applicantPhone' |
||||
name='applicantPhone' |
||||
size='sm'
|
||||
// innerRef={props.data}
|
||||
placeholder='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
|
||||
<Col className='list-input' sm={4}> |
||||
<FormGroup> |
||||
<Label for='test'>팩스번호</Label> |
||||
<Input |
||||
type='text' |
||||
id='applicantPhone' |
||||
name='applicantPhone' |
||||
size='sm'
|
||||
// innerRef={props.data}
|
||||
placeholder='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
|
||||
<div className='search-info-box'> |
||||
<Row> |
||||
<Col className='list-input' lg={4} md={6} sm={12}> |
||||
<FormGroup> |
||||
<Label for='test'>주소</Label> |
||||
<Input |
||||
type='text' |
||||
id='applicantAddress' |
||||
name='applicantAddress' |
||||
size='sm'
|
||||
// innerRef={props.data}
|
||||
placeholder='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' lg={4} md={6} sm={12}> |
||||
<FormGroup> |
||||
<Label for='test'>상세주소</Label> |
||||
<Input |
||||
type='text' |
||||
id='applicantAddress' |
||||
name='applicantAddress' |
||||
size='sm'
|
||||
// innerRef={props.data}
|
||||
placeholder='' |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
</dt> |
||||
|
||||
<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={4} md={6} sm={12}> |
||||
<FormGroup>
|
||||
<Label for='test'> |
||||
<span className='necessary'></span>시작 기간 |
||||
</Label> |
||||
<Flatpickr size='sm' className='form-control' id='default-picker' />
|
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' lg={4} md={6} sm={12}> |
||||
<FormGroup> |
||||
<Label for='test'> |
||||
<span className='necessary'></span>종료 기간 |
||||
</Label> |
||||
<Flatpickr size='sm' className='form-control' id='default-picker' />
|
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
<div className='search-info-box'> |
||||
<Row> |
||||
<Col className='list-input' lg={4} md={6} sm={12}> |
||||
<FormGroup> |
||||
<Label for='test'> |
||||
<span className='necessary'>*</span>비행 장치 |
||||
</Label> |
||||
<Input |
||||
type='select' |
||||
name='arcrftTypeCd' |
||||
id='arcrftTypeCd' |
||||
size='sm' |
||||
// innerRef={props.data}
|
||||
// className={classnames({
|
||||
// 'is-invalid': props.errors.arcrftTypeCd
|
||||
// })}
|
||||
> |
||||
<option value=''>= 선택 =</option> |
||||
{/* CDNOT 코드연동 필요 */} |
||||
{/* {ARCTFT_TYPE_CD.map(item => { |
||||
return ( |
||||
<option |
||||
value={item.code} |
||||
selected={ |
||||
props.data.arcrftTypeCd === item.code |
||||
? true |
||||
: false |
||||
} |
||||
> |
||||
{item.codeNm} |
||||
</option> |
||||
); |
||||
})} */} |
||||
</Input> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' lg={4} md={6} sm={12}> |
||||
<FormGroup> |
||||
<Label for='test'> |
||||
<span className='necessary'>*</span>비행 목적 |
||||
</Label> |
||||
<Input |
||||
type='select' |
||||
name='arcrftTypeCd' |
||||
id='arcrftTypeCd' |
||||
size='sm' |
||||
// innerRef={props.data}
|
||||
// className={classnames({
|
||||
// 'is-invalid': props.errors.arcrftTypeCd
|
||||
// })}
|
||||
> |
||||
<option value=''>= 선택 =</option> |
||||
{/* CDNOT 코드연동 필요 */} |
||||
{/* {ARCTFT_TYPE_CD.map(item => { |
||||
return ( |
||||
<option |
||||
value={item.code} |
||||
selected={ |
||||
props.data.arcrftTypeCd === item.code |
||||
? true |
||||
: false |
||||
} |
||||
> |
||||
{item.codeNm} |
||||
</option> |
||||
); |
||||
})} */} |
||||
</Input> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' lg={4} md={6} sm={12}> |
||||
<FormGroup> |
||||
<Label for='test'> |
||||
<span className='necessary'></span>비행 방식 |
||||
</Label> |
||||
<Input |
||||
type='text' |
||||
id='arcrftModelNm' |
||||
name='arcrftModelNm' |
||||
// innerRef={props.data}
|
||||
size='sm' |
||||
placeholder='' |
||||
// className={classnames({
|
||||
// 'is-invalid': props.errors.arcrftModelNm
|
||||
// })}
|
||||
/> |
||||
{/* {props.errors && props.errors.arcrftModelNm && ( |
||||
<FormFeedback> |
||||
{props.errors.arcrftModelNm.message} |
||||
</FormFeedback> |
||||
)} */} |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
</dt> |
||||
|
||||
<dt> |
||||
<div className='search-info-ti d-flex justify-content-between'> |
||||
<h4 className='ti'>비행 구역 정보</h4> |
||||
<Button.Ripple
|
||||
color="primary" |
||||
onClick={props.openModal} |
||||
> |
||||
비행 구역 설정 |
||||
</Button.Ripple> |
||||
</div> |
||||
<div className='search-info-box'> |
||||
<Row> |
||||
<Col className='list-input' lg={6} md={6} sm={12}> |
||||
<FormGroup> |
||||
<Label for='test'> |
||||
<span className='necessary'>*</span>주소 |
||||
</Label> |
||||
<Input |
||||
type='text' |
||||
id='ownerNm' |
||||
name='ownerNm'
|
||||
size='sm' |
||||
placeholder=''
|
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
<div className='search-info-box'> |
||||
<Row> |
||||
<Col className='list-input' lg={6} md={6} sm={12}> |
||||
<FormGroup> |
||||
<Label for='test'> |
||||
<span className='necessary'>*</span>좌표 |
||||
</Label> |
||||
<Input |
||||
type='text' |
||||
id='ownerNm' |
||||
name='ownerNm'
|
||||
size='sm' |
||||
placeholder=''
|
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
<div className='search-info-box'> |
||||
<Row> |
||||
<Col className='list-input' lg={4} md={6} sm={12}> |
||||
<FormGroup> |
||||
<Label for='test'> |
||||
<span className='necessary'>*</span>반경(m) |
||||
</Label> |
||||
<Input |
||||
type='text' |
||||
id='ownerNm' |
||||
name='ownerNm'
|
||||
size='sm' |
||||
placeholder=''
|
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' sm={2}> |
||||
<FormGroup> |
||||
<Label for='test'> |
||||
<span className='necessary'>*</span>고도(m/ft) |
||||
</Label> |
||||
<Input |
||||
type='text' |
||||
id='ownerNm' |
||||
name='ownerNm'
|
||||
size='sm' |
||||
placeholder='m'
|
||||
/> |
||||
</FormGroup> |
||||
<FormGroup>
|
||||
<Input |
||||
type='text' |
||||
id='ownerNm' |
||||
name='ownerNm'
|
||||
size='sm' |
||||
placeholder='ft'
|
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
</dt> |
||||
|
||||
<div className='d-flex align-items-center'> |
||||
<Button.Ripple |
||||
className='mr-1' |
||||
color='primary' |
||||
size='sm' |
||||
// onClick={
|
||||
// pageType === 'create'
|
||||
// ? handleSubmit(handlerCreate)
|
||||
// : handleSubmit(handlerUpdate)
|
||||
// }
|
||||
> |
||||
저장 |
||||
</Button.Ripple> |
||||
<Button.Ripple
|
||||
color='danger'
|
||||
size='sm' |
||||
// onClick={handlerDelete}
|
||||
> |
||||
삭제 |
||||
</Button.Ripple> |
||||
</div> |
||||
|
||||
</dl> |
||||
</div> |
||||
</CardBody> |
||||
</Card> |
||||
|
||||
</Col> |
||||
</Row> |
||||
</CardBody> |
||||
</Card> |
||||
</Col> |
||||
</Row> |
||||
) |
||||
} |
||||
|
||||
export default FlightPlanForm; |
@ -0,0 +1,62 @@
|
||||
import React from 'react'; |
||||
import { |
||||
Row, |
||||
Col, |
||||
Table, |
||||
Badge, |
||||
UncontrolledDropdown, |
||||
DropdownMenu, |
||||
DropdownItem, |
||||
DropdownToggle, |
||||
Card, |
||||
CardHeader, |
||||
CardBody, |
||||
CardTitle, |
||||
CardSubtitle, |
||||
ButtonGroup, |
||||
Button, |
||||
Input, |
||||
CustomInput, |
||||
FormGroup |
||||
} from 'reactstrap'; |
||||
|
||||
const FlightPlanGrid = (props) => { |
||||
return ( |
||||
<div className='pal-card-box'> |
||||
<Row> |
||||
<Col> |
||||
<div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'> |
||||
<div> |
||||
<h4>{"비행 계획"} 목록</h4> |
||||
<span className='search-case'>검색결과 총 0건</span> |
||||
</div> |
||||
<div className='d-flex align-items-center'> |
||||
<Button.Ripple |
||||
color='primary' |
||||
size='sm' |
||||
onClick={props.moveFlightPlan} |
||||
> |
||||
계획서 생성 |
||||
</Button.Ripple> |
||||
</div> |
||||
</div> |
||||
<div className='invoice-list-wrapper'> |
||||
<Card> |
||||
<div className='invoice-list-dataTable'> |
||||
{/* <GridDatabase |
||||
title={'비행이력'} |
||||
// data={props.data}
|
||||
// count={props.count}
|
||||
// columns={props.columns}
|
||||
// pagination={props.pagination}
|
||||
/> */} |
||||
</div> |
||||
</Card> |
||||
</div> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default FlightPlanGrid; |
@ -0,0 +1,37 @@
|
||||
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
||||
|
||||
export const FormModal = props => { |
||||
return ( |
||||
<div className='vertically-centered-modal'> |
||||
<Modal |
||||
isOpen={props.modal.isOpen} |
||||
toggle={() => |
||||
props.setModal({ ...props.modal, isOpen: !props.modal.isOpen }) |
||||
}
|
||||
className='modal-dialog-centered modal-xl' |
||||
> |
||||
<ModalHeader |
||||
toggle={() => |
||||
props.setModal({ ...props.modal, isOpen: !props.modal.isOpen }) |
||||
} |
||||
> |
||||
{props.modal.title} |
||||
</ModalHeader> |
||||
<ModalBody> |
||||
{props.modal.contents} |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button |
||||
color='primary' |
||||
onClick={() => |
||||
props.setModal({ ...props.modal, isOpen: !props.modal.isOpen }) |
||||
} |
||||
outline |
||||
> |
||||
확인 |
||||
</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
</div> |
||||
); |
||||
}; |
@ -0,0 +1,23 @@
|
||||
import React, { useState } from 'react'; |
||||
import { CustomDetailLayout } from '../../../../components/layout/CustomDetailLayout'; |
||||
import FlightPlanAreaForm from '../../../../components/basis/flight/plan/FlightPlanAreaForm'; |
||||
import { Button, Col, Row } from 'reactstrap'; |
||||
import FlightPlanAreaMap from '../../../../components/basis/flight/plan/FlightPlanAreaMap'; |
||||
|
||||
const FlightPlanAreaContainer = () => { |
||||
|
||||
return (
|
||||
<Row> |
||||
<Col md={6} lg={6}> |
||||
<FlightPlanAreaMap /> |
||||
</Col> |
||||
<Col md={6} lg={6}> |
||||
<FlightPlanAreaForm
|
||||
/> |
||||
</Col> |
||||
</Row> |
||||
|
||||
) |
||||
} |
||||
|
||||
export default FlightPlanAreaContainer; |
@ -0,0 +1,24 @@
|
||||
import React, { } from 'react'; |
||||
import { Link, useHistory } from 'react-router-dom'; |
||||
import FlightPlanGrid from '../../../../components/basis/flight/plan/FlightPlanGrid'; |
||||
import { CustomMainLayout } from '../../../../components/layout/CustomMainLayout'; |
||||
|
||||
const FlightPlanContainer = () => { |
||||
|
||||
const history = useHistory(); |
||||
|
||||
const moveFlightPlan = () => { |
||||
history.push('/basis/flight/plan/create'); |
||||
}; |
||||
|
||||
|
||||
return ( |
||||
<CustomMainLayout title={"비행 계획 관리"}> |
||||
<FlightPlanGrid
|
||||
moveFlightPlan={moveFlightPlan} |
||||
/> |
||||
</CustomMainLayout> |
||||
) |
||||
} |
||||
|
||||
export default FlightPlanContainer; |
@ -0,0 +1,42 @@
|
||||
import React, {useState} from 'react'; |
||||
import FlightPlanForm from '../../../../components/basis/flight/plan/FlightPlanForm'; |
||||
import { CustomDetailLayout } from '../../../../components/layout/CustomDetailLayout'; |
||||
import { FormModal } from '../../../../components/modal/FormModal'; |
||||
import FlightPlanAreaContainer from './FlightPlanAreaContainer'; |
||||
|
||||
|
||||
const FlightPlanDetailContainer = () => { |
||||
const [modal, setModal] = useState({ |
||||
isOpen: false, |
||||
title: '', |
||||
contents: '', |
||||
}); |
||||
|
||||
const saveFlightPlanArea = () => { |
||||
console.log('비행 구역 설정 저장'); |
||||
} |
||||
|
||||
const openModal = () => { |
||||
setModal({
|
||||
isOpen: true, |
||||
title: '비행 구역 설정', |
||||
contents: <FlightPlanAreaContainer /> |
||||
}); |
||||
} |
||||
|
||||
return ( |
||||
<CustomDetailLayout title={"비행 승인 신청서"}> |
||||
<FlightPlanForm |
||||
openModal={openModal} |
||||
/> |
||||
<FormModal
|
||||
modal={modal} |
||||
save={saveFlightPlanArea} |
||||
setModal={setModal}
|
||||
/> |
||||
</CustomDetailLayout> |
||||
) |
||||
|
||||
} |
||||
|
||||
export default FlightPlanDetailContainer;
|
@ -0,0 +1,14 @@
|
||||
// ** Styles
|
||||
import '@styles/react/libs/flatpickr/flatpickr.scss'; |
||||
import '@styles/react/libs/tables/react-dataTable-component.scss'; |
||||
import React from 'react'; |
||||
import '../../../../assets/css/custom.css'; |
||||
import FlightPlanContainer from '../../../../containers/basis/flight/plan/FlightPlanContainer'; |
||||
|
||||
const FlightPlan = props => { |
||||
return ( |
||||
<FlightPlanContainer /> |
||||
); |
||||
}; |
||||
|
||||
export default FlightPlan; |
@ -0,0 +1,11 @@
|
||||
import React, { useState } from 'react'; |
||||
import FlightPlanDetailContainer from '../../../../containers/basis/flight/plan/FlightPlanDetailContainer'; |
||||
import '../../../../assets/css/custom.css'; |
||||
|
||||
const FlightPlanDetail = () => { |
||||
return (
|
||||
<FlightPlanDetailContainer />
|
||||
) |
||||
} |
||||
|
||||
export default FlightPlanDetail; |
Loading…
Reference in new issue