junh_eee(이준희)
2 years ago
8 changed files with 809 additions and 356 deletions
@ -0,0 +1,193 @@
|
||||
import React, { useEffect, useState } from 'react'; |
||||
import { |
||||
Card, |
||||
CardBody, |
||||
Col,
|
||||
FormGroup, |
||||
Input, |
||||
Label, |
||||
Row,
|
||||
Button
|
||||
} from 'reactstrap'; |
||||
import { useDispatch, useSelector } from 'react-redux'; |
||||
import { FeatureAirZone } from '../../../map/naver/feature/FeatureAirZone'; |
||||
import { FlightPlanDraw } from '../../../map/naver/draw/FlightPlanDraw'; |
||||
import { drawTypeChangeAction, drawCheckAction } from '../../../../modules/control/map/actions/controlMapActions'; |
||||
import { FlightPlanDrawTest } from '../../../map/naver/draw/FlightPlanDrawTest'; |
||||
|
||||
const FlightPlanAreaDetailForm = (props) => { |
||||
const dispatch = useDispatch(); |
||||
const naver = window.naver; |
||||
// const airArea = props.airArea;
|
||||
|
||||
const mapControl = useSelector(state => state.controlMapReducer); |
||||
|
||||
const [map, setMap] = useState(); |
||||
const [isMapLoad, setIsMapLoad] = useState(false); |
||||
const [mode, setMode] = useState(); |
||||
|
||||
// useEffect(() => {
|
||||
// setIsMapLoad(true);
|
||||
// }, [airArea]);
|
||||
|
||||
// useEffect(() => {
|
||||
// ModeInit();
|
||||
// }, [mapControl.drawType])
|
||||
|
||||
// const ModeInit = () => {
|
||||
// setMode(mapControl.drawType)
|
||||
// }
|
||||
|
||||
return ( |
||||
<Card className='mb-0'> |
||||
<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> |
||||
|
||||
<dl> |
||||
<dt> |
||||
<div className='search-info-ti d-flex justify-content-between'> |
||||
<h4>좌표</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>좌표1</Label> |
||||
<Input |
||||
type='text' |
||||
id='coord' |
||||
name='coord' |
||||
bsSize='sm' |
||||
placeholdeer='' |
||||
readOnly |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' lg={4} md={6} sm={12}> |
||||
<FormGroup> |
||||
<Label for='test'><span className='necessary'>*</span>좌표2</Label> |
||||
<Input |
||||
type='text' |
||||
id='coord' |
||||
name='coord' |
||||
bsSize='sm' |
||||
placeholdeer='' |
||||
readOnly |
||||
/> |
||||
</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>좌표3</Label> |
||||
<Input |
||||
type='text' |
||||
id='coord' |
||||
name='coord' |
||||
bsSize='sm' |
||||
placeholdeer='' |
||||
readOnly |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
<Col className='list-input' lg={4} md={6} sm={12}> |
||||
<FormGroup> |
||||
<Label for='test'><span className='necessary'>*</span>좌표4</Label> |
||||
<Input |
||||
type='text' |
||||
id='coord' |
||||
name='coord' |
||||
bsSize='sm' |
||||
placeholdeer='' |
||||
readOnly |
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
</dt> |
||||
|
||||
<dt> |
||||
<div className='search-info-ti d-flex justify-content-between'> |
||||
<h4>기타정보</h4> |
||||
</div> |
||||
|
||||
<div className='search-info-box'> |
||||
<Row> |
||||
<Col className='list-input' lg={5} md={7} sm={12}> |
||||
<FormGroup className='m_ft'> |
||||
<div className='m_ft_box'> |
||||
<Label for='test'> |
||||
<span className='necessary'>*</span> 반경 / 고도 |
||||
</Label> |
||||
<Input |
||||
type='text' |
||||
id='ownerNm' |
||||
name='ownerNm'
|
||||
size='sm' |
||||
placeholder='반경'
|
||||
readOnly
|
||||
/> |
||||
</div> |
||||
<div className='m_ft_box'> |
||||
<Input |
||||
type='text' |
||||
id='ownerNm' |
||||
name='ownerNm'
|
||||
size='sm' |
||||
placeholder='고도'
|
||||
readOnly
|
||||
/> |
||||
</div> |
||||
</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='ownerNm' |
||||
name='ownerNm'
|
||||
size='sm' |
||||
placeholder=''
|
||||
readOnly
|
||||
/> |
||||
</FormGroup> |
||||
</Col> |
||||
</Row> |
||||
</div> |
||||
</dt> |
||||
</dl> |
||||
</div> |
||||
|
||||
<div className='d-flex align-items-center mt-2'> |
||||
<Button.Ripple |
||||
type='submit' |
||||
className='mr-1' |
||||
color='primary' |
||||
> |
||||
등록 |
||||
</Button.Ripple> |
||||
<Button.Ripple |
||||
className='mr-1' |
||||
color='primary' |
||||
> |
||||
닫기 |
||||
</Button.Ripple> |
||||
</div> |
||||
</CardBody> |
||||
</Card> |
||||
) |
||||
} |
||||
|
||||
export default FlightPlanAreaDetailForm; |
||||
@ -0,0 +1,40 @@
|
||||
import { useEffect, useState } from 'react'; |
||||
import { Modal, ModalHeader, ModalBody } from 'reactstrap'; |
||||
import FlightPlanAreaDetailContainer from '../../../../containers/basis/flight/plan/FlightPlanAreaDetailContainer'; |
||||
|
||||
export const FlightPlanAreaDetailModal = props => {
|
||||
|
||||
const [onSubmit, setOnSubmit] = useState(false); |
||||
|
||||
useEffect(() => { |
||||
console.log('비행구역 상세정보 모달') |
||||
}, []) |
||||
|
||||
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> |
||||
<FlightPlanAreaDetailContainer |
||||
modal={props.modal} |
||||
setModal={props.setModal}
|
||||
onSubmit={onSubmit}
|
||||
setOnSubmit={setOnSubmit}
|
||||
/> |
||||
</ModalBody> |
||||
</Modal> |
||||
</div> |
||||
); |
||||
}; |
||||
@ -0,0 +1,45 @@
|
||||
import React, { useEffect, useState } from 'react'; |
||||
import { useForm } from 'react-hook-form'; |
||||
import {useHistory} from 'react-router-dom'; |
||||
import { useDispatch, useSelector } from 'react-redux'; |
||||
import {Col, Row, Form } from 'reactstrap'; |
||||
import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction'; |
||||
import * as yup from 'yup'; |
||||
import { yupResolver } from '@hookform/resolvers/yup'; |
||||
import FlightPlanAreaDetailForm from '../../../../components/basis/flight/plan/FlightPlanAreaDetailForm'; |
||||
|
||||
const FlightPlanAreaDetailContainer = (props) => { |
||||
const dispatch = useDispatch(); |
||||
const history = useHistory(); |
||||
|
||||
// const { areaList } = useSelector(state => state.flightState);
|
||||
const [airArea, setAirArea] = useState(null); |
||||
|
||||
|
||||
const validSchema = yup.object().shape({
|
||||
}); |
||||
|
||||
const { register, getValues, setValue, errors, handleSubmit } = useForm({ |
||||
defaultValues: {
|
||||
coodinates: [], |
||||
radius: '', |
||||
altitude_m: '', |
||||
altitude_ft: '', |
||||
}, |
||||
resolver: yupResolver(validSchema) |
||||
}); |
||||
|
||||
|
||||
return (
|
||||
<Row> |
||||
<Col> |
||||
<FlightPlanAreaDetailForm |
||||
// openModal={openModal}
|
||||
/> |
||||
</Col> |
||||
</Row> |
||||
|
||||
) |
||||
} |
||||
|
||||
export default FlightPlanAreaDetailContainer; |
||||
Loading…
Reference in new issue