From e604d55bdd1678dce3c0b4040cd130620e0750a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?scnoh=28=EB=85=B8=EC=8A=B9=EC=B2=A0=29?= Date: Wed, 22 Jun 2022 16:03:26 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=EA=B3=84=ED=9A=8D=EC=84=9C?= =?UTF-8?q?=20=ED=99=94=EB=A9=B4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../basis/flight/plan/FlightPlanAreaForm.js | 122 ++++++ .../basis/flight/plan/FlightPlanAreaMap.js | 51 +++ .../basis/flight/plan/FlightPlanForm.js | 378 ++++++++++++++++++ .../basis/flight/plan/FlightPlanGrid.js | 62 +++ src/components/modal/FormModal.js | 37 ++ .../flight/plan/FlightPlanAreaContainer.js | 23 ++ .../basis/flight/plan/FlightPlanContainer.js | 24 ++ .../flight/plan/FlightPlanDetailContainer.js | 42 ++ src/navigation/basis/index.js | 16 +- src/router/routes/RouteBasis.js | 14 +- src/views/basis/flight/plan/FlightPlan.js | 14 + .../basis/flight/plan/FlightPlanDetail.js | 11 + 12 files changed, 792 insertions(+), 2 deletions(-) create mode 100644 src/components/basis/flight/plan/FlightPlanAreaForm.js create mode 100644 src/components/basis/flight/plan/FlightPlanAreaMap.js create mode 100644 src/components/basis/flight/plan/FlightPlanForm.js create mode 100644 src/components/basis/flight/plan/FlightPlanGrid.js create mode 100644 src/components/modal/FormModal.js create mode 100644 src/containers/basis/flight/plan/FlightPlanAreaContainer.js create mode 100644 src/containers/basis/flight/plan/FlightPlanContainer.js create mode 100644 src/containers/basis/flight/plan/FlightPlanDetailContainer.js create mode 100644 src/views/basis/flight/plan/FlightPlan.js create mode 100644 src/views/basis/flight/plan/FlightPlanDetail.js diff --git a/src/components/basis/flight/plan/FlightPlanAreaForm.js b/src/components/basis/flight/plan/FlightPlanAreaForm.js new file mode 100644 index 0000000..a07daf4 --- /dev/null +++ b/src/components/basis/flight/plan/FlightPlanAreaForm.js @@ -0,0 +1,122 @@ +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 0000000..44a5592 --- /dev/null +++ b/src/components/basis/flight/plan/FlightPlanAreaMap.js @@ -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 ( + + +
+
+
+

지도 영역

+
+
+
+ +
+ + + ) +} + +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 0000000..624aaa2 --- /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'; + + +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 0000000..8e7bb6e --- /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 0000000..5c7f92f --- /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 0000000..3475f73 --- /dev/null +++ b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js @@ -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 ( + + + + + + + + + + ) +} + +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 0000000..980e913 --- /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 0000000..da3a91d --- /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 850a6e8..300c5e7 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 3f19534..ce7dd1f 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 0000000..b7a5c86 --- /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 0000000..9b7b49b --- /dev/null +++ b/src/views/basis/flight/plan/FlightPlanDetail.js @@ -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 ( + + ) +} + +export default FlightPlanDetail; \ No newline at end of file