diff --git a/src/components/map/naver/dron/DronHistory.js b/src/components/map/naver/dron/DronHistory.js index ca5a102..16a2f27 100644 --- a/src/components/map/naver/dron/DronHistory.js +++ b/src/components/map/naver/dron/DronHistory.js @@ -1,12 +1,12 @@ -import { useEffect } from 'react'; +import { object } from 'prop-types'; +import { useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { controlGpHisAction } from '../../../../modules/control/gp'; export const DronHistory = props => { const { controlGpHistory } = useSelector(state => state.controlGpHisState); - const { objectId, isClickObject } = useSelector( - state => state.controlMapReducer - ); + const { controlGpList } = useSelector(state => state.controlGpState); + const { objectId, isClickObject } = useSelector(state => state.controlMapReducer); let naver = props.naver; let polyline; @@ -14,8 +14,26 @@ export const DronHistory = props => { const dispatch = useDispatch(); - useEffect(() => { - polylineInit(); + useEffect(() => { + if(objectId && isClickObject) { + const gps = controlGpList.find((gps) => gps.controlId === objectId) + + if(gps) { + const addHistory = { + objectId: gps.objectId, + lat: gps.lat, + lng: gps.lng + } + + const history = [...controlGpHistory, addHistory]; + + polylineInit(history); + } + } + }, [controlGpList]); + + useEffect(() => { + polylineInit(controlGpHistory) }, [controlGpHistory]); useEffect(() => { @@ -26,16 +44,15 @@ export const DronHistory = props => { } }, [objectId, isClickObject]); - const polylineRemove = () => { - // console.log(props.arrPolyline); + const polylineRemove = () => { if (props.arrPolyline) { props.arrPolyline.map(item => { item.setMap(null); }); } }; - const polylineInit = () => { - if (controlGpHistory) { + const polylineInit = (history) => { + if (history) { polyline = new naver.maps.Polyline({ clickable: false, strokeColor: '#ff4961', @@ -44,12 +61,11 @@ export const DronHistory = props => { strokeWeight: 1.5 }); - controlGpHistory.map(item => { + history.map(item => { if (item.lat > 0 && item.lng > 0) { const position = new naver.maps.LatLng(item.lat, item.lng); polylinePath.push(position); - } - // console.log('>>>>>>>>>>>', item); + } }); polyline.setPath(polylinePath); diff --git a/src/modules/control/gp/sagas/controlGpSaga.ts b/src/modules/control/gp/sagas/controlGpSaga.ts index 2feddb2..8618410 100644 --- a/src/modules/control/gp/sagas/controlGpSaga.ts +++ b/src/modules/control/gp/sagas/controlGpSaga.ts @@ -6,6 +6,7 @@ import * as Actions from '../actions/controlGpAction'; import { controlGpApi } from '../apis/controlGpApi'; import decode from 'jwt-decode'; import { ControlGpData } from '../models/controlGpModel'; +import { detail } from '../../../analysis/history/actions/analysisHistoryAction'; function* getControlGpSaga( action: ActionType @@ -35,7 +36,7 @@ function* getControlGpSaga( }); } - console.log('gps>>>> ', data); + // console.log('gps>>>> ', gpsData); yield put( Actions.controlGpAction.success({ @@ -43,7 +44,8 @@ function* getControlGpSaga( }) ); - if (objectId && isClickObject) { + if (objectId && isClickObject) { + console.log(' mm ;;') let detailData; //상세 정보에서 실시간 데이터 호출 @@ -52,21 +54,8 @@ function* getControlGpSaga( detailData = item; } }); - - yield put(Actions.controlGpRtDtlAction.request(detailData)); - - // History Push - if(controlGpHistory) { - const stateHistory = controlGpHistory; - const history = stateHistory.map((h) => { - return { - ...h, - detailData - } - }); - - yield put(Actions.controlGpHisAction.success(history)); - } + + yield put(Actions.controlGpRtDtlAction.request(detailData)); } } catch (error) { yield put(Actions.controlGpAction.failure(error));