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 1/3] =?UTF-8?q?=EB=B9=84=ED=96=89=EA=B3=84=ED=9A=8D?= =?UTF-8?q?=EC=84=9C=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 00000000..a07daf45 --- /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 00000000..44a55929 --- /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 00000000..624aaa22 --- /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 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..3475f73c --- /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 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..9b7b49b8 --- /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 From 169d01c12690ef48b1a5d307004513a096cc95b7 Mon Sep 17 00:00:00 2001 From: geun1416 <1416geun@palnet.co.kr> Date: Wed, 22 Jun 2022 17:04:31 +0900 Subject: [PATCH 2/3] . --- .env.development | 2 +- src/assets/css/custom.css | 4 +++ .../basis/flight/plan/FlightPlanAreaForm.js | 14 +++++---- .../basis/flight/plan/FlightPlanAreaMap.js | 1 + .../basis/flight/plan/FlightPlanForm.js | 31 +++++++++---------- 5 files changed, 29 insertions(+), 23 deletions(-) diff --git a/.env.development b/.env.development index 69e358de..77eb0258 100644 --- a/.env.development +++ b/.env.development @@ -1,3 +1,3 @@ -REACT_APP_HOST = http://localhost:8080/ +REACT_APP_HOST = http://192.168.0.24:8080/ REACT_APP_WS_HOST = ws://localhost:8081/ws REACT_APP_IMAGE_HOST = https://palnet-file.s3.ap-northeast-2.amazonaws.com/ diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css index 20f71073..4ee9ac1b 100644 --- a/src/assets/css/custom.css +++ b/src/assets/css/custom.css @@ -718,3 +718,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/flight/plan/FlightPlanAreaForm.js b/src/components/basis/flight/plan/FlightPlanAreaForm.js index a07daf45..2de40024 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaForm.js +++ b/src/components/basis/flight/plan/FlightPlanAreaForm.js @@ -67,7 +67,7 @@ const FlightPlanAreaForm = () => {
- +
- - + + +
@@ -96,9 +97,9 @@ const FlightPlanAreaForm = () => { name='ownerNm' size='sm' placeholder='m' - /> - - + /> +
+
{ size='sm' placeholder='ft' /> +
diff --git a/src/components/basis/flight/plan/FlightPlanAreaMap.js b/src/components/basis/flight/plan/FlightPlanAreaMap.js index 44a55929..bed2c681 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaMap.js +++ b/src/components/basis/flight/plan/FlightPlanAreaMap.js @@ -44,6 +44,7 @@ const FlightPlanAreaMap = () => {
+ ) } diff --git a/src/components/basis/flight/plan/FlightPlanForm.js b/src/components/basis/flight/plan/FlightPlanForm.js index 624aaa22..708f1b8f 100644 --- a/src/components/basis/flight/plan/FlightPlanForm.js +++ b/src/components/basis/flight/plan/FlightPlanForm.js @@ -81,7 +81,7 @@ const FlightPlanForm = (props) => { - + { - + - + @@ -262,7 +262,7 @@ const FlightPlanForm = (props) => {
- + - -
-
- - + - - + + +
@@ -324,8 +321,8 @@ const FlightPlanForm = (props) => { size='sm' placeholder='m' /> - - +
+
{ size='sm' placeholder='ft' /> - +
+ +
From a98acd29c02876f022607223d5fc69c815c0fc47 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 17:28:41 +0900 Subject: [PATCH 3/3] =?UTF-8?q?picker=20error=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.development | 2 +- src/components/basis/dron/BasisDronForm.js | 3 +-- src/components/basis/flight/plan/FlightPlanForm.js | 1 + src/containers/basis/flight/plan/FlightPlanAreaContainer.js | 4 +--- src/views/basis/flight/plan/FlightPlanDetail.js | 1 + 5 files changed, 5 insertions(+), 6 deletions(-) diff --git a/.env.development b/.env.development index 77eb0258..69e358de 100644 --- a/.env.development +++ b/.env.development @@ -1,3 +1,3 @@ -REACT_APP_HOST = http://192.168.0.24:8080/ +REACT_APP_HOST = http://localhost:8080/ REACT_APP_WS_HOST = ws://localhost:8081/ws REACT_APP_IMAGE_HOST = https://palnet-file.s3.ap-northeast-2.amazonaws.com/ 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/FlightPlanForm.js b/src/components/basis/flight/plan/FlightPlanForm.js index 708f1b8f..8a758b86 100644 --- a/src/components/basis/flight/plan/FlightPlanForm.js +++ b/src/components/basis/flight/plan/FlightPlanForm.js @@ -10,6 +10,7 @@ import { Button } from 'reactstrap'; import Flatpickr from 'react-flatpickr'; +import '@styles/react/libs/flatpickr/flatpickr.scss'; const FlightPlanForm = (props) => { diff --git a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js index 3475f73c..9c530afb 100644 --- a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js @@ -1,5 +1,4 @@ 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'; @@ -12,8 +11,7 @@ const FlightPlanAreaContainer = () => { - + diff --git a/src/views/basis/flight/plan/FlightPlanDetail.js b/src/views/basis/flight/plan/FlightPlanDetail.js index 9b7b49b8..2e0fb4e6 100644 --- a/src/views/basis/flight/plan/FlightPlanDetail.js +++ b/src/views/basis/flight/plan/FlightPlanDetail.js @@ -1,6 +1,7 @@ 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 (