diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css index 4bed2a06..a0ddc8c1 100644 --- a/src/assets/css/custom.css +++ b/src/assets/css/custom.css @@ -724,3 +724,7 @@ background-size: 75% auto; .datepicker-border-sm{border:1px solid #404656;padding:0 20px;border-radius:20px;} .datepicker-border-sm input{width:100px;height:34px;padding:0 0 0 1rem;} + +.m_ft{display:flex;align-items:flex-end; justify-content: space-between;} +.m_ft_box{flex:0 0 49%} +.m_ft_box + .m_ft_box{margin-left:1%} \ No newline at end of file diff --git a/src/components/basis/dron/BasisDronForm.js b/src/components/basis/dron/BasisDronForm.js index 02c7e743..86cb13d5 100644 --- a/src/components/basis/dron/BasisDronForm.js +++ b/src/components/basis/dron/BasisDronForm.js @@ -131,8 +131,7 @@ export const BasisDronForm = props => { name='arcrftTypeCd' id='arcrftTypeCd' size='sm' - innerRef={props.data} - id='test' + innerRef={props.data} className={classnames({ 'is-invalid': props.errors.arcrftTypeCd })} diff --git a/src/components/basis/flight/plan/FlightPlanAreaForm.js b/src/components/basis/flight/plan/FlightPlanAreaForm.js new file mode 100644 index 00000000..2de40024 --- /dev/null +++ b/src/components/basis/flight/plan/FlightPlanAreaForm.js @@ -0,0 +1,124 @@ +import React from 'react'; +import { + Card, + CardBody, + Col, + FormGroup, + Input, + Label, + Row, + Button +} from 'reactstrap'; + +const FlightPlanAreaForm = () => { + + return ( + + +
+
+
+

상세 정보

+
+
+ {/* {props.type === 'update' ? ( + 최종 수정일자 : {props.updateDt} + ) : null} */} +
+
+ +
+
+
+ + + + + + + + +
+
+ + + + + + + + +
+
+ + + + + + + + +
+
+ + + +
+ + +
+
+ +
+ + + +
+
+
+ +
+ + + ) +} + +export default FlightPlanAreaForm; \ No newline at end of file diff --git a/src/components/basis/flight/plan/FlightPlanAreaMap.js b/src/components/basis/flight/plan/FlightPlanAreaMap.js new file mode 100644 index 00000000..bed2c681 --- /dev/null +++ b/src/components/basis/flight/plan/FlightPlanAreaMap.js @@ -0,0 +1,52 @@ +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 ( + + +
+
+
+

지도 영역

+
+
+
+ +
+ + + + ) +} + +export default FlightPlanAreaMap; \ No newline at end of file diff --git a/src/components/basis/flight/plan/FlightPlanForm.js b/src/components/basis/flight/plan/FlightPlanForm.js new file mode 100644 index 00000000..8a758b86 --- /dev/null +++ b/src/components/basis/flight/plan/FlightPlanForm.js @@ -0,0 +1,378 @@ +import React from 'react'; +import { + Card, + CardBody, + Col, + FormGroup, + Input, + Label, + Row, + Button +} from 'reactstrap'; +import Flatpickr from 'react-flatpickr'; +import '@styles/react/libs/flatpickr/flatpickr.scss'; + + +const FlightPlanForm = (props) => { + return ( + + + + + + + + +
+
+
+

상세정보

+
+
+ {/* {props.type === 'update' ? ( + 최종 수정일자 : {props.updateDt} + ) : null} */} +
+
+ +
+
+
+

신청인 정보

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + +
+
+ +
+
+

비행 계획 정보

+
+
+ + + + + + + + + + + + + + +
+
+ + + + + + + {/* CDNOT 코드연동 필요 */} + {/* {ARCTFT_TYPE_CD.map(item => { + return ( + + ); + })} */} + + + + + + + + + {/* CDNOT 코드연동 필요 */} + {/* {ARCTFT_TYPE_CD.map(item => { + return ( + + ); + })} */} + + + + + + + + {/* {props.errors && props.errors.arcrftModelNm && ( + + {props.errors.arcrftModelNm.message} + + )} */} + + + +
+
+ +
+
+

비행 구역 정보

+ + 비행 구역 설정 + +
+
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+
+ +
+ + + + +
+
+ +
+ + 저장 + + + 삭제 + +
+ +
+
+ + + + + + + + + + ) +} + +export default FlightPlanForm; \ No newline at end of file diff --git a/src/components/basis/flight/plan/FlightPlanGrid.js b/src/components/basis/flight/plan/FlightPlanGrid.js new file mode 100644 index 00000000..8e7bb6e7 --- /dev/null +++ b/src/components/basis/flight/plan/FlightPlanGrid.js @@ -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 ( +
+ + +
+
+

{"비행 계획"} 목록

+ 검색결과 총 0건 +
+
+ + 계획서 생성 + +
+
+
+ +
+ {/* */} +
+ +
+ + +
+ ) +} + +export default FlightPlanGrid; \ No newline at end of file diff --git a/src/components/modal/FormModal.js b/src/components/modal/FormModal.js new file mode 100644 index 00000000..5c7f92f2 --- /dev/null +++ b/src/components/modal/FormModal.js @@ -0,0 +1,37 @@ +import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; + +export const FormModal = props => { + return ( +
+ + props.setModal({ ...props.modal, isOpen: !props.modal.isOpen }) + } + className='modal-dialog-centered modal-xl' + > + + props.setModal({ ...props.modal, isOpen: !props.modal.isOpen }) + } + > + {props.modal.title} + + + {props.modal.contents} + + + + + +
+ ); +}; diff --git a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js new file mode 100644 index 00000000..9c530afb --- /dev/null +++ b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js @@ -0,0 +1,21 @@ +import React, { useState } from 'react'; +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 ( + + + + + + + + + + ) +} + +export default FlightPlanAreaContainer; \ No newline at end of file diff --git a/src/containers/basis/flight/plan/FlightPlanContainer.js b/src/containers/basis/flight/plan/FlightPlanContainer.js new file mode 100644 index 00000000..980e913c --- /dev/null +++ b/src/containers/basis/flight/plan/FlightPlanContainer.js @@ -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 ( + + + + ) +} + +export default FlightPlanContainer; \ No newline at end of file diff --git a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js new file mode 100644 index 00000000..da3a91dd --- /dev/null +++ b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js @@ -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: + }); + } + + return ( + + + + + ) + +} + +export default FlightPlanDetailContainer; \ No newline at end of file diff --git a/src/navigation/basis/index.js b/src/navigation/basis/index.js index 850a6e89..300c5e74 100644 --- a/src/navigation/basis/index.js +++ b/src/navigation/basis/index.js @@ -45,5 +45,19 @@ export default [ } ], navLink: '#' - } + }, + { + id: 'basis_001_03', + type: 'dropdown', + title: '비행 계획 관리', + children: [ + { + id: 'basis_001_03_01', + type: 'item', + title: '비행 계획 목록', + navLink: '/basis/flight/plan/index' + } + ], + navLink: '#' + } ]; diff --git a/src/router/routes/RouteBasis.js b/src/router/routes/RouteBasis.js index 3f195349..ce7dd1f4 100644 --- a/src/router/routes/RouteBasis.js +++ b/src/router/routes/RouteBasis.js @@ -38,7 +38,19 @@ const RouteBasis = [ { path: '/basis/dron/create', component: lazy(() => import('../../views/basis/dron/BasisDronDetail')) - } + }, + { + path: '/basis/flight/plan/index', + component: lazy(() => import('../../views/basis/flight/plan/FlightPlan')) + }, + { + path: '/basis/flight/plan/create', + component: lazy(() => import('../../views/basis/flight/plan/FlightPlanDetail')) + }, + { + path: '/basis/flight/plan/detail/:id', + component: lazy(() => import('../../views/basis/flight/plan/FlightPlanDetail')) + }, ]; export default RouteBasis; diff --git a/src/views/basis/flight/plan/FlightPlan.js b/src/views/basis/flight/plan/FlightPlan.js new file mode 100644 index 00000000..b7a5c86e --- /dev/null +++ b/src/views/basis/flight/plan/FlightPlan.js @@ -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 ( + + ); +}; + +export default FlightPlan; \ No newline at end of file diff --git a/src/views/basis/flight/plan/FlightPlanDetail.js b/src/views/basis/flight/plan/FlightPlanDetail.js new file mode 100644 index 00000000..2e0fb4e6 --- /dev/null +++ b/src/views/basis/flight/plan/FlightPlanDetail.js @@ -0,0 +1,12 @@ +import React, { useState } from 'react'; +import FlightPlanDetailContainer from '../../../../containers/basis/flight/plan/FlightPlanDetailContainer'; +import '../../../../assets/css/custom.css'; +import '@styles/react/libs/flatpickr/flatpickr.scss'; + +const FlightPlanDetail = () => { + return ( + + ) +} + +export default FlightPlanDetail; \ No newline at end of file