From 47ad91a0a55e5e3a87c6696153b896b73c10b55a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?qkr7828=28=EB=B0=95=EC=9E=AC=EC=9A=B0=29?= Date: Thu, 14 Jul 2022 15:03:03 +0900 Subject: [PATCH 01/21] =?UTF-8?q?=EB=B9=84=ED=96=89=EA=B3=84=ED=9A=8D?= =?UTF-8?q?=EC=84=9C=20=ED=8F=BC=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../basis/flight/plan/FlightPlanForm.js | 185 +++++++++--------- src/components/mapDraw/naver/NaverMap.js | 2 +- .../mapDraw/naver/draw/JQueryDraw.js | 1 - 3 files changed, 93 insertions(+), 95 deletions(-) diff --git a/src/components/basis/flight/plan/FlightPlanForm.js b/src/components/basis/flight/plan/FlightPlanForm.js index 555fbd1..2729735 100644 --- a/src/components/basis/flight/plan/FlightPlanForm.js +++ b/src/components/basis/flight/plan/FlightPlanForm.js @@ -47,51 +47,49 @@ const FlightPlanForm = (props) => { - - - - - - - - -
- - - - - + + +
+ + +
+
+ +
- + - + { - + + - + - + + @@ -163,8 +175,8 @@ const FlightPlanForm = (props) => { { { {
{ { { { { { {
{ { { {
- + { - -
- - -
-
- -
+ + + - - +
diff --git a/src/components/mapDraw/naver/NaverMap.js b/src/components/mapDraw/naver/NaverMap.js index 91778cc..f6e91aa 100644 --- a/src/components/mapDraw/naver/NaverMap.js +++ b/src/components/mapDraw/naver/NaverMap.js @@ -5,7 +5,7 @@ import geoJson from '../geojson/airArea.json'; import { FeatureAirZone } from './feature/FeatureAirZone'; import { DrawMap } from './draw/DrawMap'; import { JQueryDraw } from './draw/JQueryDraw'; -import { JQueryTest } from './draw/JQueryTest'; + export const NaverCustomMap = () => { const naver = window.naver; diff --git a/src/components/mapDraw/naver/draw/JQueryDraw.js b/src/components/mapDraw/naver/draw/JQueryDraw.js index c5cccf2..b2f32b4 100644 --- a/src/components/mapDraw/naver/draw/JQueryDraw.js +++ b/src/components/mapDraw/naver/draw/JQueryDraw.js @@ -4,7 +4,6 @@ import { CustomInput } from 'reactstrap'; import GeoJSONReader from 'jsts/org/locationtech/jts/io/GeoJSONReader' import GeoJSONWriter from 'jsts/org/locationtech/jts/io/GeoJSONWriter' -import GeometryFactory from 'jsts/org/locationtech/jts/geom/GeometryFactory' import {BufferOp} from 'jsts/org/locationtech/jts/operation/buffer' export const JQueryDraw = props => { From ffb4d14ed7ca02cd96df2b81cd3cdbd28df0f19d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?qkr7828=28=EB=B0=95=EC=9E=AC=EC=9A=B0=29?= Date: Sun, 17 Jul 2022 00:07:25 +0900 Subject: [PATCH 02/21] =?UTF-8?q?=EB=B9=84=ED=96=89=EA=B3=84=ED=9A=8D?= =?UTF-8?q?=EC=84=9C=20=EC=8B=A0=EC=B2=AD=20=ED=8F=BC=20=EC=9E=91=EC=97=85?= =?UTF-8?q?(=EC=9E=91=EC=97=85=EC=A4=91......)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../basis/flight/plan/FlightPlanForm.js | 29 ++++---- .../flight/plan/FlightPlanDetailContainer.js | 72 +++++++++++++++++-- .../basis/flight/actions/basisFlightAction.ts | 15 +++- .../basis/flight/models/basisFlightModel.ts | 15 +++- 4 files changed, 107 insertions(+), 24 deletions(-) diff --git a/src/components/basis/flight/plan/FlightPlanForm.js b/src/components/basis/flight/plan/FlightPlanForm.js index 2729735..77ad37c 100644 --- a/src/components/basis/flight/plan/FlightPlanForm.js +++ b/src/components/basis/flight/plan/FlightPlanForm.js @@ -25,9 +25,9 @@ const FlightPlanForm = (props) => {
-
+ {/*

상세정보

-
+
*/}
{/* {props.type === 'update' ? ( 최종 수정일자 : {props.updateDt} @@ -41,16 +41,19 @@ const FlightPlanForm = (props) => {

신청인 정보

+ @@ -77,7 +80,7 @@ const FlightPlanForm = (props) => { name='hpno' size='sm' placeholder='010-0000-0000' - readOnly + />
@@ -500,8 +503,8 @@ const FlightPlanForm = (props) => { { { className='mr-1' color='primary' size='sm' - // onClick={ - // pageType === 'create' - // ? handleSubmit(handlerCreate) - // : handleSubmit(handlerUpdate) - // } + onClick={props.handlerSave} > 저장 diff --git a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js index 3df9a61..24e4be2 100644 --- a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js @@ -10,17 +10,38 @@ import { yupResolver } from '@hookform/resolvers/yup'; import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction'; import { useForm } from 'react-hook-form'; -const FlightPlanDetailContainer = () => { +const FlightPlanDetailContainer = props => { const dispatch = useDispatch(); const history = useHistory(); - + const [pageType, setPageType] = useState('create'); const { flightPlanArea } = useSelector(state => state.flightState); const [areaInfo, setAreaInfo] = useState(); const [modal, setModal] = useState({ isOpen: false, title: '', }); - + const { listFlightP, flightCount, isRefreshFlight } = useSelector( + state => state.flightState + ); + const [flightPlanData, setFlightPlanData] = useState({ + id: '', + memberName: '', + clncd: '', + hpno: '', + email:'', + createDt: '', + createUserId: '', + updateUserId: '', + updateDt: '' + }); + useEffect(() => { + console.log('isRefreshFlight>>>>', isRefreshFlight); + if (isRefreshFlight) { + console.log(isRefreshFlight); + handlerSearch(); + } + }, [isRefreshFlight]); + const [flightPlanDataList, setFlightPlanDataList] = useState([]); /* Form Validation Checking */ const validSchema = yup.object().shape({ }); @@ -31,29 +52,68 @@ const FlightPlanDetailContainer = () => { altitude_m: '', altitude_ft: '', }, - resolver: yupResolver(validSchema) + resolver: yupResolver(validSchema) }) const saveFlightPlanArea = () => { console.log('비행 구역 설정 저장'); } - + useEffect(() => { + if (props.id) { + handlerSearch(); + setPageType('update'); + } + // console.log(selectData); + }, []); + useEffect(() => { + let newArr = []; + + listFlightP?.map(item => { + newArr.push({ ...item }); + }); + setFlightPlanDataList(listFlightP); + }, [listFlightP]); const openModal = () => { setModal({ isOpen: true, title: '비행 구역 설정', }); } + const handlerCreate = async data => { + console.log('data>>>>>', data); + console.log('flightPlanData>>>',flightPlanData); + let saveArr = flightPlanData; + dispatch( + Actions.FLIGHT_PLAN_CREATE.request({ + data: saveArr + }) + ); + }; + const onChange = (e) => { + setFlightPlanData({ + ...flightPlanData, + [e.target.name]: e.target.value, + }); + }; + const handlerDelete = async data => { + // dispatch(Actions.IDNTF_DELETE.request(data.arcrftSno)); + }; useEffect(() => { setAreaInfo(flightPlanArea); }, [flightPlanArea]); - + return ( (); +export const FLIGHT_PLAN_CREATE = createAsyncAction( + FLIGHT_PLAN_CREATE_REQUEST, + FLIGHT_PLAN_CREATE_SUCCESS, + FLIGHT_PLAN_CREATE_FAILURE +)(); + const actions = { AREA_LIST, - FLIGHT_PLAN_AREA + FLIGHT_PLAN_AREA, + FLIGHT_PLAN_CREATE }; export type FlightAction = ActionType; \ No newline at end of file diff --git a/src/modules/basis/flight/models/basisFlightModel.ts b/src/modules/basis/flight/models/basisFlightModel.ts index abcedbc..e080053 100644 --- a/src/modules/basis/flight/models/basisFlightModel.ts +++ b/src/modules/basis/flight/models/basisFlightModel.ts @@ -15,7 +15,20 @@ export interface FlightPlanArea { altitude_ft : '', } +export interface FlightPlanData { + id: '', + memberName: '', + clncd: '', + hpno: '', + email:'', + createDt: '', + createUserId: '', + updateUserId: '', + updateDt: '' +} + export const initFlight = { areaList: undefined, - flightPlanArea: undefined + flightPlanArea: undefined, + flightPlanData: undefined }; \ No newline at end of file From 4c41fc5203b262dfd17651cd7509f6dc8c8e2cc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?qkr7828=28=EB=B0=95=EC=9E=AC=EC=9A=B0=29?= Date: Tue, 19 Jul 2022 09:46:26 +0900 Subject: [PATCH 03/21] =?UTF-8?q?=EB=B9=84=ED=96=89=EA=B3=84=ED=9A=8D?= =?UTF-8?q?=EC=84=9C=20=ED=8F=BC=20+=20api=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../basis/flight/plan/FlightPlanForm.js | 128 +++++++++++------- .../flight/plan/FlightPlanDetailContainer.js | 53 ++++++-- .../basis/flight/apis/basisFlightApi.ts | 11 +- .../basis/flight/models/basisFlightModel.ts | 33 +++-- .../flight/reducers/basisFlightReducer.ts | 6 + .../basis/flight/sagas/basisFlightSaga.ts | 50 ++++++- 6 files changed, 212 insertions(+), 69 deletions(-) diff --git a/src/components/basis/flight/plan/FlightPlanForm.js b/src/components/basis/flight/plan/FlightPlanForm.js index 77ad37c..540e389 100644 --- a/src/components/basis/flight/plan/FlightPlanForm.js +++ b/src/components/basis/flight/plan/FlightPlanForm.js @@ -11,6 +11,8 @@ import { } from 'reactstrap'; import Flatpickr from 'react-flatpickr'; import '@styles/react/libs/flatpickr/flatpickr.scss'; +import moment from 'moment'; + const FlightPlanForm = (props) => { @@ -48,12 +50,10 @@ const FlightPlanForm = (props) => { @@ -69,7 +69,9 @@ const FlightPlanForm = (props) => { id='clncd' name='clncd' size='sm' - placeholder='+82' + placeholder='+82' + value='+82' + readOnly />
@@ -79,6 +81,7 @@ const FlightPlanForm = (props) => { id='hpno' name='hpno' size='sm' + onChange={props.onChange} placeholder='010-0000-0000' @@ -94,6 +97,7 @@ const FlightPlanForm = (props) => { id='email' name='email' size='sm' + onChange={props.onChange} // innerRef={props.data} placeholder='' /> @@ -151,6 +155,10 @@ const FlightPlanForm = (props) => { type='text' id='schFltStDt' name='schFltStDt' + value={props.schFltStDt} + onChange={val => + props.handlerInput(val) + } // innerRef={props.data} placeholder='비행 시작일자 선택(클릭)'/> @@ -159,13 +167,17 @@ const FlightPlanForm = (props) => { + props.handlerInput(val) + } // innerRef={props.data} placeholder='비행 종료일자 선택(클릭)'/> @@ -181,12 +193,19 @@ const FlightPlanForm = (props) => { name='fltPurpose' id='fltPurpose' size='sm' + onChange={props.onChange} // innerRef={props.data} // className={classnames({ // 'is-invalid': props.errors.arcrftTypeCd // })} > + + + + + + {/* CDNOT 코드연동 필요 */} {/* {ARCTFT_TYPE_CD.map(item => { return ( @@ -289,11 +308,12 @@ const FlightPlanForm = (props) => { @@ -308,18 +328,20 @@ const FlightPlanForm = (props) => { id='fltElev' name='fltElev' size='sm' - placeholder='반경' - readOnly + placeholder='반경' + onChange={props.onChange} + />
@@ -335,11 +357,12 @@ const FlightPlanForm = (props) => { @@ -354,7 +377,8 @@ const FlightPlanForm = (props) => { name='fltMethod' size='sm' placeholder='' - readOnly + onChange={props.onChange} + /> @@ -365,11 +389,12 @@ const FlightPlanForm = (props) => { @@ -399,8 +424,9 @@ const FlightPlanForm = (props) => { id='groupNm' name='groupNm' size='sm' - placeholder='' - readOnly + placeholder='' + onChange={props.onChange} + /> @@ -411,11 +437,12 @@ const FlightPlanForm = (props) => { @@ -434,18 +461,20 @@ const FlightPlanForm = (props) => { id='clncd' name='clncd' size='sm' - placeholder='+82' - readOnly + placeholder='+82' + onChange={props.onChange} + />
@@ -458,11 +487,12 @@ const FlightPlanForm = (props) => { @@ -488,11 +518,12 @@ const FlightPlanForm = (props) => { @@ -507,7 +538,8 @@ const FlightPlanForm = (props) => { name='arcrftModelNm' size='sm' placeholder='' - readOnly + onChange={props.onChange} + /> @@ -526,7 +558,8 @@ const FlightPlanForm = (props) => { name='arcrftTypeCd' size='sm' placeholder='' - readOnly + onChange={props.onChange} + /> @@ -541,7 +574,8 @@ const FlightPlanForm = (props) => { name='ownerNm' size='sm' placeholder='' - readOnly + onChange={props.onChange} + /> diff --git a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js index 24e4be2..3eb53db 100644 --- a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js @@ -9,6 +9,8 @@ import * as yup from 'yup'; import { yupResolver } from '@hookform/resolvers/yup'; import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction'; import { useForm } from 'react-hook-form'; +import moment from 'moment'; +import { Save } from 'react-feather'; const FlightPlanDetailContainer = props => { const dispatch = useDispatch(); @@ -20,20 +22,38 @@ const FlightPlanDetailContainer = props => { isOpen: false, title: '', }); + const { listFlightP, flightCount, isRefreshFlight } = useSelector( state => state.flightState ); const [flightPlanData, setFlightPlanData] = useState({ - id: '', - memberName: '', - clncd: '', - hpno: '', + id:'', + memberName:'', + clncd: '+82', + hpno:'', email:'', - createDt: '', - createUserId: '', - updateUserId: '', - updateDt: '' + lonlat:'', + lonlat2:'', + lonlat3:'', + fltElev:'', + fltHight:'', + fltMethod:'', + groupNm:'', + pilotName:'', + pilotHpno:'', + pilotEmail:'', + aGroupNm:'', + arcrftModelNm:'', + arcrftTypeCd:'', + ownerNm:'', + createUserId:'', + updateUserId:'' }); + const [params, setParams] = useState({ + schFltStDt: moment().subtract(1, 'day').format('YYYY-MM-DD'), + schFltEndDt: moment().subtract(-1, 'day').format('YYYY-MM-DD'), + search1: '' + }); useEffect(() => { console.log('isRefreshFlight>>>>', isRefreshFlight); if (isRefreshFlight) { @@ -81,21 +101,30 @@ const FlightPlanDetailContainer = props => { } const handlerCreate = async data => { console.log('data>>>>>', data); - console.log('flightPlanData>>>',flightPlanData); - let saveArr = flightPlanData; + console.log('flightPlanData>>>',{flightPlanData, params}); + let saveArr = {flightPlanData, params}; dispatch( Actions.FLIGHT_PLAN_CREATE.request({ data: saveArr }) ); }; + const handlerInput = (val) => { + setParams({ + ...params, + schFltStDt: moment(val[1]).format('YYYY-MM-DD'), + schFltEndDt: moment(val[0]).format('YYYY-MM-DD') + }); + }; const onChange = (e) => { + setFlightPlanData({ ...flightPlanData, [e.target.name]: e.target.value, }); }; - + + const handlerDelete = async data => { // dispatch(Actions.IDNTF_DELETE.request(data.arcrftSno)); }; @@ -109,11 +138,13 @@ const FlightPlanDetailContainer = props => { data={flightPlanData} openModal={openModal} areaInfo={areaInfo} + params={params} handlerSave={ pageType === 'create' ? handlerCreate : handlerUpdate } onChange={onChange} handlerDelete={handlerDelete} + handlerInput={handlerInput} /> { return await axios.get(`api/bas/flight/area`); - } + }, + Create: async (data: FlightPlanData) => { + console.log(data); + + const res = await axios.post('api/bas/flight/create', data); + console.log('res>>>>', res); + + return res; + } } \ No newline at end of file diff --git a/src/modules/basis/flight/models/basisFlightModel.ts b/src/modules/basis/flight/models/basisFlightModel.ts index e080053..6afe7a4 100644 --- a/src/modules/basis/flight/models/basisFlightModel.ts +++ b/src/modules/basis/flight/models/basisFlightModel.ts @@ -1,6 +1,7 @@ export interface FlightState { areaList: FlightAreaData | undefined flightPlanArea: FlightPlanArea | undefined + flightPlanData: FlightPlanData | undefined } export interface FlightAreaData { @@ -16,15 +17,29 @@ export interface FlightPlanArea { } export interface FlightPlanData { - id: '', - memberName: '', - clncd: '', - hpno: '', - email:'', - createDt: '', - createUserId: '', - updateUserId: '', - updateDt: '' + id:string; + memberName:string; + clncd:string; + hpno:string; + email:string; + lonlat:string; + lonlat2:string; + lonlat3:string; + fltElev:string; + fltHight:string; + fltMethod:string; + groupNm:string; + pilotName:string; + pilotHpno:string; + pilotEmail:string; + aGroupNm:string; + arcrftModelNm:string; + arcrftTypeCd:string; + ownerNm:string; + createUserId:string; + updateUserId:string; + schFltStDt:Date; + schFltEndDt:Date; } export const initFlight = { diff --git a/src/modules/basis/flight/reducers/basisFlightReducer.ts b/src/modules/basis/flight/reducers/basisFlightReducer.ts index 708445a..bfaa0e7 100644 --- a/src/modules/basis/flight/reducers/basisFlightReducer.ts +++ b/src/modules/basis/flight/reducers/basisFlightReducer.ts @@ -18,4 +18,10 @@ export const flightReducer = createReducer ( const data = action.payload; draft.flightPlanArea = data; }) +) +.handleAction(Actions.FLIGHT_PLAN_CREATE.request, (state, action) => + produce(state, draft => { + const data = action.payload; + draft.flightPlanData = data; + }) ) \ No newline at end of file diff --git a/src/modules/basis/flight/sagas/basisFlightSaga.ts b/src/modules/basis/flight/sagas/basisFlightSaga.ts index 82362ef..07ee998 100644 --- a/src/modules/basis/flight/sagas/basisFlightSaga.ts +++ b/src/modules/basis/flight/sagas/basisFlightSaga.ts @@ -54,8 +54,56 @@ function* createFlightPlanArea(action: ActionType + ) { + try { + const detail = action.payload; + + console.log('detail>>>:', detail); + const res = yield call(Apis.flightPlanAPI.Create, detail); + console.log(res); + const { data } = res; + console.log('data:>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>', data.result); + if (data.result) { + yield put( + MessageActions.IS_MESSAGE({ + messageCode: SAVE_MESSAGE.code, + message: SAVE_MESSAGE.message, + isHistoryBack: false, + isRefresh: false + }) + ); + yield put(Actions.FLIGHT_PLAN_CREATE.success(data)); + } else { + console.log('errorCode >>> ', data.errorCode); + if (data.errorCode === 'DT002') { + yield put( + MessageActions.IS_ERROR({ + errorCode: DUPLATE_MESSAGE.code, + errorMessage: '식별번호가 ' + DUPLATE_MESSAGE.message, + isHistoryBack: false, + isRefresh: false + }) + ); + } else { + throw Error; + } + } + } catch (error) { + yield put( + MessageActions.IS_ERROR({ + errorCode: ERROR_MESSAGE.code, + errorMessage: ERROR_MESSAGE.message, + isHistoryBack: false, + isRefresh: false + }) + ); + // yield put(Actions.GROUP_CREATE.failure(error)); + } + } export function* flightSaga() { yield takeEvery(Actions.AREA_LIST.request, listAreaSaga); yield takeEvery(Actions.FLIGHT_PLAN_AREA.request, createFlightPlanArea); + yield takeEvery(Actions.FLIGHT_PLAN_CREATE.request, createFlightPlanData) } \ No newline at end of file From 1b453cb8291f1c610040ee85c1270ad8bbbad15e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?dhji=28=EC=A7=80=EB=8C=80=ED=95=9C=29?= Date: Mon, 25 Jul 2022 02:29:44 +0900 Subject: [PATCH 04/21] =?UTF-8?q?=EB=B9=84=ED=96=89=EA=B3=84=ED=9A=8D?= =?UTF-8?q?=EC=84=9C=20=EB=AA=A9=EB=A1=9D=20=EC=A1=B0=ED=9A=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../basis/flight/plan/FlightPlanForm.js | 238 +++++++------ .../basis/flight/plan/FlightPlanGrid.js | 129 +++---- .../basis/flight/plan/FlightPlanSearch.js | 327 +++++++++--------- .../flight/plan/FlightPlanAreaContainer.js | 36 +- .../basis/flight/plan/FlightPlanContainer.js | 62 +++- .../flight/plan/FlightPlanDetailContainer.js | 183 +++++----- .../basis/flight/actions/basisFlightAction.ts | 124 ++++++- .../basis/flight/apis/basisFlightApi.ts | 65 +++- .../basis/flight/models/basisFlightModel.ts | 139 ++++++-- .../flight/reducers/basisFlightReducer.ts | 56 ++- .../basis/flight/sagas/basisFlightSaga.ts | 196 ++++++----- 11 files changed, 935 insertions(+), 620 deletions(-) diff --git a/src/components/basis/flight/plan/FlightPlanForm.js b/src/components/basis/flight/plan/FlightPlanForm.js index 540e389..2854de5 100644 --- a/src/components/basis/flight/plan/FlightPlanForm.js +++ b/src/components/basis/flight/plan/FlightPlanForm.js @@ -2,12 +2,12 @@ import React from 'react'; import { Card, CardBody, - Col, + Col, FormGroup, Input, Label, - Row, - Button + Row, + Button } from 'reactstrap'; import Flatpickr from 'react-flatpickr'; import '@styles/react/libs/flatpickr/flatpickr.scss'; @@ -20,7 +20,7 @@ const FlightPlanForm = (props) => { - + @@ -43,7 +43,7 @@ const FlightPlanForm = (props) => {

신청인 정보

- + @@ -53,7 +53,7 @@ const FlightPlanForm = (props) => { id='memberName' name='memberName' onChange={props.onChange} - size='sm' + size='sm' placeholder='' /> @@ -67,28 +67,26 @@ const FlightPlanForm = (props) => {
- + @@ -104,8 +102,8 @@ const FlightPlanForm = (props) => { - - + + {/*
@@ -116,7 +114,7 @@ const FlightPlanForm = (props) => { type='text' id='applicantAddress' name='applicantAddress' - size='sm' + size='sm' // innerRef={props.data} placeholder='' /> @@ -129,12 +127,12 @@ const FlightPlanForm = (props) => { type='text' id='applicantAddress' name='applicantAddress' - size='sm' + size='sm' // innerRef={props.data} placeholder='' /> - +
*/} @@ -146,41 +144,57 @@ const FlightPlanForm = (props) => {
- + - - props.handlerInput(val) - } + onChange={(val) => { + console.log(val) + const data = {target: {}} + data.target.name = 'schFltStDt'; + data.target.value = val && val[0] && moment(val[0]).format('YYYY-MM-DD HH:mm:ss'); + props.onChange(data) + }} + // onChange={val => + // props.handlerInput(val) + // } // innerRef={props.data} - placeholder='비행 시작일자 선택(클릭)'/> - + placeholder='비행 시작일자 선택(클릭)'/> + - + - - props.handlerInput(val) - } + onChange={(val) => { + console.log(val) + const data = {target: {}} + data.target.name = 'schFltEndDt'; + data.target.value = val && val[0] && moment(val[0]).format('YYYY-MM-DD HH:mm:ss'); + props.onChange(data) + }} + // onChange={val => + // props.handlerInput(val) + // } // innerRef={props.data} - placeholder='비행 종료일자 선택(클릭)'/> - + placeholder='비행 종료일자 선택(클릭)'/> + @@ -194,7 +208,7 @@ const FlightPlanForm = (props) => { id='fltPurpose' size='sm' onChange={props.onChange} - // innerRef={props.data} + // innerRef={props.data} // className={classnames({ // 'is-invalid': props.errors.arcrftTypeCd // })} @@ -227,7 +241,7 @@ const FlightPlanForm = (props) => {
- + {/* */} - + {/* */} -
+

비행 구역 정보

- @@ -309,11 +323,11 @@ const FlightPlanForm = (props) => { @@ -326,26 +340,26 @@ const FlightPlanForm = (props) => {
- +
@@ -358,14 +372,14 @@ const FlightPlanForm = (props) => { - + - + - - + +

조종사 정보

- - 조종사 조회 + 조종사 조회
@@ -422,11 +436,11 @@ const FlightPlanForm = (props) => { @@ -438,11 +452,11 @@ const FlightPlanForm = (props) => { @@ -459,27 +473,27 @@ const FlightPlanForm = (props) => {
- + - +

기체 정보

- - 　기체 조회　 + 　기체 조회　
@@ -519,11 +533,11 @@ const FlightPlanForm = (props) => { @@ -535,11 +549,11 @@ const FlightPlanForm = (props) => { @@ -555,14 +569,14 @@ const FlightPlanForm = (props) => { - + - +
- +
{ > 저장 - 삭제
- + - + - + @@ -615,4 +629,4 @@ const FlightPlanForm = (props) => { ) } -export default FlightPlanForm; \ No newline at end of file +export default FlightPlanForm; diff --git a/src/components/basis/flight/plan/FlightPlanGrid.js b/src/components/basis/flight/plan/FlightPlanGrid.js index 062c220..15fd608 100644 --- a/src/components/basis/flight/plan/FlightPlanGrid.js +++ b/src/components/basis/flight/plan/FlightPlanGrid.js @@ -1,66 +1,71 @@ 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'; -import { GridDatabase } from '../../../crud/grid/GridDatatable'; +import {Button, Card, Col, Row} from 'reactstrap'; +import {GridDatabase} from '../../../crud/grid/GridDatatable'; +import {Redirect} from 'react-router-dom'; -const FlightPlanGrid = (props) => { - return ( -
- - -
-
- {/*

{"비행 계획"} 목록

*/} -

{"비행계획서 신청"} 목록

- 검색결과 총 0건 -
-
- - {/* 계획서 생성 */} - 비행계획서 신청 - -
-
-
- -
- - {/* 검색된 데이터가 없습니다. */} -
- -
- - -
- ) + +const FlightPlanGrid = ({movePage, planListData, handleMoveDetail}) => { + + const columns = [ + {id: 'planSno', name: '번호', cell: row => (
{row.planSno}
)}, + {id: 'fltPurpose', name: '비행목적', cell: row => (
{row.fltPurpose}
)}, + { + id: 'fltMethod', name: '비행방식', cell: row => { + const displayName = row.areaList && row.areaList.length > 0 && row.areaList[0].fltMethod || '-'; + return
{displayName}
+ } + }, + {id: 'schFltStDt', name: '출발일', cell: row => (
{row.schFltStDt}
)}, + {id: 'aprvlYn', name: '승인여부', cell: row => (
{row.aprvlYn}
)}, + { + id: 'moveDetail', name: '상세보기', cell: row => { + return { + handleMoveDetail(row.planSno)} + }>상세; + } + } + ]; + console.log(planListData, columns) + return ( +
+ + +
+
+ {/*

{"비행 계획"} 목록

*/} +

{"비행계획서 신청"} 목록

+ 검색결과 총 0건 +
+
+ + {/* 계획서 생성 */} + 비행계획서 신청 + +
+
+
+ +
+ + {/* 검색된 데이터가 없습니다. */} +
+ +
+ + +
+ ) } -export default FlightPlanGrid; \ No newline at end of file +export default FlightPlanGrid; diff --git a/src/components/basis/flight/plan/FlightPlanSearch.js b/src/components/basis/flight/plan/FlightPlanSearch.js index 2bbcb88..c1ddd8b 100644 --- a/src/components/basis/flight/plan/FlightPlanSearch.js +++ b/src/components/basis/flight/plan/FlightPlanSearch.js @@ -1,174 +1,173 @@ -import React, { useEffect, useState } from 'react'; -import { - Row, - Col, - Table, - Badge, - UncontrolledDropdown, - DropdownMenu, - DropdownItem, - DropdownToggle, - Card, - CardHeader, - CardBody, - CardTitle, - CardSubtitle, - ButtonGroup, - Button, - Input, - CustomInput, - FormGroup - } from 'reactstrap'; -import { Calendar, Search } from 'react-feather'; +import React, {useState} from 'react'; +import {Button, Card, CardBody, Col, CustomInput, Row} from 'reactstrap'; +import {Search} from 'react-feather'; import Flatpickr from 'react-flatpickr'; +import moment from 'moment'; -const FlightPlanSearch = (props) => { +const FlightPlanSearch = ({searchData, onChangeSearchData}) => { - const [isCheck, setIsCheck] = useState({ - all: true, - yes: false, - no: false - }); - - useEffect(() => { - let aprvYn = ''; - - if (!isCheck.all) { - if (isCheck.yes) { - aprvYn = 'Y'; - } else if (isCheck.no) { - aprvYn = 'N'; - } else { - aprvYn = '-'; - } + const {schFltStDt, schFltEndDt, aprvlYn} = searchData; + const initCheckState = { + 'all': aprvlYn == 'A', + 'yes': (aprvlYn == 'Y' || aprvlYn == 'A'), + 'no': (aprvlYn == 'N' || aprvlYn == 'A'), } - - // props.setParams({ - // ...props.params, - // aprvYn: aprvYn - // }); - }, [isCheck]); - - return ( -
- - -
-
-

검색조건

-
-
- props.handlerSearch()} - > - - 검색 - -
-
- - -
-
-
-
-
신청일
-
-
- - -
- - props.handlerInput('searchDate', val) - } - onKeyPress={props.onKeyPress} - className='form-control flat-picker bg-transparent border-0 shadow-none' - /> -
- - + const [checkState, setCheckState] = useState(initCheckState); + const handleChangeInput = (dates, value, config) => { + if (dates.length === 2) { + const schFltStDt = moment(dates[0]).format('YYYY-MM-DD HH:mm:ss'); + const schFltEndDt = moment(dates[1]).set({'h': 23, 'm': 59, 's': 59}).format('YYYY-MM-DD HH:mm:ss'); + onChangeSearchData({schFltStDt, schFltEndDt}) + } + } + const handleChangeCheckbox = (e) => { + const {name, value, checked} = e.target; + let val; + switch (value) { + case 'A': + val = checked ? 'A' : ''; + onChangeSearchData({[name]: val}) + setCheckState({ + 'all': checked, + 'yes': checked, + 'no': checked + }) + break; + case 'Y': + if (checked && checkState.no) val = 'A' + else if (checked && !checkState.no) val = 'Y' + else if (!checked && checkState.no) val = 'N' + else if (!checked && !checkState.no) val = '' + onChangeSearchData({[name]: val}) + setCheckState(prevState => ({ + 'all': prevState.no && checked, + 'yes': checked, + 'no': prevState.no + })) + break; + case 'N': + if (checked && checkState.yes) val = 'A' + else if (checked && !checkState.yes) val = 'N' + else if (!checked && checkState.yes) val = 'Y' + else if (!checked && !checkState.yes) val = '' + onChangeSearchData({[name]: val}) + setCheckState(prevState => ({ + 'all': prevState.yes && checked, + 'yes': prevState.yes, + 'no': checked + })) + break; + default: + break; + } + } + return ( +
+ + +
+
+

검색조건

-
-
-
- -
-
-
승인여부
-
- {/*
- -
*/} -
- - setIsCheckBox({ - all: !isCheck.all, - yes: !isCheck.all, - no: !isCheck.all - }) - } - /> - - setIsCheckBox({ - all: false, - yes: !isCheck.yes - }) - } - /> - - setIsCheckBox({ - all: false, - no: !isCheck.no - }) - } - /> +
+ { + }} + > + + 검색 +
-
-
-
-
- - - - - -
- ) + + +
+
+
+
+
신청일
+
+
+ + +
+ +
+ + +
+
+
+
+ +
+
+
승인여부
+
+
+ + + +
+
+
+
+
+
+ + + + + + + ) } -export default FlightPlanSearch; \ No newline at end of file +export default FlightPlanSearch; diff --git a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js index 39dc57e..33ef2bd 100644 --- a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js @@ -12,15 +12,15 @@ import { yupResolver } from '@hookform/resolvers/yup'; const FlightPlanAreaContainer = (props) => { const dispatch = useDispatch(); const history = useHistory(); - + const { areaList } = useSelector(state => state.flightState); const [airArea, setAirArea] = useState(null); - const validSchema = yup.object().shape({ + const validSchema = yup.object().shape({ }); const { register, getValues, setValue, errors, handleSubmit } = useForm({ - defaultValues: { + defaultValues: { coodinates: [], radius: '', altitude_m: '', @@ -34,42 +34,42 @@ const FlightPlanAreaContainer = (props) => { dispatch(Actions.AREA_LIST.request()); } - const createAirArea = async data => { - dispatch(Actions.FLIGHT_PLAN_AREA.request(data)); - - props.setModal({ ...props.modal, isOpen: !props.modal.isOpen }); - props.setOnSubmit(false); - } + // const createAirArea = async data => { + // dispatch(Actions.FLIGHT_AREA.request(data)); + // + // props.setModal({ ...props.modal, isOpen: !props.modal.isOpen }); + // props.setOnSubmit(false); + // } useEffect(() => { getAirAreaList(); }, []); - useEffect(() => { + useEffect(() => { setAirArea(areaList); - }, [areaList]) + }, [areaList]) - return ( + return ( {airArea != null ? ( - ) : null} + ) : null} - + + /> - - + + ) } -export default FlightPlanAreaContainer; \ No newline at end of file +export default FlightPlanAreaContainer; diff --git a/src/containers/basis/flight/plan/FlightPlanContainer.js b/src/containers/basis/flight/plan/FlightPlanContainer.js index 51f71b2..b530241 100644 --- a/src/containers/basis/flight/plan/FlightPlanContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanContainer.js @@ -1,38 +1,66 @@ -import React, { useState } from 'react'; +import React, {useEffect, useState} from 'react'; import moment from 'moment'; -import { Link, useHistory } from 'react-router-dom'; +import {Link, Redirect, useHistory} from 'react-router-dom'; import FlightPlanGrid from '../../../../components/basis/flight/plan/FlightPlanGrid'; -import { CustomMainLayout } from '../../../../components/layout/CustomMainLayout'; +import {CustomMainLayout} from '../../../../components/layout/CustomMainLayout'; import FlightPlanSearch from '../../../../components/basis/flight/plan/FlightPlanSearch'; +import {useDispatch, useSelector} from 'react-redux'; +import * as FlightAction from '../../../../modules/basis/flight/actions/basisFlightAction'; +import {FlightPlanListRqData} from '../../../../modules/basis/flight/models/basisFlightModel'; -const FlightPlanContainer = () => { +const initSearchData = { + schFltStDt: moment().set({'h': 0, 'm': 0, 's': 0}).format('YYYY-MM-DD HH:mm:ss'), + schFltEndDt: moment().set({'h': 23, 'm': 59, 's': 59}).format('YYYY-MM-DD HH:mm:ss'), + aprvlYn: 'N', +} +const columns = [{}] +const FlightPlanContainer = () => { + const dispatch = useDispatch(); const history = useHistory(); + const [searchData, setSerchData] = useState(initSearchData); + const planListData = useSelector(state => state.flightState.list); - const moveFlightPlan = () => { + const moveFlightPlanDetailPage = () => { history.push('/basis/flight/plan/create'); }; - const [times, setTimes] = useState({ - stDate: moment().subtract(1, 'day').format('YYYY-MM-DD'), - endDate: moment().subtract(-1, 'day').format('YYYY-MM-DD'), - search1: '' - }) + useEffect(() => { + dispatch(FlightAction.FLIGHT_PLAN_LIST.request(searchData)) + }, []) // console.log(history, 'history') + console.log(searchData) + const handleChangeSearchData = (values) => { + setSerchData(prevState => ({ + ...prevState, + ...values + })) + } + // 비행계획서 저장 + const handleClickCreate = () => { + + }; + const handleMoveDetail = (id) => { + history.push(`/basis/flight/plan/detail/${id}`) + } return ( // - - + + ) } -export default FlightPlanContainer; \ No newline at end of file +export default FlightPlanContainer; diff --git a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js index 3eb53db..c5f299b 100644 --- a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js @@ -1,137 +1,150 @@ import React, {useEffect, useState} from 'react'; import FlightPlanForm from '../../../../components/basis/flight/plan/FlightPlanForm'; -import { CustomDetailLayout } from '../../../../components/layout/CustomDetailLayout'; -import { FlightPlanAreaModal } from '../../../../components/basis/flight/plan/FlightPlanAreaModal'; +import {CustomDetailLayout} from '../../../../components/layout/CustomDetailLayout'; +import {FlightPlanAreaModal} from '../../../../components/basis/flight/plan/FlightPlanAreaModal'; import FlightPlanAreaContainer from './FlightPlanAreaContainer'; import {useHistory} from 'react-router-dom'; -import { useDispatch, useSelector } from 'react-redux'; +import {useDispatch, useSelector} from 'react-redux'; import * as yup from 'yup'; -import { yupResolver } from '@hookform/resolvers/yup'; +import {yupResolver} from '@hookform/resolvers/yup'; import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction'; -import { useForm } from 'react-hook-form'; +import {useForm} from 'react-hook-form'; import moment from 'moment'; -import { Save } from 'react-feather'; +import {Save} from 'react-feather'; + +const initFlightPlanData = { + id: '', + memberName: '', + clncd: '+82', + hpno: '', + email: '', + lonlat: '', + lonlat2: '', + lonlat3: '', + fltElev: '', + fltHight: '', + fltMethod: '', + groupNm: '', + pilotName: '', + pilotHpno: '', + pilotEmail: '', + aGroupNm: '', + arcrftModelNm: '', + arcrftTypeCd: '', + ownerNm: '', + createUserId: '', + updateUserId: '' +} const FlightPlanDetailContainer = props => { const dispatch = useDispatch(); const history = useHistory(); const [pageType, setPageType] = useState('create'); - const { flightPlanArea } = useSelector(state => state.flightState); - const [areaInfo, setAreaInfo] = useState(); + const {flightPlanArea} = useSelector(state => state.flightState); + const [areaInfo, setAreaInfo] = useState(); const [modal, setModal] = useState({ isOpen: false, - title: '', + title: '', }); - - const { listFlightP, flightCount, isRefreshFlight } = useSelector( + + const {listFlightP, flightCount, isRefreshFlight} = useSelector( state => state.flightState - ); - const [flightPlanData, setFlightPlanData] = useState({ - id:'', - memberName:'', - clncd: '+82', - hpno:'', - email:'', - lonlat:'', - lonlat2:'', - lonlat3:'', - fltElev:'', - fltHight:'', - fltMethod:'', - groupNm:'', - pilotName:'', - pilotHpno:'', - pilotEmail:'', - aGroupNm:'', - arcrftModelNm:'', - arcrftTypeCd:'', - ownerNm:'', - createUserId:'', - updateUserId:'' - }); + ); + const [flightPlanData, setFlightPlanData] = useState(initFlightPlanData); + const [params, setParams] = useState({ schFltStDt: moment().subtract(1, 'day').format('YYYY-MM-DD'), schFltEndDt: moment().subtract(-1, 'day').format('YYYY-MM-DD'), search1: '' - }); + }); + useEffect(() => { console.log('isRefreshFlight>>>>', isRefreshFlight); if (isRefreshFlight) { - console.log(isRefreshFlight); - handlerSearch(); + console.log(isRefreshFlight); + handlerSearch(); } - }, [isRefreshFlight]); + }, [isRefreshFlight]); + const [flightPlanDataList, setFlightPlanDataList] = useState([]); + /* Form Validation Checking */ - const validSchema = yup.object().shape({ - }); + const validSchema = yup.object().shape({}); const {} = useForm({ - defaultValues: { + defaultValues: { coodinates: [], radius: '', altitude_m: '', altitude_ft: '', }, - resolver: yupResolver(validSchema) + resolver: yupResolver(validSchema) }) - + const saveFlightPlanArea = () => { console.log('비행 구역 설정 저장'); } useEffect(() => { if (props.id) { - handlerSearch(); - setPageType('update'); + handlerSearch(); + setPageType('update'); } // console.log(selectData); - }, []); - useEffect(() => { + }, []); + + useEffect(() => { let newArr = []; - + listFlightP?.map(item => { - newArr.push({ ...item }); + newArr.push({...item}); }); setFlightPlanDataList(listFlightP); - }, [listFlightP]); + }, [listFlightP]); + const openModal = () => { - setModal({ + setModal({ isOpen: true, - title: '비행 구역 설정', + title: '비행 구역 설정', }); } - const handlerCreate = async data => { - console.log('data>>>>>', data); - console.log('flightPlanData>>>',{flightPlanData, params}); - let saveArr = {flightPlanData, params}; + + const handlerCreate = e => { + // console.log('flightPlanData>>>', {flightPlanData, params}); + // let saveData = {flightPlanData, params}; + const saveData = {...flightPlanData}; dispatch( - Actions.FLIGHT_PLAN_CREATE.request({ - data: saveArr - }) + Actions.FLIGHT_PLAN_CREATE.request(saveData) ); - }; - const handlerInput = (val) => { - setParams({ - ...params, - schFltStDt: moment(val[1]).format('YYYY-MM-DD'), - schFltEndDt: moment(val[0]).format('YYYY-MM-DD') - }); - }; - const onChange = (e) => { - - setFlightPlanData({ - ...flightPlanData, - [e.target.name]: e.target.value, - }); - }; - - - const handlerDelete = async data => { + }; + + // const handlerInput = (val) => { + // console.log('handler input : ', val) + // console.log('handler input : ', val[1]) + // console.log('handler input : ', val[0]) + // setParams({ + // ...params, + // schFltStDt: moment(val[1]).format('YYYY-MM-DD'), + // schFltEndDt: moment(val[0]).format('YYYY-MM-DD') + // }); + // }; + // console.log('params >>>>> ', params) + const onChange = (e) => { + const {name, value} = e.target; + setFlightPlanData((prevState) => ({ + ...prevState, + [name]: value, + })); + }; + + console.log('===> ', flightPlanData); + + const handlerDelete = async data => { // dispatch(Actions.IDNTF_DELETE.request(data.arcrftSno)); - }; + }; + useEffect(() => { setAreaInfo(flightPlanArea); }, [flightPlanArea]); - + return ( { areaInfo={areaInfo} params={params} handlerSave={ - pageType === 'create' ? handlerCreate : handlerUpdate + pageType === 'create' ? handlerCreate : handlerUpdate } onChange={onChange} handlerDelete={handlerDelete} - handlerInput={handlerInput} + // handlerInput={handlerInput} /> - + /> ) } -export default FlightPlanDetailContainer; \ No newline at end of file +export default FlightPlanDetailContainer; diff --git a/src/modules/basis/flight/actions/basisFlightAction.ts b/src/modules/basis/flight/actions/basisFlightAction.ts index 3bd70d9..9471fef 100644 --- a/src/modules/basis/flight/actions/basisFlightAction.ts +++ b/src/modules/basis/flight/actions/basisFlightAction.ts @@ -1,6 +1,12 @@ import { AxiosError } from 'axios'; import { createAsyncAction, ActionType} from 'typesafe-actions'; -import { FlightAreaData, FlightPlanArea, FlightPlanData } from '../models/basisFlightModel'; +import { + FlightAreaData, + FlightPlanArcrftDataList, + // FlightPlanArea, + FlightPlanData, + FlightPlanListRqData, FlightPlanPilotDataList +} from '../models/basisFlightModel'; // 공역 조회 @@ -9,13 +15,49 @@ const AREA_LIST_SUCCESS = 'basis/flight/area/LIST_SUCCESS'; const AREA_LIST_FAILURE = 'basis/flight/area/LIST_FAILURE'; // 비행 구역 설정 -const FLIGHT_PLAN_AREA_REQUEST = 'basis/flight/plan/area/LIST_REQUEST'; -const FLIGHT_PLAN_AREA_SUCCESS = 'basis/flight/plan/area/LIST_SUCCESS'; -const FLIGHT_PLAN_AREA_FAILURE = 'basis/flight/plan/area/LIST_FAILURE'; +// const FLIGHT_PLAN_AREA_REQUEST = 'basis/flight/plan/area/LIST_REQUEST'; +// const FLIGHT_PLAN_AREA_SUCCESS = 'basis/flight/plan/area/LIST_SUCCESS'; +// const FLIGHT_PLAN_AREA_FAILURE = 'basis/flight/plan/area/LIST_FAILURE'; + +// 목록 +const FLIGHT_PLAN_LIST_REQUEST = 'basis/flight/plan/list/LIST_REQUEST'; +const FLIGHT_PLAN_LIST_SUCCESS = 'basis/flight/plan/list/LIST_SUCCESS'; +const FLIGHT_PLAN_LIST_FAILURE = 'basis/flight/plan/list/LIST_FAILURE'; + +// 상세 +const FLIGHT_PLAN_DETAIL_REQUEST = 'basis/flight/plan/detail/DETAIL_REQUEST'; +const FLIGHT_PLAN_DETAIL_SUCCESS = 'basis/flight/plan/detail/DETAIL_SUCCESS'; +const FLIGHT_PLAN_DETAIL_FAILURE = 'basis/flight/plan/detail/DETAIL_FAILURE'; + +// 생성 +const FLIGHT_PLAN_CREATE_REQUEST = 'basis/flight/plan/create/CREATE_REQUEST'; +const FLIGHT_PLAN_CREATE_SUCCESS = 'basis/flight/plan/create/CREATE_SUCCESS'; +const FLIGHT_PLAN_CREATE_FAILURE = 'basis/flight/plan/create/CREATE_FAILURE'; + +// 수정 +const FLIGHT_PLAN_UPDATE_REQUEST = 'basis/flight/plan/update/UPDATE_REQUEST'; +const FLIGHT_PLAN_UPDATE_SUCCESS = 'basis/flight/plan/update/UPDATE_SUCCESS'; +const FLIGHT_PLAN_UPDATE_FAILURE = 'basis/flight/plan/update/UPDATE_FAILURE'; + +// 삭제 +const FLIGHT_PLAN_DELETE_REQUEST = 'basis/flight/plan/delete/DELETE_REQUEST'; +const FLIGHT_PLAN_DELETE_SUCCESS = 'basis/flight/plan/delete/DELETE_SUCCESS'; +const FLIGHT_PLAN_DELETE_FAILURE = 'basis/flight/plan/delete/DELETE_FAILURE'; + +// 조종사 조회 +const FLIGHT_PLAN_PILOT_LIST_REQUEST = 'basis/flight/plan/pilot_list/PILOT_LIST_REQUEST'; +const FLIGHT_PLAN_PILOT_LIST_SUCCESS = 'basis/flight/plan/pilot_list/PILOT_LIST_SUCCESS'; +const FLIGHT_PLAN_PILOT_LIST_FAILURE = 'basis/flight/plan/pilot_list/PILOT_LIST_FAILURE'; + +// 기체 조회 +const FLIGHT_PLAN_ARCRFT_LIST_REQUEST = 'basis/flight/plan/arcrft_list/ARCRFT_LIST_REQUEST'; +const FLIGHT_PLAN_ARCRFT_LIST_SUCCESS = 'basis/flight/plan/arcrft_list/ARCRFT_LIST_SUCCESS'; +const FLIGHT_PLAN_ARCRFT_LIST_FAILURE = 'basis/flight/plan/arcrft_list/ARCRFT_LIST_FAILURE'; + + + + -const FLIGHT_PLAN_CREATE_REQUEST = 'basis/flight/plan/area/LIST_CREATE_REQUEST'; -const FLIGHT_PLAN_CREATE_SUCCESS = 'basis/flight/plan/area/LIST_CREATE_SUCCESS'; -const FLIGHT_PLAN_CREATE_FAILURE = 'basis/flight/plan/area/LIST_CREATE_FAILURE'; export const AREA_LIST = createAsyncAction( AREA_LIST_REQUEST, @@ -23,22 +65,72 @@ export const AREA_LIST = createAsyncAction( AREA_LIST_FAILURE )(); -export const FLIGHT_PLAN_AREA = createAsyncAction( - FLIGHT_PLAN_AREA_REQUEST, - FLIGHT_PLAN_AREA_SUCCESS, - FLIGHT_PLAN_AREA_FAILURE -)(); +// export const FLIGHT_PLAN_AREA = createAsyncAction( +// FLIGHT_PLAN_AREA_REQUEST, +// FLIGHT_PLAN_AREA_SUCCESS, +// FLIGHT_PLAN_AREA_FAILURE +// )(); + +// 목록 +export const FLIGHT_PLAN_LIST = createAsyncAction( + FLIGHT_PLAN_LIST_REQUEST, + FLIGHT_PLAN_LIST_SUCCESS, + FLIGHT_PLAN_LIST_FAILURE +)(); +// 상세 +export const FLIGHT_PLAN_DETAIL = createAsyncAction( + FLIGHT_PLAN_DETAIL_REQUEST, + FLIGHT_PLAN_DETAIL_SUCCESS, + FLIGHT_PLAN_DETAIL_FAILURE +)(); + +// 생성 export const FLIGHT_PLAN_CREATE = createAsyncAction( FLIGHT_PLAN_CREATE_REQUEST, FLIGHT_PLAN_CREATE_SUCCESS, FLIGHT_PLAN_CREATE_FAILURE -)(); +)(); + +// 수정 +export const FLIGHT_PLAN_UPDATE = createAsyncAction( + FLIGHT_PLAN_UPDATE_REQUEST, + FLIGHT_PLAN_UPDATE_SUCCESS, + FLIGHT_PLAN_UPDATE_FAILURE +)(); + +// 삭제 +export const FLIGHT_PLAN_DELETE = createAsyncAction( + FLIGHT_PLAN_DELETE_REQUEST, + FLIGHT_PLAN_DELETE_SUCCESS, + FLIGHT_PLAN_DELETE_FAILURE +)(); + +// 조종사 목록 +export const FLIGHT_PLAN_PILOT_LIST = createAsyncAction( + FLIGHT_PLAN_PILOT_LIST_REQUEST, + FLIGHT_PLAN_PILOT_LIST_SUCCESS, + FLIGHT_PLAN_PILOT_LIST_FAILURE +)(); + +// 기체 목록 +export const FLIGHT_PLAN_ARCRFT_LIST = createAsyncAction( + FLIGHT_PLAN_ARCRFT_LIST_REQUEST, + FLIGHT_PLAN_ARCRFT_LIST_SUCCESS, + FLIGHT_PLAN_ARCRFT_LIST_FAILURE +)(); + const actions = { AREA_LIST, - FLIGHT_PLAN_AREA, - FLIGHT_PLAN_CREATE + // FLIGHT_PLAN_AREA, + FLIGHT_PLAN_LIST, + FLIGHT_PLAN_DETAIL, + FLIGHT_PLAN_CREATE, + FLIGHT_PLAN_UPDATE, + FLIGHT_PLAN_DELETE, + FLIGHT_PLAN_PILOT_LIST, + FLIGHT_PLAN_ARCRFT_LIST }; -export type FlightAction = ActionType; \ No newline at end of file +export type FlightAction = ActionType; diff --git a/src/modules/basis/flight/apis/basisFlightApi.ts b/src/modules/basis/flight/apis/basisFlightApi.ts index 14b1ad6..8c93f50 100644 --- a/src/modules/basis/flight/apis/basisFlightApi.ts +++ b/src/modules/basis/flight/apis/basisFlightApi.ts @@ -1,18 +1,57 @@ import axios from '../../../utils/customAxiosUtil'; import qs from 'qs'; -import { FlightPlanData } from '../models/basisFlightModel'; +import { FlightPlanData, FlightPlanListRqData } from '../models/basisFlightModel'; export const flightPlanAPI = { - area: async () => { - return await axios.get(`api/bas/flight/area`); - }, - Create: async (data: FlightPlanData) => { - console.log(data); - - const res = await axios.post('api/bas/flight/create', data); - console.log('res>>>>', res); - - return res; - } -} \ No newline at end of file + area: async () => { + const res = await axios.get(`api/bas/flight/area`); + return res; + }, + list: async (data: FlightPlanListRqData) => { + const queryString = qs.stringify(data, { + addQueryPrefix: true, + arrayFormat: 'repeat' + }); + console.log('>>> rq : ', queryString) + const res = await axios.get(`api/bas/flight/plan/list${queryString}`); + console.log('>>> rs : ', res); + return res; + }, + detail: async (planSno: number) => { + console.log('>>> rq : ', planSno) + const res = await axios.get(`api/bas/flight/plan/detail/${planSno}`); + console.log('>>> rs : ', res); + return res; + }, + create: async (data: FlightPlanData) => { + console.log('>>> rq : ', data) + const res = await axios.post(`api/bas/flight/paln/create`, data); + console.log('>>> rs : ', res); + return res; + }, + update: async (data: FlightPlanData) => { + console.log('>>> rq : ', data) + const res = await axios.put(`api/bas/flight/plan/update`, data); + console.log('>>> rs : ', res); + return res; + }, + delete: async (planSno: number) => { + console.log('>>> rq : ', planSno) + const res = await axios.get(`api/bas/flight/plan/delete/${planSno}`); + console.log('>>> rs : ', res); + return res; + }, + listPilot: async (groupId: number) => { + console.log('>>> rq : ', groupId) + const res = await axios.get(`api/bas/flight/plan/pilot/${groupId}`); + console.log('>>> rs : ', res); + return res; + }, + listArcrft: async (groupId: number) => { + console.log('>>> rq : ', groupId) + const res = await axios.get(`api/bas/flight/plan/arcrft/${groupId}`); + console.log('>>> rs : ', res); + return res; + } +} diff --git a/src/modules/basis/flight/models/basisFlightModel.ts b/src/modules/basis/flight/models/basisFlightModel.ts index 6afe7a4..d25a98c 100644 --- a/src/modules/basis/flight/models/basisFlightModel.ts +++ b/src/modules/basis/flight/models/basisFlightModel.ts @@ -1,49 +1,116 @@ +import { date } from "yup"; + export interface FlightState { - areaList: FlightAreaData | undefined - flightPlanArea: FlightPlanArea | undefined - flightPlanData: FlightPlanData | undefined + areaList: FlightAreaData | undefined + flightPlanArea: FlightPlanArea | undefined + list: [FlightPlanData] | undefined + detail: FlightPlanData | undefined + pilotList: FlightPlanPilotDataList | undefined + arcrftList: FlightPlanArcrftDataList | undefined } export interface FlightAreaData { - areaList: [] + areaList: [] } export interface FlightPlanArea { - address : '', - coordinates : '', - redius : '', - altitude_m : '', - altitude_ft : '', + address: '', + coordinates: '', + redius: '', + altitude_m: '', + altitude_ft: '', } export interface FlightPlanData { - id:string; - memberName:string; - clncd:string; - hpno:string; - email:string; - lonlat:string; - lonlat2:string; - lonlat3:string; - fltElev:string; - fltHight:string; - fltMethod:string; - groupNm:string; - pilotName:string; - pilotHpno:string; - pilotEmail:string; - aGroupNm:string; - arcrftModelNm:string; - arcrftTypeCd:string; - ownerNm:string; - createUserId:string; - updateUserId:string; - schFltStDt:Date; - schFltEndDt:Date; + planArcrftSno: number, + planSno: number, + arcrftSno: number, + idntfNum: string, + groupNm: string, + prdctNum: string, + arcrftTypeCd: string, + arcrftModelNm: string, + prdctCmpnNm: string, + prdctDate: Date; + arcrftLngth: number, + arcrftWdth: number, + arcrftHght: number, + arcrftWght: number, + wghtTypeCd: string, + imageUrl: string, + takeoffWght: number; + useYn: string, + cameraYn: string, + insrncYn: string, + ownerNm: string, + createUserId: string, + createDt: Date, + updateUserId: string, + updateDt: Date, + areaList: FlightPlanAreaDataList, + pilotList: FlightPlanPilotDataList, + arcrftList: FlightPlanArcrftDataList, + docState: string, +} + +export interface FlightPlanAreaData { + planAreaSno: number, + planSno: number, + areaType: string, + fltMethod: string, + bufferZone: number, + fltElev: string, + createUserId: string, + createDt: Date, + updateUserId: string, + updateDt: Date, + coordList: FlightPlanAreaCoordData + docState: string, +} + +export interface FlightPlanAreaDataList extends Array {}; + +export interface FlightPlanAreaCoordData { + planAreaCoordSno: number, + planAreaSno: number, + lat: number, + lon: number, + createUserId: string, + createDt: Date, + docState: string +} + +export interface FlightPlanAreaCoordData extends Array {}; + +export interface FlightPlanPilotData { + } +export interface FlightPlanPilotDataList extends Array {}; + +export interface FlightPlanArcrftData { + +} + +export interface FlightPlanArcrftDataList extends Array {}; + +// rq +export interface FlightPlanListRqData { + schFltStDt: Date, + schFltEndDt: Date, + aprvlYn: string +} +export interface FlightPlanAprovRqData { + planSnoList: [number], + aprvlYn: string +} + + export const initFlight = { - areaList: undefined, - flightPlanArea: undefined, - flightPlanData: undefined -}; \ No newline at end of file + areaList: undefined, + flightPlanArea: undefined, + list: undefined, + detail: undefined, + pilotList: undefined, + arcrftList: undefined +}; diff --git a/src/modules/basis/flight/reducers/basisFlightReducer.ts b/src/modules/basis/flight/reducers/basisFlightReducer.ts index bfaa0e7..10bd0c5 100644 --- a/src/modules/basis/flight/reducers/basisFlightReducer.ts +++ b/src/modules/basis/flight/reducers/basisFlightReducer.ts @@ -6,22 +6,48 @@ import { FlightState, initFlight } from '../models/basisFlightModel'; import { any } from 'prop-types'; -export const flightReducer = createReducer ( initFlight ) -.handleAction(Actions.AREA_LIST.success, (state, action) => +export const flightReducer = createReducer(initFlight) + .handleAction(Actions.AREA_LIST.success, (state, action) => produce(state, draft => { - const {data} = action.payload; - draft.areaList = data; + const {data} = action.payload; + draft.areaList = data; }) -) -.handleAction(Actions.FLIGHT_PLAN_AREA.request, (state, action) => - produce(state, draft => { - const data = action.payload; - draft.flightPlanArea = data; + ) + // .handleAction(Actions.FLIGHT_PLAN_AREA.request, (state, action) => + // produce(state, draft => { + // const data = action.payload; + // draft.flightPlanArea = data; + // }) + // ) + // 목록 + .handleAction(Actions.FLIGHT_PLAN_LIST.success, (state, action) => + produce(state, draft => { + console.log('list : ', state, action); + const data = action.payload; + draft.list = data; + }) + ) + // 상세 + .handleAction(Actions.FLIGHT_PLAN_DETAIL.success, (state, action) => + produce(state, draft => { + console.log('detail : ', state, action); + const data = action.payload; + draft.detail = data; }) -) -.handleAction(Actions.FLIGHT_PLAN_CREATE.request, (state, action) => - produce(state, draft => { - const data = action.payload; - draft.flightPlanData = data; + ) + // 조종사 조회 + .handleAction(Actions.FLIGHT_PLAN_PILOT_LIST.success, (state, action) => + produce(state, draft => { + console.log('pilot : ', state, action); + const data = action.payload; + draft.pilotList = data; + }) + ) + // 기체 조회 + .handleAction(Actions.FLIGHT_PLAN_ARCRFT_LIST.success, (state, action) => + produce(state, draft => { + console.log('arcrft : ', state, action); + const data = action.payload; + draft.arcrftList = data; }) -) \ No newline at end of file + ) diff --git a/src/modules/basis/flight/sagas/basisFlightSaga.ts b/src/modules/basis/flight/sagas/basisFlightSaga.ts index 07ee998..7f51438 100644 --- a/src/modules/basis/flight/sagas/basisFlightSaga.ts +++ b/src/modules/basis/flight/sagas/basisFlightSaga.ts @@ -9,101 +9,133 @@ import { import * as MessageActions from '../../../comn/message/actions/comnMessageAction'; import * as Actions from '../actions/basisFlightAction'; import * as Apis from '../apis/basisFlightApi'; +import { FlightPlanData } from "../models/basisFlightModel"; function* listAreaSaga(action: ActionType) { - try { - const response = yield call(Apis.flightPlanAPI.area); + try { + const response = yield call(Apis.flightPlanAPI.area); - if(response.errorCode) { - yield put( - MessageActions.IS_ERROR({ - errorCode: response.errorCode, - errorMessage: response.errorMessage, - isHistoryBack: false, - isRefresh: false - }) - ); - return; - } - - yield put( - Actions.AREA_LIST.success({ - data: response - }) - ); - } catch (error: any) { - yield put( - Actions.AREA_LIST.failure(error) - ); + if (response.errorCode) { + yield put( + MessageActions.IS_ERROR({ + errorCode: response.errorCode, + errorMessage: response.errorMessage, + isHistoryBack: false, + isRefresh: false + }) + ); + return; } -} -function* createFlightPlanArea(action: ActionType) { - try { - const data = action.payload; + yield put( + Actions.AREA_LIST.success({ + data: response + }) + ); + } catch (error: any) { + yield put( + Actions.AREA_LIST.failure(error) + ); + } +} - yield put( - Actions.FLIGHT_PLAN_AREA.success({ - data: data - }) - ) +// function* createFlightPlanArea(action: ActionType) { +// try { +// const data = action.payload; +// +// yield put( +// Actions.FLIGHT_PLAN_AREA.success({ +// data: data +// }) +// ) +// +// } catch (error: any) { +// yield put( +// Actions.FLIGHT_PLAN_AREA.failure(error) +// ) +// } +// } - } catch (error: any) { - yield put( - Actions.FLIGHT_PLAN_AREA.failure(error) - ) - } -} -function* createFlightPlanData( - action: ActionType - ) { - try { - const detail = action.payload; - - console.log('detail>>>:', detail); - const res = yield call(Apis.flightPlanAPI.Create, detail); - console.log(res); - const { data } = res; - console.log('data:>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>', data.result); - if (data.result) { - yield put( - MessageActions.IS_MESSAGE({ - messageCode: SAVE_MESSAGE.code, - message: SAVE_MESSAGE.message, - isHistoryBack: false, - isRefresh: false - }) - ); - yield put(Actions.FLIGHT_PLAN_CREATE.success(data)); - } else { - console.log('errorCode >>> ', data.errorCode); - if (data.errorCode === 'DT002') { - yield put( - MessageActions.IS_ERROR({ - errorCode: DUPLATE_MESSAGE.code, - errorMessage: '식별번호가 ' + DUPLATE_MESSAGE.message, - isHistoryBack: false, - isRefresh: false - }) - ); - } else { - throw Error; - } - } - } catch (error) { +function* listPlanSaga(action: ActionType) { + try { + const data = action.payload; + console.log(`listPlanSaga payload `, data) + const response = yield call(Apis.flightPlanAPI.list, data); + console.log('rs', response); + if (response.errorCode) { yield put( MessageActions.IS_ERROR({ - errorCode: ERROR_MESSAGE.code, - errorMessage: ERROR_MESSAGE.message, + errorCode: response.errorCode, + errorMessage: response.errorMessage, isHistoryBack: false, isRefresh: false }) ); - // yield put(Actions.GROUP_CREATE.failure(error)); + return; } + + yield put( + Actions.FLIGHT_PLAN_LIST.success(response.data) + ); + } catch (error: any) { + yield put( + Actions.FLIGHT_PLAN_LIST.failure(error) + ); } +} + +// function* createFlightPlanData( +// action: ActionType +// ) { +// try { +// const detail = action.payload; +// +// console.log('detail>>>:', detail); +// const res = yield call(Apis.flightPlanAPI.create, detail); +// console.log(res); +// const {data} = res; +// console.log('data:>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>', data.result); +// if (data.result) { +// yield put( +// MessageActions.IS_MESSAGE({ +// messageCode: SAVE_MESSAGE.code, +// message: SAVE_MESSAGE.message, +// isHistoryBack: false, +// isRefresh: false +// }) +// ); +// yield put(Actions.FLIGHT_PLAN_CREATE.success(data)); +// } else { +// console.log('errorCode >>> ', data.errorCode); +// if (data.errorCode === 'DT002') { +// yield put( +// MessageActions.IS_ERROR({ +// errorCode: DUPLATE_MESSAGE.code, +// errorMessage: '식별번호가 ' + DUPLATE_MESSAGE.message, +// isHistoryBack: false, +// isRefresh: false +// }) +// ); +// } else { +// throw Error; +// } +// } +// } catch (error) { +// yield put( +// MessageActions.IS_ERROR({ +// errorCode: ERROR_MESSAGE.code, +// errorMessage: ERROR_MESSAGE.message, +// isHistoryBack: false, +// isRefresh: false +// }) +// ); +// // yield put(Actions.GROUP_CREATE.failure(error)); +// } +// } + export function* flightSaga() { - yield takeEvery(Actions.AREA_LIST.request, listAreaSaga); - yield takeEvery(Actions.FLIGHT_PLAN_AREA.request, createFlightPlanArea); - yield takeEvery(Actions.FLIGHT_PLAN_CREATE.request, createFlightPlanData) -} \ No newline at end of file + yield takeEvery(Actions.AREA_LIST.request, listAreaSaga); + // yield takeEvery(Actions.FLIGHT_PLAN_AREA.request, createFlightPlanArea); + yield takeEvery(Actions.FLIGHT_PLAN_LIST.request, listPlanSaga) + // yield takeEvery(Actions.FLIGHT_PLAN_CREATE.request, createFlightPlanData) +} From 9f86f9b1725ced3ce3557ab25a764e2209d62271 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?dhji=28=EC=A7=80=EB=8C=80=ED=95=9C=29?= Date: Tue, 26 Jul 2022 05:17:17 +0900 Subject: [PATCH 05/21] =?UTF-8?q?=EB=B9=84=ED=96=89=EA=B3=84=ED=9A=8D?= =?UTF-8?q?=EC=84=9C=20=EA=B8=B0=EB=B3=B8=20CRUD=20=EA=B5=AC=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../basis/flight/plan/FlightPlanForm.js | 1296 +++++++++-------- .../basis/flight/plan/FlightPlanGrid.js | 7 +- .../basis/flight/plan/FlightPlanSearch.js | 16 +- .../basis/flight/plan/FlightPlanContainer.js | 20 +- .../flight/plan/FlightPlanDetailContainer.js | 340 +++-- .../basis/flight/actions/basisFlightAction.ts | 9 +- .../basis/flight/apis/basisFlightApi.ts | 10 +- .../basis/flight/models/basisFlightModel.ts | 409 +++++- .../flight/reducers/basisFlightReducer.ts | 11 +- .../basis/flight/sagas/basisFlightSaga.ts | 261 +++- src/router/routes/RouteBasis.js | 2 +- 11 files changed, 1489 insertions(+), 892 deletions(-) diff --git a/src/components/basis/flight/plan/FlightPlanForm.js b/src/components/basis/flight/plan/FlightPlanForm.js index 2854de5..0e25d0f 100644 --- a/src/components/basis/flight/plan/FlightPlanForm.js +++ b/src/components/basis/flight/plan/FlightPlanForm.js @@ -12,621 +12,697 @@ import { import Flatpickr from 'react-flatpickr'; import '@styles/react/libs/flatpickr/flatpickr.scss'; import moment from 'moment'; +import {initFlight, initFlightBas} from '../../../../modules/basis/flight/models/basisFlightModel'; - -const FlightPlanForm = (props) => { - return ( - - - - - - +const FlightPlanForm = ({data, handleModal, handleChange, handleSave, handleDelete}) => { + const {areaList, pilotList, arcrftList} = data; + return ( + + - -
-
- {/*
-

상세정보

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

신청인 정보

-
-
- - - - - - - - - - -
- - -
-
- -
- - - - - - - - - -
- - - {/*
- - - - - - - - - - - - - - -
*/} -
- -
-
-

비행 계획 정보

-
-
- - - - - { - console.log(val) - const data = {target: {}} - data.target.name = 'schFltStDt'; - data.target.value = val && val[0] && moment(val[0]).format('YYYY-MM-DD HH:mm:ss'); - props.onChange(data) - }} - // onChange={val => - // props.handlerInput(val) - // } - // innerRef={props.data} - placeholder='비행 시작일자 선택(클릭)'/> - - - - - - - { - console.log(val) - const data = {target: {}} - data.target.name = 'schFltEndDt'; - data.target.value = val && val[0] && moment(val[0]).format('YYYY-MM-DD HH:mm:ss'); - props.onChange(data) - }} - // onChange={val => - // props.handlerInput(val) - // } - // innerRef={props.data} - placeholder='비행 종료일자 선택(클릭)'/> - - - - - - - - - - - - - - - {/* CDNOT 코드연동 필요 */} - {/* {ARCTFT_TYPE_CD.map(item => { - return ( - - ); - })} */} - - - - -
-
- - {/* - - - - - CDNOT 코드연동 필요 - {ARCTFT_TYPE_CD.map(item => { - return ( - - ); - })} - - - */} - - {/* - - - - {props.errors && props.errors.arcrftModelNm && ( - - {props.errors.arcrftModelNm.message} - - )} - - */} -
-
- -
-
-

비행 구역 정보

- - 비행 구역 설정 - -
-
- - - - - - - - - -
- - -
-
- -
- - - -
-
- - - - - - - - - - - - - - - - - - - - - -
-
-
-
-

조종사 정보

- - 조종사 조회 - -
-
- - - - - - - - - - - - - - -
-
- - - -
- - -
-
- -
- - - - - - - - - -
-
-
-
-

기체 정보

- - 　기체 조회　 - -
-
- - - - - - - - - - - - - - -
-
- - - - - - - - - - - - - - -
-
- -
- - 저장 - - - 삭제 - -
- -
-
- + + + + + +
+
+
+
+
+ +
+
+
+

신청인 정보

+
+
+ + + + + + { + const {name, value} = e.target; + handleChange({ + type: 'plan', + name, + value, + }) + }} + + bsSize='sm' + placeholder='' + /> + + + + + +
+ + { + const {name, value} = e.target; + handleChange({ + type: 'plan', + name, + value, + }) + }} + readOnly + /> +
+
+ { + const {name, value} = e.target; + handleChange({ + type: 'plan', + name, + value, + }) + }} + placeholder='010-0000-0000' + /> +
+ + + + + + { + const {name, value} = e.target; + handleChange({ + type: 'plan', + name, + value, + }) + }} + // innerRef={props.data} + placeholder='' + /> + + + +
+
+
+
+

비행 계획 정보

+
+
+ + + + + { + const value = moment(date[0]).format('YYYY-MM-DD HH:mm:ss') || ''; + handleChange({ + type: 'plan', + name: 'schFltStDt', + value + }) + }} + placeholder='비행 시작일자 선택(클릭)'/> + + + + + + + { + const value = moment(date[0]).format('YYYY-MM-DD HH:mm:ss') || ''; + handleChange({ + type: 'plan', + name: 'schFltEndDt', + value + }) + }} + placeholder='비행 종료일자 선택(클릭)'/> + + + + + + + { + const {name, value} = e.target; + handleChange({ + type: 'plan', + name, + value, + }) + }} + // innerRef={props.data} + // className={classnames({ + // 'is-invalid': props.errors.arcrftTypeCd + // })} + > + {/* TODO CDNOT 코드연동 필요 */} + + + + + + + + + + + + +
+
+
+ {/* TODO area 다건 표출 */} +
+

비행 구역 정보

+ { + handleModal({target: 'area', isOpen: true}) + }} + > + 비행 구역 설정 + +
+ {areaList + ? areaList.map((item, i) => + ) + : } +
+
+
+

조종사 정보

+ { + handleModal({target: 'pilot', isOpen: true}) + }} + > + 조종사 조회 + +
+ {pilotList + ? pilotList.map((item, i) => + ) + : } +
+
+
+

기체 정보

+ { + handleModal({target: 'arcrft', isOpen: true}); + }} + > + 기체 조회 + +
+ {arcrftList + ? arcrftList.map((item, i) => + ) + : } +
+ +
+ + 저장 + + + 삭제 + +
+ +
+
+ + + + + + - - - - - - - + + ) } export default FlightPlanForm; + +const AreaForm = ({data, handleChange, index}) => { + + return (
+ + + + + {data && data.coordList && data.coordList.length > 0 + ? data.coordList.map((item, i) => { + return { + const {name, value} = e.target; + handleChange({ + type: 'coord', + name, + value, + index: i, + pIndex: index + }) + }} + style={{marginBottom: 5}} + // readOnly + /> + }) : { + const {name, value} = e.target; + handleChange({ + type: 'coord', + name, + value, + index: 0, + pIndex: index + }) + }} + // readOnly + />} + + + + + + +
+ + { + const {name, value} = e.target; + handleChange({ + type: 'area', + name, + value, + index + }) + }} + + /> +
+
+ { + const {name, value} = e.target; + handleChange({ + type: 'area', + name, + value, + index + }) + }} + + /> +
+ + + + + + { + const {name, value} = e.target; + handleChange({ + type: 'area', + name, + value, + index + }) + }} + /> + + + +
) +} +const PilotForm = ({data, handleChange, index}) => { + return (
+ + + + + { + const {name, value} = e.target; + handleChange({ + type: 'pilot', + name, + value, + index + }) + }} + /> + + + + + + { + const {name, value} = e.target; + handleChange({ + type: 'pilot', + name, + value, + index + }) + }} + + /> + + + + +
+ + { + const {name, value} = e.target; + handleChange({ + type: 'pilot', + name, + value, + index + }) + }} + readOnly + /> +
+
+ { + const {name, value} = e.target; + handleChange({ + type: 'pilot', + name, + value, + index + }) + }} + + /> +
+ + + + + + { + const {name, value} = e.target; + handleChange({ + type: 'pilot', + name, + value, + index + }) + }} + + /> + + + +
) +} + + +const ArcrftForm = ({data, handleChange, index}) => { + return (
+ + + + + { + const {name, value} = e.target; + handleChange({ + type: 'arcrft', + name, + value, + index + }) + }} + + /> + + + + + + { + const {name, value} = e.target; + handleChange({ + type: 'arcrft', + name, + value, + index + }) + }} + + /> + + + + + + { + const {name, value} = e.target; + handleChange({ + type: 'arcrft', + name, + value, + index + }) + }} + + /> + + + + + + { + const {name, value} = e.target; + handleChange({ + type: 'arcrft', + name, + value, + index + }) + }} + + /> + + + +
) +} diff --git a/src/components/basis/flight/plan/FlightPlanGrid.js b/src/components/basis/flight/plan/FlightPlanGrid.js index 15fd608..b9474a3 100644 --- a/src/components/basis/flight/plan/FlightPlanGrid.js +++ b/src/components/basis/flight/plan/FlightPlanGrid.js @@ -25,7 +25,7 @@ const FlightPlanGrid = ({movePage, planListData, handleMoveDetail}) => { } } ]; - console.log(planListData, columns) + return (
@@ -33,9 +33,8 @@ const FlightPlanGrid = ({movePage, planListData, handleMoveDetail}) => {
- {/*

{"비행 계획"} 목록

*/} -

{"비행계획서 신청"} 목록

- 검색결과 총 0건 +

비행계획서 신청 목록

+ 검색결과 총 {!!planListData ? planListData.length : 0}건
{ +const FlightPlanSearch = ({searchData, handleChangeSearchData, handleSearch}) => { const {schFltStDt, schFltEndDt, aprvlYn} = searchData; const initCheckState = { @@ -14,11 +14,14 @@ const FlightPlanSearch = ({searchData, onChangeSearchData}) => { 'no': (aprvlYn == 'N' || aprvlYn == 'A'), } const [checkState, setCheckState] = useState(initCheckState); + const handleClickSearch = (e) => { + handleSearch(searchData); + } const handleChangeInput = (dates, value, config) => { if (dates.length === 2) { const schFltStDt = moment(dates[0]).format('YYYY-MM-DD HH:mm:ss'); const schFltEndDt = moment(dates[1]).set({'h': 23, 'm': 59, 's': 59}).format('YYYY-MM-DD HH:mm:ss'); - onChangeSearchData({schFltStDt, schFltEndDt}) + handleChangeSearchData({schFltStDt, schFltEndDt}) } } const handleChangeCheckbox = (e) => { @@ -27,7 +30,7 @@ const FlightPlanSearch = ({searchData, onChangeSearchData}) => { switch (value) { case 'A': val = checked ? 'A' : ''; - onChangeSearchData({[name]: val}) + handleChangeSearchData({[name]: val}) setCheckState({ 'all': checked, 'yes': checked, @@ -39,7 +42,7 @@ const FlightPlanSearch = ({searchData, onChangeSearchData}) => { else if (checked && !checkState.no) val = 'Y' else if (!checked && checkState.no) val = 'N' else if (!checked && !checkState.no) val = '' - onChangeSearchData({[name]: val}) + handleChangeSearchData({[name]: val}) setCheckState(prevState => ({ 'all': prevState.no && checked, 'yes': checked, @@ -51,7 +54,7 @@ const FlightPlanSearch = ({searchData, onChangeSearchData}) => { else if (checked && !checkState.yes) val = 'N' else if (!checked && checkState.yes) val = 'Y' else if (!checked && !checkState.yes) val = '' - onChangeSearchData({[name]: val}) + handleChangeSearchData({[name]: val}) setCheckState(prevState => ({ 'all': prevState.yes && checked, 'yes': prevState.yes, @@ -75,8 +78,7 @@ const FlightPlanSearch = ({searchData, onChangeSearchData}) => { { - }} + onClick={handleClickSearch} > 검색 diff --git a/src/containers/basis/flight/plan/FlightPlanContainer.js b/src/containers/basis/flight/plan/FlightPlanContainer.js index b530241..1033d6f 100644 --- a/src/containers/basis/flight/plan/FlightPlanContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanContainer.js @@ -19,18 +19,22 @@ const FlightPlanContainer = () => { const dispatch = useDispatch(); const history = useHistory(); const [searchData, setSerchData] = useState(initSearchData); - const planListData = useSelector(state => state.flightState.list); + const {list: planListData, detail: planDetailData} = useSelector(state => state.flightState); const moveFlightPlanDetailPage = () => { + if(planDetailData){ + dispatch(FlightAction.FLIGHT_PLAN_DETAIL_INIT()); + } history.push('/basis/flight/plan/create'); }; + const handleSearch = (data) => { + dispatch(FlightAction.FLIGHT_PLAN_LIST.request(data)); + } useEffect(() => { - dispatch(FlightAction.FLIGHT_PLAN_LIST.request(searchData)) + handleSearch(searchData); }, []) - // console.log(history, 'history') - console.log(searchData) const handleChangeSearchData = (values) => { setSerchData(prevState => ({ ...prevState, @@ -38,20 +42,16 @@ const FlightPlanContainer = () => { })) } - // 비행계획서 저장 - const handleClickCreate = () => { - - }; const handleMoveDetail = (id) => { history.push(`/basis/flight/plan/detail/${id}`) } return ( - // { +const FlightPlanDetailContainer = () => { const dispatch = useDispatch(); const history = useHistory(); - const [pageType, setPageType] = useState('create'); - const {flightPlanArea} = useSelector(state => state.flightState); - const [areaInfo, setAreaInfo] = useState(); - const [modal, setModal] = useState({ - isOpen: false, - title: '', - }); - - const {listFlightP, flightCount, isRefreshFlight} = useSelector( - state => state.flightState - ); - const [flightPlanData, setFlightPlanData] = useState(initFlightPlanData); - - const [params, setParams] = useState({ - schFltStDt: moment().subtract(1, 'day').format('YYYY-MM-DD'), - schFltEndDt: moment().subtract(-1, 'day').format('YYYY-MM-DD'), - search1: '' - }); + const location = useLocation(); + const urlParams = useParams(); + const flightState = useSelector(state => state.flightState); + const {detail} = flightState; + const [modal, setModal] = useState(initModal); + const [detailData, setDetailData] = useState(initFlightBas.initDetail); useEffect(() => { - console.log('isRefreshFlight>>>>', isRefreshFlight); - if (isRefreshFlight) { - console.log(isRefreshFlight); - handlerSearch(); - } - }, [isRefreshFlight]); + if (Object.keys(urlParams).length === 0 && urlParams.constructor === Object) return; + dispatch(Actions.FLIGHT_PLAN_DETAIL.request(urlParams.planSno)); + }, [urlParams]) - const [flightPlanDataList, setFlightPlanDataList] = useState([]); + useEffect(() => { + setDetailData(detail); + }, [detail]) + + const handleModal = (modal) => { + setModal(prevState => ({ + ...initModal, + [modal.target]: modal.isOpen + })) + } - /* Form Validation Checking */ - const validSchema = yup.object().shape({}); - const {} = useForm({ - defaultValues: { - coodinates: [], - radius: '', - altitude_m: '', - altitude_ft: '', - }, - resolver: yupResolver(validSchema) - }) + // 변경감지 + const handleChange = ({name, value, type, index, pIndex}) => { + const arrName = `${type}List`; + switch (type) { + case 'coord': + // TODO 추후 삭제 필요 start + if(name == 'lonlat'){ + const values = value.split("/"); + let latValue = 1 + let lonValue = 1 + if(values.length == 1){ + latValue = values[0].trim(); + } else if(values.length == 2){ + latValue = values[0].trim(); + lonValue = values[1].trim(); + } else { + return; + } + setDetailData(prevState => { + const areaList = prevState.areaList.map((area, i) => { + if(i !== pIndex) return {...area}; + + const coordList = area.coordList.map((coord, j) => { + if(j !== index) return {...coord}; + return { + ...coord, + lat: latValue, + lon: lonValue + } + }) + return { + ...area, + coordList + } + }) + return { + ...prevState, + areaList + } + }) + return; + } + // TODO 추후 삭제 필요 end + + setDetailData(prevState => { + const areaArr = [...prevState.areaList]; + const coordArr = areaArr[pIndex].coordList; + const updateData = { + ...coordArr[index], + [name]: value + } + coordArr[index] = updateData; + areaArr[pIndex] = coordArr + return { + ...prevState, + areaList: areaArr + } + }) + break; + case 'area': + case 'pilot': + case 'arcrft': + setDetailData(prevState => { + const arr = [...prevState[arrName]]; + const updateData = { + ...prevState[arrName][index], + [name]: value + } + arr[index] = updateData; + return { + ...prevState, + [arrName]: arr + } + }) + break; + case 'plan': + default: + setDetailData(prevState => ({ + ...prevState, + [name]: value + })) + break; + } + } - const saveFlightPlanArea = () => { - console.log('비행 구역 설정 저장'); + // 추가 + const handleAddArray = ({type, pIndex}) => { + const arrName = `${type}List`; + switch (type) { + case 'coord': + setDetailData(prevState => { + const areaArr = [...prevState.areaList]; + const coordArr = [...areaArr[pIndex].coordList, initFlightBas[type]]; + areaArr[pIndex] = coordArr; + return { + ...prevState, + areaList: [...areaArr] + } + }) + break; + case 'area': + case 'pilot': + case 'arcrft': + setDetailData(prevState => { + return { + ...prevState, + [arrName]: [...prevState[arrName], initFlightBas[type]] + } + }) + break; + default: + break; + } } - useEffect(() => { - if (props.id) { - handlerSearch(); - setPageType('update'); + // 삭제 + const handleDeleteArray = ({type, index, pIndex}) => { + const arrName = `${type}List`; + switch (type) { + case 'coord': + setDetailData(prevState => { + const areaArr = [...prevState.areaList]; + const coordArr = [...areaArr[pIndex]]; + const deleteData = coordArr.splice(index, 1); + areaArr[pIndex] = coordArr; + return { + ...prevState, + areaList: [...areaArr] + } + }) + break; + case 'area': + case 'pilot': + case 'arcrft': + setDetailData(prevState => { + const arr = [...prevState[type]]; + const deleteData = arr.splice(index, 1); + return { + ...prevState, + [arrName]: arr + } + }) + default: + break; } - // console.log(selectData); - }, []); - - useEffect(() => { - let newArr = []; - - listFlightP?.map(item => { - newArr.push({...item}); - }); - setFlightPlanDataList(listFlightP); - }, [listFlightP]); - - const openModal = () => { - setModal({ - isOpen: true, - title: '비행 구역 설정', - }); } - const handlerCreate = e => { - // console.log('flightPlanData>>>', {flightPlanData, params}); - // let saveData = {flightPlanData, params}; - const saveData = {...flightPlanData}; - dispatch( - Actions.FLIGHT_PLAN_CREATE.request(saveData) - ); - }; - - // const handlerInput = (val) => { - // console.log('handler input : ', val) - // console.log('handler input : ', val[1]) - // console.log('handler input : ', val[0]) - // setParams({ - // ...params, - // schFltStDt: moment(val[1]).format('YYYY-MM-DD'), - // schFltEndDt: moment(val[0]).format('YYYY-MM-DD') - // }); - // }; - // console.log('params >>>>> ', params) - const onChange = (e) => { - const {name, value} = e.target; - setFlightPlanData((prevState) => ({ - ...prevState, - [name]: value, - })); - }; - - console.log('===> ', flightPlanData); - const handlerDelete = async data => { - // dispatch(Actions.IDNTF_DELETE.request(data.arcrftSno)); - }; - - useEffect(() => { - setAreaInfo(flightPlanArea); - }, [flightPlanArea]); + // 저장 + const handleSave = () => { + if (!detailData.planSno) { + dispatch(Actions.FLIGHT_PLAN_CREATE.request(detailData)); + } else { + dispatch(Actions.FLIGHT_PLAN_UPDATE.request(detailData)); + } + } + // 삭제 + const handleDelete = () => { + dispatch(Actions.FLIGHT_PLAN_DELETE.request(urlParams.planSno)); + } return ( - + {/**/} ) - -} +}; export default FlightPlanDetailContainer; diff --git a/src/modules/basis/flight/actions/basisFlightAction.ts b/src/modules/basis/flight/actions/basisFlightAction.ts index 9471fef..e04e7d7 100644 --- a/src/modules/basis/flight/actions/basisFlightAction.ts +++ b/src/modules/basis/flight/actions/basisFlightAction.ts @@ -1,5 +1,5 @@ import { AxiosError } from 'axios'; -import { createAsyncAction, ActionType} from 'typesafe-actions'; +import { createAsyncAction, ActionType, createAction } from 'typesafe-actions'; import { FlightAreaData, FlightPlanArcrftDataList, @@ -28,7 +28,8 @@ const FLIGHT_PLAN_LIST_FAILURE = 'basis/flight/plan/list/LIST_FAILURE'; const FLIGHT_PLAN_DETAIL_REQUEST = 'basis/flight/plan/detail/DETAIL_REQUEST'; const FLIGHT_PLAN_DETAIL_SUCCESS = 'basis/flight/plan/detail/DETAIL_SUCCESS'; const FLIGHT_PLAN_DETAIL_FAILURE = 'basis/flight/plan/detail/DETAIL_FAILURE'; - +// 상세 초기화 +const FLIGHT_PLAN_DETAIL_INITIAL = 'basis/flight/plan/detail/DETAIL_INIT'; // 생성 const FLIGHT_PLAN_CREATE_REQUEST = 'basis/flight/plan/create/CREATE_REQUEST'; const FLIGHT_PLAN_CREATE_SUCCESS = 'basis/flight/plan/create/CREATE_SUCCESS'; @@ -84,7 +85,8 @@ export const FLIGHT_PLAN_DETAIL = createAsyncAction( FLIGHT_PLAN_DETAIL_SUCCESS, FLIGHT_PLAN_DETAIL_FAILURE )(); - +// 상세 초기화 +export const FLIGHT_PLAN_DETAIL_INIT = createAction(FLIGHT_PLAN_DETAIL_INITIAL)(); // 생성 export const FLIGHT_PLAN_CREATE = createAsyncAction( FLIGHT_PLAN_CREATE_REQUEST, @@ -126,6 +128,7 @@ const actions = { // FLIGHT_PLAN_AREA, FLIGHT_PLAN_LIST, FLIGHT_PLAN_DETAIL, + FLIGHT_PLAN_DETAIL_INIT, FLIGHT_PLAN_CREATE, FLIGHT_PLAN_UPDATE, FLIGHT_PLAN_DELETE, diff --git a/src/modules/basis/flight/apis/basisFlightApi.ts b/src/modules/basis/flight/apis/basisFlightApi.ts index 8c93f50..d36d78e 100644 --- a/src/modules/basis/flight/apis/basisFlightApi.ts +++ b/src/modules/basis/flight/apis/basisFlightApi.ts @@ -13,20 +13,16 @@ export const flightPlanAPI = { addQueryPrefix: true, arrayFormat: 'repeat' }); - console.log('>>> rq : ', queryString) const res = await axios.get(`api/bas/flight/plan/list${queryString}`); - console.log('>>> rs : ', res); return res; }, detail: async (planSno: number) => { - console.log('>>> rq : ', planSno) const res = await axios.get(`api/bas/flight/plan/detail/${planSno}`); - console.log('>>> rs : ', res); return res; }, create: async (data: FlightPlanData) => { console.log('>>> rq : ', data) - const res = await axios.post(`api/bas/flight/paln/create`, data); + const res = await axios.post(`api/bas/flight/plan/create`, data); console.log('>>> rs : ', res); return res; }, @@ -42,13 +38,13 @@ export const flightPlanAPI = { console.log('>>> rs : ', res); return res; }, - listPilot: async (groupId: number) => { + listPilot: async (groupId: string) => { console.log('>>> rq : ', groupId) const res = await axios.get(`api/bas/flight/plan/pilot/${groupId}`); console.log('>>> rs : ', res); return res; }, - listArcrft: async (groupId: number) => { + listArcrft: async (groupId: string) => { console.log('>>> rq : ', groupId) const res = await axios.get(`api/bas/flight/plan/arcrft/${groupId}`); console.log('>>> rs : ', res); diff --git a/src/modules/basis/flight/models/basisFlightModel.ts b/src/modules/basis/flight/models/basisFlightModel.ts index d25a98c..cad9f06 100644 --- a/src/modules/basis/flight/models/basisFlightModel.ts +++ b/src/modules/basis/flight/models/basisFlightModel.ts @@ -1,4 +1,4 @@ -import { date } from "yup"; +import moment from "moment"; export interface FlightState { areaList: FlightAreaData | undefined @@ -14,92 +14,129 @@ export interface FlightAreaData { } export interface FlightPlanArea { - address: '', - coordinates: '', - redius: '', - altitude_m: '', - altitude_ft: '', + address: string, + coordinates: string, + redius: string, + altitude_m: string, + altitude_ft: string, } export interface FlightPlanData { - planArcrftSno: number, - planSno: number, - arcrftSno: number, - idntfNum: string, - groupNm: string, - prdctNum: string, - arcrftTypeCd: string, - arcrftModelNm: string, - prdctCmpnNm: string, - prdctDate: Date; - arcrftLngth: number, - arcrftWdth: number, - arcrftHght: number, - arcrftWght: number, - wghtTypeCd: string, - imageUrl: string, - takeoffWght: number; - useYn: string, - cameraYn: string, - insrncYn: string, - ownerNm: string, + planSno?: number, + groupId: string, + cstmrSno: number, + memberName: string, + email: string, + hpno: string, + clncd: string, + addr: string, + addrDtlCn: string, + zip: string, + schFltStDt: string, + schFltEndDt: string, + fltPurpose: string, + aprvlYn: string, + delYn: string, createUserId: string, - createDt: Date, + createDt: string, updateUserId: string, - updateDt: Date, - areaList: FlightPlanAreaDataList, - pilotList: FlightPlanPilotDataList, - arcrftList: FlightPlanArcrftDataList, - docState: string, + updateDt: string, + areaList?: FlightPlanAreaDataList | undefined, + pilotList?: FlightPlanPilotDataList | undefined, + arcrftList?: FlightPlanArcrftDataList | undefined + // docState: string } export interface FlightPlanAreaData { - planAreaSno: number, + planAreaSno?: number, planSno: number, areaType: string, fltMethod: string, bufferZone: number, fltElev: string, - createUserId: string, - createDt: Date, - updateUserId: string, - updateDt: Date, - coordList: FlightPlanAreaCoordData - docState: string, + createUserId?: string, + createDt?: string, + updateUserId?: string, + updateDt?: string, + coordList?: FlightPlanAreaCoordDataList | undefined + // docState: string, } export interface FlightPlanAreaDataList extends Array {}; export interface FlightPlanAreaCoordData { - planAreaCoordSno: number, - planAreaSno: number, + planAreaCoordSno?: number, + planAreaSno?: number, lat: number, lon: number, - createUserId: string, - createDt: Date, - docState: string + createUserId?: string, + createDt?: string + // docState: string } -export interface FlightPlanAreaCoordData extends Array {}; +export interface FlightPlanAreaCoordDataList extends Array {}; export interface FlightPlanPilotData { - + planPilotSno?: number, + planSno?: number, + cstmrSno?: number, + groupNm: string, + memberName: string, + email: string, + hpno: string, + clncd: string, + addr: string, + addrDtlCn: string, + zip: string, + qlfcNo: string, + carrer: string, + createUserId: string, + createDt: string, + updateUserId: string, + updateDt: string + // docState: string } export interface FlightPlanPilotDataList extends Array {}; export interface FlightPlanArcrftData { - + planArcrftSno: number, + planSno: number, + arcrftSno: number, + idntfNum: string, + groupNm: string, + prdctNum: string, + arcrftTypeCd: string, + arcrftModelNm: string, + prdctCmpnNm: string, + prdctDate: string, + arcrftLngth: number, + arcrftWdth: number, + arcrftHght: number, + arcrftWght: number, + wghtTypeCd: string, + imageUrl: string, + takeoffWght: number, + useYn: string, + cameraYn: string, + insrncYn: string, + ownerNm: string, + createUserId: string, + createDt: string, + updateUserId: string, + updateDt: string + // docState: string } export interface FlightPlanArcrftDataList extends Array {}; // rq export interface FlightPlanListRqData { - schFltStDt: Date, - schFltEndDt: Date, + schFltStDt: string, + schFltEndDt: string, aprvlYn: string } + export interface FlightPlanAprovRqData { planSnoList: [number], aprvlYn: string @@ -110,7 +147,275 @@ export const initFlight = { areaList: undefined, flightPlanArea: undefined, list: undefined, - detail: undefined, + detail: { + planSno: 0, + groupId: '', + cstmrSno: 0, + memberName: '', + email: '', + hpno: '', + clncd: '+81', + addr: '', + addrDtlCn: '', + zip: '', + schFltStDt: moment().set({'h': 0, 'm': 0, 's': 0}).format('YYYY-MM-DD HH:mm:ss'), + schFltEndDt: moment().set({'h': 0, 'm': 0, 's': 0}).format('YYYY-MM-DD HH:mm:ss'), + fltPurpose: '', + aprvlYn: '', + delYn: '', + createUserId: '', + createDt: '', + updateUserId: '', + updateDt: '', + areaList: [{ + planAreaSno: 0, + planSno: 0, + areaType: '', + fltMethod: '', + bufferZone: 0, + fltElev: '', + createUserId: '', + createDt: '', + updateUserId: '', + updateDt: '', + coordList: [{ + planAreaCoordSno: 0, + planAreaSno: 0, + lat: 0, + lon: 0, + createUserId: '', + createDt: '' + }] + }], + pilotList: [{ + planPilotSno: 0, + planSno: 0, + cstmrSno: 0, + groupNm: '', + memberName: '', + email: '', + hpno: '', + clncd: '+81', + addr: '', + addrDtlCn: '', + zip: '', + qlfcNo: '', + carrer: '', + createUserId: '', + createDt: '', + updateUserId: '', + updateDt: '' + }], + arcrftList: [{ + planArcrftSno: 0, + planSno: 0, + arcrftSno: 0, + idntfNum: '', + groupNm: '', + prdctNum: '', + arcrftTypeCd: '', + arcrftModelNm: '', + prdctCmpnNm: '', + prdctDate: '', + arcrftLngth: 0, + arcrftWdth: 0, + arcrftHght: 0, + arcrftWght: 0, + wghtTypeCd: '', + imageUrl: '', + takeoffWght: 0, + useYn: '', + cameraYn: '', + insrncYn: '', + ownerNm: '', + createUserId: '', + createDt: '', + updateUserId: '', + updateDt: '' + }] + }, pilotList: undefined, - arcrftList: undefined + arcrftList: undefined, }; + + +export const initFlightBas = { + plan: { + planSno: 0, + groupId: '', + cstmrSno: 0, + memberName: '', + email: '', + hpno: '', + clncd: '+81', + addr: '', + addrDtlCn: '', + zip: '', + schFltStDt: moment().set({'h': 0, 'm': 0, 's': 0}).format('YYYY-MM-DD HH:mm:ss'), + schFltEndDt: moment().set({'h': 0, 'm': 0, 's': 0}).format('YYYY-MM-DD HH:mm:ss'), + fltPurpose: '', + aprvlYn: '', + delYn: '', + createUserId: '', + createDt: '', + updateUserId: '', + updateDt: '', + areaList: undefined, + pilotList: undefined, + arcrftList: undefined + }, + pilot: { + planPilotSno: 0, + planSno: 0, + cstmrSno: 0, + groupNm: '', + memberName: '', + email: '', + hpno: '', + clncd: '+81', + addr: '', + addrDtlCn: '', + zip: '', + qlfcNo: '', + carrer: '', + createUserId: '', + createDt: '', + updateUserId: '', + updateDt: '' + }, + arcrft: { + planArcrftSno: 0, + planSno: 0, + arcrftSno: 0, + idntfNum: '', + groupNm: '', + prdctNum: '', + arcrftTypeCd: '', + arcrftModelNm: '', + prdctCmpnNm: '', + prdctDate: '', + arcrftLngth: 0, + arcrftWdth: 0, + arcrftHght: 0, + arcrftWght: 0, + wghtTypeCd: '', + imageUrl: '', + takeoffWght: 0, + useYn: '', + cameraYn: '', + insrncYn: '', + ownerNm: '', + createUserId: '', + createDt: '', + updateUserId: '', + updateDt: '' + }, + area: { + planAreaSno: 0, + planSno: 0, + areaType: '', + fltMethod: '', + bufferZone: 0, + fltElev: '', + createUserId: '', + createDt: '', + updateUserId: '', + updateDt: '', + coordList: undefined + }, + coord: { + planAreaCoordSno: 0, + planAreaSno: 0, + lat: 0, + lon: 0, + createUserId: '', + createDt: '' + }, + initDetail: { + planSno: 0, + groupId: '', + cstmrSno: 0, + memberName: '', + email: '', + hpno: '', + clncd: '+81', + addr: '', + addrDtlCn: '', + zip: '', + schFltStDt: moment().set({'h': 0, 'm': 0, 's': 0}).format('YYYY-MM-DD HH:mm:ss'), + schFltEndDt: moment().set({'h': 0, 'm': 0, 's': 0}).format('YYYY-MM-DD HH:mm:ss'), + fltPurpose: '', + aprvlYn: '', + delYn: '', + createUserId: '', + createDt: '', + updateUserId: '', + updateDt: '', + areaList: [{ + planAreaSno: 0, + planSno: 0, + areaType: '', + fltMethod: '', + bufferZone: 0, + fltElev: '', + createUserId: '', + createDt: '', + updateUserId: '', + updateDt: '', + coordList: [{ + planAreaCoordSno: 0, + planAreaSno: 0, + lat: 0, + lon: 0, + createUserId: '', + createDt: '' + }] + }], + pilotList: [{ + planPilotSno: 0, + planSno: 0, + cstmrSno: 0, + groupNm: '', + memberName: '', + email: '', + hpno: '', + clncd: '+81', + addr: '', + addrDtlCn: '', + zip: '', + qlfcNo: '', + carrer: '', + createUserId: '', + createDt: '', + updateUserId: '', + updateDt: '' + }], + arcrftList: [{ + planArcrftSno: 0, + planSno: 0, + arcrftSno: 0, + idntfNum: '', + groupNm: '', + prdctNum: '', + arcrftTypeCd: '', + arcrftModelNm: '', + prdctCmpnNm: '', + prdctDate: '', + arcrftLngth: 0, + arcrftWdth: 0, + arcrftHght: 0, + arcrftWght: 0, + wghtTypeCd: '', + imageUrl: '', + takeoffWght: 0, + useYn: '', + cameraYn: '', + insrncYn: '', + ownerNm: '', + createUserId: '', + createDt: '', + updateUserId: '', + updateDt: '' + }] + } +} diff --git a/src/modules/basis/flight/reducers/basisFlightReducer.ts b/src/modules/basis/flight/reducers/basisFlightReducer.ts index 10bd0c5..c44f032 100644 --- a/src/modules/basis/flight/reducers/basisFlightReducer.ts +++ b/src/modules/basis/flight/reducers/basisFlightReducer.ts @@ -2,7 +2,7 @@ import { createReducer } from 'typesafe-actions'; import produce from 'immer'; import * as Actions from '../actions/basisFlightAction'; -import { FlightState, initFlight } from '../models/basisFlightModel'; +import { FlightState, initFlight, initFlightBas } from '../models/basisFlightModel'; import { any } from 'prop-types'; @@ -22,7 +22,6 @@ export const flightReducer = createReducer(in // 목록 .handleAction(Actions.FLIGHT_PLAN_LIST.success, (state, action) => produce(state, draft => { - console.log('list : ', state, action); const data = action.payload; draft.list = data; }) @@ -30,15 +29,18 @@ export const flightReducer = createReducer(in // 상세 .handleAction(Actions.FLIGHT_PLAN_DETAIL.success, (state, action) => produce(state, draft => { - console.log('detail : ', state, action); const data = action.payload; draft.detail = data; }) ) + .handleAction(Actions.FLIGHT_PLAN_DETAIL_INIT, (state, action) => + produce(state, draft => { + draft.detail = initFlightBas.initDetail + }) + ) // 조종사 조회 .handleAction(Actions.FLIGHT_PLAN_PILOT_LIST.success, (state, action) => produce(state, draft => { - console.log('pilot : ', state, action); const data = action.payload; draft.pilotList = data; }) @@ -46,7 +48,6 @@ export const flightReducer = createReducer(in // 기체 조회 .handleAction(Actions.FLIGHT_PLAN_ARCRFT_LIST.success, (state, action) => produce(state, draft => { - console.log('arcrft : ', state, action); const data = action.payload; draft.arcrftList = data; }) diff --git a/src/modules/basis/flight/sagas/basisFlightSaga.ts b/src/modules/basis/flight/sagas/basisFlightSaga.ts index 7f51438..77c4d1f 100644 --- a/src/modules/basis/flight/sagas/basisFlightSaga.ts +++ b/src/modules/basis/flight/sagas/basisFlightSaga.ts @@ -10,6 +10,12 @@ import * as MessageActions from '../../../comn/message/actions/comnMessageAction import * as Actions from '../actions/basisFlightAction'; import * as Apis from '../apis/basisFlightApi'; import { FlightPlanData } from "../models/basisFlightModel"; +import { + FLIGHT_PLAN_ARCRFT_LIST, + FLIGHT_PLAN_CREATE, FLIGHT_PLAN_DELETE, + FLIGHT_PLAN_DETAIL, + FLIGHT_PLAN_PILOT_LIST, FLIGHT_PLAN_UPDATE +} from "../actions/basisFlightAction"; function* listAreaSaga(action: ActionType) { try { @@ -56,12 +62,11 @@ function* listAreaSaga(action: ActionType) { // } // } +// 비행계획서 목록 function* listPlanSaga(action: ActionType) { try { const data = action.payload; - console.log(`listPlanSaga payload `, data) const response = yield call(Apis.flightPlanAPI.list, data); - console.log('rs', response); if (response.errorCode) { yield put( MessageActions.IS_ERROR({ @@ -83,59 +88,213 @@ function* listPlanSaga(action: ActionType) { + try { + const data = action.payload; + const response = yield call(Apis.flightPlanAPI.detail, data); + if (response.errorCode) { + yield put( + MessageActions.IS_ERROR({ + errorCode: response.errorCode, + errorMessage: response.errorMessage, + isHistoryBack: false, + isRefresh: false + }) + ); + return; + } -// function* createFlightPlanData( -// action: ActionType -// ) { -// try { -// const detail = action.payload; -// -// console.log('detail>>>:', detail); -// const res = yield call(Apis.flightPlanAPI.create, detail); -// console.log(res); -// const {data} = res; -// console.log('data:>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>', data.result); -// if (data.result) { -// yield put( -// MessageActions.IS_MESSAGE({ -// messageCode: SAVE_MESSAGE.code, -// message: SAVE_MESSAGE.message, -// isHistoryBack: false, -// isRefresh: false -// }) -// ); -// yield put(Actions.FLIGHT_PLAN_CREATE.success(data)); -// } else { -// console.log('errorCode >>> ', data.errorCode); -// if (data.errorCode === 'DT002') { -// yield put( -// MessageActions.IS_ERROR({ -// errorCode: DUPLATE_MESSAGE.code, -// errorMessage: '식별번호가 ' + DUPLATE_MESSAGE.message, -// isHistoryBack: false, -// isRefresh: false -// }) -// ); -// } else { -// throw Error; -// } -// } -// } catch (error) { -// yield put( -// MessageActions.IS_ERROR({ -// errorCode: ERROR_MESSAGE.code, -// errorMessage: ERROR_MESSAGE.message, -// isHistoryBack: false, -// isRefresh: false -// }) -// ); -// // yield put(Actions.GROUP_CREATE.failure(error)); -// } -// } + yield put( + Actions.FLIGHT_PLAN_DETAIL.success(response.data) + ); + } catch (error: any) { + yield put( + Actions.FLIGHT_PLAN_DETAIL.failure(error) + ); + } +} +// 비행계획서 등록 +function* createPlanSaga(action: ActionType) { + try { + const detail = action.payload; + + const res = yield call(Apis.flightPlanAPI.create, detail); + + const { data } = res; + + if (data.result) { + yield put( + MessageActions.IS_MESSAGE({ + messageCode: SAVE_MESSAGE.code, + message: SAVE_MESSAGE.message, + isHistoryBack: true, + isRefresh: false + }) + ); + } else { + if (data.errorCode === 'DT002') { + yield put( + MessageActions.IS_ERROR({ + errorCode: DUPLATE_MESSAGE.code, + errorMessage: '제작번호 ' + DUPLATE_MESSAGE.message, + isHistoryBack: false, + isRefresh: false + }) + ); + } else { + throw Error; + } + } + } catch (error) { + yield put( + MessageActions.IS_ERROR({ + errorCode: ERROR_MESSAGE.code, + errorMessage: ERROR_MESSAGE.message, + isHistoryBack: false, + isRefresh: false + }) + ); + // yield put(Actions.FLIGHT_PLAN_CREATE.failure(error)); + } +} +// 비행계획서 수정 +function* updatePlanSaga(action: ActionType) { + try { + const detail = action.payload; + + const res = yield call(Apis.flightPlanAPI.update, detail); + + const { data } = res; + + if (data.result) { + yield put( + MessageActions.IS_MESSAGE({ + messageCode: SAVE_MESSAGE.code, + message: SAVE_MESSAGE.message, + isHistoryBack: true, + isRefresh: false + }) + ); + } else { + if (data.errorCode === 'DT002') { + yield put( + MessageActions.IS_ERROR({ + errorCode: DUPLATE_MESSAGE.code, + errorMessage: '제작번호 ' + DUPLATE_MESSAGE.message, + isHistoryBack: false, + isRefresh: false + }) + ); + } else { + throw Error; + } + } + } catch (error) { + yield put( + MessageActions.IS_ERROR({ + errorCode: ERROR_MESSAGE.code, + errorMessage: ERROR_MESSAGE.message, + isHistoryBack: false, + isRefresh: false + }) + ); + // yield put(Actions.FLIGHT_PLAN_UPDATE.failure(error)); + } +} +// 비행계획서 삭제 +function* deletePlanSaga(action: ActionType) { + try { + const id = action.payload; + const res = yield call(Apis.flightPlanAPI.delete, id); + + const { data } = res; + + if (data.result) { + yield put( + MessageActions.IS_MESSAGE({ + messageCode: DELETE_MESSAGE.code, + message: DELETE_MESSAGE.message, + isHistoryBack: true, + isRefresh: false + }) + ); + } else { + throw Error; + } + } catch (error) { + yield put( + MessageActions.IS_ERROR({ + errorCode: ERROR_MESSAGE.code, + errorMessage: ERROR_MESSAGE.message, + isHistoryBack: false, + isRefresh: false + }) + ); + // yield put(Actions.FLIGHT_PLAN_DELETE.failure(error)); + } +} +// 조종사 목록 +function* listPilotSaga(action: ActionType) { + try { + const data = action.payload; + const response = yield call(Apis.flightPlanAPI.listPilot, data); + if (response.errorCode) { + yield put( + MessageActions.IS_ERROR({ + errorCode: response.errorCode, + errorMessage: response.errorMessage, + isHistoryBack: false, + isRefresh: false + }) + ); + return; + } + + yield put( + Actions.FLIGHT_PLAN_PILOT_LIST.success(response.data) + ); + } catch (error: any) { + yield put( + Actions.FLIGHT_PLAN_PILOT_LIST.failure(error) + ); + } +} +// 기체 목록 +function* listArcrftSaga(action: ActionType) { + try { + const data = action.payload; + const response = yield call(Apis.flightPlanAPI.listArcrft, data); + if (response.errorCode) { + yield put( + MessageActions.IS_ERROR({ + errorCode: response.errorCode, + errorMessage: response.errorMessage, + isHistoryBack: false, + isRefresh: false + }) + ); + return; + } + + yield put( + Actions.FLIGHT_PLAN_ARCRFT_LIST.success(response.data) + ); + } catch (error: any) { + yield put( + Actions.FLIGHT_PLAN_ARCRFT_LIST.failure(error) + ); + } +} export function* flightSaga() { yield takeEvery(Actions.AREA_LIST.request, listAreaSaga); // yield takeEvery(Actions.FLIGHT_PLAN_AREA.request, createFlightPlanArea); yield takeEvery(Actions.FLIGHT_PLAN_LIST.request, listPlanSaga) - // yield takeEvery(Actions.FLIGHT_PLAN_CREATE.request, createFlightPlanData) + yield takeEvery(Actions.FLIGHT_PLAN_DETAIL.request, detailPlanSaga) + yield takeEvery(Actions.FLIGHT_PLAN_CREATE.request, createPlanSaga) + yield takeEvery(Actions.FLIGHT_PLAN_UPDATE.request, updatePlanSaga) + yield takeEvery(Actions.FLIGHT_PLAN_DELETE.request, deletePlanSaga) + yield takeEvery(Actions.FLIGHT_PLAN_PILOT_LIST.request, listPilotSaga) + yield takeEvery(Actions.FLIGHT_PLAN_ARCRFT_LIST.request, listArcrftSaga) } diff --git a/src/router/routes/RouteBasis.js b/src/router/routes/RouteBasis.js index ce7dd1f..fd48c46 100644 --- a/src/router/routes/RouteBasis.js +++ b/src/router/routes/RouteBasis.js @@ -48,7 +48,7 @@ const RouteBasis = [ component: lazy(() => import('../../views/basis/flight/plan/FlightPlanDetail')) }, { - path: '/basis/flight/plan/detail/:id', + path: '/basis/flight/plan/detail/:planSno', component: lazy(() => import('../../views/basis/flight/plan/FlightPlanDetail')) }, ]; From 0e548907cc97dee47f9477219289f15c3a30f34b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?scnoh=28=EB=85=B8=EC=8A=B9=EC=B2=A0=29?= Date: Tue, 26 Jul 2022 18:45:42 +0900 Subject: [PATCH 06/21] . --- .../basis/flight/plan/FlightPlanPilot.js | 136 ++++++++++++++++++ .../flight/plan/FlightPlanPilotContainer.js | 41 ++++++ 2 files changed, 177 insertions(+) create mode 100644 src/components/basis/flight/plan/FlightPlanPilot.js create mode 100644 src/containers/basis/flight/plan/FlightPlanPilotContainer.js diff --git a/src/components/basis/flight/plan/FlightPlanPilot.js b/src/components/basis/flight/plan/FlightPlanPilot.js new file mode 100644 index 0000000..d35a132 --- /dev/null +++ b/src/components/basis/flight/plan/FlightPlanPilot.js @@ -0,0 +1,136 @@ +import React from 'react'; +import {Button, Card, CardBody, Col, CustomInput, Row, FormGroup, Input, Label} from 'reactstrap'; +import {Search} from 'react-feather'; +import {GridDatabase} from '../../../crud/grid/GridDatatable'; + +const FlightPlanPilot = ({ pilotList, handleSelectPilot }) => { + const columns = [ + {id: 'groupNm', name: '그룹 명', cell: row => (
{row.groupNm}
)}, + {id: 'memberName', name: '성명', cell: row => (
{row.memberName}
)}, + {id: 'hpno', name: '핸드폰 번호', cell: row => (
{row.hpno}
)}, + {id: 'email', name: '이메일', cell: row => (
{row.email}
)}, + { + id: 'selectPilot', name: '선택', cell: row => { + return { + handleSelectPilot(row.cstmrSno) + } + }>선택; + } + } + ]; + + return ( + <> +
+ + +
+
+

검색조건

+
+
+ + + 검색 + +
+
+ + +
+
+
+
+
그룹 명
+
+
+ + + + + + + + +
+
+
+
+
성명
+
+
+ + + + + + + + +
+
+
+
+
+
+ + + + + +
+
+ + +
+
+

조종사 목록

+ 검색결과 총 {!!pilotList ? pilotList.length : 0}건 +
+
+
+ +
+ + {/* 검색된 데이터가 없습니다. */} +
+ +
+ + +
+ + ) + +} + +export default FlightPlanPilot; \ No newline at end of file diff --git a/src/containers/basis/flight/plan/FlightPlanPilotContainer.js b/src/containers/basis/flight/plan/FlightPlanPilotContainer.js new file mode 100644 index 0000000..38bf19c --- /dev/null +++ b/src/containers/basis/flight/plan/FlightPlanPilotContainer.js @@ -0,0 +1,41 @@ +import React, {useEffect, useState} from 'react'; +import {useDispatch, useSelector} from 'react-redux'; +import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction'; +import FlightPlanPilot from '../../../../components/basis/flight/plan/FlightPlanPilot'; + +const FlightPlanPilotContainer = ({handleModal, type}) => { + const dispatch = useDispatch(); + const { pilotList } = useSelector(state => state.flightState); + + + /* 조종사 조회 */ + const handleSearch = () => { + // group id 하드코딩 + dispatch(Actions.FLIGHT_PLAN_PILOT_LIST.request("D1682A")); + } + + /* 조종사 선택 */ + const handleSelectPilot = (cstmrSno) => { + handleModal({target: 'area', isOpen: false}); + + const pilot = pilotList.find(pilot => { + return pilot.cstmrSno === cstmrSno; + }); + /* 파일럿 정보 Redux 저장 */ + dispatch(Actions.PILOT_SELECT(pilot)); + } + + useEffect(() => { + handleSearch(); + }, []) + + + return ( + + ) +} + +export default FlightPlanPilotContainer; \ No newline at end of file From af230f9df61a40ba393648e7a3f65f65222591d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?scnoh=28=EB=85=B8=EC=8A=B9=EC=B2=A0=29?= Date: Tue, 26 Jul 2022 19:22:05 +0900 Subject: [PATCH 07/21] =?UTF-8?q?[=EB=B9=84=ED=96=89=EA=B3=84=ED=9A=8D?= =?UTF-8?q?=EC=84=9C]=20=EC=A1=B0=EC=A2=85=EC=82=AC=20=EC=A0=95=EB=B3=B4?= =?UTF-8?q?=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../basis/flight/plan/FlightPlanForm.js | 50 ++++++++++++++++++- .../basis/flight/plan/FlightPlanModal.js | 29 +++++++++++ .../flight/plan/FlightPlanDetailContainer.js | 31 +++++++++++- .../flight/plan/FlightPlanPilotContainer.js | 2 +- .../basis/flight/actions/basisFlightAction.ts | 9 +++- .../basis/flight/models/basisFlightModel.ts | 17 ++++++- .../flight/reducers/basisFlightReducer.ts | 7 +++ 7 files changed, 139 insertions(+), 6 deletions(-) create mode 100644 src/components/basis/flight/plan/FlightPlanModal.js diff --git a/src/components/basis/flight/plan/FlightPlanForm.js b/src/components/basis/flight/plan/FlightPlanForm.js index 0e25d0f..c28e818 100644 --- a/src/components/basis/flight/plan/FlightPlanForm.js +++ b/src/components/basis/flight/plan/FlightPlanForm.js @@ -13,9 +13,11 @@ import Flatpickr from 'react-flatpickr'; import '@styles/react/libs/flatpickr/flatpickr.scss'; import moment from 'moment'; import {initFlight, initFlightBas} from '../../../../modules/basis/flight/models/basisFlightModel'; +import FlightPlanPilotContainer from '../../../../containers/basis/flight/plan/FlightPlanPilotContainer'; +import { FlightPlanModal } from './FlightPlanModal'; -const FlightPlanForm = ({data, handleModal, handleChange, handleSave, handleDelete}) => { +const FlightPlanForm = ({data, handleModal, handleChange, handleSave, handleDelete, modal}) => { const {areaList, pilotList, arcrftList} = data; return ( @@ -258,7 +260,7 @@ const FlightPlanForm = ({data, handleModal, handleChange, handleSave, handleDele

조종사 정보

{ + onClick={(e) => { handleModal({target: 'pilot', isOpen: true}) }} > @@ -324,12 +326,56 @@ const FlightPlanForm = ({data, handleModal, handleChange, handleSave, handleDele + ) } export default FlightPlanForm; +const SelectModal = ({handleModal, modal}) => { + let title = ''; + let description = ''; + let type = ''; + let isOpen = false; + + if(modal.pilot) { + isOpen = modal.pilot; + title = '조종사 조회'; + type = 'pilot'; + description = + } + + if(modal.arcrft) { + isOpen = modal.arcrft; + title = '기체 조회'; + type = 'arcrft'; + description = ''; + } + + if(modal.area) { + isOpen = modal.area; + title = '비행 구역 설정'; + type = 'area'; + description = ''; + } + + return ( + + ) + +} + + const AreaForm = ({data, handleChange, index}) => { return (
diff --git a/src/components/basis/flight/plan/FlightPlanModal.js b/src/components/basis/flight/plan/FlightPlanModal.js new file mode 100644 index 0000000..b2d35d3 --- /dev/null +++ b/src/components/basis/flight/plan/FlightPlanModal.js @@ -0,0 +1,29 @@ +import { useState } from 'react'; +import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; +import FlightPlanAreaContainer from '../../../../containers/basis/flight/plan/FlightPlanAreaContainer'; + +export const FlightPlanModal = ({isOpen, title, description, type, handleModal}) => { + + return ( +
+ + handleModal(({target: type, isOpen: false})) + } + className='modal-dialog-centered modal-xl' + > + + handleModal(({target: type, isOpen: false})) + } + > + {title} + + + {description} + + +
+ ); +}; diff --git a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js index 7797bd0..adbe413 100644 --- a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js @@ -19,7 +19,7 @@ const FlightPlanDetailContainer = () => { const location = useLocation(); const urlParams = useParams(); const flightState = useSelector(state => state.flightState); - const {detail} = flightState; + const {detail, pilotSelect} = flightState; const [modal, setModal] = useState(initModal); const [detailData, setDetailData] = useState(initFlightBas.initDetail); @@ -32,6 +32,27 @@ const FlightPlanDetailContainer = () => { setDetailData(detail); }, [detail]) + useEffect(() => { + if(pilotSelect !== undefined) { + const pilot = Object.assign({}, initFlightBas['pilot']); + + pilot.cstmrSno = pilotSelect.cstmrSno; + pilot.groupNm = pilotSelect.groupNm; + pilot.clncd = pilotSelect.clncd; + pilot.email = pilotSelect.email; + pilot.memberName = pilotSelect.memberName; + pilot.hpno = pilotSelect.hpno; + + setDetailData(prevState => { + return { + ...prevState, + ['pilotList']: [...prevState['pilotList'], pilot] + } + }) + } + + }, [pilotSelect]) + const handleModal = (modal) => { setModal(prevState => ({ ...initModal, @@ -141,6 +162,13 @@ const FlightPlanDetailContainer = () => { break; case 'area': case 'pilot': + setDetailData(prevState => { + return { + ...prevState, + [arrName]: [...prevState[arrName], initFlightBas[type]] + } + }) + break; case 'arcrft': setDetailData(prevState => { return { @@ -202,6 +230,7 @@ const FlightPlanDetailContainer = () => { return ( { /* 조종사 선택 */ const handleSelectPilot = (cstmrSno) => { - handleModal({target: 'area', isOpen: false}); + handleModal({target: 'poilot', isOpen: false}); const pilot = pilotList.find(pilot => { return pilot.cstmrSno === cstmrSno; diff --git a/src/modules/basis/flight/actions/basisFlightAction.ts b/src/modules/basis/flight/actions/basisFlightAction.ts index e04e7d7..953737b 100644 --- a/src/modules/basis/flight/actions/basisFlightAction.ts +++ b/src/modules/basis/flight/actions/basisFlightAction.ts @@ -50,6 +50,9 @@ const FLIGHT_PLAN_PILOT_LIST_REQUEST = 'basis/flight/plan/pilot_list/PILOT_LIST_ const FLIGHT_PLAN_PILOT_LIST_SUCCESS = 'basis/flight/plan/pilot_list/PILOT_LIST_SUCCESS'; const FLIGHT_PLAN_PILOT_LIST_FAILURE = 'basis/flight/plan/pilot_list/PILOT_LIST_FAILURE'; +// 조종사 선택 +const FLIGHT_PLAN_PILOT_SELECT = 'basis/flight/plan/pilot_list/PILOT_SELECT'; + // 기체 조회 const FLIGHT_PLAN_ARCRFT_LIST_REQUEST = 'basis/flight/plan/arcrft_list/ARCRFT_LIST_REQUEST'; const FLIGHT_PLAN_ARCRFT_LIST_SUCCESS = 'basis/flight/plan/arcrft_list/ARCRFT_LIST_SUCCESS'; @@ -115,6 +118,9 @@ export const FLIGHT_PLAN_PILOT_LIST = createAsyncAction( FLIGHT_PLAN_PILOT_LIST_FAILURE )(); +// 조종사 조회 +export const PILOT_SELECT = createAction(FLIGHT_PLAN_PILOT_SELECT)(); + // 기체 목록 export const FLIGHT_PLAN_ARCRFT_LIST = createAsyncAction( FLIGHT_PLAN_ARCRFT_LIST_REQUEST, @@ -133,7 +139,8 @@ const actions = { FLIGHT_PLAN_UPDATE, FLIGHT_PLAN_DELETE, FLIGHT_PLAN_PILOT_LIST, - FLIGHT_PLAN_ARCRFT_LIST + FLIGHT_PLAN_ARCRFT_LIST, + PILOT_SELECT }; export type FlightAction = ActionType; diff --git a/src/modules/basis/flight/models/basisFlightModel.ts b/src/modules/basis/flight/models/basisFlightModel.ts index cad9f06..3339cd4 100644 --- a/src/modules/basis/flight/models/basisFlightModel.ts +++ b/src/modules/basis/flight/models/basisFlightModel.ts @@ -7,6 +7,7 @@ export interface FlightState { detail: FlightPlanData | undefined pilotList: FlightPlanPilotDataList | undefined arcrftList: FlightPlanArcrftDataList | undefined + pilotSelect: PilotSelectData | undefined } export interface FlightAreaData { @@ -142,6 +143,18 @@ export interface FlightPlanAprovRqData { aprvlYn: string } +export interface PilotSelectData { + groupNm: string, + cstmrSno: string, + memberName: string, + email: string, + hpno: string, + clncd: string, + addr: string, + addrDtlCn: string, + zip: string +} + export const initFlight = { areaList: undefined, @@ -236,6 +249,8 @@ export const initFlight = { }, pilotList: undefined, arcrftList: undefined, + pilotSelect: undefined, + arcrftSelect: undefined }; @@ -262,7 +277,7 @@ export const initFlightBas = { updateDt: '', areaList: undefined, pilotList: undefined, - arcrftList: undefined + arcrftList: undefined, }, pilot: { planPilotSno: 0, diff --git a/src/modules/basis/flight/reducers/basisFlightReducer.ts b/src/modules/basis/flight/reducers/basisFlightReducer.ts index c44f032..5a138ac 100644 --- a/src/modules/basis/flight/reducers/basisFlightReducer.ts +++ b/src/modules/basis/flight/reducers/basisFlightReducer.ts @@ -45,6 +45,13 @@ export const flightReducer = createReducer(in draft.pilotList = data; }) ) + // 조종사 선택 + .handleAction(Actions.PILOT_SELECT, (state, action) => + produce(state, draft => { + const data = action.payload; + draft.pilotSelect = data; + }) + ) // 기체 조회 .handleAction(Actions.FLIGHT_PLAN_ARCRFT_LIST.success, (state, action) => produce(state, draft => { From 4e846ae0752b9a8b3848da5e2d4a69870f4efd49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?scnoh=28=EB=85=B8=EC=8A=B9=EC=B2=A0=29?= Date: Tue, 26 Jul 2022 20:43:21 +0900 Subject: [PATCH 08/21] =?UTF-8?q?[=EB=B9=84=ED=96=89=EA=B3=84=ED=9A=8D?= =?UTF-8?q?=EC=84=9C]=20=EA=B8=B0=EC=B2=B4=20=EB=AA=A9=EB=A1=9D=20?= =?UTF-8?q?=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../basis/flight/plan/FlightPlanArcrft.js | 137 ++++++++++++++++++ .../basis/flight/plan/FlightPlanForm.js | 3 +- .../basis/flight/plan/FlightPlanPilot.js | 4 +- .../flight/plan/FlightPlanArcrftContainer.js | 42 ++++++ .../flight/plan/FlightPlanDetailContainer.js | 30 +++- .../basis/flight/actions/basisFlightAction.ts | 23 ++- .../basis/flight/models/basisFlightModel.ts | 1 + .../flight/reducers/basisFlightReducer.ts | 14 ++ 8 files changed, 243 insertions(+), 11 deletions(-) create mode 100644 src/components/basis/flight/plan/FlightPlanArcrft.js create mode 100644 src/containers/basis/flight/plan/FlightPlanArcrftContainer.js diff --git a/src/components/basis/flight/plan/FlightPlanArcrft.js b/src/components/basis/flight/plan/FlightPlanArcrft.js new file mode 100644 index 0000000..a853dc8 --- /dev/null +++ b/src/components/basis/flight/plan/FlightPlanArcrft.js @@ -0,0 +1,137 @@ +import React from 'react'; +import {Button, Card, CardBody, Col, CustomInput, Row, FormGroup, Input, Label} from 'reactstrap'; +import {Search} from 'react-feather'; +import {GridDatabase} from '../../../crud/grid/GridDatatable'; + +const FlightPlanArcrft = ({ arcrftList, handleSelectArcrft }) => { + const columns = [ + {id: 'groupNm', name: '그룹 명', cell: row => (
{row.groupNm}
)}, + {id: 'arcrftModelNm', name: '모델 명', cell: row => (
{row.arcrftModelNm}
)}, + {id: 'idntfTypeCd', name: '종류', cell: row => (
{row.idntfTypeCd}
)}, + {id: 'ownerNm', name: '소유자 명', cell: row => (
{row.ownerNm}
)}, + {id: 'idntfNum', name: '식별 코드', cell: row => (
{row.idntfNum}
)}, + { + id: 'selectPilot', name: '선택', cell: row => { + return { + handleSelectArcrft(row.arcrftSno) + } + }>선택; + } + } + ]; + + return ( + <> +
+ + +
+
+

검색조건

+
+
+ + + 검색 + +
+
+ + +
+
+
+
+
그룹 명
+
+
+ + + + + + + + +
+
+
+
+
소유자 명
+
+
+ + + + + + + + +
+
+
+
+
+
+ + + + + +
+
+ + +
+
+

기체 목록

+ 검색결과 총 {!!arcrftList ? arcrftList.length : 0}건 +
+
+
+ +
+ + {/* 검색된 데이터가 없습니다. */} +
+ +
+ + +
+ + ) + +} + +export default FlightPlanArcrft; \ No newline at end of file diff --git a/src/components/basis/flight/plan/FlightPlanForm.js b/src/components/basis/flight/plan/FlightPlanForm.js index c28e818..27f4a0e 100644 --- a/src/components/basis/flight/plan/FlightPlanForm.js +++ b/src/components/basis/flight/plan/FlightPlanForm.js @@ -15,6 +15,7 @@ import moment from 'moment'; import {initFlight, initFlightBas} from '../../../../modules/basis/flight/models/basisFlightModel'; import FlightPlanPilotContainer from '../../../../containers/basis/flight/plan/FlightPlanPilotContainer'; import { FlightPlanModal } from './FlightPlanModal'; +import FlightPlanArcrftContainer from '../../../../containers/basis/flight/plan/FlightPlanArcrftContainer'; const FlightPlanForm = ({data, handleModal, handleChange, handleSave, handleDelete, modal}) => { @@ -353,7 +354,7 @@ const SelectModal = ({handleModal, modal}) => { isOpen = modal.arcrft; title = '기체 조회'; type = 'arcrft'; - description = ''; + description = ; } if(modal.area) { diff --git a/src/components/basis/flight/plan/FlightPlanPilot.js b/src/components/basis/flight/plan/FlightPlanPilot.js index d35a132..52089f5 100644 --- a/src/components/basis/flight/plan/FlightPlanPilot.js +++ b/src/components/basis/flight/plan/FlightPlanPilot.js @@ -78,8 +78,8 @@ const FlightPlanPilot = ({ pilotList, handleSelectPilot }) => { { + const dispatch = useDispatch(); + const { arcrftList } = useSelector(state => state.flightState); + + + /* 기체 조회 */ + const handleSearch = () => { + // group id 하드코딩 + dispatch(Actions.FLIGHT_PLAN_ARCRFT_LIST.request("D1682A")); + } + + /* 기체 선택 */ + const handleSelectArcrft = (arcrftSno) => { + handleModal({target: 'arcrft', isOpen: false}); + + const arcrft = arcrftList.find(arcrft => { + return arcrft.arcrftSno === arcrftSno; + }); + /* 기체 정보 Redux 저장 */ + dispatch(Actions.ARCRFT_SELECT(arcrft)); + } + + useEffect(() => { + handleSearch(); + }, []) + + + return ( + + ) +} + +export default FlightPlanArcrftContainer; \ No newline at end of file diff --git a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js index adbe413..1cc2743 100644 --- a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js @@ -19,7 +19,7 @@ const FlightPlanDetailContainer = () => { const location = useLocation(); const urlParams = useParams(); const flightState = useSelector(state => state.flightState); - const {detail, pilotSelect} = flightState; + const { detail, pilotSelect, arcrftSelect } = flightState; const [modal, setModal] = useState(initModal); const [detailData, setDetailData] = useState(initFlightBas.initDetail); @@ -42,7 +42,7 @@ const FlightPlanDetailContainer = () => { pilot.email = pilotSelect.email; pilot.memberName = pilotSelect.memberName; pilot.hpno = pilotSelect.hpno; - + setDetailData(prevState => { return { ...prevState, @@ -53,6 +53,32 @@ const FlightPlanDetailContainer = () => { }, [pilotSelect]) + useEffect(() => { + if(arcrftSelect !== undefined) { + const arcrft = Object.assign({}, initFlightBas['arcrft']); + + arcrft.arcrftSno = arcrftSelect.arcrftSno; + arcrft.groupId = arcrftSelect.groupNm; + arcrft.groupNm = arcrftSelect.clncd; + arcrft.arcrftModelNm = arcrftSelect.arcrftModelNm; + arcrft.idntfTypeCd = arcrftSelect.idntfTypeCd; + arcrft.idntfNum = arcrftSelect.idntfNum; + arcrft.ownerNm = arcrftSelect.ownerNm; + + setDetailData(prevState => { + return { + ...prevState, + ['arcrftList']: [...prevState['arcrftList'], arcrft] + } + }) + } + }, [arcrftSelect]) + + useEffect(() => { + // 조종사, 기체 정보 Redux 초기화 + dispatch(Actions.PILOT_ARCRFT_SELECT_INIT()); + }) + const handleModal = (modal) => { setModal(prevState => ({ ...initModal, diff --git a/src/modules/basis/flight/actions/basisFlightAction.ts b/src/modules/basis/flight/actions/basisFlightAction.ts index 953737b..bb51e31 100644 --- a/src/modules/basis/flight/actions/basisFlightAction.ts +++ b/src/modules/basis/flight/actions/basisFlightAction.ts @@ -2,10 +2,11 @@ import { AxiosError } from 'axios'; import { createAsyncAction, ActionType, createAction } from 'typesafe-actions'; import { FlightAreaData, + FlightPlanArcrftData, FlightPlanArcrftDataList, // FlightPlanArea, FlightPlanData, - FlightPlanListRqData, FlightPlanPilotDataList + FlightPlanListRqData, FlightPlanPilotDataList, PilotSelectData } from '../models/basisFlightModel'; @@ -58,9 +59,11 @@ const FLIGHT_PLAN_ARCRFT_LIST_REQUEST = 'basis/flight/plan/arcrft_list/ARCRFT_LI const FLIGHT_PLAN_ARCRFT_LIST_SUCCESS = 'basis/flight/plan/arcrft_list/ARCRFT_LIST_SUCCESS'; const FLIGHT_PLAN_ARCRFT_LIST_FAILURE = 'basis/flight/plan/arcrft_list/ARCRFT_LIST_FAILURE'; +// 기체 선택 +const FLIGHT_PLAN_ARCRFT_SELECT = 'basis/flight/plan/arcrft_list/ARCRFT_SELECT'; - - +// 조종사, 기체 선택 초기화 +const PILOT_ARCRFT_SELECT_INITIAL = 'basis/flight/plan/detail/SELECT_INIT'; export const AREA_LIST = createAsyncAction( @@ -118,8 +121,8 @@ export const FLIGHT_PLAN_PILOT_LIST = createAsyncAction( FLIGHT_PLAN_PILOT_LIST_FAILURE )(); -// 조종사 조회 -export const PILOT_SELECT = createAction(FLIGHT_PLAN_PILOT_SELECT)(); +// 조종사 선택 +export const PILOT_SELECT = createAction(FLIGHT_PLAN_PILOT_SELECT)(); // 기체 목록 export const FLIGHT_PLAN_ARCRFT_LIST = createAsyncAction( @@ -128,6 +131,12 @@ export const FLIGHT_PLAN_ARCRFT_LIST = createAsyncAction( FLIGHT_PLAN_ARCRFT_LIST_FAILURE )(); +// 조종사 선택 +export const ARCRFT_SELECT = createAction(FLIGHT_PLAN_ARCRFT_SELECT)(); + +// 조종사, 기체 선택 초기화 +export const PILOT_ARCRFT_SELECT_INIT = createAction(PILOT_ARCRFT_SELECT_INITIAL)(); + const actions = { AREA_LIST, @@ -140,7 +149,9 @@ const actions = { FLIGHT_PLAN_DELETE, FLIGHT_PLAN_PILOT_LIST, FLIGHT_PLAN_ARCRFT_LIST, - PILOT_SELECT + PILOT_SELECT, + ARCRFT_SELECT, + PILOT_ARCRFT_SELECT_INIT }; export type FlightAction = ActionType; diff --git a/src/modules/basis/flight/models/basisFlightModel.ts b/src/modules/basis/flight/models/basisFlightModel.ts index 3339cd4..401562f 100644 --- a/src/modules/basis/flight/models/basisFlightModel.ts +++ b/src/modules/basis/flight/models/basisFlightModel.ts @@ -8,6 +8,7 @@ export interface FlightState { pilotList: FlightPlanPilotDataList | undefined arcrftList: FlightPlanArcrftDataList | undefined pilotSelect: PilotSelectData | undefined + arcrftSelect: FlightPlanArcrftData | undefined } export interface FlightAreaData { diff --git a/src/modules/basis/flight/reducers/basisFlightReducer.ts b/src/modules/basis/flight/reducers/basisFlightReducer.ts index 5a138ac..d1bf3f1 100644 --- a/src/modules/basis/flight/reducers/basisFlightReducer.ts +++ b/src/modules/basis/flight/reducers/basisFlightReducer.ts @@ -59,3 +59,17 @@ export const flightReducer = createReducer(in draft.arcrftList = data; }) ) + // 기체 선택 + .handleAction(Actions.ARCRFT_SELECT, (state, action) => + produce(state, draft => { + const data = action.payload; + draft.arcrftSelect = data; + }) + ) + // 조종사, 기체 선택 초기화 + .handleAction(Actions.PILOT_ARCRFT_SELECT_INIT, (state, action) => + produce(state, draft => { + draft.arcrftSelect = undefined; + draft.pilotSelect = undefined; + }) + ) From 95394c60cc4d4f152310a8fe5228c4599fb09c6c 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, 27 Jul 2022 11:35:57 +0900 Subject: [PATCH 09/21] =?UTF-8?q?[=EB=B9=84=ED=96=89=EA=B3=84=ED=9A=8D?= =?UTF-8?q?=EC=84=9C]=20=EC=A1=B0=EC=A2=85=EC=82=AC,=20=EA=B8=B0=EC=B2=B4?= =?UTF-8?q?=20=EC=A1=B0=ED=9A=8C=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../basis/flight/plan/FlightPlanArcrft.js | 2 +- .../flight/plan/FlightPlanDetailContainer.js | 35 +++++++++++++++---- 2 files changed, 30 insertions(+), 7 deletions(-) diff --git a/src/components/basis/flight/plan/FlightPlanArcrft.js b/src/components/basis/flight/plan/FlightPlanArcrft.js index a853dc8..a8de3bb 100644 --- a/src/components/basis/flight/plan/FlightPlanArcrft.js +++ b/src/components/basis/flight/plan/FlightPlanArcrft.js @@ -7,7 +7,7 @@ const FlightPlanArcrft = ({ arcrftList, handleSelectArcrft }) => { const columns = [ {id: 'groupNm', name: '그룹 명', cell: row => (
{row.groupNm}
)}, {id: 'arcrftModelNm', name: '모델 명', cell: row => (
{row.arcrftModelNm}
)}, - {id: 'idntfTypeCd', name: '종류', cell: row => (
{row.idntfTypeCd}
)}, + {id: 'idntfTypeCd', name: '종류', cell: row => (
{row.arcrftTypeCd}
)}, {id: 'ownerNm', name: '소유자 명', cell: row => (
{row.ownerNm}
)}, {id: 'idntfNum', name: '식별 코드', cell: row => (
{row.idntfNum}
)}, { diff --git a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js index 1cc2743..7b7903c 100644 --- a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js @@ -34,6 +34,7 @@ const FlightPlanDetailContainer = () => { useEffect(() => { if(pilotSelect !== undefined) { + const pilotList = detailData.pilotList.concat(); const pilot = Object.assign({}, initFlightBas['pilot']); pilot.cstmrSno = pilotSelect.cstmrSno; @@ -41,12 +42,22 @@ const FlightPlanDetailContainer = () => { pilot.clncd = pilotSelect.clncd; pilot.email = pilotSelect.email; pilot.memberName = pilotSelect.memberName; - pilot.hpno = pilotSelect.hpno; + pilot.hpno = pilotSelect.hpno; + + pilotList.forEach((p, i) => { + if(p.cstmrSno === 0) { + pilotList[i] = pilot + } else { + if(i === pilotList.length-1) { + return pilotList.push(pilot); + } + } + }); setDetailData(prevState => { return { ...prevState, - ['pilotList']: [...prevState['pilotList'], pilot] + ['pilotList']: pilotList } }) } @@ -55,20 +66,32 @@ const FlightPlanDetailContainer = () => { useEffect(() => { if(arcrftSelect !== undefined) { + const arcrftList = detailData.arcrftList.concat(); const arcrft = Object.assign({}, initFlightBas['arcrft']); arcrft.arcrftSno = arcrftSelect.arcrftSno; - arcrft.groupId = arcrftSelect.groupNm; - arcrft.groupNm = arcrftSelect.clncd; + arcrft.groupId = arcrftSelect.groupId; + arcrft.groupNm = arcrftSelect.groupNm; arcrft.arcrftModelNm = arcrftSelect.arcrftModelNm; arcrft.idntfTypeCd = arcrftSelect.idntfTypeCd; + arcrft.arcrftTypeCd = arcrftSelect.arcrftTypeCd; arcrft.idntfNum = arcrftSelect.idntfNum; - arcrft.ownerNm = arcrftSelect.ownerNm; + arcrft.ownerNm = arcrftSelect.ownerNm; + + arcrftList.forEach((p, i) => { + if(p.arcrftSno === 0) { + arcrftList[i] = arcrft + } else { + if(i === arcrftList.length-1) { + return arcrftList.push(arcrft); + } + } + }); setDetailData(prevState => { return { ...prevState, - ['arcrftList']: [...prevState['arcrftList'], arcrft] + ['arcrftList']: arcrftList } }) } From 831eac7bc3e36a25e24bc73fa806ac372348a547 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, 27 Jul 2022 17:30:24 +0900 Subject: [PATCH 10/21] =?UTF-8?q?[=EB=B9=84=ED=96=89=EA=B3=84=ED=9A=8D?= =?UTF-8?q?=EC=84=9C]=20=EB=B9=84=ED=96=89=20=EA=B5=AC=EC=97=AD=20merge?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/custom.css | 1 + .../flight/plan/FlightPlanAreaDetailForm.js | 207 +++++ .../flight/plan/FlightPlanAreaDetailModal.js | 31 + .../basis/flight/plan/FlightPlanAreaForm.js | 115 --- .../basis/flight/plan/FlightPlanAreaMap.js | 147 +++- .../basis/flight/plan/FlightPlanAreaModal.js | 49 -- .../basis/flight/plan/FlightPlanForm.js | 5 +- .../basis/flight/plan/FlightPlanPilot.js | 2 +- .../map/naver/draw/FlightPlanDraw.js | 652 ++++++++++++++++ .../map/naver/draw/FlightPlanDrawTest.js | 721 ++++++++++++++++++ .../flight/plan/FlightPlanAreaContainer.js | 58 +- .../plan/FlightPlanAreaDetailContainer.js | 29 + .../control/map/reducers/controlMapReducer.ts | 4 +- 13 files changed, 1793 insertions(+), 228 deletions(-) create mode 100644 src/components/basis/flight/plan/FlightPlanAreaDetailForm.js create mode 100644 src/components/basis/flight/plan/FlightPlanAreaDetailModal.js delete mode 100644 src/components/basis/flight/plan/FlightPlanAreaForm.js delete mode 100644 src/components/basis/flight/plan/FlightPlanAreaModal.js create mode 100644 src/components/map/naver/draw/FlightPlanDraw.js create mode 100644 src/components/map/naver/draw/FlightPlanDrawTest.js create mode 100644 src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css index 0f44874..70639f7 100644 --- a/src/assets/css/custom.css +++ b/src/assets/css/custom.css @@ -250,6 +250,7 @@ h1.logo span{display:block;color:#f4f4f4;font-weight:bold;letter-spacing:2px;fon .left-menu-nav .test .btn-use{margin-left:20px; width: 35px; height: 35px; display: block; border: 0px solid transparent; box-sizing: content-box !important; background-color: #009cad;} .measure-control{position:absolute; z-index:100;} +.area-button{position:relative; z-index:100; margin-top:10px; margin-left:10px;} .control-btn{margin-left: 7px; border-bottom: solid 1px #283046; margin-bottom:5px;} .buffer-input{text-align: center; border-radius: 100px; border: 1px solid #283046; width: 70px; margin-left: 5px;} diff --git a/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js b/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js new file mode 100644 index 0000000..65aeff3 --- /dev/null +++ b/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js @@ -0,0 +1,207 @@ +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 = ({ handleClose }) => { + 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 ( + // + + + + + + + + +
+ {/*
+
+

비행 구역 상세 정보

+
+
*/} + +
+
+
+

좌표 정보

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

기타 정보

+
+ +
+ + + +
+ + +
+
+ +
+ + + + + + + + + +
+
+
+
+ +
+ + 등록 + + handleClose()} + > + 닫기 + +
+ + + + + + + + + ) +} + +export default FlightPlanAreaDetailForm; \ No newline at end of file diff --git a/src/components/basis/flight/plan/FlightPlanAreaDetailModal.js b/src/components/basis/flight/plan/FlightPlanAreaDetailModal.js new file mode 100644 index 0000000..188b20c --- /dev/null +++ b/src/components/basis/flight/plan/FlightPlanAreaDetailModal.js @@ -0,0 +1,31 @@ +import { useEffect, useState } from 'react'; +import { Modal, ModalHeader, ModalBody } from 'reactstrap'; +import FlightPlanAreaDetailContainer from '../../../../containers/basis/flight/plan/FlightPlanAreaDetailContainer'; + +export const FlightPlanAreaDetailModal = ({modal, handleModal}) => { + return ( +
+ + handleModal({isOpen: false, title: ''}) + } + className='modal-dialog-centered modal-xl' + > + + handleModal({isOpen: false, title: ''}) + } + > + {modal.title} + + + + + +
+ ); +}; diff --git a/src/components/basis/flight/plan/FlightPlanAreaForm.js b/src/components/basis/flight/plan/FlightPlanAreaForm.js deleted file mode 100644 index 4e9f1c0..0000000 --- a/src/components/basis/flight/plan/FlightPlanAreaForm.js +++ /dev/null @@ -1,115 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import classnames from 'classnames'; -import { - Card, - CardBody, - Col, - FormGroup, - FormFeedback, - Input, - Label, - Row, - Button, - Form -} from 'reactstrap'; - - -const FlightPlanAreaForm = (props) => { - - return ( - - -
-
-
-

상세 정보

-
-
- {/* {props.type === 'update' ? ( - 최종 수정일자 : {props.updateDt} - ) : null} */} -
-
- -
-
-
- - - - - - - - -
-
- - - -
- - -
-
- -
- - - -
- - - 확인 - - - props.setModal({ ...props.modal, isOpen: !props.modal.isOpen }) - } - > - 취소 - -
-
-
- - - ) -} - -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 index e424b12..0a632a1 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaMap.js +++ b/src/components/basis/flight/plan/FlightPlanAreaMap.js @@ -2,74 +2,173 @@ import React, { useEffect, useState } from 'react'; import { Card, CardBody, - Button + Button, + Row, + Label, + Input, + Col, + FormGroup } from 'reactstrap'; +import { useDispatch, useSelector } from 'react-redux'; import { FeatureAirZone } from '../../../map/naver/feature/FeatureAirZone'; +import { drawTypeChangeAction, drawCheckAction } from '../../../../modules/control/map/actions/controlMapActions'; +import { FlightPlanDrawTest } from '../../../map/naver/draw/FlightPlanDrawTest'; const FlightPlanAreaMap = (props) => { + const dispatch = useDispatch(); const naver = window.naver; const airArea = props.airArea; + const openModal = props.openModal; + + const mapControl = useSelector(state => state.controlMapReducer); const [map, setMap] = useState(); const [isMapLoad, setIsMapLoad] = useState(false); + const [mode, setMode] = useState(); useEffect(() => { + NaverMapInit(); }, []); - useEffect(() => { + + useEffect(() => { setIsMapLoad(true); }, [airArea]); + useEffect(() => { + ModeInit(); + }, [mapControl.drawType]) + + const ModeInit = () => { + setMode(mapControl.drawType) + } + const NaverMapInit = () => { const mapOptions = { - center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547), - zoom: 10, + // center: new naver.maps.LatLng(36.56793936069445, 127.85101412107547), + center: new naver.maps.LatLng(37.520357, 126.610166), + // zoom: 10, + zoom: 15, zoomControl: true, - mapTypeId: naver.maps.MapTypeId.HYBRID, + mapTypeId: naver.maps.MapTypeId.NORMAL, zoomControlOptions: { - position: naver.maps.Position.TOP_LEFT, - - style: naver.maps.ZoomControlStyle.SMALL + position: naver.maps.Position.LEFT_CENTER, + style: naver.maps.ZoomControlStyle.SMALL } - }; - - setMap(new naver.maps.Map('map', mapOptions)); + }; + + setMap(new naver.maps.Map('map', mapOptions)); + }; + + const handlerDrawType = val => { + dispatch(drawTypeChangeAction(val)); }; + const handlerDrawCheck = val => { + dispatch(drawCheckAction(val)); + }; return ( - +

지도 영역

-
+
-
- - - {isMapLoad ? ( - +
+
+ + + props.handleModal({isOpen: true, title: '비행 구역 상세 정보'})} + > + 확인 + + handlerDrawType('RESET')} + > + 초기화 + + {/* + 적용 + */} + +
+
+ + + {isMapLoad ? ( + ) : null} - -
handlerDrawType('LINE')} > - Line + WayPoint - handlerDrawType('CIRCLE')} > Circle + handlerDrawType('POLYGON')} + > + Polygon +
+ + {mapControl.drawType === 'LINE' ? +
+ + + + + + + handlerDrawType('POLYGON')} + > + 적용 + + + +
+ : + null + } + ) diff --git a/src/components/basis/flight/plan/FlightPlanAreaModal.js b/src/components/basis/flight/plan/FlightPlanAreaModal.js deleted file mode 100644 index 3bcee8f..0000000 --- a/src/components/basis/flight/plan/FlightPlanAreaModal.js +++ /dev/null @@ -1,49 +0,0 @@ -import { useState } from 'react'; -import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; -import FlightPlanAreaContainer from '../../../../containers/basis/flight/plan/FlightPlanAreaContainer'; - -export const FlightPlanAreaModal = props => { - - const [onSubmit, setOnSubmit] = useState(false); - - 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} - - - - - {/* - - */} - -
- ); -}; diff --git a/src/components/basis/flight/plan/FlightPlanForm.js b/src/components/basis/flight/plan/FlightPlanForm.js index 27f4a0e..1ee9f07 100644 --- a/src/components/basis/flight/plan/FlightPlanForm.js +++ b/src/components/basis/flight/plan/FlightPlanForm.js @@ -16,6 +16,7 @@ import {initFlight, initFlightBas} from '../../../../modules/basis/flight/models import FlightPlanPilotContainer from '../../../../containers/basis/flight/plan/FlightPlanPilotContainer'; import { FlightPlanModal } from './FlightPlanModal'; import FlightPlanArcrftContainer from '../../../../containers/basis/flight/plan/FlightPlanArcrftContainer'; +import FlightPlanAreaContainer from '../../../../containers/basis/flight/plan/FlightPlanAreaContainer'; const FlightPlanForm = ({data, handleModal, handleChange, handleSave, handleDelete, modal}) => { @@ -347,7 +348,7 @@ const SelectModal = ({handleModal, modal}) => { isOpen = modal.pilot; title = '조종사 조회'; type = 'pilot'; - description = + description = } if(modal.arcrft) { @@ -361,7 +362,7 @@ const SelectModal = ({handleModal, modal}) => { isOpen = modal.area; title = '비행 구역 설정'; type = 'area'; - description = ''; + description = ; } return ( diff --git a/src/components/basis/flight/plan/FlightPlanPilot.js b/src/components/basis/flight/plan/FlightPlanPilot.js index 52089f5..9e4f114 100644 --- a/src/components/basis/flight/plan/FlightPlanPilot.js +++ b/src/components/basis/flight/plan/FlightPlanPilot.js @@ -58,7 +58,7 @@ const FlightPlanPilot = ({ pilotList, handleSelectPilot }) => { name='groupNm' // value={props.params.groupNm} // onChange={props.handlerInput} - size='sm' + size='sm' // onKeyPress={props.onKeyPress} placeholder='그룹명을 입력하세요' /> diff --git a/src/components/map/naver/draw/FlightPlanDraw.js b/src/components/map/naver/draw/FlightPlanDraw.js new file mode 100644 index 0000000..e193de5 --- /dev/null +++ b/src/components/map/naver/draw/FlightPlanDraw.js @@ -0,0 +1,652 @@ +import $ from 'jquery'; +import '../../../../assets/css/custom.css'; +import { CustomInput } from 'reactstrap'; + +import buffer from '@turf/buffer' + +export const FlightPlanDraw = props => { + const {naver} = props; + const {map} = props; + + + var Measure = function(buttons) { + this.$btnLine = buttons.line; + this.$btnPolygon = buttons.polygon; + this.$btnCircle = buttons.circle; + this.$btnRectangle = buttons.rectangle; + + this._mode = null; + + this._bindDOMEvents(); + }; + + $.extend( + Measure.prototype,{ + constructor: Measure, + + setMap: function(map) { + console.log('setMap') + if (this.map) { + this._unbindMap(this.map); + } + + this.map = map; + + if (map) { + this._bindMap(map); + } + }, + + startMode: function(mode) { + console.log('startMode') + if (!mode) return; + + if (mode === 'line') { + this._startDistance(); + } if (mode === 'polygon') { + this._startArea(); + } if (mode === 'circle') { + this._startCircle(); + } if (mode === 'rectangle') { + this._startRectangle(); + } + }, + + _startDistance: function() { + console.log('startDistance') + var map = this.map; + this._distanceListeners = [ + naver.maps.Event.addListener(map, 'click', this._onClickDistance.bind(this)) + ]; + }, + + _startArea: function() { + console.log('startArea') + var map = this.map; + + this._areaListeners = [ + naver.maps.Event.addListener(map, 'click', this._onClickArea.bind(this)), + naver.maps.Event.addListener(map, 'rightclick', this._finishArea.bind(this)) + ]; + + $(document).on('mousemove.measure', this._onMouseMoveArea.bind(this)); + }, + + _startCircle: function() { + console.log('startCircle') + var map = this.map; + this._circleListeners = [ + naver.maps.Event.addListener(map, 'click', this._onClickCircle.bind(this)), + naver.maps.Event.addListener(map, 'rightclick', this._finishCircle.bind(this)) + ]; + }, + + _startRectangle: function() { + console.log('startRectangle') + var map = this.map; + this._rectangleListeners = [ + naver.maps.Event.addListener(map, 'click', this._onClickRectangle.bind(this)), + naver.maps.Event.addListener(map, 'rightclick', this._finishRectangle.bind(this)) + ] + }, + + _finishDistance: function() { + console.log('finishDistance') + + naver.maps.Event.removeListener(this._distanceListeners); + delete this._distanceListeners; + + $(document).off('mousemove.measure'); + + if (this._guideline) { + this._guideline.setMap(null); + delete this._guideline; + } + + if (this._polyline) { + // console.log(this._polyline.getPath()._array, 'path') + let polypaths = this._polyline.getPath()._array; + + //파싱 + let polypathJSON = new Array(); + for(let i = 0; i< polypaths.length; i++) { + + //파싱 + let obj = new Object(); + + obj.x = '' + polypaths[i]._lng + ''; + obj.y = '' + polypaths[i]._lat + ''; + + obj = JSON.stringify(obj); + polypathJSON.push(JSON.parse(obj)); + } + console.log(polypathJSON, 'json polyline path') + + + //버퍼 생성에 필요한 coordinates 배열 변환 + let lineStringPaths = []; + for(let i = 0; i < this._polyline.getPath().length; i++) { + lineStringPaths.push([this._polyline.getPath()._array[i].x, this._polyline.getPath()._array[i].y]); + } + console.log(lineStringPaths, 'polyline path') + + //버퍼 생성을 위한 line 객체 + const originalGeojson = { + type: "FeatureCollection", + features: [ + { + type: "Feature", + properties: {}, + geometry: { + type: "LineString", + coordinates: lineStringPaths + } + } + ] + }; + console.log(originalGeojson) + + //버퍼 객체 + const bufferObj = buffer(originalGeojson, 50, {units:'meters'}); + + //버퍼 라인 생성 + let bufferPath = bufferObj.features[0].geometry.coordinates[0]; + console.log(bufferPath, 'buffer path') + + this.bufferPolyline = new naver.maps.Polyline({ + strokeColor: '#ff0000', + strokeWeight: 2, + strokeStyle: [4, 4], + strokeOpacity: 0.6, + path : bufferPath, + map: map + }); + + // 이거 하면 그동안 한거 싹 사라짐 -> 얘를 통해서 drawType이 바뀌면 다 날라가는 걸로 해보면 될듯 + // this._polyline.setMap(null) + delete this._polyline; + + } + //onfocus()의 반대기능 = blur() + this.$btnLine.removeClass('control-on').blur(); + + this._mode = null; + }, + + _finishArea: function() { + console.log('finishArea') + naver.maps.Event.removeListener(this._areaListeners); + delete this._areaListeners; + + $(document).off('mousemove.measure'); + + if (this._polygon) { + var path = this._polygon.getPath(); + path.pop(); + + delete this._polygon; + } + + this.$btnPolygon.removeClass('control-on').blur(); + + this._mode = null; + }, + + _finishCircle: function() { + console.log('finishCircle') + + naver.maps.Event.removeListener(this._circleListeners); + delete this._circleListeners; + + $(document).off('mousemove.measure'); + + if(this._guidecircle) { + this._guidecircle.setMap(null); + this._radius.setMap(null); + delete this._raidus; + delete this._guidecircle; + } + + if (this._circle) { + // this._circle.setMap(null); + delete this._circle; + } + + this.$btnCircle.removeClass('control-on').blur(); + + // delete this._lastDistance; + this._mode = null; + }, + + _finishRectangle: function() { + console.log('finishRectangle') + + naver.maps.Event.removeListener(this._rectangleListeners); + delete this._rectangleListeners; + + $(document).off('mousemove.measure'); + + if(this._rectangle) { + this._guiderectangle.setMap(null); + delete this._guiderectangle; + } + + this.$btnRectangle.removeClass('control-on').blur(); + + this._mode = null; + }, + + finishMode: function(mode) { + console.log('finishMode') + if (!mode) return; + + if (mode === 'line') { + this._finishDistance(); + } if (mode === 'polygon') { + this._finishArea(); + } if (mode === 'circle') { + this._finishCircle(); + } if (mode === 'rectangle') { + this._finishRectangle(); + } + }, + + _fromMetersToText: function(meters) { + meters = meters || 0; + + var km = 1000, + text = meters; + + if(meters >= km) { + text = parseFloat((meters / km).toFixed(1)) + 'km'; + } else { + text = parseFloat(meters.toFixed(1)) + 'm'; + } + + return text; + }, + + _addMileStone: function(coord, text, css) { + if(!this._ms) this._ms = []; + + let content; + if(text == 'Start') { + content = '
'+ text +'
' + } else { + content = '
'+ text +'
' + } + + var ms = new naver.maps.Marker({ + position: coord, + icon: { + content: content, + anchor: new naver.maps.Point(-5, -5) + }, + map: this.map + }); + + var msElement = $(ms.getElement()); + + if(css) { + msElement.css(css); + } else { + msElement.css('font-size', '13px'); + } + + this._ms.push(ms); + }, + + _onClickDistance: function(e) { + console.log('onClickDistance') + var map = this.map, + coord = e.coord; + + if (!this._polyline) { + // 임시로 보여줄 점선 폴리라인을 생성합니다. + this._guideline = new naver.maps.Polyline({ + strokeColor: '#0000ff', + strokeWeight: 3, + strokeStyle: [4, 4], + strokeOpacity: 0.2, + path: [coord], + map: map + }); + + // this._lastDistance = this._guideline.getDistance(); + + $(document).on('mousemove.measure', this._onMouseMoveDistance.bind(this)); + this._distanceListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishDistance.bind(this))); + + // 실제 거리재기에 사용되는 폴리라인을 생성합니다. + this._polyline = new naver.maps.Polyline({ + strokeLineCap: 'round', + strokeLineJoin: 'round', + strokeColor: '#0000ff', + strokeWeight: 3, + strokeOpacity: 0.6, + path: [coord], + map: map + }); + + this._lastDistance = this._polyline.getDistance(); + this._addMileStone(coord, 'Start'); + + } else { + this._guideline.setPath([e.coord]); + this._polyline.getPath().push(coord); + + var distance = this._polyline.getDistance(); + this._addMileStone(coord, this._fromMetersToText(distance - this._lastDistance)); + this._lastDistance = distance; + } + }, + + _onMouseMoveDistance: function(e) { + console.log('onMouseMoveDistance') + var map = this.map, + proj = this.map.getProjection(), + coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), + path = this._guideline.getPath(); + + if (path.getLength() === 2) { + //맨 뒷 값 삭제 = 기존클릭좌표만 남겨둬라 = 실시간으로 좌표들어가야 하니까 + path.pop(); + } + + // [기존 클릭 좌표, 실시간 좌표] + path.push(coord); + }, + + _onClickArea: function(e) { + console.log('onClickArea') + var map = this.map, + coord = e.coord; + + if (!this._polygon) { + this._polygon = new naver.maps.Polygon({ + strokeOpacity: 0.8, + fillColor: '#0000ff', + fillOpacity: 0.1, + paths: [coord], + map: map + }); + } else { + this._polygon.getPath().push(coord); + } + }, + + _onMouseMoveArea: function(e) { + console.log('onMouseMoveArea') + if (!this._polygon) return; + + var map = this.map, + proj = this.map.getProjection(), + coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), + path = this._polygon.getPath(); + + if (path.getLength() >= 2) { + path.pop(); + } + + path.push(coord); + }, + + _onClickCircle: function(e) { + console.log('onClickCircle') + var map = this.map, + coord = e.coord; + + if(!this._circle) { + + //가이드 라인 + this._radius = new naver.maps.Polyline({ + strokeStyle: [4, 4], + strokeOpacity: 0.6, + path: [coord], + map: map + }); + this._lastDistance = this._radius.getDistance(); + + // 임시로 보여줄 원형 + this._guidecircle = new naver.maps.Circle({ + strokeOpacity: 0.8, + strokeStyle: [4, 4], + fillColor: '#0000ff', + fillOpacity: 0.1, + center: coord, + radius: this._lastDistance, + map: map + }); + + $(document).on('mousemove.measure', this._onMouseMoveCircle.bind(this)); + this._circleListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishCircle.bind(this))); + + // 실제 사용되는 원형 + this._circle = new naver.maps.Circle({ + strokeOpacity: 0.8, + fillColor: '#0000ff', + fillOpacity: 0.1, + center: coord, + radius: this._lastDistance, + map: map + }); + + } else { + // this._guidecircle.setCenter(e.coord); + // this._circle.setCenter(coord); + // if(this._radius.getPath().length() === 2) { + // this._radius.getPath().pop(); + // } + + // this._radius.getPath().push(coord); + + var distance = this._radius.getDistance(); + this._lastDistance = distance; + this._circle.setRadius(this._lastDistance); + + + } + }, + + _onMouseMoveCircle: function(e) { + console.log('onMouseMoveCircle') + if(!this._circle) return; + + var map = this.map, + proj = this.map.getProjection(), + coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), + path = this._radius.getPath(), + center = this._guidecircle.getCenter(), //LatLng으로 나옴 + r = proj.getDistance(coord, center); + + if(path.getLength() === 2) { + path.pop(); + } + path.push(coord); + this._guidecircle.setRadius(r); + }, + + _onClickRectangle: function(e) { + console.log('onClickRectangle') + var map = this.map, + coord = e.coord; + + this.max_x = 0; + this.max_y = 0; + + + if(!this._rectangle) { + //min = 고정값 + this.fixed = coord; + this.min = [this.fixed.x, this.fixed.y]; + this.max = [this.max_x, this.max_y]; + this.boundscoord = [this.min[0], this.min[1], this.min[0], this.min[1]]; + + // 임시로 보여줄 사각형 + this._guiderectangle = new naver.maps.Rectangle({ + strokeStyle: [4, 4], + strokeOpacity: 0.6, + bounds: this.boundscoord, + map: map + }); + + $(document).on('mousemove.measure', this._onMouseMoveRectangle.bind(this)); + this._rectangleListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishRectangle.bind(this))); + + //실제 사용되는 사각형 + this._rectangle = new naver.maps.Rectangle({ + strokeOpacity: 0.8, + fillColor: '#0000ff', + fillOpacity: 0.1, + bounds: this.boundscoord, + map: map + }); + + } else { + this.max = [coord.x, coord.y]; + this.boundscoord = [this.min[0], this.min[1], this.max[0], this.max[1]]; + this._rectangle.setBounds(this.boundscoord); + } + }, + + _onMouseMoveRectangle: function(e) { + console.log('onMouseMoveRectangle') + if(!this._rectangle) return; + + var map = this.map, + proj = this.map.getProjection(), + coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), + bounds = this._guiderectangle.getBounds(), + max = [coord.x, coord.y]; + + this.boundscoord = [this.min[0], this.min[1],max[0], max[1]]; + this._guiderectangle.setBounds(this.boundscoord); + }, + + _bindMap: function(map) { + console.log('bindMap') + }, + + _unbindMap: function() { + console.log('unbindMap') + this.unbindAll(); + }, + + _bindDOMEvents: function() { + console.log('bindDOMEvents') + this.$btnLine.on('click.measure', this._onClickButton.bind(this, 'line')); + this.$btnPolygon.on('click.measure', this._onClickButton.bind(this, 'polygon')); + this.$btnCircle.on('click.measure', this._onClickButton.bind(this, 'circle')); + this.$btnRectangle.on('click.measure', this._onClickButton.bind(this, 'rectangle')); + + }, + + _onClickButton: function(newMode, e) { + //newMode는 방금 클릭한 값(line, polygon, circle...) + console.log('onClickButton') + e.preventDefault(); + + var btn = $(e.target), + map = this.map, + mode = this._mode; + //this._mode는 클릭하기 전 값(첫 클릭이면 null) + + if (btn.hasClass('control-on')) { + console.log('remove') + btn.removeClass('control-on'); + } else { + console.log('add') + btn.addClass('control-on'); + } + + this._clearMode(mode); + + if (mode === newMode) { + this._mode = null; + return; + } + + this._mode = newMode; + + this.startMode(newMode); + }, + + _clearMode: function(mode) { + console.log('clearMode') + if (!mode) return; + + if (mode === 'line') { + if (this._polyline) { + this._polyline.setMap(null); + delete this._polyline; + } + + this._finishDistance(); + } else if (mode === 'polygon') { + if (this._polygon) { + this._polygon.setMap(null); + delete this._polygon; + } + + this._finishArea(); + } else if (mode === 'circle') { + if (this._circle) { + this._circle.setMap(null); + delete this._circle; + } + + this._finishCircle(); + } else if (mode === 'rectangle') { + if(this._rectangle) { + this._rectangle.setMap(null); + delete this._rectangle; + } + } + } + }); + + // id랑 매치시켜서 옵션 지정함 + var measures = new Measure({ + line: $('#line'), + polygon: $('#polygon'), + circle: $('#circle'), + rectangle: $('#rectangle') + }); + + measures.setMap(map); + + return( + <> +
+
    +
  • + + + + +
    • +
+
+ + ) +} \ No newline at end of file diff --git a/src/components/map/naver/draw/FlightPlanDrawTest.js b/src/components/map/naver/draw/FlightPlanDrawTest.js new file mode 100644 index 0000000..c63d059 --- /dev/null +++ b/src/components/map/naver/draw/FlightPlanDrawTest.js @@ -0,0 +1,721 @@ +import $ from 'jquery'; +import buffer from '@turf/buffer' +import { useEffect, useState } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions'; + +import GeoJSONReader from 'jsts/org/locationtech/jts/io/GeoJSONReader'; +import GeometryFactory from 'jsts/org/locationtech/jts/geom/GeometryFactory'; +import {BufferOp} from 'jsts/org/locationtech/jts/operation/buffer'; +import {DistanceOp} from 'jsts/org/locationtech/jts/operation/distance/DistanceOp'; + +import JSTSWKTReader from 'jsts/org/locationtech/jts/io/WKTReader'; +import GeoJSONWriter from 'jsts/org/locationtech/jts/io/GeoJSONWriter'; +import JSTSBufferOp from 'jsts/org/locationtech/jts/operation/buffer/BufferOp' +import JSTSBufferParameter from 'jsts/org/locationtech/jts/operation/buffer/BufferParameters'; + +export const FlightPlanDrawTest = props => { + const dispatch = useDispatch(); + const mapControl = useSelector(state => state.controlMapReducer); + const draw = useSelector(state => state.basisFlightDrawReducer); + + const [pastPolyline, setPolyline] = useState(); + const [pastBuffer, setBuffer] = useState(); + + const [pastPolygon, setPolygon] = useState(); + + const [pastCircle, setCircle] = useState(); + const [pastEve, setEve] = useState(); + + const [pastDragCircle, setDragCircle] = useState([]); + + const naver = props.naver; + const map = props.map; + const openModal = props.openModal; + let mode = props.mode; + + let areaInfo; + let lastDistance; + + let polyline; + let guideline; + let bufferPolyline; + + let polygon; + + let circle; + let radiusline; + + let Eve = { + clickEve: '', + mousedownEve: '', + rightclickEve: '' + } + + let dragCircle = []; + let dragCircleEve = []; + + let check; + + useEffect(() => { + drawInit(); + }, [mapControl.drawType]) + + const handlerDrawType = val => { + dispatch(drawTypeChangeAction(val)); + }; + + // useEffect(() => { + // onClickCheck(); + // }, [mapControl.drawCheck]) + + const zoomChange = () => { + let change; + if(change) { + naver.maps.Event.removeListener(change); + } else { + change = naver.maps.Event.addListener(map, 'zoom_changed', function() { + if(dragCircle) { + // dragCircle.forEach(prev => prev.setRadius(map._mapOptions.zoom + 5)); + // dragCircle.forEach(prev => prev.setRadius(prev.getRadius() * 1.25)); + } + }) + } + } + + const drawInit = () => { + if(mapControl.drawType==='LINE') { + onClickButton('LINE'); + } else if(mapControl.drawType==='CIRCLE') { + onClickButton('CIRCLE'); + } else if(mapControl.drawType==='POLYGON') { + onClickButton('POLYGON'); + } else if(mapControl.drawType==='RESET') { + onClickButton('RESET') + } + } + + const onClickButton = (newMode) => { + console.log('onClickButton'); + if(newMode === 'RESET') return false; + + zoomChange(); + + clearMode(mode); + + if(mode === newMode) { + mode = null; + return; + } + + mode = newMode; + + startMode(newMode); + } + + const clearMode = (mode) => { + console.log('clearMode') + + if(!mode) return; + + if (mode === 'LINE') { + if(pastPolyline) { + pastPolyline.setMap(null); + setPolyline(); + pastBuffer.setMap(null); + setBuffer(); + pastDragCircle.forEach(prev => prev.setMap(null)); + setDragCircle([]); + } + + } else if(mode === 'POLYGON') { + if(pastPolygon) { + pastPolygon.setMap(null); + setPolygon(); + pastDragCircle.forEach(prev => prev.setMap(null)); + setDragCircle([]); + } + } else if(mode === 'CIRCLE') { + if(pastCircle) { + pastCircle.setMap(null); + setCircle(); + naver.maps.Event.removeListener(pastEve); + } + } + finishDraw(); + } + + const startMode = (mode) => { + console.log('startMode') + + // console.log(polyline, 'polyline', pastPolyline, 'pastPolyline'); + // console.log(polygon, 'polygon', pastPolygon, 'pastPolygon'); + // console.log(circle, 'circle', pastCircle, 'pastCircle'); + if (!mode) return; + + if (mode === 'LINE') { + Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickPolyline(e) }); + } else if (mode === 'POLYGON') { + Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickPolygon(e) }); + } else if (mode === 'CIRCLE') { + setEve(naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e) })) + } + } + + const removeListener = () => { + console.log('removeListener') + + naver.maps.Event.removeListener(Eve.clickEve); + naver.maps.Event.removeListener(Eve.mousedownEve); + naver.maps.Event.removeListener(Eve.rightclickEve); + if(!circle) $(document).off('mousemove.measure'); + // if(pastCircle) naver.maps.Event.removeListener(pastEve); + naver.maps.Event.removeListener(pastEve); + } + + const finishDraw = () => { + console.log('finishDraw') + removeListener(); + if(polyline) { + let polypaths = polyline.getPath()._array; + + if(guideline) { + guideline.setMap(null); + guideline = ''; + } + + if(polypaths.length >= 2) { + //꼭짓점 circle 생성 + for(let index = 0; index < polypaths.length; index++) { + dragCircle.push( + new naver.maps.Circle({ + strokeOpacity: 1, + strokeColor: '#000000', + fillColor: '#ffffff', + fillOpacity: 1, + center: polypaths[index], + radius: 10, + map: map, + clickable: true + }) + ) + + dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function() { onMouseDownDrag(index) })) + } + setDragCircle(dragCircle); + + //파싱 + let polypathJSON = new Array(); + for(let i = 0; i< polypaths.length; i++) { + let obj = new Object(); + + obj.x = '' + polypaths[i]._lng + ''; + obj.y = '' + polypaths[i]._lat + ''; + + obj = JSON.stringify(obj); + polypathJSON.push(JSON.parse(obj)); + } + // console.log(polypathJSON, 'json polyline path'); + // bufferMove(); + bufferTest(); + } else { + polyline.setMap(null); + polyline = ''; + } + + } else if(polygon) { + let path = polygon.getPath(); + path.pop(); + + let polygonpaths = polygon.getPath()._array; + //꼭짓점 circle 생성 + for(let index = 0; index < polygonpaths.length; index++) { + dragCircle.push( + new naver.maps.Circle({ + strokeOpacity: 1, + strokeColor: '#000000', + fillColor: '#ffffff', + fillOpacity: 1, + center: polygonpaths[index], + radius: 10, + map: map, + clickable: true + }) + ) + dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function() { onMouseDownDrag(index) })) + } + setDragCircle(dragCircle); + setPolygon(polygon); + setAreaInfo(polygonpaths, ''); + } + } + + const onClickPolyline = (e) => { + console.log('onClickPolyline') + var coord = e.coord; + + if(!check) { + if(!polyline) { + //가이드라인 + guideline = new naver.maps.Polyline({ + strokeColor: '#283046', + strokeWeight: 2, + strokeOpacity: 0.3, + path: [coord], + map: map + }); + // lastDistance = guideline.getDistance(); + + //실제 사용되는 라인 + polyline = new naver.maps.Polyline({ + strokeLineCap: 'round', + strokeLineJoin: 'round', + strokeColor: '#283046', + strokeWeight: 3, + strokeOpacity: 1, + path: [coord], + map: map + }); + + Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function() { finishDraw() }) + $(document).on('mousemove.measure', function(e) { onMouseMovePolyline(e); }); + + lastDistance = polyline.getDistance(); + // this._addMileStone(coord, 'Start'); + } else { + guideline.setPath([e.coord]); + polyline.getPath().push(coord); + + var distance = polyline.getDistance(); + // addMileStone(coord, this._fromMetersToText(distance - this._lastDistance)); + lastDistance = distance; + } + } + } + + const onMouseMovePolyline = (e) => { + console.log('onMouseMovePolyline') + var proj = map.getProjection(), + coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), + path = guideline.getPath(); + + if(path.getLength() === 2) { + path.pop(); + } + + path.push(coord); + } + + const onClickPolygon = (e) => { + console.log('onClickPolygon') + var coord = e.coord; + + if(!polygon) { + polygon = new naver.maps.Polygon({ + strokeColor: '#283046', + strokeOpacity: 1, + fillColor: '#7367F0', + fillOpacity: 0.1, + paths: [coord], + map: map + }); + + Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function() { finishDraw() }) + $(document).on('mousemove.measure', function(e) { onMouseMovePolygon(e) }); + } else { + polygon.getPath().push(coord); + } + } + + const onMouseMovePolygon = (e) => { + console.log('onMouseMovePolygon') + if(!polygon) return; + + var proj = map.getProjection(), + coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), + path = polygon.getPath(); + + if(path.getLength() >= 2) { + path.pop(); + } + + path.push(coord); + } + + const onClickCircle = (e) => { + console.log('onClickCircle') + var coord = e.coord; + + if(!check) { + if(!circle) { + //가이드라인 + radiusline = new naver.maps.Polyline({ + // strokeStyle: [4, 4], + // strokeOpacity: 0.6, + path: [coord], + // map: map + }); + lastDistance = radiusline.getDistance(); + + //실제 사용되는 원형 + circle = new naver.maps.Circle({ + strokeColor: '#283046', + strokeOpacity: 1, + fillColor: '#7367F0', + fillOpacity: 0.1, + center: coord, + radius: 100, + map: map, + clickable: true + }); + + Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function() { onMouseDownDrag(0); }) + } else { + circle.setRadius(100); + circle.setCenter(coord); + + radiusline.setPath([coord]) + } + setCircle(circle); + setAreaInfo('', ''); + } + + } + + const onMouseDownDrag = (index) => { + console.log('onMouseDownDrag') + + if(circle) { + naver.maps.Event.removeListener(Eve.clickEve); + } + + map.setOptions({ + draggable: false, + pinchZoom: false, + scrollWheel: false, + keyboardShortcuts: false, + disableDoubleTapZoom: true, + disableDoubleClickZoom: true, + disableTwoFingerTapZoom: true + }) + + $(document).on('mousemove.measure', function(e) { onMouseMoveDrag(e, index) }); + $(document).on('mouseup.measure', function() { onMouseUpDrag() }); + } + + const onMouseMoveDrag = (e, index) => { + console.log('onMouseMoveDrag') + + check = true; + + var proj = map.getProjection(), + coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)); + + if(polyline) { + var polypaths = polyline.getPath()._array; + + let movepath = []; + for(let i = 0; i < polypaths.length; i++) { + let path; + if(i === index) { + path = coord; + } else { + path = polypaths[i] + } + movepath.push(path); + } + + polyline.setPath(movepath); + + } else if(polygon) { + var polygonpaths = polygon.getPath()._array; + + let movepath = []; + for(let i = 0; i < polygonpaths.length; i++) { + let path; + if(i === index) { + path = coord; + } else { + path = polygonpaths[i] + } + movepath.push(path); + } + polygon.setPaths(movepath) + + } else if(circle) { + var circlepath = radiusline.getPath(), + center = circle.getCenter(), + r = proj.getDistance(coord, center); + + if(circlepath.getLength() === 2) { + circlepath.pop(); + } + circlepath.push(coord); + circle.setRadius(r); + } + + if(!circle) { + dragCircle[index].setCenter(coord); + } + } + + const onMouseUpDrag = () => { + console.log('onMouseUpDrag') + + map.setOptions({ + draggable: true, + pinchZoom: true, + scrollWheel: true, + keyboardShortcuts: true, + disableDoubleTapZoom: false, + disableDoubleClickZoom: false, + disableTwoFingerTapZoom: false + }) + + if(polyline) { + bufferPolyline.setMap(null); + // bufferMove(); + } + + if(polygon) { + var path = polygon.getPath()._array; + setPolygon(polygon); + setAreaInfo(path, ''); + } + + $(document).off('mousemove.measure'); + $(document).off('mouseup.measure'); + + if(circle) { + // Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e); }) + setEve(naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e) })) + setCircle(circle); + setAreaInfo('', ''); + } + + check = false; + } + + const setAreaInfo = (path, bufferpath) => { + areaInfo = ''; + + let prePath = []; + path.forEach(prev=> prePath.push([prev.x, prev.y])) + + if(polyline) { + areaInfo = { + linepath: prePath, + linebuffer: 50, + bufferpath: bufferpath + } + } else if(polygon) { + areaInfo = { + polygonpath: prePath + } + } else if(circle) { + areaInfo = { + center: circle.getCenter(), + radius: circle.getRadius() + } + } + console.log(areaInfo, 'areaInfo') + } + + const bufferTest = () => { + let pol = polyline.getPath()._array; //latlng point 다 준건가? + // console.log(pol) + + let lineStringPaths = []; + for(let i = 0; i< pol.length; i++) { + // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToEPSG3857(pol[i])) + // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToNaver(pol[i])) + // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToTM128(pol[i])) + // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToUTMK(pol[i])) + + // lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToLatLng(naver.maps.Point(pol[i].x, pol[i].y))) + // lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToNaver(naver.maps.Point(pol[i].x, pol[i].y))) + // lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToTM128(naver.maps.Point(pol[i].x, pol[i].y))) + // lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToUTMK(naver.maps.Point(pol[i].x, pol[i].y))) + + + + lineStringPaths.push([pol[i].x, pol[i].y]); + } + // console.log(map.getProjection().getProjectionName()); + // console.log(map.getProjection()) + // console.log(map.getPrimitiveProjection()) + + // console.log(lineStringPaths) + + //옆에 화면에 라이브러리 활용해서 제발 성공하자.. + let bufferRadius = 100; + const wkt = 'LINESTRING (126.6061581 37.5218642, 126.6061581 37.518052)' + let coords = { + "type": "LineString", + "coordinates" : lineStringPaths + }; + const bufferCenter = new JSTSWKTReader().read(wkt) + const bufferResult = JSTSBufferOp.bufferOp( + bufferCenter, + bufferRadius + ) + + const bufferResultGeoJSON = new GeoJSONWriter().write(bufferResult) + // console.log(bufferResultGeoJSON) + + // bufferPolyline = new naver.maps.Polyline({ + // strokeColor: '#ff0000', + // strokeColor: '#283046', + // strokeWeight: 2, + // strokeStyle: [4, 4], + // strokeOpacity: 1, + // path : bufferPaths, + // // path: [ + + // // ], + // map: map + // }); + } + + const bufferMove = () => { + console.log('bufferMove') + + //버퍼 생성에 필요한 coordinates 배열 변환 + let pol = polyline.getPath()._array; + + let lineStringPaths = []; + for(let i = 0; i< polyline.getPath().length; i++) { + lineStringPaths.push([pol[i].x, pol[i].y]); + } + console.log(lineStringPaths, 'polyline path') + + // //버퍼 생성을 위한 line 객체 + // const originalGeojson = { + // type: "FeatureCollection", + // features: [ + // { + // type: "Feature", + // properties: {}, + // geometry: { + // type: "LineString", + // coordinates: lineStringPaths + // } + // } + // ] + // }; + // // console.log(originalGeojson, 'Feature type Object') + + // //버퍼 객체 + // const bufferObj = buffer(originalGeojson, 50, {units:'meters'}); + + // //버퍼 라인 생성 + // let bufferPath = bufferObj.features[0].geometry.coordinates[0]; + // // console.log(bufferPath, 'buffer path') + + // bufferPolyline = new naver.maps.Polyline({ + // // strokeColor: '#ff0000', + // strokeColor: '#283046', + // strokeWeight: 2, + // strokeStyle: [4, 4], + // strokeOpacity: 1, + // path : bufferPath, + // map: map + // }); + + //------------------------ + + let coords = { + "type": "LineString", + "coordinates" : lineStringPaths + }; + + const reader = new GeoJSONReader(); + const writer = new GeoJSONWriter(); + + const distance = (100 * 0.001) / 111.12; //100미터 + const line = reader.read(coords); + // const buffer = BufferOp.bufferOp(line, distance); + const buffer = BufferOp.bufferOp(line, distance, 0, 3); + + let bufferpath = buffer._shell._points._coordinates; + + let bufferPaths = []; + for(let i = 0; i< bufferpath.length; i++) { + bufferPaths.push([bufferpath[i].x, bufferpath[i].y]); + } + console.log(bufferPaths, 'bufferPaths') + + bufferPolyline = new naver.maps.Polyline({ + strokeColor: '#ff0000', + strokeColor: '#283046', + strokeWeight: 2, + strokeStyle: [4, 4], + strokeOpacity: 1, + path : bufferPaths, + // path: [ + + // ], + map: map + }); + + + // setAreaInfo(polyline.getPath()._array, bufferPath); + setAreaInfo(polyline.getPath()._array, bufferPaths); + setPolyline(polyline); + setBuffer(bufferPolyline) + } + + const onClickCheck = () => { + console.log('onClickReset') + // if(!mapControl.drawType) return; + + if(mapControl.drawCheck === 'RESET') { + clearMode(mode); + mode = newMode; + + startMode(newMode); + // removeListener(); + // if(polyline) { + // polyline.setMap(null); + // polyline = ''; + // guideline.setMap(null); + // guideline = ''; + // bufferPolyline.setMap(null); + // bufferPolyline = ''; + // } + // if(polygon) { + // console.log(polygon) + // polygon.setMap(null); + // polygon = ''; + // } + // if(circle) { + // circle.setMap(null); + // circle = ''; + // radiusline.setMap(null); + // radiusline = ''; + // } + + } + + } + + return ( + <> + {/* + 확인 + + handlerDrawCheck('RESET')} + onClick={e => handlerDrawType('RESET')} + > + 초기화 + */} + + ); +}; \ No newline at end of file diff --git a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js index 33ef2bd..b2d1c8b 100644 --- a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js @@ -2,46 +2,35 @@ 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 FlightPlanAreaForm from '../../../../components/basis/flight/plan/FlightPlanAreaForm'; import {Col, Row, Form } from 'reactstrap'; import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction'; import FlightPlanAreaMap from '../../../../components/basis/flight/plan/FlightPlanAreaMap'; import * as yup from 'yup'; import { yupResolver } from '@hookform/resolvers/yup'; +import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions'; +import { FlightPlanAreaDetailModal } from '../../../../components/basis/flight/plan/FlightPlanAreaDetailModal'; -const FlightPlanAreaContainer = (props) => { - const dispatch = useDispatch(); - const history = useHistory(); +const FlightPlanAreaContainer = () => { + const dispatch = useDispatch(); 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) - }); + const [modal, setModal] = useState({isOpen: false, title: ''}); const getAirAreaList = () => { dispatch(Actions.AREA_LIST.request()); - } + } - // const createAirArea = async data => { - // dispatch(Actions.FLIGHT_AREA.request(data)); - // - // props.setModal({ ...props.modal, isOpen: !props.modal.isOpen }); - // props.setOnSubmit(false); - // } + const handleModal = ({isOpen, title}) => { + setModal({ + isOpen: isOpen, + title: title + }); + } useEffect(() => { + dispatch(drawTypeChangeAction('RESET')); getAirAreaList(); }, []); @@ -49,24 +38,23 @@ const FlightPlanAreaContainer = (props) => { setAirArea(areaList); }, [areaList]) + return ( - + {airArea != null ? ( + ) : null} + {modal.isOpen ? ( + ) : null} - - - - + ) diff --git a/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js new file mode 100644 index 0000000..1e3d598 --- /dev/null +++ b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js @@ -0,0 +1,29 @@ +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 = ({ modal, handleModal }) => { + const handleClose = () => { + handleModal({isOpen : false, title: ''}); + } + + + return ( + + + + + + + ) +} + +export default FlightPlanAreaDetailContainer; \ No newline at end of file diff --git a/src/modules/control/map/reducers/controlMapReducer.ts b/src/modules/control/map/reducers/controlMapReducer.ts index a454b86..b16dee2 100644 --- a/src/modules/control/map/reducers/controlMapReducer.ts +++ b/src/modules/control/map/reducers/controlMapReducer.ts @@ -11,9 +11,9 @@ const initialState = { area0006: true, // 초경량비행장치 sensor: 'dust', - drawType: '', + drawType: null, - drawCheck: false + drawCheck: '' }; const controlReducerReducer = (state = initialState, action) => { From 51a5d5f61c5c192d72dae5f31b84b156618665ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?scnoh=28=EB=85=B8=EC=8A=B9=EC=B2=A0=29?= Date: Thu, 28 Jul 2022 16:11:09 +0900 Subject: [PATCH 11/21] =?UTF-8?q?[=EB=B9=84=ED=96=89=20=EA=B5=AC=EC=97=AD]?= =?UTF-8?q?=20=EA=B8=B0=EC=B4=88=20=EC=A2=8C=ED=91=9C=20create=20=EC=9E=91?= =?UTF-8?q?=EC=97=85=20-=20line=20=EB=8F=84=ED=98=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../flight/plan/FlightPlanAreaDetailForm.js | 335 +++++++++--------- .../flight/plan/FlightPlanAreaDetailModal.js | 31 -- .../basis/flight/plan/FlightPlanAreaMap.js | 73 ++-- .../basis/flight/plan/FlightPlanForm.js | 34 +- .../map/naver/draw/FlightPlanDrawTest.js | 27 +- .../flight/plan/FlightPlanAreaContainer.js | 55 ++- .../plan/FlightPlanAreaDetailContainer.js | 67 +++- .../flight/plan/FlightPlanDetailContainer.js | 36 +- .../basis/flight/actions/basisFlightAction.ts | 35 +- .../basis/flight/models/basisFlightModel.ts | 21 +- .../flight/reducers/basisFlightReducer.ts | 20 +- .../basis/flight/sagas/basisFlightSaga.ts | 8 +- 12 files changed, 409 insertions(+), 333 deletions(-) delete mode 100644 src/components/basis/flight/plan/FlightPlanAreaDetailModal.js diff --git a/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js b/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js index 65aeff3..9bbd989 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js +++ b/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js @@ -15,192 +15,175 @@ 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 = ({ handleClose }) => { - const dispatch = useDispatch(); - const naver = window.naver; - // const airArea = props.airArea; +const FlightPlanAreaDetailForm = ({ handleSave, handleClose, handleChange, data }) => { - const mapControl = useSelector(state => state.controlMapReducer); + const coordList = data ? data[0].coordList : null; - const [map, setMap] = useState(); - const [isMapLoad, setIsMapLoad] = useState(false); - const [mode, setMode] = useState(); + return ( + + + + + + +
+
+
+

비행 구역 상세 정보

+
+
- // useEffect(() => { - // setIsMapLoad(true); - // }, [airArea]); +
+
+
+

좌표 정보

+
- // useEffect(() => { - // ModeInit(); - // }, [mapControl.drawType]) +
+ + {coordList ? + coordList.map((coord, idx) => { + const latlon = coord.lat + ' / ' + coord.lon; - // const ModeInit = () => { - // setMode(mapControl.drawType) - // } - - return ( - // - - - - - - - - -
- {/*
-
-

비행 구역 상세 정보

-
-
*/} - -
-
-
-

좌표 정보

-
- -
- - - - - - - - - - - - - - -
- -
- - - - - - - - - - - - - - -
-
- -
-
-

기타 정보

-
- -
- - - -
- + return ( + + + -
-
- -
- - - - - - - - - -
-
-
-
+ + + ) + }) + : + + + + + + + } + + +
+
+ +
+
+

기타 정보

+
+ +
+ + + + + { + const {name, value} = e.target; + handleChange({ + name, + value + }) + }} + /> + + + +
+
+ + + + + { + const {name, value} = e.target; + handleChange({ + name, + value + }) + }} + /> + + + +
+
+ + + + + { + const {name, value} = e.target; + handleChange({ + name, + value + }) + }} + /> + + + +
+
+
+
-
- - 등록 - - handleClose()} - > - 닫기 - -
- - - - - - - - +
+ handleSave()} + > + 등록 + + handleClose()} + > + 닫기 + +
+ + + + + + ) } diff --git a/src/components/basis/flight/plan/FlightPlanAreaDetailModal.js b/src/components/basis/flight/plan/FlightPlanAreaDetailModal.js deleted file mode 100644 index 188b20c..0000000 --- a/src/components/basis/flight/plan/FlightPlanAreaDetailModal.js +++ /dev/null @@ -1,31 +0,0 @@ -import { useEffect, useState } from 'react'; -import { Modal, ModalHeader, ModalBody } from 'reactstrap'; -import FlightPlanAreaDetailContainer from '../../../../containers/basis/flight/plan/FlightPlanAreaDetailContainer'; - -export const FlightPlanAreaDetailModal = ({modal, handleModal}) => { - return ( -
- - handleModal({isOpen: false, title: ''}) - } - className='modal-dialog-centered modal-xl' - > - - handleModal({isOpen: false, title: ''}) - } - > - {modal.title} - - - - - -
- ); -}; diff --git a/src/components/basis/flight/plan/FlightPlanAreaMap.js b/src/components/basis/flight/plan/FlightPlanAreaMap.js index 0a632a1..3a2f1ca 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaMap.js +++ b/src/components/basis/flight/plan/FlightPlanAreaMap.js @@ -13,21 +13,23 @@ import { useDispatch, useSelector } from 'react-redux'; import { FeatureAirZone } from '../../../map/naver/feature/FeatureAirZone'; import { drawTypeChangeAction, drawCheckAction } from '../../../../modules/control/map/actions/controlMapActions'; import { FlightPlanDrawTest } from '../../../map/naver/draw/FlightPlanDrawTest'; +import { initFlight, initFlightBas } from '../../../../modules/basis/flight/models/basisFlightModel'; +import { AREA_COORDINATE_LIST_SAVE } from '../../../../modules/basis/flight/actions/basisFlightAction'; +import { VscDebugBreakpointLogUnverified } from 'react-icons/vsc'; const FlightPlanAreaMap = (props) => { const dispatch = useDispatch(); const naver = window.naver; - const airArea = props.airArea; - const openModal = props.openModal; + const airArea = props.airArea; const mapControl = useSelector(state => state.controlMapReducer); const [map, setMap] = useState(); const [isMapLoad, setIsMapLoad] = useState(false); const [mode, setMode] = useState(); + const [areaCoordList, setAreaCoordList] = useState(initFlightBas.initDetail.areaList); - useEffect(() => { - + useEffect(() => { NaverMapInit(); }, []); @@ -67,6 +69,31 @@ const FlightPlanAreaMap = (props) => { const handlerDrawCheck = val => { dispatch(drawCheckAction(val)); }; + + const handleCoordinates = (coords, radius) => { + const initAreaList = Object.assign([], initFlightBas.initDetail.areaList); + const coordList = []; + + // radius = 10; + coords.forEach((c, i) => { + const coord = Object.assign({}, initFlightBas['coord']); + + coord.lat = c._lat; + coord.lon = c._lng; + + coordList.push(coord); + }); + + const areaList = initAreaList.map((area, i) => { + return { + ...area, + coordList : coordList + } + }) + + // dispatch(AREA_COORDINATE_LIST_SAVE(areaList)) + setAreaCoordList(areaList); + } return ( @@ -84,14 +111,14 @@ const FlightPlanAreaMap = (props) => { props.handleModal({isOpen: true, title: '비행 구역 상세 정보'})} + onClick = {e => props.handleConfirm(areaCoordList)} > 확인 @@ -138,37 +165,7 @@ const FlightPlanAreaMap = (props) => { > Polygon -
- - {mapControl.drawType === 'LINE' ? -
- - - - - - - handlerDrawType('POLYGON')} - > - 적용 - - - -
- : - null - } - +
) diff --git a/src/components/basis/flight/plan/FlightPlanForm.js b/src/components/basis/flight/plan/FlightPlanForm.js index 1ee9f07..60a04fc 100644 --- a/src/components/basis/flight/plan/FlightPlanForm.js +++ b/src/components/basis/flight/plan/FlightPlanForm.js @@ -21,6 +21,7 @@ import FlightPlanAreaContainer from '../../../../containers/basis/flight/plan/Fl const FlightPlanForm = ({data, handleModal, handleChange, handleSave, handleDelete, modal}) => { const {areaList, pilotList, arcrftList} = data; + return ( @@ -390,7 +391,7 @@ const AreaForm = ({data, handleChange, index}) => { {data && data.coordList && data.coordList.length > 0 ? data.coordList.map((item, i) => { return { value={(item.lat && item.lon) ? `${item.lat} / ${item.lon}` : ''} bsSize='sm' placeholder='-' - onChange={(e) => { - const {name, value} = e.target; - handleChange({ - type: 'coord', - name, - value, - index: i, - pIndex: index - }) - }} - style={{marginBottom: 5}} - // readOnly + // onChange={(e) => { + // const {name, value} = e.target; + // handleChange({ + // type: 'coord', + // name, + // value, + // index: i, + // pIndex: index + // }) + // }} + // style={{marginBottom: 5}} + readOnly /> }) : { pIndex: index }) }} - // readOnly + readOnly />} @@ -456,7 +457,7 @@ const AreaForm = ({data, handleChange, index}) => { index }) }} - + readOnly />
@@ -477,7 +478,7 @@ const AreaForm = ({data, handleChange, index}) => { index }) }} - + readOnly />
@@ -504,6 +505,7 @@ const AreaForm = ({data, handleChange, index}) => { index }) }} + readOnly /> diff --git a/src/components/map/naver/draw/FlightPlanDrawTest.js b/src/components/map/naver/draw/FlightPlanDrawTest.js index c63d059..95e19e0 100644 --- a/src/components/map/naver/draw/FlightPlanDrawTest.js +++ b/src/components/map/naver/draw/FlightPlanDrawTest.js @@ -205,19 +205,20 @@ export const FlightPlanDrawTest = props => { setDragCircle(dragCircle); //파싱 - let polypathJSON = new Array(); - for(let i = 0; i< polypaths.length; i++) { - let obj = new Object(); + // let polypathJSON = new Array(); + // for(let i = 0; i< polypaths.length; i++) { + // let obj = new Object(); - obj.x = '' + polypaths[i]._lng + ''; - obj.y = '' + polypaths[i]._lat + ''; + // obj.x = '' + polypaths[i]._lng + ''; + // obj.y = '' + polypaths[i]._lat + ''; - obj = JSON.stringify(obj); - polypathJSON.push(JSON.parse(obj)); - } + // obj = JSON.stringify(obj); + // polypathJSON.push(JSON.parse(obj)); + // } // console.log(polypathJSON, 'json polyline path'); // bufferMove(); - bufferTest(); + // bufferTest(); + props.handleCoordinates(polypaths); } else { polyline.setMap(null); polyline = ''; @@ -496,11 +497,13 @@ export const FlightPlanDrawTest = props => { check = false; } - const setAreaInfo = (path, bufferpath) => { + const setAreaInfo = (path, bufferpath) => { areaInfo = ''; - let prePath = []; - path.forEach(prev=> prePath.push([prev.x, prev.y])) + if(path) { + let prePath = []; + path.forEach(prev=> prePath.push([prev.x, prev.y])) + } if(polyline) { areaInfo = { diff --git a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js index b2d1c8b..992c423 100644 --- a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js @@ -8,53 +8,52 @@ import FlightPlanAreaMap from '../../../../components/basis/flight/plan/FlightPl import * as yup from 'yup'; import { yupResolver } from '@hookform/resolvers/yup'; import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions'; -import { FlightPlanAreaDetailModal } from '../../../../components/basis/flight/plan/FlightPlanAreaDetailModal'; +import FlightPlanAreaDetailContainer from './FlightPlanAreaDetailContainer'; -const FlightPlanAreaContainer = () => { +const FlightPlanAreaContainer = ({handleModal}) => { const dispatch = useDispatch(); - const { areaList } = useSelector(state => state.flightState); - const [airArea, setAirArea] = useState(null); - const [modal, setModal] = useState({isOpen: false, title: ''}); - + const { publicAreaList} = useSelector(state => state.flightState); + const [airArea, setAirArea] = useState(null); const getAirAreaList = () => { - dispatch(Actions.AREA_LIST.request()); - } - - const handleModal = ({isOpen, title}) => { - setModal({ - isOpen: isOpen, - title: title - }); + dispatch(Actions.PUBLIC_AREA_LIST.request()); + } + + const handleConfirm = (areaList) => { + if(areaList === undefined) { + alert('영역을 설정해주세요.') + return false; + } + + dispatch(Actions.AREA_COORDINATE_LIST_SAVE(areaList)) } useEffect(() => { - dispatch(drawTypeChangeAction('RESET')); + dispatch(drawTypeChangeAction('RESET')); getAirAreaList(); }, []); useEffect(() => { - setAirArea(areaList); - }, [areaList]) + setAirArea(publicAreaList); + }, [publicAreaList]) return ( - + {airArea != null ? ( - ) : null} - {modal.isOpen ? ( - - ) : null} - + ) : null} + + + + ) diff --git a/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js index 1e3d598..150f5e1 100644 --- a/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js @@ -1,24 +1,77 @@ 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'; +import {initFlightBas} from '../../../../modules/basis/flight/models/basisFlightModel'; -const FlightPlanAreaDetailContainer = ({ modal, handleModal }) => { - const handleClose = () => { - handleModal({isOpen : false, title: ''}); + +const FlightPlanAreaDetailContainer = ({ handleModal }) => { + const dispatch = useDispatch(); + + const { areaCoordList, areaList, detail } = useSelector(state => state.flightState); + const [areaDetail, setAreaDetail] = useState(initFlightBas.initDetail.areaList); + + const handleClose = (status) => { + handleModal({ type: 'area', isOpne: false}); + } + + const handleSave = () => { + + if(areaDetail[0].coordList.length <= 1) { + alert('영역을 생성해주세요.'); + return false; + } + + const resultAreaDetail = areaDetail.map((area, i) => { + return { + ...area, + coordList : areaDetail[0].coordList + } + }); + + dispatch(Actions.AREA_DETAIL_LIST_SAVE(resultAreaDetail)); + + handleModal({ type: 'area', isOpne: false}); + } + + const handleChange = ({ name, value }) => { + setAreaDetail(prevState => { + const areaList = prevState.map((area, i) => { + return { + ...area, + [name] : value + } + }); + + return areaList; + }) } + useEffect(() => { + // 좌표등록 (등록 시 데이터 초기화) + if(areaCoordList !== undefined) { + setAreaDetail(areaCoordList); // 새로 만든 영역 + } + }, [areaCoordList]); + + useEffect(() => { + // detail의 area 정보가 존재하면 detail 정보로 매핑 + if(detail.areaList[0].planAreaSno !== 0) { + setAreaDetail(detail.areaList); + } + }, []) + return ( diff --git a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js index 7b7903c..d1e9ecb 100644 --- a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js @@ -19,7 +19,7 @@ const FlightPlanDetailContainer = () => { const location = useLocation(); const urlParams = useParams(); const flightState = useSelector(state => state.flightState); - const { detail, pilotSelect, arcrftSelect } = flightState; + const { detail, pilotSelect, arcrftSelect, areaList } = flightState; const [modal, setModal] = useState(initModal); const [detailData, setDetailData] = useState(initFlightBas.initDetail); @@ -64,7 +64,7 @@ const FlightPlanDetailContainer = () => { }, [pilotSelect]) - useEffect(() => { + useEffect(() => { if(arcrftSelect !== undefined) { const arcrftList = detailData.arcrftList.concat(); const arcrft = Object.assign({}, initFlightBas['arcrft']); @@ -97,9 +97,39 @@ const FlightPlanDetailContainer = () => { } }, [arcrftSelect]) + useEffect(() => { + if(areaList !== undefined) { + const detailAreaList = detailData.areaList.concat(); + const area = Object.assign({}, initFlightBas['area']); + + area.bufferZone = areaList[0].bufferZone; + area.fltElev = areaList[0].fltElev; + area.fltMethod = areaList[0].fltMethod; + area.coordList = areaList[0].coordList; + + detailAreaList.forEach((a, i) => { + detailAreaList[i] = area; + + // if(a.planAreaSno === 0) { // create + // areaList[i] = area; + // } else { // update + + // } + }); + + setDetailData(prevState => { + return { + ...prevState, + ['areaList']: detailAreaList + } + }) + } + + }, [areaList]); + useEffect(() => { // 조종사, 기체 정보 Redux 초기화 - dispatch(Actions.PILOT_ARCRFT_SELECT_INIT()); + // dispatch(Actions.PILOT_ARCRFT_SELECT_INIT()); }) const handleModal = (modal) => { diff --git a/src/modules/basis/flight/actions/basisFlightAction.ts b/src/modules/basis/flight/actions/basisFlightAction.ts index bb51e31..6d629c5 100644 --- a/src/modules/basis/flight/actions/basisFlightAction.ts +++ b/src/modules/basis/flight/actions/basisFlightAction.ts @@ -1,9 +1,10 @@ import { AxiosError } from 'axios'; import { createAsyncAction, ActionType, createAction } from 'typesafe-actions'; import { - FlightAreaData, + PublicAreaData, FlightPlanArcrftData, FlightPlanArcrftDataList, + FlightPlanAreaDataList, // FlightPlanArea, FlightPlanData, FlightPlanListRqData, FlightPlanPilotDataList, PilotSelectData @@ -11,9 +12,9 @@ import { // 공역 조회 -const AREA_LIST_REQUEST = 'basis/flight/area/LIST_REQUEST'; -const AREA_LIST_SUCCESS = 'basis/flight/area/LIST_SUCCESS'; -const AREA_LIST_FAILURE = 'basis/flight/area/LIST_FAILURE'; +const PUBLIC_AREA_LIST_REQUEST = 'basis/flight/public_area/LIST_REQUEST'; +const PUBLIC_AREA_LIST_SUCCESS = 'basis/flight/public_area/LIST_SUCCESS'; +const PUBLIC_AREA_LIST_FAILURE = 'basis/flight/public_area/LIST_FAILURE'; // 비행 구역 설정 // const FLIGHT_PLAN_AREA_REQUEST = 'basis/flight/plan/area/LIST_REQUEST'; @@ -65,12 +66,17 @@ const FLIGHT_PLAN_ARCRFT_SELECT = 'basis/flight/plan/arcrft_list/ARCRFT_SELECT'; // 조종사, 기체 선택 초기화 const PILOT_ARCRFT_SELECT_INITIAL = 'basis/flight/plan/detail/SELECT_INIT'; +// 비행 구역 좌표 저장 +const AREA_COORDINATE_LIST = 'basis/flight/plan/area/COORDINATE_LIST'; -export const AREA_LIST = createAsyncAction( - AREA_LIST_REQUEST, - AREA_LIST_SUCCESS, - AREA_LIST_FAILURE -)(); +// 비행 구역 상세 저장 +const AREA_DETAIL_LIST = 'basis/flight/plan/area/DETAIL_LIST'; + +export const PUBLIC_AREA_LIST = createAsyncAction( + PUBLIC_AREA_LIST_REQUEST, + PUBLIC_AREA_LIST_SUCCESS, + PUBLIC_AREA_LIST_FAILURE +)(); // export const FLIGHT_PLAN_AREA = createAsyncAction( // FLIGHT_PLAN_AREA_REQUEST, @@ -137,9 +143,14 @@ export const ARCRFT_SELECT = createAction(FLIGHT_PLAN_ARCRFT_SELECT)(); + +// 비행 구역 상세 저장 +export const AREA_DETAIL_LIST_SAVE = createAction(AREA_DETAIL_LIST)(); const actions = { - AREA_LIST, + PUBLIC_AREA_LIST, // FLIGHT_PLAN_AREA, FLIGHT_PLAN_LIST, FLIGHT_PLAN_DETAIL, @@ -151,7 +162,9 @@ const actions = { FLIGHT_PLAN_ARCRFT_LIST, PILOT_SELECT, ARCRFT_SELECT, - PILOT_ARCRFT_SELECT_INIT + PILOT_ARCRFT_SELECT_INIT, + AREA_COORDINATE_LIST_SAVE, + AREA_DETAIL_LIST_SAVE }; export type FlightAction = ActionType; diff --git a/src/modules/basis/flight/models/basisFlightModel.ts b/src/modules/basis/flight/models/basisFlightModel.ts index 401562f..6ba38bc 100644 --- a/src/modules/basis/flight/models/basisFlightModel.ts +++ b/src/modules/basis/flight/models/basisFlightModel.ts @@ -1,7 +1,7 @@ import moment from "moment"; export interface FlightState { - areaList: FlightAreaData | undefined + publicAreaList: PublicAreaData | undefined flightPlanArea: FlightPlanArea | undefined list: [FlightPlanData] | undefined detail: FlightPlanData | undefined @@ -9,10 +9,12 @@ export interface FlightState { arcrftList: FlightPlanArcrftDataList | undefined pilotSelect: PilotSelectData | undefined arcrftSelect: FlightPlanArcrftData | undefined + areaCoordList: FlightPlanAreaData[] | undefined + areaList: FlightPlanAreaData[] | undefined } -export interface FlightAreaData { - areaList: [] +export interface PublicAreaData { + publicAreaList: [] } export interface FlightPlanArea { @@ -156,9 +158,16 @@ export interface PilotSelectData { zip: string } +export interface AreaCoordinateCreateData { + lat: number, + lon: number, + bufferZone: string, + radius: number +} + export const initFlight = { - areaList: undefined, + publicAreaList: undefined, flightPlanArea: undefined, list: undefined, detail: { @@ -251,7 +260,9 @@ export const initFlight = { pilotList: undefined, arcrftList: undefined, pilotSelect: undefined, - arcrftSelect: undefined + arcrftSelect: undefined, + areaCoordList: undefined, + areaList: undefined }; diff --git a/src/modules/basis/flight/reducers/basisFlightReducer.ts b/src/modules/basis/flight/reducers/basisFlightReducer.ts index d1bf3f1..deab581 100644 --- a/src/modules/basis/flight/reducers/basisFlightReducer.ts +++ b/src/modules/basis/flight/reducers/basisFlightReducer.ts @@ -7,10 +7,10 @@ import { any } from 'prop-types'; export const flightReducer = createReducer(initFlight) - .handleAction(Actions.AREA_LIST.success, (state, action) => + .handleAction(Actions.PUBLIC_AREA_LIST.success, (state, action) => produce(state, draft => { const {data} = action.payload; - draft.areaList = data; + draft.publicAreaList = data; }) ) // .handleAction(Actions.FLIGHT_PLAN_AREA.request, (state, action) => @@ -71,5 +71,21 @@ export const flightReducer = createReducer(in produce(state, draft => { draft.arcrftSelect = undefined; draft.pilotSelect = undefined; + draft.areaList = undefined; + draft.areaCoordList = undefined; }) ) + // 비행 구역 좌표 저장 + .handleAction(Actions.AREA_COORDINATE_LIST_SAVE, (state, action) => + produce(state, draft => { + const data = action.payload; + draft.areaCoordList = data; + }) + ) + // 비행 구역 상세 저장 + .handleAction(Actions.AREA_DETAIL_LIST_SAVE, (state, action) => + produce(state, draft => { + const data = action.payload; + draft.areaList = data; + }) + ) diff --git a/src/modules/basis/flight/sagas/basisFlightSaga.ts b/src/modules/basis/flight/sagas/basisFlightSaga.ts index 77c4d1f..6a55d41 100644 --- a/src/modules/basis/flight/sagas/basisFlightSaga.ts +++ b/src/modules/basis/flight/sagas/basisFlightSaga.ts @@ -17,7 +17,7 @@ import { FLIGHT_PLAN_PILOT_LIST, FLIGHT_PLAN_UPDATE } from "../actions/basisFlightAction"; -function* listAreaSaga(action: ActionType) { +function* listAreaSaga(action: ActionType) { try { const response = yield call(Apis.flightPlanAPI.area); @@ -34,13 +34,13 @@ function* listAreaSaga(action: ActionType) { } yield put( - Actions.AREA_LIST.success({ + Actions.PUBLIC_AREA_LIST.success({ data: response }) ); } catch (error: any) { yield put( - Actions.AREA_LIST.failure(error) + Actions.PUBLIC_AREA_LIST.failure(error) ); } } @@ -288,7 +288,7 @@ function* listArcrftSaga(action: ActionType Date: Thu, 28 Jul 2022 22:02:04 +0900 Subject: [PATCH 12/21] =?UTF-8?q?[=EB=B9=84=ED=96=89=20=EA=B5=AC=EC=97=AD]?= =?UTF-8?q?=20=EA=B8=B0=EC=B4=A4=20=EC=A2=8C=ED=91=9C=20create=20=EC=9E=91?= =?UTF-8?q?=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../flight/plan/FlightPlanAreaDetailForm.js | 4 +- .../basis/flight/plan/FlightPlanAreaMap.js | 45 ++-- .../map/naver/draw/FlightPlanDrawTest.js | 212 ++++++++---------- .../plan/FlightPlanAreaDetailContainer.js | 6 - 4 files changed, 126 insertions(+), 141 deletions(-) diff --git a/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js b/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js index 9bbd989..c801f2b 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js +++ b/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js @@ -46,7 +46,7 @@ const FlightPlanAreaDetailForm = ({ handleSave, handleClose, handleChange, data const latlon = coord.lat + ' / ' + coord.lon; return ( - + + { const dispatch = useDispatch(); @@ -23,21 +22,22 @@ const FlightPlanAreaMap = (props) => { const airArea = props.airArea; const mapControl = useSelector(state => state.controlMapReducer); + const { areaCoordList } = useSelector(state => state.flightState); const [map, setMap] = useState(); const [isMapLoad, setIsMapLoad] = useState(false); const [mode, setMode] = useState(); - const [areaCoordList, setAreaCoordList] = useState(initFlightBas.initDetail.areaList); + const [mapAreaCoordList, setMapAreaCoordList] = useState(initFlightBas.initDetail.areaList); useEffect(() => { - NaverMapInit(); + NaverMapInit(); }, []); useEffect(() => { setIsMapLoad(true); }, [airArea]); - useEffect(() => { + useEffect(() => { ModeInit(); }, [mapControl.drawType]) @@ -68,21 +68,28 @@ const FlightPlanAreaMap = (props) => { const handlerDrawCheck = val => { dispatch(drawCheckAction(val)); - }; - - const handleCoordinates = (coords, radius) => { + }; + + const handleInitCoordinates = () => { + dispatch(AREA_COORDINATE_LIST_SAVE(null)) + } + + const handleCoordinates = (areaInfo) => { const initAreaList = Object.assign([], initFlightBas.initDetail.areaList); - const coordList = []; + const coordList = []; // radius = 10; - coords.forEach((c, i) => { + areaInfo.coordinates.forEach((c, i) => { const coord = Object.assign({}, initFlightBas['coord']); - coord.lat = c._lat; - coord.lon = c._lng; + coord.lat = c.lat; + coord.lon = c.lon; coordList.push(coord); }); + + initAreaList[0].bufferZone = areaInfo.bufferZone; + initAreaList[0].areaType = areaInfo.areaType; const areaList = initAreaList.map((area, i) => { return { @@ -92,7 +99,7 @@ const FlightPlanAreaMap = (props) => { }) // dispatch(AREA_COORDINATE_LIST_SAVE(areaList)) - setAreaCoordList(areaList); + setMapAreaCoordList(areaList); } return ( @@ -108,17 +115,19 @@ const FlightPlanAreaMap = (props) => {
- + mode={mode} + areaCoordList={areaCoordList} + handleCoordinates={handleCoordinates} + handleInitCoordinates={handleInitCoordinates} + /> : null} props.handleConfirm(areaCoordList)} + onClick = {e => props.handleConfirm(mapAreaCoordList)} > 확인 diff --git a/src/components/map/naver/draw/FlightPlanDrawTest.js b/src/components/map/naver/draw/FlightPlanDrawTest.js index 95e19e0..20ff445 100644 --- a/src/components/map/naver/draw/FlightPlanDrawTest.js +++ b/src/components/map/naver/draw/FlightPlanDrawTest.js @@ -61,13 +61,9 @@ export const FlightPlanDrawTest = props => { drawInit(); }, [mapControl.drawType]) - const handlerDrawType = val => { - dispatch(drawTypeChangeAction(val)); - }; - - // useEffect(() => { - // onClickCheck(); - // }, [mapControl.drawCheck]) + useEffect(() => { + // handleDetailDrwa(); + }, []) const zoomChange = () => { let change; @@ -83,7 +79,7 @@ export const FlightPlanDrawTest = props => { } } - const drawInit = () => { + const drawInit = () => { if(mapControl.drawType==='LINE') { onClickButton('LINE'); } else if(mapControl.drawType==='CIRCLE') { @@ -91,13 +87,12 @@ export const FlightPlanDrawTest = props => { } else if(mapControl.drawType==='POLYGON') { onClickButton('POLYGON'); } else if(mapControl.drawType==='RESET') { - onClickButton('RESET') + // onClickReset('RESET') } } const onClickButton = (newMode) => { - console.log('onClickButton'); - if(newMode === 'RESET') return false; + console.log('onClickButton'); zoomChange(); @@ -116,16 +111,13 @@ export const FlightPlanDrawTest = props => { const clearMode = (mode) => { console.log('clearMode') - if(!mode) return; - + if(!mode) return; + if (mode === 'LINE') { - if(pastPolyline) { + if(pastPolyline) { pastPolyline.setMap(null); - setPolyline(); - pastBuffer.setMap(null); - setBuffer(); pastDragCircle.forEach(prev => prev.setMap(null)); - setDragCircle([]); + setDragCircle([]); } } else if(mode === 'POLYGON') { @@ -133,16 +125,18 @@ export const FlightPlanDrawTest = props => { pastPolygon.setMap(null); setPolygon(); pastDragCircle.forEach(prev => prev.setMap(null)); - setDragCircle([]); + setDragCircle([]); } } else if(mode === 'CIRCLE') { if(pastCircle) { pastCircle.setMap(null); setCircle(); - naver.maps.Event.removeListener(pastEve); + naver.maps.Event.removeListener(pastEve); } } - finishDraw(); + + finishDraw(); + props.handleInitCoordinates(); } const startMode = (mode) => { @@ -203,22 +197,10 @@ export const FlightPlanDrawTest = props => { dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function() { onMouseDownDrag(index) })) } setDragCircle(dragCircle); + setPolyline(polyline); + + setAreaInfo(polypaths); - //파싱 - // let polypathJSON = new Array(); - // for(let i = 0; i< polypaths.length; i++) { - // let obj = new Object(); - - // obj.x = '' + polypaths[i]._lng + ''; - // obj.y = '' + polypaths[i]._lat + ''; - - // obj = JSON.stringify(obj); - // polypathJSON.push(JSON.parse(obj)); - // } - // console.log(polypathJSON, 'json polyline path'); - // bufferMove(); - // bufferTest(); - props.handleCoordinates(polypaths); } else { polyline.setMap(null); polyline = ''; @@ -266,7 +248,7 @@ export const FlightPlanDrawTest = props => { map: map }); // lastDistance = guideline.getDistance(); - + //실제 사용되는 라인 polyline = new naver.maps.Polyline({ strokeLineCap: 'round', @@ -370,7 +352,7 @@ export const FlightPlanDrawTest = props => { clickable: true }); - Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function() { onMouseDownDrag(0); }) + Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function() { onMouseDownDrag(0); }) } else { circle.setRadius(100); circle.setCenter(coord); @@ -481,7 +463,7 @@ export const FlightPlanDrawTest = props => { if(polygon) { var path = polygon.getPath()._array; setPolygon(polygon); - setAreaInfo(path, ''); + // setAreaInfo(path, ''); } $(document).off('mousemove.measure'); @@ -498,35 +480,46 @@ export const FlightPlanDrawTest = props => { } const setAreaInfo = (path, bufferpath) => { - areaInfo = ''; + areaInfo = { + coordinates : [], + bufferZone: 0, + }; + + let prePath = []; + if(path) { + path.forEach((item) => { + const p = { + lat: item.y, + lon: item.x + } - if(path) { - let prePath = []; - path.forEach(prev=> prePath.push([prev.x, prev.y])) + prePath.push(p); + }) + // path.forEach(prev=> prePath.push([prev.x, prev.y])) } if(polyline) { - areaInfo = { - linepath: prePath, - linebuffer: 50, - bufferpath: bufferpath - } + areaInfo.coordinates = prePath; + areaInfo.areaType = 'LINE'; } else if(polygon) { - areaInfo = { - polygonpath: prePath - } - } else if(circle) { - areaInfo = { - center: circle.getCenter(), - radius: circle.getRadius() + areaInfo.coordinates = prePath; + areaInfo.areaType = 'POLYGON'; + } else if(circle) { + const point = { + lat: circle.getCenter().y, + lon: circle.getCenter().x } + + areaInfo.coordinates.push(point); + areaInfo.bufferZone = circle.getRadius(); + areaInfo.areaType = 'CIRCLE'; } - console.log(areaInfo, 'areaInfo') + props.handleCoordinates(areaInfo); + // console.log(areaInfo, 'areaInfo') } const bufferTest = () => { - let pol = polyline.getPath()._array; //latlng point 다 준건가? - // console.log(pol) + let pol = polyline.getPath()._array; //latlng point 다 준건가? let lineStringPaths = []; for(let i = 0; i< pol.length; i++) { @@ -563,8 +556,7 @@ export const FlightPlanDrawTest = props => { bufferRadius ) - const bufferResultGeoJSON = new GeoJSONWriter().write(bufferResult) - // console.log(bufferResultGeoJSON) + const bufferResultGeoJSON = new GeoJSONWriter().write(bufferResult) // bufferPolyline = new naver.maps.Polyline({ // strokeColor: '#ff0000', @@ -636,8 +628,7 @@ export const FlightPlanDrawTest = props => { const writer = new GeoJSONWriter(); const distance = (100 * 0.001) / 111.12; //100미터 - const line = reader.read(coords); - // const buffer = BufferOp.bufferOp(line, distance); + const line = reader.read(coords); const buffer = BufferOp.bufferOp(line, distance, 0, 3); let bufferpath = buffer._shell._points._coordinates; @@ -654,71 +645,62 @@ export const FlightPlanDrawTest = props => { strokeWeight: 2, strokeStyle: [4, 4], strokeOpacity: 1, - path : bufferPaths, - // path: [ - - // ], + path : bufferPaths, map: map - }); - - + }); // setAreaInfo(polyline.getPath()._array, bufferPath); setAreaInfo(polyline.getPath()._array, bufferPaths); setPolyline(polyline); setBuffer(bufferPolyline) } - const onClickCheck = () => { - console.log('onClickReset') - // if(!mapControl.drawType) return; - - if(mapControl.drawCheck === 'RESET') { + const onClickReset = () => { + if(mapControl.drawType === 'RESET') { clearMode(mode); - mode = newMode; - - startMode(newMode); - // removeListener(); - // if(polyline) { - // polyline.setMap(null); - // polyline = ''; - // guideline.setMap(null); - // guideline = ''; - // bufferPolyline.setMap(null); - // bufferPolyline = ''; - // } - // if(polygon) { - // console.log(polygon) - // polygon.setMap(null); - // polygon = ''; - // } - // if(circle) { - // circle.setMap(null); - // circle = ''; - // radiusline.setMap(null); - // radiusline = ''; - // } + } + } + + const handleDetailDrwa = () => { + + if (props.areaCoordList) { + const areas = props.areaCoordList[0]; + if(areas.areaType && areas.areaType === 'LINE') { + const paths = []; + + areas.coordList.forEach((coord) => { + const path = new naver.maps.LatLng(coord.lat, coord.lon) + + paths.push(path); + }) + + polyline = new naver.maps.Polyline({ + strokeLineCap: 'round', + strokeLineJoin: 'round', + strokeColor: '#283046', + strokeWeight: 3, + strokeOpacity: 1, + path: paths, + map: map + }); + + setPolyline(polyline) + // $(document).on('mousemove.measure', function(e) { onMouseMovePolyline(e); }); + } + + if(areas.areaType && areas.areaType === 'PLOYGON') { + + } + + if(areas.areaType && areas.areaType === 'CIRCLE') { + + } } - - } + +} return ( - <> - {/* - 확인 - - handlerDrawCheck('RESET')} - onClick={e => handlerDrawType('RESET')} - > - 초기화 - */} + <> ); }; \ No newline at end of file diff --git a/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js index 150f5e1..dccf0c4 100644 --- a/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js @@ -17,12 +17,6 @@ const FlightPlanAreaDetailContainer = ({ handleModal }) => { } const handleSave = () => { - - if(areaDetail[0].coordList.length <= 1) { - alert('영역을 생성해주세요.'); - return false; - } - const resultAreaDetail = areaDetail.map((area, i) => { return { ...area, From f1203f217a6161504240047e08bff7cc84a7f84d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?scnoh=28=EB=85=B8=EC=8A=B9=EC=B2=A0=29?= Date: Fri, 29 Jul 2022 13:47:40 +0900 Subject: [PATCH 13/21] =?UTF-8?q?=EB=B9=84=ED=96=89=20=EA=B5=AC=EC=97=AD?= =?UTF-8?q?=20=EA=B8=B0=EC=B4=88=20=EC=A2=8C=ED=91=9C=20=EC=83=81=EC=84=B8?= =?UTF-8?q?=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../basis/flight/plan/FlightPlanAreaMap.js | 13 +- .../map/naver/draw/FlightPlanDrawTest.js | 166 ++++++++++++------ .../flight/plan/FlightPlanAreaContainer.js | 2 +- .../plan/FlightPlanAreaDetailContainer.js | 8 +- .../flight/plan/FlightPlanDetailContainer.js | 34 ++-- .../flight/reducers/basisFlightReducer.ts | 3 +- 6 files changed, 145 insertions(+), 81 deletions(-) diff --git a/src/components/basis/flight/plan/FlightPlanAreaMap.js b/src/components/basis/flight/plan/FlightPlanAreaMap.js index 29a1188..6df20df 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaMap.js +++ b/src/components/basis/flight/plan/FlightPlanAreaMap.js @@ -71,14 +71,15 @@ const FlightPlanAreaMap = (props) => { }; const handleInitCoordinates = () => { - dispatch(AREA_COORDINATE_LIST_SAVE(null)) + const init = initFlightBas.initDetail.areaList.concat(); + dispatch(AREA_COORDINATE_LIST_SAVE(init)) } const handleCoordinates = (areaInfo) => { - const initAreaList = Object.assign([], initFlightBas.initDetail.areaList); + const initAreaList = initFlightBas.initDetail.areaList.concat() const coordList = []; - // radius = 10; + // radius = 10; areaInfo.coordinates.forEach((c, i) => { const coord = Object.assign({}, initFlightBas['coord']); @@ -88,12 +89,14 @@ const FlightPlanAreaMap = (props) => { coordList.push(coord); }); - initAreaList[0].bufferZone = areaInfo.bufferZone; - initAreaList[0].areaType = areaInfo.areaType; + // initAreaList[0].bufferZone = areaInfo.bufferZone; + // initAreaList[0].areaType = areaInfo.areaType; const areaList = initAreaList.map((area, i) => { return { ...area, + bufferZone: areaInfo.bufferZone, + areaType: areaInfo.areaType, coordList : coordList } }) diff --git a/src/components/map/naver/draw/FlightPlanDrawTest.js b/src/components/map/naver/draw/FlightPlanDrawTest.js index 20ff445..1027134 100644 --- a/src/components/map/naver/draw/FlightPlanDrawTest.js +++ b/src/components/map/naver/draw/FlightPlanDrawTest.js @@ -62,7 +62,7 @@ export const FlightPlanDrawTest = props => { }, [mapControl.drawType]) useEffect(() => { - // handleDetailDrwa(); + handleDetailDrwa(); }, []) const zoomChange = () => { @@ -79,7 +79,8 @@ export const FlightPlanDrawTest = props => { } } - const drawInit = () => { + const drawInit = () => { + console.log(mapControl.drawType); if(mapControl.drawType==='LINE') { onClickButton('LINE'); } else if(mapControl.drawType==='CIRCLE') { @@ -87,7 +88,7 @@ export const FlightPlanDrawTest = props => { } else if(mapControl.drawType==='POLYGON') { onClickButton('POLYGON'); } else if(mapControl.drawType==='RESET') { - // onClickReset('RESET') + onClickReset('RESET') } } @@ -103,7 +104,7 @@ export const FlightPlanDrawTest = props => { return; } - mode = newMode; + // mode = newMode; startMode(newMode); } @@ -111,40 +112,69 @@ export const FlightPlanDrawTest = props => { const clearMode = (mode) => { console.log('clearMode') - if(!mode) return; + // if(!mode) return; - if (mode === 'LINE') { - if(pastPolyline) { - pastPolyline.setMap(null); - pastDragCircle.forEach(prev => prev.setMap(null)); - setDragCircle([]); - } - - } else if(mode === 'POLYGON') { - if(pastPolygon) { - pastPolygon.setMap(null); - setPolygon(); - pastDragCircle.forEach(prev => prev.setMap(null)); - setDragCircle([]); - } - } else if(mode === 'CIRCLE') { - if(pastCircle) { - pastCircle.setMap(null); - setCircle(); - naver.maps.Event.removeListener(pastEve); - } + // clear mode는 전체를 다 초기화 하는게 맞지 않을까..? 무조건 drawType이 변할때마다 초기화해주기로.. + if (pastPolyline) { + console.log('clrea polyline ', pastPolyline) + pastPolyline.setMap(null); + pastDragCircle.forEach(c => c.setMap(null)); + + setPolyline(); + setDragCircle([]); + } + if (pastCircle) { + console.log('clrea circle ', pastCircle) + pastCircle.setMap(null); + naver.maps.Event.removeListener(pastEve); + + setCircle(); + } + if (pastPolygon) { + console.log('clrea polygon ', pastPolygon) + pastPolygon.setMap(null); + pastDragCircle.forEach(c => c.setMap(null)); + + setPolygon(); + setDragCircle([]); } finishDraw(); - props.handleInitCoordinates(); + props.handleInitCoordinates(); + + // if(mode === 'LINE' && pastPolyline) { + // pastPolyline.setMap(null); + // pastDragCircle.forEach(c => c.setMap(null)); + + // setPolyline({}); + // setDragCircle([]); + // } + + // if(mode === 'POLYGON' && pastPolygon) { + // pastPolygon.setMap(null); + // pastDragCircle.forEach(c => c.setMap(null)); + + // setPolygon({}); + // setDragCircle([]); + // } + + // if(mode === 'CIRCLE' && pastCircle) { + // pastCircle.setMap(null); + // naver.maps.Event.removeListener(pastEve); + + // setCircle({}); + // } + + // if(mode === 'RESET') { + // if(pastPolyline) pastPolyline.setMap(null); + // if(pastCircle) pastCircle.setMap(null); + // if(pastPolygon) pastPolygon.setMap(null); + // } } const startMode = (mode) => { console.log('startMode') - // console.log(polyline, 'polyline', pastPolyline, 'pastPolyline'); - // console.log(polygon, 'polygon', pastPolygon, 'pastPolygon'); - // console.log(circle, 'circle', pastCircle, 'pastCircle'); if (!mode) return; if (mode === 'LINE') { @@ -304,7 +334,7 @@ export const FlightPlanDrawTest = props => { }); Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function() { finishDraw() }) - $(document).on('mousemove.measure', function(e) { onMouseMovePolygon(e) }); + $(document).on('mousemove.measure', function(e) { onMouseMovePolygon(e) }); } else { polygon.getPath().push(coord); } @@ -655,48 +685,68 @@ export const FlightPlanDrawTest = props => { } const onClickReset = () => { - if(mapControl.drawType === 'RESET') { - clearMode(mode); + console.log('onClickRest - ', mapControl.drawType); + if(mapControl.drawType === 'RESET') { + clearMode('RESET'); } } const handleDetailDrwa = () => { if (props.areaCoordList) { - const areas = props.areaCoordList[0]; - if(areas.areaType && areas.areaType === 'LINE') { - const paths = []; + const areas = props.areaCoordList[0]; - areas.coordList.forEach((coord) => { - const path = new naver.maps.LatLng(coord.lat, coord.lon) + const paths = []; - paths.push(path); - }) - - polyline = new naver.maps.Polyline({ - strokeLineCap: 'round', - strokeLineJoin: 'round', - strokeColor: '#283046', - strokeWeight: 3, - strokeOpacity: 1, - path: paths, - map: map - }); - - setPolyline(polyline) - // $(document).on('mousemove.measure', function(e) { onMouseMovePolyline(e); }); - } + areas.coordList.forEach((coord) => { + const path = new naver.maps.LatLng(coord.lat, coord.lon) - if(areas.areaType && areas.areaType === 'PLOYGON') { + paths.push(path); + }); - } + if(areas.areaType && areas.areaType === 'LINE') { + polyline = new naver.maps.Polyline({ + strokeLineCap: 'round', + strokeLineJoin: 'round', + strokeColor: '#283046', + strokeWeight: 3, + strokeOpacity: 1, + path: paths, + map: map + }); + + setPolyline(polyline) + // $(document).on('mousemove.measure', function(e) { onMouseMovePolyline(e); }); + } - if(areas.areaType && areas.areaType === 'CIRCLE') { + if(areas.areaType && areas.areaType === 'POLYGON') { + polygon = new naver.maps.Polygon({ + strokeColor: '#283046', + strokeOpacity: 1, + fillColor: '#7367F0', + fillOpacity: 0.1, + paths: paths, + map: map + }); - } + setPolygon(polygon); + } - } + if(areas.areaType && areas.areaType === 'CIRCLE') { + circle = new naver.maps.Circle({ + strokeColor: '#283046', + strokeOpacity: 1, + fillColor: '#7367F0', + fillOpacity: 0.1, + center: paths[0], + radius: areas.bufferZone, + map: map, + clickable: true + }); + setCircle(circle); + } + } } return ( diff --git a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js index 992c423..0d457e7 100644 --- a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js @@ -30,7 +30,7 @@ const FlightPlanAreaContainer = ({handleModal}) => { } useEffect(() => { - dispatch(drawTypeChangeAction('RESET')); + dispatch(drawTypeChangeAction('')); getAirAreaList(); }, []); diff --git a/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js index dccf0c4..30350d8 100644 --- a/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js @@ -16,13 +16,13 @@ const FlightPlanAreaDetailContainer = ({ handleModal }) => { handleModal({ type: 'area', isOpne: false}); } - const handleSave = () => { + const handleSave = () => { const resultAreaDetail = areaDetail.map((area, i) => { return { ...area, coordList : areaDetail[0].coordList } - }); + }); dispatch(Actions.AREA_DETAIL_LIST_SAVE(resultAreaDetail)); @@ -52,7 +52,9 @@ const FlightPlanAreaDetailContainer = ({ handleModal }) => { useEffect(() => { // detail의 area 정보가 존재하면 detail 정보로 매핑 if(detail.areaList[0].planAreaSno !== 0) { - setAreaDetail(detail.areaList); + setAreaDetail(detail.areaList); + + dispatch(Actions.AREA_DETAIL_LIST_SAVE(detail.areaList)); } }, []) diff --git a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js index d1e9ecb..107559b 100644 --- a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js @@ -99,23 +99,31 @@ const FlightPlanDetailContainer = () => { useEffect(() => { if(areaList !== undefined) { - const detailAreaList = detailData.areaList.concat(); - const area = Object.assign({}, initFlightBas['area']); + // const detailAreaList = detailData.areaList.concat(); + // const area = Object.assign({}, initFlightBas['area']); - area.bufferZone = areaList[0].bufferZone; - area.fltElev = areaList[0].fltElev; - area.fltMethod = areaList[0].fltMethod; - area.coordList = areaList[0].coordList; - detailAreaList.forEach((a, i) => { - detailAreaList[i] = area; + const detailAreaList = areaList.map((area) => { + return { + ...area + } + }) + + // area.bufferZone = areaList[0].bufferZone; + // area.fltElev = areaList[0].fltElev; + // area.fltMethod = areaList[0].fltMethod; + // area.areaType = areaList[0] + // area.coordList = areaList[0].coordList; + + // detailAreaList.forEach((a, i) => { + // detailAreaList[i] = area; - // if(a.planAreaSno === 0) { // create - // areaList[i] = area; - // } else { // update + // // if(a.planAreaSno === 0) { // create + // // areaList[i] = area; + // // } else { // update - // } - }); + // // } + // }); setDetailData(prevState => { return { diff --git a/src/modules/basis/flight/reducers/basisFlightReducer.ts b/src/modules/basis/flight/reducers/basisFlightReducer.ts index deab581..0aafdd5 100644 --- a/src/modules/basis/flight/reducers/basisFlightReducer.ts +++ b/src/modules/basis/flight/reducers/basisFlightReducer.ts @@ -86,6 +86,7 @@ export const flightReducer = createReducer(in .handleAction(Actions.AREA_DETAIL_LIST_SAVE, (state, action) => produce(state, draft => { const data = action.payload; - draft.areaList = data; + draft.areaList = data; + draft.areaCoordList = data; }) ) From 9f444eb96212c3189f3bd87114da49e56da40431 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?scnoh=28=EB=85=B8=EC=8A=B9=EC=B2=A0=29?= Date: Fri, 29 Jul 2022 20:07:36 +0900 Subject: [PATCH 14/21] =?UTF-8?q?=EB=B9=84=ED=96=89=EA=B3=84=ED=9A=8D=20?= =?UTF-8?q?=EA=B7=B8=EB=A3=B9=20=EA=B4=80=EB=A6=AC,=20=EB=B9=84=ED=96=89?= =?UTF-8?q?=EA=B5=AC=EC=97=AD=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../basis/flight/plan/FlightPlanGrid.js | 4 +- .../basis/flight/plan/FlightPlanGroupGrid.js | 67 ++++++++++++ .../plan/FlightPlanAreaDetailContainer.js | 13 ++- .../basis/flight/plan/FlightPlanContainer.js | 100 +++++++++++++++--- .../flight/plan/FlightPlanDetailContainer.js | 61 ++++++----- .../basis/flight/actions/basisFlightAction.ts | 11 +- .../basis/flight/models/basisFlightModel.ts | 14 +++ .../flight/reducers/basisFlightReducer.ts | 35 +++--- 8 files changed, 237 insertions(+), 68 deletions(-) create mode 100644 src/components/basis/flight/plan/FlightPlanGroupGrid.js diff --git a/src/components/basis/flight/plan/FlightPlanGrid.js b/src/components/basis/flight/plan/FlightPlanGrid.js index b9474a3..d68f85b 100644 --- a/src/components/basis/flight/plan/FlightPlanGrid.js +++ b/src/components/basis/flight/plan/FlightPlanGrid.js @@ -52,9 +52,9 @@ const FlightPlanGrid = ({movePage, planListData, handleMoveDetail}) => {
{/* 검색된 데이터가 없습니다. */} diff --git a/src/components/basis/flight/plan/FlightPlanGroupGrid.js b/src/components/basis/flight/plan/FlightPlanGroupGrid.js new file mode 100644 index 0000000..8efc285 --- /dev/null +++ b/src/components/basis/flight/plan/FlightPlanGroupGrid.js @@ -0,0 +1,67 @@ +import React, {} from 'react'; +import { GridDatabase } from "../../../crud/grid/GridDatatable"; +import { + Card, + Button +} from 'reactstrap'; + + +const FlightPlanGroupGrid = ({ data, count, selectGroup, handlerGroupCancel, handleGroupSelect }) => { + + const columns = [ + {id: 'groupNm', name: '그룹 명', minWidth: '102px', cell: row => (
{row.groupNm}
)}, + {id: 'groupId', name: '그룹 코드', minWidth: '102px', sortable: true, cell: row => (
{row.groupId}
)}, + {sortable: true, cell: row => { + return selectGroup?.groupId === row?.groupId ? ( + handlerGroupCancel()} + > + 선택취소 + + ) : ( + { + handleGroupSelect({ + groupId: row?.groupId, + groupNm: row?.groupNm, + groupAuthCd: row?.groupAuthCd + }) + } + } + > + 상세보기 + + ) + }} + ]; + + return ( + <> +
+
+

나의 그룹 목록

+ 검색결과 총 {count}건 +
+
+
+
+ +
+ +
+ +
+ + ) + +} + +export default FlightPlanGroupGrid; \ No newline at end of file diff --git a/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js index 30350d8..049a2e8 100644 --- a/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js @@ -51,11 +51,14 @@ const FlightPlanAreaDetailContainer = ({ handleModal }) => { useEffect(() => { // detail의 area 정보가 존재하면 detail 정보로 매핑 - if(detail.areaList[0].planAreaSno !== 0) { - setAreaDetail(detail.areaList); - - dispatch(Actions.AREA_DETAIL_LIST_SAVE(detail.areaList)); - } + if(detail.areaList) { + if(detail.areaList[0].planAreaSno !== 0) { + setAreaDetail(detail.areaList); + + dispatch(Actions.AREA_DETAIL_LIST_SAVE(detail.areaList)); + } + } + }, []) diff --git a/src/containers/basis/flight/plan/FlightPlanContainer.js b/src/containers/basis/flight/plan/FlightPlanContainer.js index 1033d6f..2f4c86e 100644 --- a/src/containers/basis/flight/plan/FlightPlanContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanContainer.js @@ -4,22 +4,32 @@ import {Link, Redirect, useHistory} from 'react-router-dom'; import FlightPlanGrid from '../../../../components/basis/flight/plan/FlightPlanGrid'; import {CustomMainLayout} from '../../../../components/layout/CustomMainLayout'; import FlightPlanSearch from '../../../../components/basis/flight/plan/FlightPlanSearch'; -import {useDispatch, useSelector} from 'react-redux'; +import {useDispatch, useSelector, shallowEqual} from 'react-redux'; import * as FlightAction from '../../../../modules/basis/flight/actions/basisFlightAction'; import {FlightPlanListRqData} from '../../../../modules/basis/flight/models/basisFlightModel'; +import { Row, Col } from 'reactstrap'; +import { JOIN_LIST } from "../../../../modules/basis/group/actions/basisGroupAction"; +import FlightPlanGroupGrid from '../../../../components/basis/flight/plan/FlightPlanGroupGrid'; const initSearchData = { schFltStDt: moment().set({'h': 0, 'm': 0, 's': 0}).format('YYYY-MM-DD HH:mm:ss'), schFltEndDt: moment().set({'h': 23, 'm': 59, 's': 59}).format('YYYY-MM-DD HH:mm:ss'), aprvlYn: 'N', + groupId: '', + cstmrSno: 0, } const columns = [{}] const FlightPlanContainer = () => { const dispatch = useDispatch(); const history = useHistory(); const [searchData, setSerchData] = useState(initSearchData); - const {list: planListData, detail: planDetailData} = useSelector(state => state.flightState); + const {list: planListData, detail: planDetailData, selectGroup} = useSelector(state => state.flightState); + const { joinList, joinListCount } = useSelector(state => state.groupState); + const { user } = useSelector(state => state.authState, shallowEqual); + + const [ params, setParams ] = useState({}); + const moveFlightPlanDetailPage = () => { if(planDetailData){ @@ -31,10 +41,7 @@ const FlightPlanContainer = () => { const handleSearch = (data) => { dispatch(FlightAction.FLIGHT_PLAN_LIST.request(data)); } - useEffect(() => { - handleSearch(searchData); - }, []) - + const handleChangeSearchData = (values) => { setSerchData(prevState => ({ ...prevState, @@ -46,19 +53,78 @@ const FlightPlanContainer = () => { history.push(`/basis/flight/plan/detail/${id}`) } + const handleGroupSelect = ({ groupId, groupNm, groupAuthCd }) => { + // 권한 상관 없이 모두 조회 가능 + console.log('select group : ', groupId) + const param = searchData; + + param.cstmrSno = user.cstmrSno; + param.groupId = groupId; + + dispatch(FlightAction.FLIGHT_PLAN_GROUP_SELECT( {cstmrSno: user.cstmrSno, groupId: groupId, groupNm: groupNm} )); + + setSerchData(prevState => { + return { + ...prevState, + cstmrSno: user.cstmrSno, + groupId: groupId + } + }); + + dispatch(FlightAction.FLIGHT_PLAN_LIST.request(param)); + } + + const handlerGroupCancel = () => { + dispatch(FlightAction.FLIGHT_PLAN_GROUP_SELECT( {cstmrSno: 0, groupId: '', groupNm: ''} )); + } + + useEffect(() => { + if (user?.cstmrSno) { + dispatch( + JOIN_LIST.request({ + cstmrSno: user?.cstmrSno + }) + ); + } + }, [user]) + return ( - - +
+ + + + + + {selectGroup.cstmrSno !== 0 ? ( + <> + + + + ) : ( +
+ 나의 그룹 목록에서 상세보기를 클릭하세요. +
+ )} + + + +
) } diff --git a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js index 107559b..1389f0a 100644 --- a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js @@ -19,7 +19,7 @@ const FlightPlanDetailContainer = () => { const location = useLocation(); const urlParams = useParams(); const flightState = useSelector(state => state.flightState); - const { detail, pilotSelect, arcrftSelect, areaList } = flightState; + const { detail, pilotSelect, arcrftSelect, areaList, selectGroup } = flightState; const [modal, setModal] = useState(initModal); const [detailData, setDetailData] = useState(initFlightBas.initDetail); @@ -28,8 +28,12 @@ const FlightPlanDetailContainer = () => { dispatch(Actions.FLIGHT_PLAN_DETAIL.request(urlParams.planSno)); }, [urlParams]) - useEffect(() => { - setDetailData(detail); + useEffect(() => { + setDetailData({ + ...detail, + cstmrSno: selectGroup.cstmrSno, + groupId: selectGroup.groupId, + }); }, [detail]) useEffect(() => { @@ -98,37 +102,38 @@ const FlightPlanDetailContainer = () => { }, [arcrftSelect]) useEffect(() => { - if(areaList !== undefined) { - // const detailAreaList = detailData.areaList.concat(); - // const area = Object.assign({}, initFlightBas['area']); - - - const detailAreaList = areaList.map((area) => { - return { - ...area - } - }) - - // area.bufferZone = areaList[0].bufferZone; - // area.fltElev = areaList[0].fltElev; - // area.fltMethod = areaList[0].fltMethod; - // area.areaType = areaList[0] - // area.coordList = areaList[0].coordList; - - // detailAreaList.forEach((a, i) => { - // detailAreaList[i] = area; + if(areaList !== undefined) { + const areas = detailData.areaList.concat(); + + const createAreaList = areas.map((area, i) => { + const targetArea = areaList[i]; + + let targetCoordList = area.coordList; + if(targetArea.coordList) { + targetCoordList = targetArea.coordList.map((coord, j) => { + return { + ...coord, + planAreaSno : area.planAreaSno, + planAreaCoordSno : 0 + } + }) + } - // // if(a.planAreaSno === 0) { // create - // // areaList[i] = area; - // // } else { // update - // // } - // }); + return { + ...area, + areaType : targetArea.areaType, + bufferZone: targetArea.bufferZone, + fltElev : targetArea.fltElev, + fltMethod : targetArea.fltMethod, + coordList : targetCoordList + } + }); setDetailData(prevState => { return { ...prevState, - ['areaList']: detailAreaList + ['areaList']: createAreaList } }) } diff --git a/src/modules/basis/flight/actions/basisFlightAction.ts b/src/modules/basis/flight/actions/basisFlightAction.ts index 6d629c5..a3f2e6f 100644 --- a/src/modules/basis/flight/actions/basisFlightAction.ts +++ b/src/modules/basis/flight/actions/basisFlightAction.ts @@ -7,7 +7,7 @@ import { FlightPlanAreaDataList, // FlightPlanArea, FlightPlanData, - FlightPlanListRqData, FlightPlanPilotDataList, PilotSelectData + FlightPlanListRqData, FlightPlanPilotDataList, PilotSelectData, SelectGroupData } from '../models/basisFlightModel'; @@ -72,6 +72,9 @@ const AREA_COORDINATE_LIST = 'basis/flight/plan/area/COORDINATE_LIST'; // 비행 구역 상세 저장 const AREA_DETAIL_LIST = 'basis/flight/plan/area/DETAIL_LIST'; +// 비행계획서 그룹 선택 +const ROUP_SELECT = 'basis/flight/plan/group/select'; + export const PUBLIC_AREA_LIST = createAsyncAction( PUBLIC_AREA_LIST_REQUEST, PUBLIC_AREA_LIST_SUCCESS, @@ -149,6 +152,9 @@ export const AREA_COORDINATE_LIST_SAVE = createAction(AREA_COORDINATE_LIST)(); +// 비행 계획서 그룹 선택 +export const FLIGHT_PLAN_GROUP_SELECT = createAction(ROUP_SELECT)(); + const actions = { PUBLIC_AREA_LIST, // FLIGHT_PLAN_AREA, @@ -164,7 +170,8 @@ const actions = { ARCRFT_SELECT, PILOT_ARCRFT_SELECT_INIT, AREA_COORDINATE_LIST_SAVE, - AREA_DETAIL_LIST_SAVE + AREA_DETAIL_LIST_SAVE, + FLIGHT_PLAN_GROUP_SELECT }; export type FlightAction = ActionType; diff --git a/src/modules/basis/flight/models/basisFlightModel.ts b/src/modules/basis/flight/models/basisFlightModel.ts index 6ba38bc..fb1c8e2 100644 --- a/src/modules/basis/flight/models/basisFlightModel.ts +++ b/src/modules/basis/flight/models/basisFlightModel.ts @@ -11,6 +11,13 @@ export interface FlightState { arcrftSelect: FlightPlanArcrftData | undefined areaCoordList: FlightPlanAreaData[] | undefined areaList: FlightPlanAreaData[] | undefined + selectGroup: SelectGroupData | undefined +} + +export interface SelectGroupData { + cstmrSno: number, + groupId: string, + groupNm: string, } export interface PublicAreaData { @@ -136,6 +143,8 @@ export interface FlightPlanArcrftDataList extends Array {} // rq export interface FlightPlanListRqData { + groupId: string, + cstmrSno: number, schFltStDt: string, schFltEndDt: string, aprvlYn: string @@ -167,6 +176,11 @@ export interface AreaCoordinateCreateData { export const initFlight = { + selectGroup: { + cstmrSno: 0, + groupId: '', + groupNm: '' + }, publicAreaList: undefined, flightPlanArea: undefined, list: undefined, diff --git a/src/modules/basis/flight/reducers/basisFlightReducer.ts b/src/modules/basis/flight/reducers/basisFlightReducer.ts index 0aafdd5..3a4d3b9 100644 --- a/src/modules/basis/flight/reducers/basisFlightReducer.ts +++ b/src/modules/basis/flight/reducers/basisFlightReducer.ts @@ -9,7 +9,7 @@ import { any } from 'prop-types'; export const flightReducer = createReducer(initFlight) .handleAction(Actions.PUBLIC_AREA_LIST.success, (state, action) => produce(state, draft => { - const {data} = action.payload; + const { data } = action.payload; draft.publicAreaList = data; }) ) @@ -69,24 +69,31 @@ export const flightReducer = createReducer(in // 조종사, 기체 선택 초기화 .handleAction(Actions.PILOT_ARCRFT_SELECT_INIT, (state, action) => produce(state, draft => { - draft.arcrftSelect = undefined; - draft.pilotSelect = undefined; - draft.areaList = undefined; - draft.areaCoordList = undefined; + draft.arcrftSelect = undefined; + draft.pilotSelect = undefined; + draft.areaList = undefined; + draft.areaCoordList = undefined; }) ) // 비행 구역 좌표 저장 .handleAction(Actions.AREA_COORDINATE_LIST_SAVE, (state, action) => produce(state, draft => { const data = action.payload; - draft.areaCoordList = data; + draft.areaCoordList = data; + }) + ) + // 비행 구역 상세 저장 + .handleAction(Actions.AREA_DETAIL_LIST_SAVE, (state, action) => + produce(state, draft => { + const data = action.payload; + draft.areaList = data; + draft.areaCoordList = data; + }) + ) + // 비행 계획서 그룹 선택 + .handleAction(Actions.FLIGHT_PLAN_GROUP_SELECT, (state, action) => + produce(state, draft => { + const data = action.payload; + draft.selectGroup = data; }) ) - // 비행 구역 상세 저장 - .handleAction(Actions.AREA_DETAIL_LIST_SAVE, (state, action) => - produce(state, draft => { - const data = action.payload; - draft.areaList = data; - draft.areaCoordList = data; - }) - ) From 62d7bbb0a80cce2572a35ab5ea4f684f0effbf51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?scnoh=28=EB=85=B8=EC=8A=B9=EC=B2=A0=29?= Date: Mon, 1 Aug 2022 11:17:16 +0900 Subject: [PATCH 15/21] =?UTF-8?q?=EB=B9=84=ED=96=89=20=EA=B5=AC=EC=97=AD?= =?UTF-8?q?=20buffer=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../flight/plan/FlightPlanAreaDetailForm.js | 52 ++++++++++++------- .../basis/flight/plan/FlightPlanGrid.js | 2 +- .../plan/FlightPlanAreaDetailContainer.js | 5 ++ .../basis/flight/plan/FlightPlanContainer.js | 2 +- .../flight/plan/FlightPlanDetailContainer.js | 2 + .../basis/flight/actions/basisFlightAction.ts | 17 +++++- .../basis/flight/apis/basisFlightApi.ts | 12 ++++- .../basis/flight/models/basisFlightModel.ts | 33 +++++++----- .../flight/reducers/basisFlightReducer.ts | 7 +++ .../basis/flight/sagas/basisFlightSaga.ts | 28 ++++++++++ 10 files changed, 123 insertions(+), 37 deletions(-) diff --git a/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js b/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js index c801f2b..0d72e22 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js +++ b/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js @@ -15,7 +15,7 @@ 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 = ({ handleSave, handleClose, handleChange, data }) => { +const FlightPlanAreaDetailForm = ({ handleSave, handleClose, handleChange, handleBufferList, data }) => { const coordList = data ? data[0].coordList : null; @@ -88,25 +88,37 @@ const FlightPlanAreaDetailForm = ({ handleSave, handleClose, handleChange, data
- - - { - const {name, value} = e.target; - handleChange({ - name, - value - }) - }} - /> - - + +
+ + { + const {name, value} = e.target; + handleChange({ + name, + value + }) + }} + /> +
+
+ handleBufferList()} + > + 적용 + +
+ +
diff --git a/src/components/basis/flight/plan/FlightPlanGrid.js b/src/components/basis/flight/plan/FlightPlanGrid.js index d68f85b..6973bce 100644 --- a/src/components/basis/flight/plan/FlightPlanGrid.js +++ b/src/components/basis/flight/plan/FlightPlanGrid.js @@ -7,7 +7,7 @@ import {Redirect} from 'react-router-dom'; const FlightPlanGrid = ({movePage, planListData, handleMoveDetail}) => { const columns = [ - {id: 'planSno', name: '번호', cell: row => (
{row.planSno}
)}, + {id: 'planSno', name: '번호', cell: (row, i) => (
{i+1}
)}, {id: 'fltPurpose', name: '비행목적', cell: row => (
{row.fltPurpose}
)}, { id: 'fltMethod', name: '비행방식', cell: row => { diff --git a/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js index 049a2e8..9091b5d 100644 --- a/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js @@ -42,6 +42,10 @@ const FlightPlanAreaDetailContainer = ({ handleModal }) => { }) } + const handleBufferList = () => { + dispatch(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.request(areaDetail)); + } + useEffect(() => { // 좌표등록 (등록 시 데이터 초기화) if(areaCoordList !== undefined) { @@ -69,6 +73,7 @@ const FlightPlanAreaDetailContainer = ({ handleModal }) => { handleClose={handleClose} handleSave={handleSave} handleChange={handleChange} + handleBufferList={handleBufferList} areaCoordList={areaCoordList} data={areaDetail} /> diff --git a/src/containers/basis/flight/plan/FlightPlanContainer.js b/src/containers/basis/flight/plan/FlightPlanContainer.js index 2f4c86e..f94f3bd 100644 --- a/src/containers/basis/flight/plan/FlightPlanContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanContainer.js @@ -13,7 +13,7 @@ import FlightPlanGroupGrid from '../../../../components/basis/flight/plan/Flight const initSearchData = { - schFltStDt: moment().set({'h': 0, 'm': 0, 's': 0}).format('YYYY-MM-DD HH:mm:ss'), + schFltStDt: moment().set({'date': 1, 'h': 0, 'm': 0, 's': 0}).format('YYYY-MM-DD HH:mm:ss'), schFltEndDt: moment().set({'h': 23, 'm': 59, 's': 59}).format('YYYY-MM-DD HH:mm:ss'), aprvlYn: 'N', groupId: '', diff --git a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js index 1389f0a..4be5aac 100644 --- a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js @@ -313,6 +313,8 @@ const FlightPlanDetailContainer = () => { } else { dispatch(Actions.FLIGHT_PLAN_UPDATE.request(detailData)); } + + dispatch(FlightAction.FLIGHT_PLAN_GROUP_SELECT( {cstmrSno: 0, groupId: '', groupNm: ''} )); } // 삭제 const handleDelete = () => { diff --git a/src/modules/basis/flight/actions/basisFlightAction.ts b/src/modules/basis/flight/actions/basisFlightAction.ts index a3f2e6f..469fd19 100644 --- a/src/modules/basis/flight/actions/basisFlightAction.ts +++ b/src/modules/basis/flight/actions/basisFlightAction.ts @@ -7,7 +7,7 @@ import { FlightPlanAreaDataList, // FlightPlanArea, FlightPlanData, - FlightPlanListRqData, FlightPlanPilotDataList, PilotSelectData, SelectGroupData + FlightPlanListRqData, FlightPlanPilotDataList, PilotSelectData, SelectGroupData } from '../models/basisFlightModel'; @@ -75,6 +75,11 @@ const AREA_DETAIL_LIST = 'basis/flight/plan/area/DETAIL_LIST'; // 비행계획서 그룹 선택 const ROUP_SELECT = 'basis/flight/plan/group/select'; +// 버퍼 좌표 가져오기 +const AREA_BUFFER_LIST_REQUEST = 'basis/flight/plan/area/BUFFER_LIST_REQUEST'; +const AREA_BUFFER_LIST_SUCCESS = 'basis/flight/plan/area/BUFFER_LIST_SUCCESS'; +const AREA_BUFFER_LIST_FAILURE = 'basis/flight/plan/area/BUFFER_LIST_FAILURE'; + export const PUBLIC_AREA_LIST = createAsyncAction( PUBLIC_AREA_LIST_REQUEST, PUBLIC_AREA_LIST_SUCCESS, @@ -155,6 +160,13 @@ export const AREA_DETAIL_LIST_SAVE = createAction(AREA_DETAIL_LIST)(); +// 버퍼 좌표 가져오기 +export const FLIGHT_PLAN_AREA_BUFFER_LIST = createAsyncAction( + AREA_BUFFER_LIST_REQUEST, + AREA_BUFFER_LIST_SUCCESS, + AREA_BUFFER_LIST_FAILURE +)(); + const actions = { PUBLIC_AREA_LIST, // FLIGHT_PLAN_AREA, @@ -171,7 +183,8 @@ const actions = { PILOT_ARCRFT_SELECT_INIT, AREA_COORDINATE_LIST_SAVE, AREA_DETAIL_LIST_SAVE, - FLIGHT_PLAN_GROUP_SELECT + FLIGHT_PLAN_GROUP_SELECT, + FLIGHT_PLAN_AREA_BUFFER_LIST }; export type FlightAction = ActionType; diff --git a/src/modules/basis/flight/apis/basisFlightApi.ts b/src/modules/basis/flight/apis/basisFlightApi.ts index d36d78e..191289a 100644 --- a/src/modules/basis/flight/apis/basisFlightApi.ts +++ b/src/modules/basis/flight/apis/basisFlightApi.ts @@ -1,6 +1,6 @@ import axios from '../../../utils/customAxiosUtil'; import qs from 'qs'; -import { FlightPlanData, FlightPlanListRqData } from '../models/basisFlightModel'; +import { FlightPlanAreaData, FlightPlanAreaDataList, FlightPlanData, FlightPlanListRqData } from '../models/basisFlightModel'; export const flightPlanAPI = { @@ -49,5 +49,15 @@ export const flightPlanAPI = { const res = await axios.get(`api/bas/flight/plan/arcrft/${groupId}`); console.log('>>> rs : ', res); return res; + }, + listBuffer: async (data: FlightPlanAreaDataList) => { + console.log('>>> rq : ', data) + const queryString = qs.stringify(data, { + addQueryPrefix: true, + arrayFormat: 'brackets' + }); + const res = await axios.post(`api/bas/flight/plan/area/buffer`, data); + console.log('>>> rs : ', res); + return res; } } diff --git a/src/modules/basis/flight/models/basisFlightModel.ts b/src/modules/basis/flight/models/basisFlightModel.ts index fb1c8e2..b89ba5e 100644 --- a/src/modules/basis/flight/models/basisFlightModel.ts +++ b/src/modules/basis/flight/models/basisFlightModel.ts @@ -11,7 +11,7 @@ export interface FlightState { arcrftSelect: FlightPlanArcrftData | undefined areaCoordList: FlightPlanAreaData[] | undefined areaList: FlightPlanAreaData[] | undefined - selectGroup: SelectGroupData | undefined + selectGroup: SelectGroupData | undefined } export interface SelectGroupData { @@ -70,6 +70,7 @@ export interface FlightPlanAreaData { updateUserId?: string, updateDt?: string, coordList?: FlightPlanAreaCoordDataList | undefined + bufferCoordList?: FlightPlanAreaCoordDataList | undefined // docState: string, } @@ -167,14 +168,6 @@ export interface PilotSelectData { zip: string } -export interface AreaCoordinateCreateData { - lat: number, - lon: number, - bufferZone: string, - radius: number -} - - export const initFlight = { selectGroup: { cstmrSno: 0, @@ -222,7 +215,15 @@ export const initFlight = { lon: 0, createUserId: '', createDt: '' - }] + }], + bufferCoordList: [{ + planAreaCoordSno: 0, + planAreaSno: 0, + lat: 0, + lon: 0, + createUserId: '', + createDt: '' + }], }], pilotList: [{ planPilotSno: 0, @@ -276,7 +277,7 @@ export const initFlight = { pilotSelect: undefined, arcrftSelect: undefined, areaCoordList: undefined, - areaList: undefined + areaList: undefined, }; @@ -410,7 +411,15 @@ export const initFlightBas = { lon: 0, createUserId: '', createDt: '' - }] + }], + bufferCoordList: [{ + planAreaCoordSno: 0, + planAreaSno: 0, + lat: 0, + lon: 0, + createUserId: '', + createDt: '' + }], }], pilotList: [{ planPilotSno: 0, diff --git a/src/modules/basis/flight/reducers/basisFlightReducer.ts b/src/modules/basis/flight/reducers/basisFlightReducer.ts index 3a4d3b9..d9c4d96 100644 --- a/src/modules/basis/flight/reducers/basisFlightReducer.ts +++ b/src/modules/basis/flight/reducers/basisFlightReducer.ts @@ -97,3 +97,10 @@ export const flightReducer = createReducer(in draft.selectGroup = data; }) ) + // 비행 계획서 그룹 선택 + .handleAction(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.success, (state, action) => + produce(state, draft => { + const data = action.payload; + draft.areaCoordList = data; + }) + ) diff --git a/src/modules/basis/flight/sagas/basisFlightSaga.ts b/src/modules/basis/flight/sagas/basisFlightSaga.ts index 6a55d41..4cce3d3 100644 --- a/src/modules/basis/flight/sagas/basisFlightSaga.ts +++ b/src/modules/basis/flight/sagas/basisFlightSaga.ts @@ -287,6 +287,33 @@ function* listArcrftSaga(action: ActionType) { + try { + const data = action.payload; + const response = yield call(Apis.flightPlanAPI.listBuffer, data); + if (response.errorCode) { + yield put( + MessageActions.IS_ERROR({ + errorCode: response.errorCode, + errorMessage: response.errorMessage, + isHistoryBack: false, + isRefresh: false + }) + ); + return; + } + + yield put( + Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.success(response.data) + ); + } catch (error: any) { + yield put( + Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.failure(error) + ); + } +} + export function* flightSaga() { yield takeEvery(Actions.PUBLIC_AREA_LIST.request, listAreaSaga); // yield takeEvery(Actions.FLIGHT_PLAN_AREA.request, createFlightPlanArea); @@ -297,4 +324,5 @@ export function* flightSaga() { yield takeEvery(Actions.FLIGHT_PLAN_DELETE.request, deletePlanSaga) yield takeEvery(Actions.FLIGHT_PLAN_PILOT_LIST.request, listPilotSaga) yield takeEvery(Actions.FLIGHT_PLAN_ARCRFT_LIST.request, listArcrftSaga) + yield takeEvery(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.request, listBuffer) } From bc2a22fffb245cae973eea74ceadfb703f6866d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?scnoh=28=EB=85=B8=EC=8A=B9=EC=B2=A0=29?= Date: Mon, 1 Aug 2022 14:03:24 +0900 Subject: [PATCH 16/21] =?UTF-8?q?=EB=B9=84=ED=96=89=20=EA=B5=AC=EC=97=AD?= =?UTF-8?q?=20buffer=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../basis/flight/plan/FlightPlanAreaMap.js | 8 +- .../map/naver/draw/FlightPlanDrawTest.js | 308 ++++++++++-------- .../flight/plan/FlightPlanDetailContainer.js | 2 +- 3 files changed, 174 insertions(+), 144 deletions(-) diff --git a/src/components/basis/flight/plan/FlightPlanAreaMap.js b/src/components/basis/flight/plan/FlightPlanAreaMap.js index 6df20df..11ccd96 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaMap.js +++ b/src/components/basis/flight/plan/FlightPlanAreaMap.js @@ -39,7 +39,11 @@ const FlightPlanAreaMap = (props) => { useEffect(() => { ModeInit(); - }, [mapControl.drawType]) + }, [mapControl.drawType]); + + useEffect(() => { + setMapAreaCoordList(areaCoordList) + }, [areaCoordList]); const ModeInit = () => { setMode(mapControl.drawType) @@ -122,7 +126,7 @@ const FlightPlanAreaMap = (props) => { map={map} naver={naver} mode={mode} - areaCoordList={areaCoordList} + areaCoordList={mapAreaCoordList} handleCoordinates={handleCoordinates} handleInitCoordinates={handleInitCoordinates} /> : null} diff --git a/src/components/map/naver/draw/FlightPlanDrawTest.js b/src/components/map/naver/draw/FlightPlanDrawTest.js index 1027134..5a48971 100644 --- a/src/components/map/naver/draw/FlightPlanDrawTest.js +++ b/src/components/map/naver/draw/FlightPlanDrawTest.js @@ -6,10 +6,10 @@ import { drawTypeChangeAction } from '../../../../modules/control/map/actions/co import GeoJSONReader from 'jsts/org/locationtech/jts/io/GeoJSONReader'; import GeometryFactory from 'jsts/org/locationtech/jts/geom/GeometryFactory'; -import {BufferOp} from 'jsts/org/locationtech/jts/operation/buffer'; -import {DistanceOp} from 'jsts/org/locationtech/jts/operation/distance/DistanceOp'; +import { BufferOp } from 'jsts/org/locationtech/jts/operation/buffer'; +import { DistanceOp } from 'jsts/org/locationtech/jts/operation/distance/DistanceOp'; -import JSTSWKTReader from 'jsts/org/locationtech/jts/io/WKTReader'; +import JSTSWKTReader from 'jsts/org/locationtech/jts/io/WKTReader'; import GeoJSONWriter from 'jsts/org/locationtech/jts/io/GeoJSONWriter'; import JSTSBufferOp from 'jsts/org/locationtech/jts/operation/buffer/BufferOp' import JSTSBufferParameter from 'jsts/org/locationtech/jts/operation/buffer/BufferParameters'; @@ -23,10 +23,10 @@ export const FlightPlanDrawTest = props => { const [pastBuffer, setBuffer] = useState(); const [pastPolygon, setPolygon] = useState(); - + const [pastCircle, setCircle] = useState(); const [pastEve, setEve] = useState(); - + const [pastDragCircle, setDragCircle] = useState([]); const naver = props.naver; @@ -57,21 +57,21 @@ export const FlightPlanDrawTest = props => { let check; - useEffect(() => { + useEffect(() => { drawInit(); }, [mapControl.drawType]) useEffect(() => { handleDetailDrwa(); - }, []) + }, [props.areaCoordList]) const zoomChange = () => { let change; - if(change) { + if (change) { naver.maps.Event.removeListener(change); } else { - change = naver.maps.Event.addListener(map, 'zoom_changed', function() { - if(dragCircle) { + change = naver.maps.Event.addListener(map, 'zoom_changed', function () { + if (dragCircle) { // dragCircle.forEach(prev => prev.setRadius(map._mapOptions.zoom + 5)); // dragCircle.forEach(prev => prev.setRadius(prev.getRadius() * 1.25)); } @@ -79,27 +79,27 @@ export const FlightPlanDrawTest = props => { } } - const drawInit = () => { - console.log(mapControl.drawType); - if(mapControl.drawType==='LINE') { + const drawInit = () => { + console.log(mapControl.drawType); + if (mapControl.drawType === 'LINE') { onClickButton('LINE'); - } else if(mapControl.drawType==='CIRCLE') { + } else if (mapControl.drawType === 'CIRCLE') { onClickButton('CIRCLE'); - } else if(mapControl.drawType==='POLYGON') { + } else if (mapControl.drawType === 'POLYGON') { onClickButton('POLYGON'); - } else if(mapControl.drawType==='RESET') { + } else if (mapControl.drawType === 'RESET') { onClickReset('RESET') } } const onClickButton = (newMode) => { - console.log('onClickButton'); + console.log('onClickButton'); - zoomChange(); + zoomChange(); clearMode(mode); - if(mode === newMode) { + if (mode === newMode) { mode = null; return; } @@ -109,11 +109,11 @@ export const FlightPlanDrawTest = props => { startMode(newMode); } - const clearMode = (mode) => { + const clearMode = (mode) => { console.log('clearMode') // if(!mode) return; - + // clear mode는 전체를 다 초기화 하는게 맞지 않을까..? 무조건 drawType이 변할때마다 초기화해주기로.. if (pastPolyline) { console.log('clrea polyline ', pastPolyline) @@ -126,7 +126,7 @@ export const FlightPlanDrawTest = props => { if (pastCircle) { console.log('clrea circle ', pastCircle) pastCircle.setMap(null); - naver.maps.Event.removeListener(pastEve); + naver.maps.Event.removeListener(pastEve); setCircle(); } @@ -136,12 +136,12 @@ export const FlightPlanDrawTest = props => { pastDragCircle.forEach(c => c.setMap(null)); setPolygon(); - setDragCircle([]); + setDragCircle([]); } - finishDraw(); - props.handleInitCoordinates(); - + finishDraw(); + props.handleInitCoordinates(); + // if(mode === 'LINE' && pastPolyline) { // pastPolyline.setMap(null); // pastDragCircle.forEach(c => c.setMap(null)); @@ -176,23 +176,23 @@ export const FlightPlanDrawTest = props => { console.log('startMode') if (!mode) return; - + if (mode === 'LINE') { - Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickPolyline(e) }); + Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolyline(e) }); } else if (mode === 'POLYGON') { - Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickPolygon(e) }); + Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolygon(e) }); } else if (mode === 'CIRCLE') { - setEve(naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e) })) + setEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) })) } } const removeListener = () => { console.log('removeListener') - + naver.maps.Event.removeListener(Eve.clickEve); naver.maps.Event.removeListener(Eve.mousedownEve); naver.maps.Event.removeListener(Eve.rightclickEve); - if(!circle) $(document).off('mousemove.measure'); + if (!circle) $(document).off('mousemove.measure'); // if(pastCircle) naver.maps.Event.removeListener(pastEve); naver.maps.Event.removeListener(pastEve); } @@ -200,17 +200,17 @@ export const FlightPlanDrawTest = props => { const finishDraw = () => { console.log('finishDraw') removeListener(); - if(polyline) { + if (polyline) { let polypaths = polyline.getPath()._array; - - if(guideline) { + + if (guideline) { guideline.setMap(null); guideline = ''; } - - if(polypaths.length >= 2) { + + if (polypaths.length >= 2) { //꼭짓점 circle 생성 - for(let index = 0; index < polypaths.length; index++) { + for (let index = 0; index < polypaths.length; index++) { dragCircle.push( new naver.maps.Circle({ strokeOpacity: 1, @@ -223,12 +223,12 @@ export const FlightPlanDrawTest = props => { clickable: true }) ) - - dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function() { onMouseDownDrag(index) })) + + dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function () { onMouseDownDrag(index) })) } setDragCircle(dragCircle); setPolyline(polyline); - + setAreaInfo(polypaths); } else { @@ -236,13 +236,13 @@ export const FlightPlanDrawTest = props => { polyline = ''; } - } else if(polygon) { + } else if (polygon) { let path = polygon.getPath(); path.pop(); let polygonpaths = polygon.getPath()._array; //꼭짓점 circle 생성 - for(let index = 0; index < polygonpaths.length; index++) { + for (let index = 0; index < polygonpaths.length; index++) { dragCircle.push( new naver.maps.Circle({ strokeOpacity: 1, @@ -255,7 +255,7 @@ export const FlightPlanDrawTest = props => { clickable: true }) ) - dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function() { onMouseDownDrag(index) })) + dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function () { onMouseDownDrag(index) })) } setDragCircle(dragCircle); setPolygon(polygon); @@ -267,8 +267,8 @@ export const FlightPlanDrawTest = props => { console.log('onClickPolyline') var coord = e.coord; - if(!check) { - if(!polyline) { + if (!check) { + if (!polyline) { //가이드라인 guideline = new naver.maps.Polyline({ strokeColor: '#283046', @@ -278,7 +278,7 @@ export const FlightPlanDrawTest = props => { map: map }); // lastDistance = guideline.getDistance(); - + //실제 사용되는 라인 polyline = new naver.maps.Polyline({ strokeLineCap: 'round', @@ -289,21 +289,21 @@ export const FlightPlanDrawTest = props => { path: [coord], map: map }); - - Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function() { finishDraw() }) - $(document).on('mousemove.measure', function(e) { onMouseMovePolyline(e); }); - + + Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() }) + $(document).on('mousemove.measure', function (e) { onMouseMovePolyline(e); }); + lastDistance = polyline.getDistance(); // this._addMileStone(coord, 'Start'); } else { guideline.setPath([e.coord]); polyline.getPath().push(coord); - + var distance = polyline.getDistance(); // addMileStone(coord, this._fromMetersToText(distance - this._lastDistance)); lastDistance = distance; } - } + } } const onMouseMovePolyline = (e) => { @@ -312,7 +312,7 @@ export const FlightPlanDrawTest = props => { coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), path = guideline.getPath(); - if(path.getLength() === 2) { + if (path.getLength() === 2) { path.pop(); } @@ -323,7 +323,7 @@ export const FlightPlanDrawTest = props => { console.log('onClickPolygon') var coord = e.coord; - if(!polygon) { + if (!polygon) { polygon = new naver.maps.Polygon({ strokeColor: '#283046', strokeOpacity: 1, @@ -333,8 +333,8 @@ export const FlightPlanDrawTest = props => { map: map }); - Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function() { finishDraw() }) - $(document).on('mousemove.measure', function(e) { onMouseMovePolygon(e) }); + Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() }) + $(document).on('mousemove.measure', function (e) { onMouseMovePolygon(e) }); } else { polygon.getPath().push(coord); } @@ -342,13 +342,13 @@ export const FlightPlanDrawTest = props => { const onMouseMovePolygon = (e) => { console.log('onMouseMovePolygon') - if(!polygon) return; + if (!polygon) return; var proj = map.getProjection(), coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), path = polygon.getPath(); - if(path.getLength() >= 2) { + if (path.getLength() >= 2) { path.pop(); } @@ -359,8 +359,8 @@ export const FlightPlanDrawTest = props => { console.log('onClickCircle') var coord = e.coord; - if(!check) { - if(!circle) { + if (!check) { + if (!circle) { //가이드라인 radiusline = new naver.maps.Polyline({ // strokeStyle: [4, 4], @@ -382,7 +382,7 @@ export const FlightPlanDrawTest = props => { clickable: true }); - Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function() { onMouseDownDrag(0); }) + Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); }) } else { circle.setRadius(100); circle.setCenter(coord); @@ -398,7 +398,7 @@ export const FlightPlanDrawTest = props => { const onMouseDownDrag = (index) => { console.log('onMouseDownDrag') - if(circle) { + if (circle) { naver.maps.Event.removeListener(Eve.clickEve); } @@ -412,8 +412,8 @@ export const FlightPlanDrawTest = props => { disableTwoFingerTapZoom: true }) - $(document).on('mousemove.measure', function(e) { onMouseMoveDrag(e, index) }); - $(document).on('mouseup.measure', function() { onMouseUpDrag() }); + $(document).on('mousemove.measure', function (e) { onMouseMoveDrag(e, index) }); + $(document).on('mouseup.measure', function () { onMouseUpDrag() }); } const onMouseMoveDrag = (e, index) => { @@ -424,29 +424,29 @@ export const FlightPlanDrawTest = props => { var proj = map.getProjection(), coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)); - if(polyline) { + if (polyline) { var polypaths = polyline.getPath()._array; let movepath = []; - for(let i = 0; i < polypaths.length; i++) { + for (let i = 0; i < polypaths.length; i++) { let path; - if(i === index) { + if (i === index) { path = coord; } else { path = polypaths[i] } movepath.push(path); } - + polyline.setPath(movepath); - } else if(polygon) { + } else if (polygon) { var polygonpaths = polygon.getPath()._array; let movepath = []; - for(let i = 0; i < polygonpaths.length; i++) { + for (let i = 0; i < polygonpaths.length; i++) { let path; - if(i === index) { + if (i === index) { path = coord; } else { path = polygonpaths[i] @@ -455,19 +455,19 @@ export const FlightPlanDrawTest = props => { } polygon.setPaths(movepath) - } else if(circle) { + } else if (circle) { var circlepath = radiusline.getPath(), center = circle.getCenter(), r = proj.getDistance(coord, center); - if(circlepath.getLength() === 2) { + if (circlepath.getLength() === 2) { circlepath.pop(); } circlepath.push(coord); circle.setRadius(r); } - - if(!circle) { + + if (!circle) { dragCircle[index].setCenter(coord); } } @@ -485,12 +485,12 @@ export const FlightPlanDrawTest = props => { disableTwoFingerTapZoom: false }) - if(polyline) { + if (polyline) { bufferPolyline.setMap(null); // bufferMove(); } - if(polygon) { + if (polygon) { var path = polygon.getPath()._array; setPolygon(polygon); // setAreaInfo(path, ''); @@ -499,9 +499,9 @@ export const FlightPlanDrawTest = props => { $(document).off('mousemove.measure'); $(document).off('mouseup.measure'); - if(circle) { + if (circle) { // Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e); }) - setEve(naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e) })) + setEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) })) setCircle(circle); setAreaInfo('', ''); } @@ -509,14 +509,14 @@ export const FlightPlanDrawTest = props => { check = false; } - const setAreaInfo = (path, bufferpath) => { + const setAreaInfo = (path, bufferpath) => { areaInfo = { - coordinates : [], + coordinates: [], bufferZone: 0, }; let prePath = []; - if(path) { + if (path) { path.forEach((item) => { const p = { lat: item.y, @@ -526,23 +526,23 @@ export const FlightPlanDrawTest = props => { prePath.push(p); }) // path.forEach(prev=> prePath.push([prev.x, prev.y])) - } + } - if(polyline) { - areaInfo.coordinates = prePath; - areaInfo.areaType = 'LINE'; - } else if(polygon) { + if (polyline) { + areaInfo.coordinates = prePath; + areaInfo.areaType = 'LINE'; + } else if (polygon) { areaInfo.coordinates = prePath; - areaInfo.areaType = 'POLYGON'; - } else if(circle) { + areaInfo.areaType = 'POLYGON'; + } else if (circle) { const point = { lat: circle.getCenter().y, lon: circle.getCenter().x } - + areaInfo.coordinates.push(point); areaInfo.bufferZone = circle.getRadius(); - areaInfo.areaType = 'CIRCLE'; + areaInfo.areaType = 'CIRCLE'; } props.handleCoordinates(areaInfo); // console.log(areaInfo, 'areaInfo') @@ -552,7 +552,7 @@ export const FlightPlanDrawTest = props => { let pol = polyline.getPath()._array; //latlng point 다 준건가? let lineStringPaths = []; - for(let i = 0; i< pol.length; i++) { + for (let i = 0; i < pol.length; i++) { // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToEPSG3857(pol[i])) // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToNaver(pol[i])) // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToTM128(pol[i])) @@ -564,7 +564,7 @@ export const FlightPlanDrawTest = props => { // lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToUTMK(naver.maps.Point(pol[i].x, pol[i].y))) - + lineStringPaths.push([pol[i].x, pol[i].y]); } // console.log(map.getProjection().getProjectionName()); @@ -578,7 +578,7 @@ export const FlightPlanDrawTest = props => { const wkt = 'LINESTRING (126.6061581 37.5218642, 126.6061581 37.518052)' let coords = { "type": "LineString", - "coordinates" : lineStringPaths + "coordinates": lineStringPaths }; const bufferCenter = new JSTSWKTReader().read(wkt) const bufferResult = JSTSBufferOp.bufferOp( @@ -586,7 +586,7 @@ export const FlightPlanDrawTest = props => { bufferRadius ) - const bufferResultGeoJSON = new GeoJSONWriter().write(bufferResult) + const bufferResultGeoJSON = new GeoJSONWriter().write(bufferResult) // bufferPolyline = new naver.maps.Polyline({ // strokeColor: '#ff0000', @@ -596,7 +596,7 @@ export const FlightPlanDrawTest = props => { // strokeOpacity: 1, // path : bufferPaths, // // path: [ - + // // ], // map: map // }); @@ -609,7 +609,7 @@ export const FlightPlanDrawTest = props => { let pol = polyline.getPath()._array; let lineStringPaths = []; - for(let i = 0; i< polyline.getPath().length; i++) { + for (let i = 0; i < polyline.getPath().length; i++) { lineStringPaths.push([pol[i].x, pol[i].y]); } console.log(lineStringPaths, 'polyline path') @@ -647,54 +647,54 @@ export const FlightPlanDrawTest = props => { // map: map // }); - //------------------------ + //------------------------ - let coords = { - "type": "LineString", - "coordinates" : lineStringPaths - }; - - const reader = new GeoJSONReader(); - const writer = new GeoJSONWriter(); + let coords = { + "type": "LineString", + "coordinates": lineStringPaths + }; - const distance = (100 * 0.001) / 111.12; //100미터 - const line = reader.read(coords); - const buffer = BufferOp.bufferOp(line, distance, 0, 3); + const reader = new GeoJSONReader(); + const writer = new GeoJSONWriter(); - let bufferpath = buffer._shell._points._coordinates; + const distance = (100 * 0.001) / 111.12; //100미터 + const line = reader.read(coords); + const buffer = BufferOp.bufferOp(line, distance, 0, 3); - let bufferPaths = []; - for(let i = 0; i< bufferpath.length; i++) { - bufferPaths.push([bufferpath[i].x, bufferpath[i].y]); - } - console.log(bufferPaths, 'bufferPaths') + let bufferpath = buffer._shell._points._coordinates; - bufferPolyline = new naver.maps.Polyline({ - strokeColor: '#ff0000', - strokeColor: '#283046', - strokeWeight: 2, - strokeStyle: [4, 4], - strokeOpacity: 1, - path : bufferPaths, - map: map - }); - // setAreaInfo(polyline.getPath()._array, bufferPath); - setAreaInfo(polyline.getPath()._array, bufferPaths); - setPolyline(polyline); - setBuffer(bufferPolyline) + let bufferPaths = []; + for (let i = 0; i < bufferpath.length; i++) { + bufferPaths.push([bufferpath[i].x, bufferpath[i].y]); + } + console.log(bufferPaths, 'bufferPaths') + + bufferPolyline = new naver.maps.Polyline({ + strokeColor: '#ff0000', + strokeColor: '#283046', + strokeWeight: 2, + strokeStyle: [4, 4], + strokeOpacity: 1, + path: bufferPaths, + map: map + }); + // setAreaInfo(polyline.getPath()._array, bufferPath); + setAreaInfo(polyline.getPath()._array, bufferPaths); + setPolyline(polyline); + setBuffer(bufferPolyline) } - const onClickReset = () => { + const onClickReset = () => { console.log('onClickRest - ', mapControl.drawType); - if(mapControl.drawType === 'RESET') { + if (mapControl.drawType === 'RESET') { clearMode('RESET'); - } + } } const handleDetailDrwa = () => { - if (props.areaCoordList) { - const areas = props.areaCoordList[0]; + if (props.areaCoordList) { + const areas = props.areaCoordList[0]; const paths = []; @@ -702,9 +702,9 @@ export const FlightPlanDrawTest = props => { const path = new naver.maps.LatLng(coord.lat, coord.lon) paths.push(path); - }); + }); - if(areas.areaType && areas.areaType === 'LINE') { + if (areas.areaType && areas.areaType === 'LINE') { polyline = new naver.maps.Polyline({ strokeLineCap: 'round', strokeLineJoin: 'round', @@ -714,12 +714,38 @@ export const FlightPlanDrawTest = props => { path: paths, map: map }); - + setPolyline(polyline) - // $(document).on('mousemove.measure', function(e) { onMouseMovePolyline(e); }); + + if (areas.bufferCoordList) { + const bufferPaths = []; + + areas.bufferCoordList.forEach((bfCoord) => { + const path = new naver.maps.LatLng(bfCoord.lat, bfCoord.lon); + + bufferPaths.push(path); + }); + console.log('buffer test : ',areas.bufferCoordList); + + if(pastPolygon) { + pastPolygon.setMap(null); + } + + polygon = new naver.maps.Polygon({ + strokeColor: '#283046', + strokeOpacity: 1, + fillColor: '#7367F0', + fillOpacity: 0.1, + paths: bufferPaths, + map: map + }); + console.log(polygon); + + setPolygon(polygon); + } } - if(areas.areaType && areas.areaType === 'POLYGON') { + if (areas.areaType && areas.areaType === 'POLYGON') { polygon = new naver.maps.Polygon({ strokeColor: '#283046', strokeOpacity: 1, @@ -732,7 +758,7 @@ export const FlightPlanDrawTest = props => { setPolygon(polygon); } - if(areas.areaType && areas.areaType === 'CIRCLE') { + if (areas.areaType && areas.areaType === 'CIRCLE') { circle = new naver.maps.Circle({ strokeColor: '#283046', strokeOpacity: 1, @@ -747,10 +773,10 @@ export const FlightPlanDrawTest = props => { setCircle(circle); } } -} + } return ( - <> + <> ); }; \ No newline at end of file diff --git a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js index 4be5aac..51e250b 100644 --- a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js @@ -142,7 +142,7 @@ const FlightPlanDetailContainer = () => { useEffect(() => { // 조종사, 기체 정보 Redux 초기화 - // dispatch(Actions.PILOT_ARCRFT_SELECT_INIT()); + dispatch(Actions.PILOT_ARCRFT_SELECT_INIT()); }) const handleModal = (modal) => { From 203ca306072eaeb8281216ef30279ce93172bcc0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?scnoh=28=EB=85=B8=EC=8A=B9=EC=B2=A0=29?= Date: Mon, 1 Aug 2022 16:21:05 +0900 Subject: [PATCH 17/21] =?UTF-8?q?=EC=A1=B0=EC=A2=85=EC=82=AC,=20=EA=B8=B0?= =?UTF-8?q?=EC=B2=B4=20=EC=A1=B0=ED=9A=8C=20=EC=82=AD=EC=A0=9C=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=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/FlightPlanArcrft.js | 28 +------- .../basis/flight/plan/FlightPlanForm.js | 52 ++++++++++++-- .../basis/flight/plan/FlightPlanPilot.js | 71 ++++++------------- .../flight/plan/FlightPlanDetailContainer.js | 24 ++++++- .../flight/plan/FlightPlanPilotContainer.js | 2 +- .../flight/reducers/basisFlightReducer.ts | 2 +- 6 files changed, 91 insertions(+), 88 deletions(-) diff --git a/src/components/basis/flight/plan/FlightPlanArcrft.js b/src/components/basis/flight/plan/FlightPlanArcrft.js index a8de3bb..36fa21a 100644 --- a/src/components/basis/flight/plan/FlightPlanArcrft.js +++ b/src/components/basis/flight/plan/FlightPlanArcrft.js @@ -45,31 +45,7 @@ const FlightPlanArcrft = ({ arcrftList, handleSelectArcrft }) => {
-
-
-
그룹 명
-
-
- - - - - - - - -
-
-
+
소유자 명
@@ -83,7 +59,7 @@ const FlightPlanArcrft = ({ arcrftList, handleSelectArcrft }) => { name='ownerNm' // value={props.params.groupNm} // onChange={props.handlerInput} - size='sm' + bsSize='sm' // onKeyPress={props.onKeyPress} placeholder='소유자 명을 입력하세요' /> diff --git a/src/components/basis/flight/plan/FlightPlanForm.js b/src/components/basis/flight/plan/FlightPlanForm.js index 60a04fc..1ef265e 100644 --- a/src/components/basis/flight/plan/FlightPlanForm.js +++ b/src/components/basis/flight/plan/FlightPlanForm.js @@ -17,9 +17,10 @@ import FlightPlanPilotContainer from '../../../../containers/basis/flight/plan/F import { FlightPlanModal } from './FlightPlanModal'; import FlightPlanArcrftContainer from '../../../../containers/basis/flight/plan/FlightPlanArcrftContainer'; import FlightPlanAreaContainer from '../../../../containers/basis/flight/plan/FlightPlanAreaContainer'; +import { X } from 'react-feather'; -const FlightPlanForm = ({data, handleModal, handleChange, handleSave, handleDelete, modal}) => { +const FlightPlanForm = ({data, handleModal, handleChange, handleSave, handleDelete, modal, handleDeleteArray }) => { const {areaList, pilotList, arcrftList} = data; return ( @@ -275,7 +276,8 @@ const FlightPlanForm = ({data, handleModal, handleChange, handleSave, handleDele ) + handleChange={handleChange} + handleDeleteArray ={handleDeleteArray}/>) : }
@@ -296,7 +298,9 @@ const FlightPlanForm = ({data, handleModal, handleChange, handleSave, handleDele ) + handleChange={handleChange} + handleDeleteArray ={handleDeleteArray}/>) + : } @@ -512,13 +516,13 @@ const AreaForm = ({data, handleChange, index}) => {
) } -const PilotForm = ({data, handleChange, index}) => { +const PilotForm = ({data, handleChange, index, handleDeleteArray}) => { return (
{ /> + {index !== 0 ? + + + handleDeleteArray({ type: 'pilot', index }) + } + outline + > + + 삭제 + + + : + null + }
) } -const ArcrftForm = ({data, handleChange, index}) => { +const ArcrftForm = ({data, handleChange, index, handleDeleteArray}) => { return (
{ /> + {index !== 0 ? + + + handleDeleteArray({ type: 'arcrft', index }) + } + outline + > + + 삭제 + + + : + null + }
) } diff --git a/src/components/basis/flight/plan/FlightPlanPilot.js b/src/components/basis/flight/plan/FlightPlanPilot.js index 9e4f114..bd38999 100644 --- a/src/components/basis/flight/plan/FlightPlanPilot.js +++ b/src/components/basis/flight/plan/FlightPlanPilot.js @@ -44,31 +44,7 @@ const FlightPlanPilot = ({ pilotList, handleSelectPilot }) => {
-
-
-
그룹 명
-
-
- - - - - - - - -
-
-
+
성명
@@ -82,7 +58,7 @@ const FlightPlanPilot = ({ pilotList, handleSelectPilot }) => { name='memberName' // value={props.params.groupNm} // onChange={props.handlerInput} - size='sm' + bsSize='sm' // onKeyPress={props.onKeyPress} placeholder='성명을 입력하세요' /> @@ -102,31 +78,26 @@ const FlightPlanPilot = ({ pilotList, handleSelectPilot }) => {
-
- - -
-
-

조종사 목록

- 검색결과 총 {!!pilotList ? pilotList.length : 0}건 -
-
-
- -
- - {/* 검색된 데이터가 없습니다. */} -
- +
+
+
+

조종사 목록

+ 검색결과 총 {!!pilotList ? pilotList.length : 0}건 +
+
+
+
+ +
+
- - + +
) diff --git a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js index 51e250b..f27539b 100644 --- a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js @@ -37,7 +37,7 @@ const FlightPlanDetailContainer = () => { }, [detail]) useEffect(() => { - if(pilotSelect !== undefined) { + if(pilotSelect !== undefined) { const pilotList = detailData.pilotList.concat(); const pilot = Object.assign({}, initFlightBas['pilot']); @@ -291,14 +291,32 @@ const FlightPlanDetailContainer = () => { break; case 'area': case 'pilot': - case 'arcrft': setDetailData(prevState => { - const arr = [...prevState[type]]; + const arr = [...prevState[arrName]]; const deleteData = arr.splice(index, 1); + return { ...prevState, [arrName]: arr + } + }) + case 'arcrft': + setDetailData(prevState => { + const arr = [...prevState[arrName]]; + const deleteData = arr.splice(index, 1); + + if(arr.length > 0) { + return { + ...prevState, + [arrName]: arr + } + } else { + return { + ...prevState, + ['pilotList']: initFlightBas[arrName] + } } + }) default: break; diff --git a/src/containers/basis/flight/plan/FlightPlanPilotContainer.js b/src/containers/basis/flight/plan/FlightPlanPilotContainer.js index 2664463..fa8725a 100644 --- a/src/containers/basis/flight/plan/FlightPlanPilotContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanPilotContainer.js @@ -34,7 +34,7 @@ const FlightPlanPilotContainer = ({handleModal, type}) => { + /> ) } diff --git a/src/modules/basis/flight/reducers/basisFlightReducer.ts b/src/modules/basis/flight/reducers/basisFlightReducer.ts index d9c4d96..1f47a09 100644 --- a/src/modules/basis/flight/reducers/basisFlightReducer.ts +++ b/src/modules/basis/flight/reducers/basisFlightReducer.ts @@ -72,7 +72,7 @@ export const flightReducer = createReducer(in draft.arcrftSelect = undefined; draft.pilotSelect = undefined; draft.areaList = undefined; - draft.areaCoordList = undefined; + // draft.areaCoordList = undefined; }) ) // 비행 구역 좌표 저장 From aaca772b46e272a39ead38372357c426ef494ca2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?scnoh=28=EB=85=B8=EC=8A=B9=EC=B2=A0=29?= Date: Mon, 1 Aug 2022 17:13:18 +0900 Subject: [PATCH 18/21] =?UTF-8?q?=EB=B9=84=ED=96=89=EA=B3=84=ED=9A=8D?= =?UTF-8?q?=EC=84=9C=20groupId=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/basis/flight/plan/FlightPlanArcrft.js | 2 +- src/components/basis/flight/plan/FlightPlanForm.js | 9 +++++---- .../basis/flight/plan/FlightPlanArcrftContainer.js | 8 +++++--- .../basis/flight/plan/FlightPlanPilotContainer.js | 11 ++++++----- 4 files changed, 17 insertions(+), 13 deletions(-) diff --git a/src/components/basis/flight/plan/FlightPlanArcrft.js b/src/components/basis/flight/plan/FlightPlanArcrft.js index 36fa21a..f7e4c51 100644 --- a/src/components/basis/flight/plan/FlightPlanArcrft.js +++ b/src/components/basis/flight/plan/FlightPlanArcrft.js @@ -94,7 +94,7 @@ const FlightPlanArcrft = ({ arcrftList, handleSelectArcrft }) => { diff --git a/src/components/basis/flight/plan/FlightPlanForm.js b/src/components/basis/flight/plan/FlightPlanForm.js index 1ef265e..a2e53d3 100644 --- a/src/components/basis/flight/plan/FlightPlanForm.js +++ b/src/components/basis/flight/plan/FlightPlanForm.js @@ -21,7 +21,7 @@ import { X } from 'react-feather'; const FlightPlanForm = ({data, handleModal, handleChange, handleSave, handleDelete, modal, handleDeleteArray }) => { - const {areaList, pilotList, arcrftList} = data; + const {groupId ,areaList, pilotList, arcrftList} = data; return ( @@ -336,6 +336,7 @@ const FlightPlanForm = ({data, handleModal, handleChange, handleSave, handleDele ) @@ -343,7 +344,7 @@ const FlightPlanForm = ({data, handleModal, handleChange, handleSave, handleDele export default FlightPlanForm; -const SelectModal = ({handleModal, modal}) => { +const SelectModal = ({handleModal, modal, groupId}) => { let title = ''; let description = ''; let type = ''; @@ -353,14 +354,14 @@ const SelectModal = ({handleModal, modal}) => { isOpen = modal.pilot; title = '조종사 조회'; type = 'pilot'; - description = + description = } if(modal.arcrft) { isOpen = modal.arcrft; title = '기체 조회'; type = 'arcrft'; - description = ; + description = ; } if(modal.area) { diff --git a/src/containers/basis/flight/plan/FlightPlanArcrftContainer.js b/src/containers/basis/flight/plan/FlightPlanArcrftContainer.js index b1f555f..57ff3fc 100644 --- a/src/containers/basis/flight/plan/FlightPlanArcrftContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanArcrftContainer.js @@ -4,15 +4,17 @@ import FlightPlanArcrft from '../../../../components/basis/flight/plan/FlightPla import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction'; // import FlightPlanPilot from '../../../../components/basis/flight/plan/FlightPlanPilot'; -const FlightPlanArcrftContainer = ({handleModal, type}) => { +const FlightPlanArcrftContainer = ({handleModal, type, groupId}) => { const dispatch = useDispatch(); const { arcrftList } = useSelector(state => state.flightState); /* 기체 조회 */ const handleSearch = () => { - // group id 하드코딩 - dispatch(Actions.FLIGHT_PLAN_ARCRFT_LIST.request("D1682A")); + + if(groupId) { + dispatch(Actions.FLIGHT_PLAN_ARCRFT_LIST.request(groupId)); + } } /* 기체 선택 */ diff --git a/src/containers/basis/flight/plan/FlightPlanPilotContainer.js b/src/containers/basis/flight/plan/FlightPlanPilotContainer.js index fa8725a..121d9f2 100644 --- a/src/containers/basis/flight/plan/FlightPlanPilotContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanPilotContainer.js @@ -3,15 +3,16 @@ import {useDispatch, useSelector} from 'react-redux'; import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction'; import FlightPlanPilot from '../../../../components/basis/flight/plan/FlightPlanPilot'; -const FlightPlanPilotContainer = ({handleModal, type}) => { +const FlightPlanPilotContainer = ({handleModal, type, groupId}) => { const dispatch = useDispatch(); - const { pilotList } = useSelector(state => state.flightState); + const { pilotList, selectGroup } = useSelector(state => state.flightState); /* 조종사 조회 */ - const handleSearch = () => { - // group id 하드코딩 - dispatch(Actions.FLIGHT_PLAN_PILOT_LIST.request("D1682A")); + const handleSearch = () => { + if(groupId) { + dispatch(Actions.FLIGHT_PLAN_PILOT_LIST.request(groupId)); + } } /* 조종사 선택 */ From 6dbc64678c9c1e18571c88365bbef9999f915e85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?scnoh=28=EB=85=B8=EC=8A=B9=EC=B2=A0=29?= Date: Mon, 1 Aug 2022 17:26:22 +0900 Subject: [PATCH 19/21] =?UTF-8?q?=EB=B9=84=ED=96=89=EA=B3=84=ED=9A=8D=20gr?= =?UTF-8?q?oupId=20session=20storage=20=EB=B3=B4=EA=B4=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/basis/flight/plan/FlightPlanArcrft.js | 3 +-- src/components/basis/flight/plan/FlightPlanForm.js | 11 +++++------ .../basis/flight/plan/FlightPlanArcrftContainer.js | 3 ++- .../basis/flight/plan/FlightPlanContainer.js | 5 ++++- .../basis/flight/plan/FlightPlanPilotContainer.js | 6 ++++-- 5 files changed, 16 insertions(+), 12 deletions(-) diff --git a/src/components/basis/flight/plan/FlightPlanArcrft.js b/src/components/basis/flight/plan/FlightPlanArcrft.js index f7e4c51..093d341 100644 --- a/src/components/basis/flight/plan/FlightPlanArcrft.js +++ b/src/components/basis/flight/plan/FlightPlanArcrft.js @@ -91,8 +91,7 @@ const FlightPlanArcrft = ({ arcrftList, handleSelectArcrft }) => {
- { - const {groupId ,areaList, pilotList, arcrftList} = data; + const {areaList, pilotList, arcrftList} = data; return ( @@ -335,8 +335,7 @@ const FlightPlanForm = ({data, handleModal, handleChange, handleSave, handleDele ) @@ -344,7 +343,7 @@ const FlightPlanForm = ({data, handleModal, handleChange, handleSave, handleDele export default FlightPlanForm; -const SelectModal = ({handleModal, modal, groupId}) => { +const SelectModal = ({handleModal, modal}) => { let title = ''; let description = ''; let type = ''; @@ -354,14 +353,14 @@ const SelectModal = ({handleModal, modal, groupId}) => { isOpen = modal.pilot; title = '조종사 조회'; type = 'pilot'; - description = + description = } if(modal.arcrft) { isOpen = modal.arcrft; title = '기체 조회'; type = 'arcrft'; - description = ; + description = ; } if(modal.area) { diff --git a/src/containers/basis/flight/plan/FlightPlanArcrftContainer.js b/src/containers/basis/flight/plan/FlightPlanArcrftContainer.js index 57ff3fc..e6e377c 100644 --- a/src/containers/basis/flight/plan/FlightPlanArcrftContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanArcrftContainer.js @@ -4,13 +4,14 @@ import FlightPlanArcrft from '../../../../components/basis/flight/plan/FlightPla import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction'; // import FlightPlanPilot from '../../../../components/basis/flight/plan/FlightPlanPilot'; -const FlightPlanArcrftContainer = ({handleModal, type, groupId}) => { +const FlightPlanArcrftContainer = ({handleModal, type}) => { const dispatch = useDispatch(); const { arcrftList } = useSelector(state => state.flightState); /* 기체 조회 */ const handleSearch = () => { + const groupId = sessionStorage.getItem('groupId'); if(groupId) { dispatch(Actions.FLIGHT_PLAN_ARCRFT_LIST.request(groupId)); diff --git a/src/containers/basis/flight/plan/FlightPlanContainer.js b/src/containers/basis/flight/plan/FlightPlanContainer.js index f94f3bd..83d583b 100644 --- a/src/containers/basis/flight/plan/FlightPlanContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanContainer.js @@ -1,5 +1,5 @@ import React, {useEffect, useState} from 'react'; -import moment from 'moment'; +import moment, { suppressDeprecationWarnings } from 'moment'; import {Link, Redirect, useHistory} from 'react-router-dom'; import FlightPlanGrid from '../../../../components/basis/flight/plan/FlightPlanGrid'; import {CustomMainLayout} from '../../../../components/layout/CustomMainLayout'; @@ -63,6 +63,9 @@ const FlightPlanContainer = () => { dispatch(FlightAction.FLIGHT_PLAN_GROUP_SELECT( {cstmrSno: user.cstmrSno, groupId: groupId, groupNm: groupNm} )); + // groupId sessionStorage에 보관 (1 브라우저 1 tab에만 유효) + sessionStorage.setItem('groupId', groupId); + setSerchData(prevState => { return { ...prevState, diff --git a/src/containers/basis/flight/plan/FlightPlanPilotContainer.js b/src/containers/basis/flight/plan/FlightPlanPilotContainer.js index 121d9f2..80efada 100644 --- a/src/containers/basis/flight/plan/FlightPlanPilotContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanPilotContainer.js @@ -3,13 +3,15 @@ import {useDispatch, useSelector} from 'react-redux'; import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction'; import FlightPlanPilot from '../../../../components/basis/flight/plan/FlightPlanPilot'; -const FlightPlanPilotContainer = ({handleModal, type, groupId}) => { +const FlightPlanPilotContainer = ({handleModal, type}) => { const dispatch = useDispatch(); const { pilotList, selectGroup } = useSelector(state => state.flightState); /* 조종사 조회 */ - const handleSearch = () => { + const handleSearch = () => { + const groupId = sessionStorage.getItem('groupId'); + if(groupId) { dispatch(Actions.FLIGHT_PLAN_PILOT_LIST.request(groupId)); } From 271e567280d82846499c6a78aebe162aa2ff3888 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?= Date: Tue, 2 Aug 2022 12:06:29 +0900 Subject: [PATCH 20/21] =?UTF-8?q?=EB=B9=84=ED=96=89=EA=B3=84=ED=9A=8D?= =?UTF-8?q?=EC=84=9C=20buffer=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../flight/plan/FlightPlanAreaDetailForm.js | 5 - .../basis/flight/plan/FlightPlanAreaMap.js | 25 +- .../map/naver/draw/FlightPlanDrawTest.js | 507 +++++++----------- 3 files changed, 212 insertions(+), 325 deletions(-) diff --git a/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js b/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js index 0d72e22..64d466e 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js +++ b/src/components/basis/flight/plan/FlightPlanAreaDetailForm.js @@ -9,11 +9,6 @@ import { 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 = ({ handleSave, handleClose, handleChange, handleBufferList, data }) => { diff --git a/src/components/basis/flight/plan/FlightPlanAreaMap.js b/src/components/basis/flight/plan/FlightPlanAreaMap.js index 11ccd96..30c14d5 100644 --- a/src/components/basis/flight/plan/FlightPlanAreaMap.js +++ b/src/components/basis/flight/plan/FlightPlanAreaMap.js @@ -10,6 +10,7 @@ import { FormGroup } from 'reactstrap'; import { useDispatch, useSelector } from 'react-redux'; +import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction'; import { FeatureAirZone } from '../../../map/naver/feature/FeatureAirZone'; import { drawTypeChangeAction, drawCheckAction } from '../../../../modules/control/map/actions/controlMapActions'; import { FlightPlanDrawTest } from '../../../map/naver/draw/FlightPlanDrawTest'; @@ -20,7 +21,6 @@ const FlightPlanAreaMap = (props) => { const dispatch = useDispatch(); const naver = window.naver; const airArea = props.airArea; - const mapControl = useSelector(state => state.controlMapReducer); const { areaCoordList } = useSelector(state => state.flightState); @@ -45,6 +45,9 @@ const FlightPlanAreaMap = (props) => { setMapAreaCoordList(areaCoordList) }, [areaCoordList]); + const [areaDetail, setAreaDetail] = useState(initFlightBas.initDetail.areaList); + + const ModeInit = () => { setMode(mapControl.drawType) } @@ -68,11 +71,11 @@ const FlightPlanAreaMap = (props) => { const handlerDrawType = val => { dispatch(drawTypeChangeAction(val)); - }; - - const handlerDrawCheck = val => { - dispatch(drawCheckAction(val)); - }; + }; + + const handleBufferList = () => { + dispatch(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.request(areaDetail)); + } const handleInitCoordinates = () => { const init = initFlightBas.initDetail.areaList.concat(); @@ -128,7 +131,8 @@ const FlightPlanAreaMap = (props) => { mode={mode} areaCoordList={mapAreaCoordList} handleCoordinates={handleCoordinates} - handleInitCoordinates={handleInitCoordinates} + handleInitCoordinates={handleInitCoordinates} + handleBufferList={handleBufferList} /> : null} { > 초기화 - {/* - 적용 - */} -
diff --git a/src/components/map/naver/draw/FlightPlanDrawTest.js b/src/components/map/naver/draw/FlightPlanDrawTest.js index 5a48971..6a59029 100644 --- a/src/components/map/naver/draw/FlightPlanDrawTest.js +++ b/src/components/map/naver/draw/FlightPlanDrawTest.js @@ -1,37 +1,25 @@ import $ from 'jquery'; -import buffer from '@turf/buffer' import { useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions'; - -import GeoJSONReader from 'jsts/org/locationtech/jts/io/GeoJSONReader'; -import GeometryFactory from 'jsts/org/locationtech/jts/geom/GeometryFactory'; -import { BufferOp } from 'jsts/org/locationtech/jts/operation/buffer'; -import { DistanceOp } from 'jsts/org/locationtech/jts/operation/distance/DistanceOp'; - -import JSTSWKTReader from 'jsts/org/locationtech/jts/io/WKTReader'; -import GeoJSONWriter from 'jsts/org/locationtech/jts/io/GeoJSONWriter'; -import JSTSBufferOp from 'jsts/org/locationtech/jts/operation/buffer/BufferOp' -import JSTSBufferParameter from 'jsts/org/locationtech/jts/operation/buffer/BufferParameters'; export const FlightPlanDrawTest = props => { - const dispatch = useDispatch(); const mapControl = useSelector(state => state.controlMapReducer); - const draw = useSelector(state => state.basisFlightDrawReducer); const [pastPolyline, setPolyline] = useState(); const [pastBuffer, setBuffer] = useState(); const [pastPolygon, setPolygon] = useState(); - const [pastCircle, setCircle] = useState(); + // const [pastCircle, setCircle] = useState(); + const [pastCircle, setCircle] = useState([]); const [pastEve, setEve] = useState(); const [pastDragCircle, setDragCircle] = useState([]); + const [pastMarker, setMarker] = useState([]); + const naver = props.naver; const map = props.map; - const openModal = props.openModal; let mode = props.mode; let areaInfo; @@ -39,7 +27,7 @@ export const FlightPlanDrawTest = props => { let polyline; let guideline; - let bufferPolyline; + let bufferPolygon; let polygon; @@ -57,6 +45,8 @@ export const FlightPlanDrawTest = props => { let check; + let distanceMarker = []; + useEffect(() => { drawInit(); }, [mapControl.drawType]) @@ -65,20 +55,6 @@ export const FlightPlanDrawTest = props => { handleDetailDrwa(); }, [props.areaCoordList]) - const zoomChange = () => { - let change; - if (change) { - naver.maps.Event.removeListener(change); - } else { - change = naver.maps.Event.addListener(map, 'zoom_changed', function () { - if (dragCircle) { - // dragCircle.forEach(prev => prev.setRadius(map._mapOptions.zoom + 5)); - // dragCircle.forEach(prev => prev.setRadius(prev.getRadius() * 1.25)); - } - }) - } - } - const drawInit = () => { console.log(mapControl.drawType); if (mapControl.drawType === 'LINE') { @@ -95,8 +71,6 @@ export const FlightPlanDrawTest = props => { const onClickButton = (newMode) => { console.log('onClickButton'); - zoomChange(); - clearMode(mode); if (mode === newMode) { @@ -114,62 +88,38 @@ export const FlightPlanDrawTest = props => { // if(!mode) return; - // clear mode는 전체를 다 초기화 하는게 맞지 않을까..? 무조건 drawType이 변할때마다 초기화해주기로.. if (pastPolyline) { - console.log('clrea polyline ', pastPolyline) + console.log('clear polyline ', pastPolyline) pastPolyline.setMap(null); pastDragCircle.forEach(c => c.setMap(null)); - + pastBuffer.setMap(null); setPolyline(); setDragCircle([]); + setBuffer(); } if (pastCircle) { - console.log('clrea circle ', pastCircle) - pastCircle.setMap(null); + console.log('clear circle ', pastCircle) + pastCircle.forEach(prev => prev.setMap(null)) naver.maps.Event.removeListener(pastEve); - setCircle(); + // setCircle(); + setCircle([]); } if (pastPolygon) { - console.log('clrea polygon ', pastPolygon) + console.log('clear polygon ', pastPolygon) pastPolygon.setMap(null); pastDragCircle.forEach(c => c.setMap(null)); setPolygon(); setDragCircle([]); } + if (pastMarker) { + console.log('clear marker ', pastMarker) + pastMarker.forEach(m => m.setMap(null)); + } finishDraw(); - props.handleInitCoordinates(); - - // if(mode === 'LINE' && pastPolyline) { - // pastPolyline.setMap(null); - // pastDragCircle.forEach(c => c.setMap(null)); - - // setPolyline({}); - // setDragCircle([]); - // } - - // if(mode === 'POLYGON' && pastPolygon) { - // pastPolygon.setMap(null); - // pastDragCircle.forEach(c => c.setMap(null)); - - // setPolygon({}); - // setDragCircle([]); - // } - - // if(mode === 'CIRCLE' && pastCircle) { - // pastCircle.setMap(null); - // naver.maps.Event.removeListener(pastEve); - - // setCircle({}); - // } - - // if(mode === 'RESET') { - // if(pastPolyline) pastPolyline.setMap(null); - // if(pastCircle) pastCircle.setMap(null); - // if(pastPolygon) pastPolygon.setMap(null); - // } + props.handleInitCoordinates(); } const startMode = (mode) => { @@ -200,66 +150,34 @@ export const FlightPlanDrawTest = props => { const finishDraw = () => { console.log('finishDraw') removeListener(); - if (polyline) { - let polypaths = polyline.getPath()._array; + if (polyline) { if (guideline) { guideline.setMap(null); guideline = ''; } - if (polypaths.length >= 2) { - //꼭짓점 circle 생성 - for (let index = 0; index < polypaths.length; index++) { - dragCircle.push( - new naver.maps.Circle({ - strokeOpacity: 1, - strokeColor: '#000000', - fillColor: '#ffffff', - fillOpacity: 1, - center: polypaths[index], - radius: 10, - map: map, - clickable: true - }) - ) + let polypaths = polyline.getPath()._array; - dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function () { onMouseDownDrag(index) })) - } - setDragCircle(dragCircle); + if (polypaths.length >= 2) { setPolyline(polyline); - setAreaInfo(polypaths); - } else { polyline.setMap(null); polyline = ''; } + polyline.setMap(null) } else if (polygon) { let path = polygon.getPath(); path.pop(); let polygonpaths = polygon.getPath()._array; - //꼭짓점 circle 생성 - for (let index = 0; index < polygonpaths.length; index++) { - dragCircle.push( - new naver.maps.Circle({ - strokeOpacity: 1, - strokeColor: '#000000', - fillColor: '#ffffff', - fillOpacity: 1, - center: polygonpaths[index], - radius: 10, - map: map, - clickable: true - }) - ) - dragCircleEve.push(naver.maps.Event.addListener(dragCircle[index], 'mousedown', function () { onMouseDownDrag(index) })) - } - setDragCircle(dragCircle); + setPolygon(polygon); - setAreaInfo(polygonpaths, ''); + setAreaInfo(polygonpaths); + + polygon.setMap(null) } } @@ -267,7 +185,7 @@ export const FlightPlanDrawTest = props => { console.log('onClickPolyline') var coord = e.coord; - if (!check) { + // if (!check) { if (!polyline) { //가이드라인 guideline = new naver.maps.Polyline({ @@ -277,13 +195,14 @@ export const FlightPlanDrawTest = props => { path: [coord], map: map }); - // lastDistance = guideline.getDistance(); + lastDistance = guideline.getDistance(); //실제 사용되는 라인 polyline = new naver.maps.Polyline({ strokeLineCap: 'round', strokeLineJoin: 'round', - strokeColor: '#283046', + // strokeColor: '#283046', + strokeColor: '#ff0000', strokeWeight: 3, strokeOpacity: 1, path: [coord], @@ -294,16 +213,16 @@ export const FlightPlanDrawTest = props => { $(document).on('mousemove.measure', function (e) { onMouseMovePolyline(e); }); lastDistance = polyline.getDistance(); - // this._addMileStone(coord, 'Start'); + addMileStone(coord, 'Start') } else { guideline.setPath([e.coord]); polyline.getPath().push(coord); var distance = polyline.getDistance(); - // addMileStone(coord, this._fromMetersToText(distance - this._lastDistance)); + addMileStone(coord, fromMetersToText(distance - lastDistance)); lastDistance = distance; } - } + // } } const onMouseMovePolyline = (e) => { @@ -359,40 +278,34 @@ export const FlightPlanDrawTest = props => { console.log('onClickCircle') var coord = e.coord; - if (!check) { - if (!circle) { - //가이드라인 - radiusline = new naver.maps.Polyline({ - // strokeStyle: [4, 4], - // strokeOpacity: 0.6, - path: [coord], - // map: map - }); - lastDistance = radiusline.getDistance(); - - //실제 사용되는 원형 - circle = new naver.maps.Circle({ - strokeColor: '#283046', - strokeOpacity: 1, - fillColor: '#7367F0', - fillOpacity: 0.1, - center: coord, - radius: 100, - map: map, - clickable: true - }); + if(!circle) { + radiusline = new naver.maps.Polyline({ + strokeStyle: [4, 4], + strokeOpacity: 0.6, + path: [coord], + map: map + }) + lastDistance = radiusline.getDistance(); - Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); }) - } else { - circle.setRadius(100); - circle.setCenter(coord); + circle = new naver.maps.Circle({ + strokeColor: '#283046', + strokeOpacity: 1, + fillColor: '#7367F0', + fillOpacity: 0.1, + center: coord, + radius: 100, + // map: map, + clickable: true + }) - radiusline.setPath([coord]) - } - setCircle(circle); - setAreaInfo('', ''); + Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); }) + } else { + circle.setCenter(coord); + circle.setRadius(100); } - + // setCircle(circle); + setCircle(prev => ([...prev, circle])) + setAreaInfo(''); } const onMouseDownDrag = (index) => { @@ -456,14 +369,16 @@ export const FlightPlanDrawTest = props => { polygon.setPaths(movepath) } else if (circle) { - var circlepath = radiusline.getPath(), - center = circle.getCenter(), + // var circlepath = radiusline.getPath(), + // center = circle.getCenter(), + // r = proj.getDistance(coord, center); + var center = circle.getCenter(), r = proj.getDistance(coord, center); - if (circlepath.getLength() === 2) { - circlepath.pop(); - } - circlepath.push(coord); + // if (circlepath.getLength() === 2) { + // circlepath.pop(); + // } + // circlepath.push(coord); circle.setRadius(r); } @@ -486,14 +401,16 @@ export const FlightPlanDrawTest = props => { }) if (polyline) { - bufferPolyline.setMap(null); - // bufferMove(); + var path = polyline.getPath()._array; + setPolyline(polyline); + setAreaInfo(path); + props.handleBufferList(); } if (polygon) { var path = polygon.getPath()._array; setPolygon(polygon); - // setAreaInfo(path, ''); + setAreaInfo(path); } $(document).off('mousemove.measure'); @@ -502,14 +419,15 @@ export const FlightPlanDrawTest = props => { if (circle) { // Eve.clickEve = naver.maps.Event.addListener(map, 'click', function(e) { onClickCircle(e); }) setEve(naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) })) - setCircle(circle); - setAreaInfo('', ''); + // setCircle(circle); + setCircle(prev => ([...prev, circle])) + setAreaInfo(''); } check = false; } - const setAreaInfo = (path, bufferpath) => { + const setAreaInfo = (path) => { areaInfo = { coordinates: [], bufferZone: 0, @@ -548,142 +466,6 @@ export const FlightPlanDrawTest = props => { // console.log(areaInfo, 'areaInfo') } - const bufferTest = () => { - let pol = polyline.getPath()._array; //latlng point 다 준건가? - - let lineStringPaths = []; - for (let i = 0; i < pol.length; i++) { - // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToEPSG3857(pol[i])) - // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToNaver(pol[i])) - // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToTM128(pol[i])) - // lineStringPaths.push(naver.maps.TransCoord.fromLatLngToUTMK(pol[i])) - - // lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToLatLng(naver.maps.Point(pol[i].x, pol[i].y))) - // lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToNaver(naver.maps.Point(pol[i].x, pol[i].y))) - // lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToTM128(naver.maps.Point(pol[i].x, pol[i].y))) - // lineStringPaths.push(naver.maps.TransCoord.fromEPSG3857ToUTMK(naver.maps.Point(pol[i].x, pol[i].y))) - - - - lineStringPaths.push([pol[i].x, pol[i].y]); - } - // console.log(map.getProjection().getProjectionName()); - // console.log(map.getProjection()) - // console.log(map.getPrimitiveProjection()) - - // console.log(lineStringPaths) - - //옆에 화면에 라이브러리 활용해서 제발 성공하자.. - let bufferRadius = 100; - const wkt = 'LINESTRING (126.6061581 37.5218642, 126.6061581 37.518052)' - let coords = { - "type": "LineString", - "coordinates": lineStringPaths - }; - const bufferCenter = new JSTSWKTReader().read(wkt) - const bufferResult = JSTSBufferOp.bufferOp( - bufferCenter, - bufferRadius - ) - - const bufferResultGeoJSON = new GeoJSONWriter().write(bufferResult) - - // bufferPolyline = new naver.maps.Polyline({ - // strokeColor: '#ff0000', - // strokeColor: '#283046', - // strokeWeight: 2, - // strokeStyle: [4, 4], - // strokeOpacity: 1, - // path : bufferPaths, - // // path: [ - - // // ], - // map: map - // }); - } - - const bufferMove = () => { - console.log('bufferMove') - - //버퍼 생성에 필요한 coordinates 배열 변환 - let pol = polyline.getPath()._array; - - let lineStringPaths = []; - for (let i = 0; i < polyline.getPath().length; i++) { - lineStringPaths.push([pol[i].x, pol[i].y]); - } - console.log(lineStringPaths, 'polyline path') - - // //버퍼 생성을 위한 line 객체 - // const originalGeojson = { - // type: "FeatureCollection", - // features: [ - // { - // type: "Feature", - // properties: {}, - // geometry: { - // type: "LineString", - // coordinates: lineStringPaths - // } - // } - // ] - // }; - // // console.log(originalGeojson, 'Feature type Object') - - // //버퍼 객체 - // const bufferObj = buffer(originalGeojson, 50, {units:'meters'}); - - // //버퍼 라인 생성 - // let bufferPath = bufferObj.features[0].geometry.coordinates[0]; - // // console.log(bufferPath, 'buffer path') - - // bufferPolyline = new naver.maps.Polyline({ - // // strokeColor: '#ff0000', - // strokeColor: '#283046', - // strokeWeight: 2, - // strokeStyle: [4, 4], - // strokeOpacity: 1, - // path : bufferPath, - // map: map - // }); - - //------------------------ - - let coords = { - "type": "LineString", - "coordinates": lineStringPaths - }; - - const reader = new GeoJSONReader(); - const writer = new GeoJSONWriter(); - - const distance = (100 * 0.001) / 111.12; //100미터 - const line = reader.read(coords); - const buffer = BufferOp.bufferOp(line, distance, 0, 3); - - let bufferpath = buffer._shell._points._coordinates; - - let bufferPaths = []; - for (let i = 0; i < bufferpath.length; i++) { - bufferPaths.push([bufferpath[i].x, bufferpath[i].y]); - } - console.log(bufferPaths, 'bufferPaths') - - bufferPolyline = new naver.maps.Polyline({ - strokeColor: '#ff0000', - strokeColor: '#283046', - strokeWeight: 2, - strokeStyle: [4, 4], - strokeOpacity: 1, - path: bufferPaths, - map: map - }); - // setAreaInfo(polyline.getPath()._array, bufferPath); - setAreaInfo(polyline.getPath()._array, bufferPaths); - setPolyline(polyline); - setBuffer(bufferPolyline) - } - const onClickReset = () => { console.log('onClickRest - ', mapControl.drawType); if (mapControl.drawType === 'RESET') { @@ -692,8 +474,10 @@ export const FlightPlanDrawTest = props => { } const handleDetailDrwa = () => { + if (props.areaCoordList) { + console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>') + - if (props.areaCoordList) { const areas = props.areaCoordList[0]; const paths = []; @@ -705,6 +489,11 @@ export const FlightPlanDrawTest = props => { }); if (areas.areaType && areas.areaType === 'LINE') { + //polyline 생성 + if(pastPolyline) { + pastPolyline.setMap(null); + pastDragCircle.forEach(c => c.setMap(null)); + } polyline = new naver.maps.Polyline({ strokeLineCap: 'round', strokeLineJoin: 'round', @@ -717,6 +506,25 @@ export const FlightPlanDrawTest = props => { setPolyline(polyline) + //dragCircle 생성 + for(let i = 0; i < paths.length; i++) { + dragCircle.push( + new naver.maps.Circle({ + strokestrokeOpacity: 1, + strokeColor: '#000000', + fillColor: '#ffffff', + fillOpacity: 1, + center: paths[i], + radius: 15, + map: map, + clickable: true + }) + ) + dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) })) + } + + setDragCircle(dragCircle); + if (areas.bufferCoordList) { const bufferPaths = []; @@ -727,25 +535,31 @@ export const FlightPlanDrawTest = props => { }); console.log('buffer test : ',areas.bufferCoordList); - if(pastPolygon) { - pastPolygon.setMap(null); + if(pastBuffer) { + pastBuffer.setMap(null); } - polygon = new naver.maps.Polygon({ + // console.log(bufferPaths) + //bufferline 생성 + bufferPolygon = new naver.maps.Polyline({ strokeColor: '#283046', strokeOpacity: 1, - fillColor: '#7367F0', - fillOpacity: 0.1, - paths: bufferPaths, + // fillColor: '#7367F0', + // fillOpacity: 0.1, + path: bufferPaths, map: map }); - console.log(polygon); - - setPolygon(polygon); + // console.log(bufferPolygon); + setBuffer(bufferPolygon); } } if (areas.areaType && areas.areaType === 'POLYGON') { + //polygon 생성 + if(pastPolygon) { + pastPolygon.setMap(null); + pastDragCircle.forEach(c => c.setMap(null)); + } polygon = new naver.maps.Polygon({ strokeColor: '#283046', strokeOpacity: 1, @@ -756,12 +570,47 @@ export const FlightPlanDrawTest = props => { }); setPolygon(polygon); + + //dragCircle 생성 + for(let i = 0; i < paths.length; i++) { + dragCircle.push( + new naver.maps.Circle({ + strokestrokeOpacity: 1, + strokeColor: '#000000', + fillColor: '#ffffff', + fillOpacity: 1, + center: paths[i], + radius: 15, + map: map, + clickable: true + }) + ) + dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) })) + } + + setDragCircle(dragCircle); } if (areas.areaType && areas.areaType === 'CIRCLE') { + //circle 생성 + if(pastCircle) { + // pastCircle.setMap(null); + console.log(pastCircle) + pastCircle.forEach(prev => prev.setMap(null)); + } + if(circle) { + circle.setMap(null); + } + // radiusline = new naver.maps.Polyline({ + // strokeStyle: [4, 4], + // strokeOpacity: 0.6, + // path: [coord], + // map: map + // }) circle = new naver.maps.Circle({ strokeColor: '#283046', strokeOpacity: 1, + // fillColor: '#ff0000', fillColor: '#7367F0', fillOpacity: 0.1, center: paths[0], @@ -769,12 +618,58 @@ export const FlightPlanDrawTest = props => { map: map, clickable: true }); + Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); }) - setCircle(circle); + setCircle([circle]); } } } + const addMileStone = (coord, text, css) => { + if(distanceMarker) distanceMarker = []; + + let content; + if(text == 'Start') { + content = '
'+ text +'
' + } else { + content = '
'+ text +'
' + } + + var _ms = new naver.maps.Marker({ + position: coord, + icon: { + content: content, + anchor: new naver.maps.Point(-5, -5) + }, + map: map + }); + + var msElement = $(_ms.getElement()); + + if(css) { + msElement.css(css); + } else { + msElement.css('font-size', '13px'); + } + + distanceMarker.push(_ms); + setMarker(prev => ([...prev, _ms])) + } + + const fromMetersToText = (meters) => { + meters = meters || 0; + + var km = 1000, + text = meters; + + if(meters >= km) { + text = parseFloat((meters / km).toFixed(1)) + 'km'; + } else { + text = parseFloat(meters.toFixed(1)) + 'm'; + } + return text; + } + return ( <> From 377bb784799a7c1aea84d5f16de8fc6202b800bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?scnoh=28=EB=85=B8=EC=8A=B9=EC=B2=A0=29?= Date: Tue, 2 Aug 2022 19:46:47 +0900 Subject: [PATCH 21/21] =?UTF-8?q?=EB=B9=84=ED=96=89=20=EA=B5=AC=EC=97=AD?= =?UTF-8?q?=20=EC=B4=88=EA=B8=B0=ED=99=94=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../basis/flight/plan/FlightPlanForm.js | 1 + .../map/naver/draw/FlightPlanDrawTest.js | 3 +-- .../basis/flight/plan/FlightPlanAreaContainer.js | 2 +- .../flight/plan/FlightPlanAreaDetailContainer.js | 2 +- .../basis/flight/plan/FlightPlanContainer.js | 7 +++++-- .../flight/plan/FlightPlanDetailContainer.js | 16 ++++++++++++---- .../basis/flight/actions/basisFlightAction.ts | 9 ++++++++- .../basis/flight/reducers/basisFlightReducer.ts | 11 +++++++++-- 8 files changed, 38 insertions(+), 13 deletions(-) diff --git a/src/components/basis/flight/plan/FlightPlanForm.js b/src/components/basis/flight/plan/FlightPlanForm.js index 8ede4e8..3487aa3 100644 --- a/src/components/basis/flight/plan/FlightPlanForm.js +++ b/src/components/basis/flight/plan/FlightPlanForm.js @@ -18,6 +18,7 @@ import { FlightPlanModal } from './FlightPlanModal'; import FlightPlanArcrftContainer from '../../../../containers/basis/flight/plan/FlightPlanArcrftContainer'; import FlightPlanAreaContainer from '../../../../containers/basis/flight/plan/FlightPlanAreaContainer'; import { X } from 'react-feather'; +import { useDispatch } from 'react-redux'; const FlightPlanForm = ({data, handleModal, handleChange, handleSave, handleDelete, modal, handleDeleteArray }) => { diff --git a/src/components/map/naver/draw/FlightPlanDrawTest.js b/src/components/map/naver/draw/FlightPlanDrawTest.js index 6a59029..da4df93 100644 --- a/src/components/map/naver/draw/FlightPlanDrawTest.js +++ b/src/components/map/naver/draw/FlightPlanDrawTest.js @@ -475,8 +475,7 @@ export const FlightPlanDrawTest = props => { const handleDetailDrwa = () => { if (props.areaCoordList) { - console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>') - + console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>') const areas = props.areaCoordList[0]; diff --git a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js index 0d457e7..3ae27cb 100644 --- a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js @@ -29,7 +29,7 @@ const FlightPlanAreaContainer = ({handleModal}) => { dispatch(Actions.AREA_COORDINATE_LIST_SAVE(areaList)) } - useEffect(() => { + useEffect(() => { dispatch(drawTypeChangeAction('')); getAirAreaList(); }, []); diff --git a/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js index 9091b5d..c6e5443 100644 --- a/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanAreaDetailContainer.js @@ -9,7 +9,7 @@ import {initFlightBas} from '../../../../modules/basis/flight/models/basisFlight const FlightPlanAreaDetailContainer = ({ handleModal }) => { const dispatch = useDispatch(); - const { areaCoordList, areaList, detail } = useSelector(state => state.flightState); + const { areaCoordList, detail } = useSelector(state => state.flightState); const [areaDetail, setAreaDetail] = useState(initFlightBas.initDetail.areaList); const handleClose = (status) => { diff --git a/src/containers/basis/flight/plan/FlightPlanContainer.js b/src/containers/basis/flight/plan/FlightPlanContainer.js index 83d583b..033ea4c 100644 --- a/src/containers/basis/flight/plan/FlightPlanContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanContainer.js @@ -13,7 +13,7 @@ import FlightPlanGroupGrid from '../../../../components/basis/flight/plan/Flight const initSearchData = { - schFltStDt: moment().set({'date': 1, 'h': 0, 'm': 0, 's': 0}).format('YYYY-MM-DD HH:mm:ss'), + schFltStDt: moment().set({'m': 7, 'date': 1, 'h': 0, 'm': 0, 's': 0}).format('YYYY-MM-DD HH:mm:ss'), schFltEndDt: moment().set({'h': 23, 'm': 59, 's': 59}).format('YYYY-MM-DD HH:mm:ss'), aprvlYn: 'N', groupId: '', @@ -24,7 +24,7 @@ const FlightPlanContainer = () => { const dispatch = useDispatch(); const history = useHistory(); const [searchData, setSerchData] = useState(initSearchData); - const {list: planListData, detail: planDetailData, selectGroup} = useSelector(state => state.flightState); + const {list: planListData, detail: planDetailData, selectGroup, areaCoordList } = useSelector(state => state.flightState); const { joinList, joinListCount } = useSelector(state => state.groupState); const { user } = useSelector(state => state.authState, shallowEqual); @@ -35,6 +35,9 @@ const FlightPlanContainer = () => { if(planDetailData){ dispatch(FlightAction.FLIGHT_PLAN_DETAIL_INIT()); } + if(areaCoordList) { + dispatch(FlightAction.AREA_DETAIL_INIT()); + } history.push('/basis/flight/plan/create'); }; diff --git a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js index f27539b..fd9d613 100644 --- a/src/containers/basis/flight/plan/FlightPlanDetailContainer.js +++ b/src/containers/basis/flight/plan/FlightPlanDetailContainer.js @@ -101,7 +101,7 @@ const FlightPlanDetailContainer = () => { } }, [arcrftSelect]) - useEffect(() => { + useEffect(() => { if(areaList !== undefined) { const areas = detailData.areaList.concat(); @@ -135,17 +135,25 @@ const FlightPlanDetailContainer = () => { ...prevState, ['areaList']: createAreaList } - }) + }) + + // dispatch(Actions.AREA_DETAIL_INIT()); } }, [areaList]); useEffect(() => { // 조종사, 기체 정보 Redux 초기화 - dispatch(Actions.PILOT_ARCRFT_SELECT_INIT()); - }) + dispatch(Actions.PILOT_ARCRFT_SELECT_INIT()); + }, []); const handleModal = (modal) => { + if(modal.target === 'area' && modal.isOpen) { + if(detailData.areaList) { + dispatch(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.request(detailData.areaList)); + } + } + setModal(prevState => ({ ...initModal, [modal.target]: modal.isOpen diff --git a/src/modules/basis/flight/actions/basisFlightAction.ts b/src/modules/basis/flight/actions/basisFlightAction.ts index 469fd19..3202115 100644 --- a/src/modules/basis/flight/actions/basisFlightAction.ts +++ b/src/modules/basis/flight/actions/basisFlightAction.ts @@ -75,6 +75,9 @@ const AREA_DETAIL_LIST = 'basis/flight/plan/area/DETAIL_LIST'; // 비행계획서 그룹 선택 const ROUP_SELECT = 'basis/flight/plan/group/select'; +// 조종사, 기체 선택 초기화 +const AREA_DETAIL_INITIAL = 'basis/flight/plan/detail/AREA_DETAIL_INIT'; + // 버퍼 좌표 가져오기 const AREA_BUFFER_LIST_REQUEST = 'basis/flight/plan/area/BUFFER_LIST_REQUEST'; const AREA_BUFFER_LIST_SUCCESS = 'basis/flight/plan/area/BUFFER_LIST_SUCCESS'; @@ -160,6 +163,9 @@ export const AREA_DETAIL_LIST_SAVE = createAction(AREA_DETAIL_LIST)(); +// 비행 구역 상세 값 초기화 +export const AREA_DETAIL_INIT = createAction(AREA_DETAIL_INITIAL)(); + // 버퍼 좌표 가져오기 export const FLIGHT_PLAN_AREA_BUFFER_LIST = createAsyncAction( AREA_BUFFER_LIST_REQUEST, @@ -184,7 +190,8 @@ const actions = { AREA_COORDINATE_LIST_SAVE, AREA_DETAIL_LIST_SAVE, FLIGHT_PLAN_GROUP_SELECT, - FLIGHT_PLAN_AREA_BUFFER_LIST + FLIGHT_PLAN_AREA_BUFFER_LIST, + AREA_DETAIL_INIT }; export type FlightAction = ActionType; diff --git a/src/modules/basis/flight/reducers/basisFlightReducer.ts b/src/modules/basis/flight/reducers/basisFlightReducer.ts index 1f47a09..9f87ac1 100644 --- a/src/modules/basis/flight/reducers/basisFlightReducer.ts +++ b/src/modules/basis/flight/reducers/basisFlightReducer.ts @@ -71,7 +71,7 @@ export const flightReducer = createReducer(in produce(state, draft => { draft.arcrftSelect = undefined; draft.pilotSelect = undefined; - draft.areaList = undefined; + // draft.areaList = undefined; // draft.areaCoordList = undefined; }) ) @@ -97,10 +97,17 @@ export const flightReducer = createReducer(in draft.selectGroup = data; }) ) - // 비행 계획서 그룹 선택 + // 비행 계획서 버퍼 영역 조회 .handleAction(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.success, (state, action) => produce(state, draft => { const data = action.payload; draft.areaCoordList = data; }) ) + // 조종사, 기체 선택 초기화 + .handleAction(Actions.AREA_DETAIL_INIT, (state, action) => + produce(state, draft => { + draft.areaList = undefined; + draft.areaCoordList = undefined; + }) + )