From 692301a478df5bb68abf62ff1db61072b8c10b30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kimjh=28=EA=B9=80=EC=9E=A5=ED=98=84=29?= Date: Wed, 28 Sep 2022 15:47:20 +0900 Subject: [PATCH] =?UTF-8?q?console=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../menu/vertical-menu/VerticalNavMenuLink.js | 2 - .../components/menu/vertical-menu/index.js | 1 - .../layouts/components/navbar/UserDropdown.js | 12 +- .../account/register/AccountRegister.js | 1 - .../account/register/AccountRegisterForm.js | 7 - .../account/register/AccountRegisterTerm.js | 2 - .../analysis/simulation/AnalysimuationInfo.js | 2 - .../simulation/AnalysisSimulationMenu.js | 4 +- .../simulation/AnalysisSimulationReport.js | 91 ++- .../basis/flight/plan/FlightPlanForm.js | 7 - .../crud/excel/ExcelExportButton.js | 1 - src/components/map/MapControl.js | 1 - src/components/map/google/GoogleMap.js | 4 +- src/components/map/naver/NaverMapControl.js | 6 +- .../map/naver/draw/FlightPlanDraw.js | 478 +++++++------ .../map/naver/draw/FlightPlanDraw_JQuery.js | 389 ++++++----- .../map/naver/draw/FlightPlanDraw_Test.js | 490 +++++++------ src/components/map/naver/dron/DronMarker.js | 641 +++++++++--------- src/components/map/naver/dron/DronToast.js | 140 ++-- .../map/naver/feature/FeatureAirZone.js | 6 +- .../map/naver/search/NaverMapSearch.js | 2 - src/components/map/naver/sensor/SensorZone.js | 178 +++-- src/components/map/nhn/NMap.js | 7 +- src/components/map/nhn/NMapMarker.js | 8 +- src/components/map/nhn/NMapPolyline.js | 3 - src/components/mapDraw/MapControlDraw.js | 1 - src/components/mapDraw/google/GoogleMap.js | 5 +- .../mapDraw/naver/NaverMapControl.js | 9 +- src/components/mapDraw/naver/draw/DrawMap.js | 92 ++- .../mapDraw/naver/draw/JQueryDraw.js | 386 ++++++----- .../mapDraw/naver/dron/DronHistory.js | 2 - .../mapDraw/naver/dron/DronMarker.js | 11 +- .../mapDraw/naver/feature/FeatureAirZone.js | 6 +- .../mapDraw/naver/search/NaverMapSearch.js | 2 - .../mapDraw/naver/sensor/SensorZone.js | 180 +++-- src/components/mapDraw/nhn/NMap.js | 7 +- src/components/mapDraw/nhn/NMapMarker.js | 4 - src/components/mapDraw/nhn/NMapPolyline.js | 3 - src/components/message/MessageErrorModal.js | 2 +- src/components/message/MessageInfoModal.js | 2 +- src/components/websocket/WebsocketClient.js | 14 +- .../account/mypage/AccountMypageContainer.js | 7 +- .../simulator/AnalysisSimulationContainer.js | 9 - .../basis/dron/BasisDronContainer.js | 1 - .../basis/dron/BasisDronDetailContainer.js | 1 - .../flight/aprv/FlightPlanAprvContainer.js | 2 +- .../basis/group/BasisGroupDetailContainer.js | 2 +- .../basis/group/BasisGroupUsersContainer.js | 6 +- .../system/auth/SystemAuthContainer.js | 4 +- .../system/code/SystemCodeContainer.js | 1 - .../system/menu/SystemMenuContainer.js | 1 - .../system/user/SystemUserContainer.js | 4 +- src/modules/account/login/apis/authApi.ts | 20 +- src/modules/account/login/sagas/authSaga.ts | 20 +- .../account/login/service/jwtTokenUtil.ts | 14 +- .../account/register/apis/accountApi.ts | 3 +- .../register/reducers/accountReducer.ts | 4 +- .../account/register/sagas/accountSaga.ts | 7 - .../history/apis/annalysisHistoryApi.ts | 2 +- src/modules/control/gp/sagas/controlGpSaga.ts | 325 ++++----- src/modules/menu/reducers/menuReducer.ts | 2 +- src/modules/utils/customAxiosUtil.ts | 7 - src/redux/reducers/navbar/index.js | 1 - src/router/Router.js | 1 - src/utility/hooks/useFooterType.js | 24 +- src/utility/hooks/useLayout.js | 41 +- src/utility/hooks/useNavbarColor.js | 24 +- src/utility/hooks/useNavbarType.js | 24 +- src/utility/hooks/useRTL.js | 29 +- src/utility/hooks/useRouterTransition.js | 24 +- src/utility/hooks/useSkin.js | 37 +- src/views/account/AccountRegisterView.js | 1 - src/views/control/main/ControlMain.js | 17 +- .../control/report/ControlReportDetail.js | 26 +- src/views/control/report/ControlReportList.js | 8 +- src/views/testDraw/main/ControlMainDraw.js | 13 +- .../testDraw/report/ControlReportDetail.js | 3 +- .../testDraw/report/ControlReportList.js | 6 - src/views/testDraw/setting/ControlSetting.js | 17 +- test/pav-100-dron.js | 155 +++-- 80 files changed, 2109 insertions(+), 1993 deletions(-) diff --git a/src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuLink.js b/src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuLink.js index 149c465f..5588def3 100644 --- a/src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuLink.js +++ b/src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuLink.js @@ -34,8 +34,6 @@ const VerticalNavMenuLink = ({ const naviData = [...basis, ...statics, ...system, ...analysis]; - // console.log(naviData); - // ** To match path const match = matchPath(currentURL, { path: `${item.navLink}/:param`, diff --git a/src/@core/layouts/components/menu/vertical-menu/index.js b/src/@core/layouts/components/menu/vertical-menu/index.js index 792aba7b..7b4c828d 100644 --- a/src/@core/layouts/components/menu/vertical-menu/index.js +++ b/src/@core/layouts/components/menu/vertical-menu/index.js @@ -23,7 +23,6 @@ const Sidebar = props => { const { topMenuCd } = useSelector(state => state.menuState); useEffect(() => { - // console.log('>>>>>>>>>>>>>>', topMenuCd); navData(); }, [topMenuCd]); diff --git a/src/@core/layouts/components/navbar/UserDropdown.js b/src/@core/layouts/components/navbar/UserDropdown.js index 95c14c27..04214b81 100644 --- a/src/@core/layouts/components/navbar/UserDropdown.js +++ b/src/@core/layouts/components/navbar/UserDropdown.js @@ -31,7 +31,6 @@ const UserDropdown = () => { }; // useEffect(() => { - // console.log('[ISLOGIN :::::: ] ', isLogin); // if (isLogin === undefined) { // return; // } @@ -54,11 +53,11 @@ const UserDropdown = () => { //** Vars const userAvatar = (userData && userData.avatar) || defaultAvatar; - + const movePage = url => { history.push(url); }; - + const profileInfo = () => { history.push('/mypage/myinfo/'); }; @@ -78,9 +77,12 @@ const UserDropdown = () => { - + to='#' + > Profile diff --git a/src/components/account/register/AccountRegister.js b/src/components/account/register/AccountRegister.js index f2b6b5b9..94480ff5 100644 --- a/src/components/account/register/AccountRegister.js +++ b/src/components/account/register/AccountRegister.js @@ -11,7 +11,6 @@ export const AccountRegister = ({ props }) => { const [memberName, setMemberName] = useState(); const ref = useRef(null); - // console.log(props); const movePage = url => { props.history.push(url); }; diff --git a/src/components/account/register/AccountRegisterForm.js b/src/components/account/register/AccountRegisterForm.js index dbc2c8f4..6aa000e1 100644 --- a/src/components/account/register/AccountRegisterForm.js +++ b/src/components/account/register/AccountRegisterForm.js @@ -124,8 +124,6 @@ export const AccountRegisterForm = ({ return; } - // console.log(res); - if (isRunning) { clearInterval(timer); } @@ -139,7 +137,6 @@ export const AccountRegisterForm = ({ }; useEffect(() => { - // console.log('isRunning>>>', isRunning); if (isRunning) { clearInterval(timer); } else { @@ -233,8 +230,6 @@ export const AccountRegisterForm = ({ agreeTerms: agreeTerms }); - // console.log(res); - if (res.data?.errCode === -1) { setModal({ isOpen: true, @@ -243,7 +238,6 @@ export const AccountRegisterForm = ({ }); return; } - // console.log('res>>>', res.data?.err); if (res.data?.errCode === 1) { stepper.next(); @@ -296,7 +290,6 @@ export const AccountRegisterForm = ({ let hpno = ''; let brthdyDate = ''; const onChangeHandler = e => { - // console.log(register); const { name, value } = e.target; if (name === 'memberName') { diff --git a/src/components/account/register/AccountRegisterTerm.js b/src/components/account/register/AccountRegisterTerm.js index 10efc24f..3687aa99 100644 --- a/src/components/account/register/AccountRegisterTerm.js +++ b/src/components/account/register/AccountRegisterTerm.js @@ -138,8 +138,6 @@ export const AccountRegisterTerm = ({ stepper, type, movePage }) => { } } - // console.log(termChecked); - // console.log(!termAll); // setTermPrivacy(!termAll); // setTermService(!termAll); // setTermAll(!termAll); diff --git a/src/components/analysis/simulation/AnalysimuationInfo.js b/src/components/analysis/simulation/AnalysimuationInfo.js index a3f928e1..a7d29fc0 100644 --- a/src/components/analysis/simulation/AnalysimuationInfo.js +++ b/src/components/analysis/simulation/AnalysimuationInfo.js @@ -8,12 +8,10 @@ export const AnalysimuationInfo = props => {
표시할 데이터가 없습니다.
) : ( props.data?.map(item => { - // console.log( // item.idntfNum, // ':::', // item.idntfNum.indexOf(props.filterId) // ); - // console.log(item.idntfNum.indexOf(props.filterId)); if (item.idntfNum) { return ( diff --git a/src/components/analysis/simulation/AnalysisSimulationMenu.js b/src/components/analysis/simulation/AnalysisSimulationMenu.js index 7bd408b0..5ffcde5d 100644 --- a/src/components/analysis/simulation/AnalysisSimulationMenu.js +++ b/src/components/analysis/simulation/AnalysisSimulationMenu.js @@ -18,12 +18,12 @@ export const AnalysisSimulationMenu = props => { {/*
  • -
  • -
    • */} diff --git a/src/components/analysis/simulation/AnalysisSimulationReport.js b/src/components/analysis/simulation/AnalysisSimulationReport.js index d1b29c78..dcae0b09 100644 --- a/src/components/analysis/simulation/AnalysisSimulationReport.js +++ b/src/components/analysis/simulation/AnalysisSimulationReport.js @@ -5,59 +5,58 @@ import Flatpickr from 'react-flatpickr'; import { Button, Input, InputGroup } from 'reactstrap'; export const AnalysisSimulationReport = props => { - // console.log(props.params); const [filterId, setFilterId] = useState(''); - - return ( - -
    -
    -

    비행 Simulation

    - +
    +
    +

    비행 Simulation

    + +
    +
    +
    + 검색하실 날짜 정보 또는 드론 식별번호를 입력해 주세요.
    -
    -
    - 검색하실 날짜 정보 또는 드론 식별번호를 입력해 주세요. -
    -
    -
    - +
    + props.handlerInput('searchDate', val)} - className='form-control flat-picker bg-transparent border-0 shadow-none' - /> - -
    -
    -
    - - setFilterId(`${e.target.value}`)} - /> - -
    -
    - + options={{ + mode: 'range', + defaultDate: [props.params.stDate, props.params.endDate] + }} + onChange={val => props.handlerInput('searchDate', val)} + className='form-control flat-picker bg-transparent border-0 shadow-none' + /> +
    +
    + + setFilterId(`${e.target.value}`)} + /> + +
    +
    + +
    - +
    ); }; diff --git a/src/components/basis/flight/plan/FlightPlanForm.js b/src/components/basis/flight/plan/FlightPlanForm.js index 43fd8155..fdb9130d 100644 --- a/src/components/basis/flight/plan/FlightPlanForm.js +++ b/src/components/basis/flight/plan/FlightPlanForm.js @@ -45,12 +45,9 @@ const FlightPlanForm = ({ // const schema = yup.object().shape({}); useEffect(() => { - // console.log(detail); if (detail?.createUserId == user?.cstmrSno || !detail.createUserId) { - // console.log(true) setTest(false); } else { - // console.log(false) setTest(true); } }, [detail]); @@ -696,10 +693,8 @@ const PilotForm = ({ data, handleChange, index, handleDeleteArray }) => { useEffect(() => { if (detail?.createUserId == user?.cstmrSno || !detail.createUserId) { - // console.log(true) setTest(false); } else { - // console.log(false) setTest(true); } }, [detail]); @@ -834,10 +829,8 @@ const ArcrftForm = ({ data, handleChange, index, handleDeleteArray }) => { useEffect(() => { if (detail?.createUserId == user?.cstmrSno || !detail.createUserId) { - // console.log(true) setTest(false); } else { - // console.log(false) setTest(true); } }, [detail]); diff --git a/src/components/crud/excel/ExcelExportButton.js b/src/components/crud/excel/ExcelExportButton.js index 54762410..f5f99ace 100644 --- a/src/components/crud/excel/ExcelExportButton.js +++ b/src/components/crud/excel/ExcelExportButton.js @@ -3,7 +3,6 @@ import { CSVLink, CSVDownload } from 'react-csv'; import { Button } from 'reactstrap'; import { File } from 'react-feather'; export const ExcelExportButton = props => { - // console.log(props); return ( { - // console.log('```````````````````````'); return ( <>{props.mapType === 'google' ? : } ); diff --git a/src/components/map/google/GoogleMap.js b/src/components/map/google/GoogleMap.js index cc180479..cc419b5f 100644 --- a/src/components/map/google/GoogleMap.js +++ b/src/components/map/google/GoogleMap.js @@ -17,8 +17,7 @@ const MapInit = () => { const { controlGpList } = useSelector(state => state.controlGpState); const [bounds, setBounds] = useState(null); - useEffect(() => { - }, [controlGpList]); + useEffect(() => {}, [controlGpList]); const onSearchBoxMounted = () => {}; const onPlacesChanged = () => {}; @@ -49,7 +48,6 @@ export const GoogleCustomMap = () => { url: 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing,geometryplaces' }; - // console.log(`${mapProps.url}&key=${mapProps.key}`); return (
    { const mapControl = useSelector(state => state.controlMapReducer); // useEffect(() => { - // console.log('>>>>', props.map); + // }, []); - useEffect(() => { - // console.log('mapControl>>>>>>>>>>', mapControl); - }, [mapControl]); + useEffect(() => {}, [mapControl]); //맵타입 변경 if (mapControl.mapType === 'NORMAL') { diff --git a/src/components/map/naver/draw/FlightPlanDraw.js b/src/components/map/naver/draw/FlightPlanDraw.js index 0286ed2e..5d8a7a91 100644 --- a/src/components/map/naver/draw/FlightPlanDraw.js +++ b/src/components/map/naver/draw/FlightPlanDraw.js @@ -17,7 +17,7 @@ export const FlightPlanDraw = props => { const [pastClickEve, setClickEve] = useState(); const [pastMarker, setMarker] = useState([]); - + const [figure, setFigure] = useState(); const [areaDetail, setAreaDetail] = useState(); @@ -26,13 +26,13 @@ export const FlightPlanDraw = props => { isOpen: false, title: '', desc: '' - }) + }); const naver = props.naver; const map = props.map; let mode = props.mode; let dragCircleSize = props.dragCircleSize; - + let areaInfo; let lastDistance; @@ -49,7 +49,7 @@ export const FlightPlanDraw = props => { clickEve: '', mousedownEve: '', rightclickEve: '' - } + }; let dragCircle = []; let dragCircleEve = []; @@ -58,28 +58,28 @@ export const FlightPlanDraw = props => { const handleBufferList = () => { dispatch(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.request(areaDetail)); - } + }; useEffect(() => { drawInit(); - }, [mapControl.drawType]) - + }, [mapControl.drawType]); + useEffect(() => { handleDetailDraw(); - }, [props.areaCoordList]) + }, [props.areaCoordList]); useEffect(() => { - if(figure) { + if (figure) { props.handleConfirm(props.areaCoordList); setAreaDetail(props.areaCoordList); } - }, [figure]) - + }, [figure]); + useEffect(() => { - if(pastPolyline) { + if (pastPolyline) { handleBufferList(); } - }, [areaDetail]) + }, [areaDetail]); const drawInit = () => { if (mapControl.drawType === 'LINE') { @@ -89,13 +89,11 @@ export const FlightPlanDraw = props => { } else if (mapControl.drawType === 'POLYGON') { onClickButton('POLYGON'); } else if (mapControl.drawType === 'RESET') { - onClickReset('RESET') + onClickReset('RESET'); } - } - - const onClickButton = (newMode) => { - //console.log('onClickButton'); + }; + const onClickButton = newMode => { clearMode(mode); if (mode === newMode) { @@ -103,18 +101,15 @@ export const FlightPlanDraw = props => { return; } - // mode = newMode; + // mode = newMode; startMode(newMode); - } - - const clearMode = (mode) => { - //console.log('clearMode') + }; + const clearMode = mode => { // if(!mode) return; if (pastPolyline) { - // console.log('clear polyline ', pastPolyline) pastPolyline.setMap(null); pastDragCircle.forEach(c => c.setMap(null)); pastBuffer.setMap(null); @@ -123,14 +118,12 @@ export const FlightPlanDraw = props => { setBuffer(); } if (pastCircle.length != 0) { - //console.log('clear circle ', pastCircle) - pastCircle.forEach(prev => prev.setMap(null)) + pastCircle.forEach(prev => prev.setMap(null)); naver.maps.Event.removeListener(pastClickEve); setCircle([]); } if (pastPolygon) { - // console.log('clear polygon ', pastPolygon) pastPolygon.setMap(null); pastDragCircle.forEach(c => c.setMap(null)); @@ -138,38 +131,39 @@ export const FlightPlanDraw = props => { setDragCircle([]); } if (pastMarker.length != 0) { - // console.log('clear marker ', pastMarker) - pastMarker.forEach(m => m.setMap(null)) + pastMarker.forEach(m => m.setMap(null)); setMarker([]); } finishDraw(); - props.handleInitCoordinates(); - } - - const startMode = (mode) => { - // console.log('startMode') + props.handleInitCoordinates(); + }; + const startMode = mode => { if (!mode) return; - if(pastClickEve) { + if (pastClickEve) { naver.maps.Event.removeListener(pastClickEve); } 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); + }); setClickEve(Eve.clickEve); } 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); + }); setClickEve(Eve.clickEve); } else if (mode === 'CIRCLE') { - Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) }); + Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { + onClickCircle(e); + }); setClickEve(Eve.clickEve); } - } + }; const removeListener = () => { - // console.log('removeListener') - naver.maps.Event.removeListener(Eve.clickEve); naver.maps.Event.removeListener(pastClickEve); setClickEve(); @@ -177,10 +171,9 @@ export const FlightPlanDraw = props => { naver.maps.Event.removeListener(Eve.mousedownEve); naver.maps.Event.removeListener(Eve.rightclickEve); if (!circle) $(document).off('mousemove.measure'); - } + }; const finishDraw = () => { - //console.log('finishDraw') removeListener(); if (polyline) { @@ -191,8 +184,8 @@ export const FlightPlanDraw = props => { let polypaths = polyline.getPath()._array; - setMarker(distanceMarker) - distanceMarker.forEach(c => c.setMap(null)) + setMarker(distanceMarker); + distanceMarker.forEach(c => c.setMap(null)); if (polypaths.length >= 2) { setPolyline(polyline); @@ -202,14 +195,13 @@ export const FlightPlanDraw = props => { isOpen: true, title: '좌표 최소 개수', desc: '좌표를 두 개 점으로 이어주세요.' - }) + }); polyline.setMap(null); polyline = ''; } - setFigure(polyline) - + setFigure(polyline); } else if (polygon) { let path = polygon.getPath(); path.pop(); @@ -223,9 +215,9 @@ export const FlightPlanDraw = props => { // addMileStone(polygonpaths[0], fromMetersToText(distance - lastDistance)); setMarker(distanceMarker); - distanceMarker.forEach(c => c.setMap(null)) + distanceMarker.forEach(c => c.setMap(null)); - if(polygonpaths.length >= 3) { + if (polygonpaths.length >= 3) { setPolygon(polygon); setAreaInfo(polygonpaths); } else { @@ -233,17 +225,16 @@ export const FlightPlanDraw = props => { isOpen: true, title: '좌표 최소 개수', desc: '좌표를 세 개 점으로 이어주세요.' - }) - polygon.setMap(null) + }); + polygon.setMap(null); polygon = ''; } - setFigure(polygon) + setFigure(polygon); } - } + }; - const onClickPolyline = (e) => { - //console.log('onClickPolyline') + const onClickPolyline = e => { var coord = e.coord; if (!polyline) { @@ -269,24 +260,34 @@ export const FlightPlanDraw = props => { 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(); - addMileStone(coord, 'Start') + addMileStone(coord, 'Start'); } else { guideline.setPath([e.coord]); polyline.getPath().push(coord); var distance = polyline.getDistance(); // addMileStone(coord, fromMetersToText(distance - lastDistance)); - addMileStone(polyline.getPath()._array, fromMetersToText(distance - lastDistance)); + addMileStone( + polyline.getPath()._array, + fromMetersToText(distance - lastDistance) + ); lastDistance = distance; } - } + }; - const onMouseMovePolyline = (e) => { - // console.log('onMouseMovePolyline') + const onMouseMovePolyline = e => { var proj = map.getProjection(), coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), path = guideline.getPath(); @@ -296,10 +297,9 @@ export const FlightPlanDraw = props => { } path.push(coord); - } + }; - const onClickPolygon = (e) => { - // console.log('onClickPolygon') + const onClickPolygon = e => { var coord = e.coord; // let guide; @@ -320,28 +320,34 @@ export const FlightPlanDraw = props => { }); guideline.setVisible(false); - 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); + }); lastDistance = guideline.getDistance(); - addMileStone(coord, 'Start') + addMileStone(coord, 'Start'); } else { polygon.getPath().push(coord); guideline.getPath().push(coord); - // console.log(polygon.getPath()._array, 'polygon') - // console.log(guideline.getPath()._array.length, 'guide') - // console.log(polygon.getPath()._array.length) - var distance = guideline.getDistance(); // addMileStone(coord, fromMetersToText(distance - lastDistance)); - addMileStone(guideline.getPath()._array, fromMetersToText(distance - lastDistance)); + addMileStone( + guideline.getPath()._array, + fromMetersToText(distance - lastDistance) + ); lastDistance = distance; } - } + }; - const onMouseMovePolygon = (e) => { - //console.log('onMouseMovePolygon') + const onMouseMovePolygon = e => { if (!polygon) return; var proj = map.getProjection(), @@ -353,19 +359,18 @@ export const FlightPlanDraw = props => { } path.push(coord); - } + }; - const onClickCircle = (e) => { - // console.log('onClickCircle') + const onClickCircle = e => { var coord = e.coord; - if(!circle) { + if (!circle) { radiusline = new naver.maps.Polyline({ strokeStyle: [4, 4], strokeOpacity: 0.6, - path: [coord], + path: [coord] // map: map - }) + }); lastDistance = radiusline.getDistance(); circle = new naver.maps.Circle({ @@ -377,25 +382,29 @@ export const FlightPlanDraw = props => { radius: 100, map: map, clickable: true - }) + }); - Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); }) + Eve.mousedownEve = naver.maps.Event.addListener( + circle, + 'mousedown', + function () { + onMouseDownDrag(0); + } + ); addMileStone(coord, fromMetersToText(100)); } else { circle.setCenter(coord); circle.setRadius(100); - distanceMarker.setPosition(coord) + distanceMarker.setPosition(coord); } - setCircle(prev => ([...prev, circle])) + setCircle(prev => [...prev, circle]); setAreaInfo(''); setMarker(distanceMarker); setFigure(circle.center); - } - - const onMouseDownDrag = (index) => { - // console.log('onMouseDownDrag') + }; + const onMouseDownDrag = index => { map.setOptions({ draggable: false, pinchZoom: false, @@ -404,19 +413,21 @@ export const FlightPlanDraw = props => { disableDoubleTapZoom: true, disableDoubleClickZoom: true, disableTwoFingerTapZoom: true - }) + }); - if(circle) { + if (circle) { removeListener(); } - $(document).on('mousemove.measure', function (e) { onMouseMoveDrag(e, index) }); - $(document).on('mouseup.measure', function () { onMouseUpDrag(index) }); - } + $(document).on('mousemove.measure', function (e) { + onMouseMoveDrag(e, index); + }); + $(document).on('mouseup.measure', function () { + onMouseUpDrag(index); + }); + }; const onMouseMoveDrag = (e, index) => { - //console.log('onMouseMoveDrag') - var proj = map.getProjection(), coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)); @@ -429,13 +440,12 @@ export const FlightPlanDraw = props => { if (i === index) { path = coord; } else { - path = polypaths[i] + path = polypaths[i]; } movepath.push(path); } polyline.setPath(movepath); - } else if (polygon) { var polygonpaths = polygon.getPath()._array; @@ -445,12 +455,11 @@ export const FlightPlanDraw = props => { if (i === index) { path = coord; } else { - path = polygonpaths[i] + path = polygonpaths[i]; } movepath.push(path); } - polygon.setPaths(movepath) - + polygon.setPaths(movepath); } else if (circle) { var center = circle.getCenter(), r = proj.getDistance(coord, center); @@ -461,11 +470,9 @@ export const FlightPlanDraw = props => { if (!circle) { dragCircle[index].setCenter(coord); } - } - - const onMouseUpDrag = (index) => { - // console.log('onMouseUpDrag') + }; + const onMouseUpDrag = index => { map.setOptions({ draggable: true, pinchZoom: true, @@ -474,7 +481,7 @@ export const FlightPlanDraw = props => { disableDoubleTapZoom: false, disableDoubleClickZoom: false, disableTwoFingerTapZoom: false - }) + }); if (polyline) { var path = polyline.getPath()._array; @@ -494,34 +501,36 @@ export const FlightPlanDraw = props => { $(document).off('mouseup.measure'); if (circle) { - Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) }) + Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { + onClickCircle(e); + }); setClickEve(Eve.clickEve); - setCircle(prev => ([...prev, circle])) + setCircle(prev => [...prev, circle]); setAreaInfo(''); - setFigure(circle) + setFigure(circle); } - } + }; - const setAreaInfo = (path) => { + const setAreaInfo = path => { let bufferZone = 100; - if(polygon) bufferZone = 0; - + if (polygon) bufferZone = 0; + areaInfo = { coordinates: [], - bufferZone: bufferZone, + bufferZone: bufferZone }; let prePath = []; if (path) { - path.forEach((item) => { + path.forEach(item => { const p = { lat: item.y, lon: item.x - } + }; prePath.push(p); - }) + }); // path.forEach(prev=> prePath.push([prev.x, prev.y])) } @@ -535,53 +544,58 @@ export const FlightPlanDraw = props => { const point = { lat: circle.getCenter().y, lon: circle.getCenter().x - } + }; areaInfo.coordinates.push(point); areaInfo.bufferZone = circle.getRadius(); areaInfo.areaType = 'CIRCLE'; } props.handleCoordinates(areaInfo); - } + }; const onClickReset = () => { - // console.log('onClickRest - ', mapControl.drawType); if (mapControl.drawType === 'RESET') { clearMode('RESET'); } - } + }; - const createMarker = (data) => { + const createMarker = data => { distanceMarker.push( new naver.maps.Marker({ position: data.position, icon: { - content: '
    '+ data.content +'
    ', + content: + '
    ' + + data.content + + '
    ', anchor: data.anchor - }, map: map + }, + map: map }) - ) - } + ); + }; const handleDetailDraw = () => { if (props.areaCoordList) { - // console.log('handleDetailDraw') - const areas = props.areaCoordList[0]; const paths = []; - areas.coordList.forEach((coord) => { - const path = new naver.maps.LatLng(coord.lat, coord.lon) + areas.coordList.forEach(coord => { + const path = new naver.maps.LatLng(coord.lat, coord.lon); paths.push(path); }); let clickSet; - {isDisabled===true ? clickSet=false : clickSet=true} + { + isDisabled === true ? (clickSet = false) : (clickSet = true); + } if (areas.areaType && areas.areaType === 'LINE') { //polyline 생성 - if(pastPolyline) { + if (pastPolyline) { pastPolyline.setMap(null); pastDragCircle.forEach(c => c.setMap(null)); } @@ -595,10 +609,10 @@ export const FlightPlanDraw = props => { map: map }); - setPolyline(polyline) + setPolyline(polyline); //dragCircle 생성 - for(let i = 0; i < paths.length; i++) { + for (let i = 0; i < paths.length; i++) { dragCircle.push( new naver.maps.Circle({ strokestrokeOpacity: 1, @@ -612,12 +626,20 @@ export const FlightPlanDraw = props => { // clickable: true clickable: clickSet }) - ) + ); // dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) })) - {isDisabled ? - {} - : - dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) })) + { + isDisabled + ? {} + : dragCircleEve.push( + naver.maps.Event.addListener( + dragCircle[i], + 'mousedown', + function () { + onMouseDownDrag(i); + } + ) + ); } } @@ -627,14 +649,13 @@ export const FlightPlanDraw = props => { if (areas.bufferCoordList) { const bufferPaths = []; - areas.bufferCoordList.forEach((bfCoord) => { + areas.bufferCoordList.forEach(bfCoord => { const path = new naver.maps.LatLng(bfCoord.lat, bfCoord.lon); bufferPaths.push(path); }); - // console.log('buffer test : ',areas.bufferCoordList); - - if(pastBuffer) { + + if (pastBuffer) { pastBuffer.setMap(null); } @@ -649,28 +670,30 @@ export const FlightPlanDraw = props => { } //marker 생성 - if(pastMarker) { + if (pastMarker) { pastMarker.forEach(c => c.setMap(null)); } - for(let i = 0; i < paths.length; i++) { - if(i == 0) { + for (let i = 0; i < paths.length; i++) { + if (i == 0) { const data = {}; data.position = paths[i]; data.color = '#ff0000'; data.content = 'Start'; data.anchor = new naver.maps.Point(45, 35); createMarker(data); - } else { var proj = map.getProjection(), - r = proj.getDistance(paths[i-1], paths[i]); - - let text = fromMetersToText(r); + r = proj.getDistance(paths[i - 1], paths[i]); - let dis1 = paths[i-1] - let dis2 = paths[i] - let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2); + let text = fromMetersToText(r); + + let dis1 = paths[i - 1]; + let dis2 = paths[i]; + let midPoint = new naver.maps.LatLng( + (dis1.y + dis2.y) / 2, + (dis1.x + dis2.x) / 2 + ); const data = {}; data.position = midPoint; @@ -685,7 +708,7 @@ export const FlightPlanDraw = props => { if (areas.areaType && areas.areaType === 'POLYGON') { //polygon 생성 - if(pastPolygon) { + if (pastPolygon) { pastPolygon.setMap(null); pastDragCircle.forEach(c => c.setMap(null)); } @@ -701,7 +724,7 @@ export const FlightPlanDraw = props => { setPolygon(polygon); //dragCircle 생성 - for(let i = 0; i < paths.length; i++) { + for (let i = 0; i < paths.length; i++) { dragCircle.push( new naver.maps.Circle({ strokestrokeOpacity: 1, @@ -715,26 +738,33 @@ export const FlightPlanDraw = props => { // clickable: true clickable: clickSet }) - ) + ); // dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) })) - {isDisabled ? - {} - : - dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) })) + { + isDisabled + ? {} + : dragCircleEve.push( + naver.maps.Event.addListener( + dragCircle[i], + 'mousedown', + function () { + onMouseDownDrag(i); + } + ) + ); } } setDragCircle(dragCircle); - //marker 생성 - if(pastMarker) { - pastMarker.forEach(c => c.setMap(null)) + if (pastMarker) { + pastMarker.forEach(c => c.setMap(null)); } - for(let i = 0; i < paths.length+1; i++) { + for (let i = 0; i < paths.length + 1; i++) { //start - if(i == 0) { + if (i == 0) { const data = {}; data.position = paths[0]; data.color = '#ff0000'; @@ -742,16 +772,19 @@ export const FlightPlanDraw = props => { data.anchor = new naver.maps.Point(45, 35); createMarker(data); - //첫좌표이자 마지막 좌표 - } else if(i == paths.length) { + //첫좌표이자 마지막 좌표 + } else if (i == paths.length) { var proj = map.getProjection(), - r = proj.getDistance(paths[0], paths[i-1]); + r = proj.getDistance(paths[0], paths[i - 1]); let text = fromMetersToText(r); - let dis1 = paths[0] - let dis2 = paths[i-1] - let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2); + let dis1 = paths[0]; + let dis2 = paths[i - 1]; + let midPoint = new naver.maps.LatLng( + (dis1.y + dis2.y) / 2, + (dis1.x + dis2.x) / 2 + ); const data = {}; data.position = midPoint; @@ -759,33 +792,35 @@ export const FlightPlanDraw = props => { data.content = text; data.anchor = new naver.maps.Point(0, 35); createMarker(data); - //그 외 나머지 + //그 외 나머지 } else { var proj = map.getProjection(), - r = proj.getDistance(paths[i-1], paths[i]); + r = proj.getDistance(paths[i - 1], paths[i]); - let text = fromMetersToText(r); + let text = fromMetersToText(r); - let dis1 = paths[i-1] - let dis2 = paths[i] - let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2); + let dis1 = paths[i - 1]; + let dis2 = paths[i]; + let midPoint = new naver.maps.LatLng( + (dis1.y + dis2.y) / 2, + (dis1.x + dis2.x) / 2 + ); const data = {}; data.position = midPoint; data.color = '#737373'; data.content = text; - anchor: new naver.maps.Point(20, 35) + anchor: new naver.maps.Point(20, 35); createMarker(data); } } setMarker(distanceMarker); } - if (areas.areaType && areas.areaType === 'CIRCLE') { //circle 생성 - if(pastCircle) { + if (pastCircle) { pastCircle.forEach(prev => prev.setMap(null)); } @@ -802,16 +837,22 @@ export const FlightPlanDraw = props => { clickable: clickSet }); // Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); }) - {isDisabled ? - {} - : - Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); }) + { + isDisabled + ? {} + : (Eve.mousedownEve = naver.maps.Event.addListener( + circle, + 'mousedown', + function () { + onMouseDownDrag(0); + } + )); } setCircle([circle]); //marker 생성 - if(pastMarker) { + if (pastMarker) { pastMarker.forEach(c => c.setMap(null)); } @@ -819,64 +860,73 @@ export const FlightPlanDraw = props => { distanceMarker = new naver.maps.Marker({ position: paths[0], icon: { - content: '
    '+ text +'
    ', + content: + '
    ' + + text + + '
    ', anchor: new naver.maps.Point(-5, -5) }, map: map - }) + }); setMarker([distanceMarker]); } } - } + }; //div로 보여주기 const addMileStone = (coord, text) => { let content; let midPoint; let anchor; - if(text == 'Start') { - content = '
    '+ text +'
    ' - midPoint = coord - anchor = new naver.maps.Point(45, 35) + if (text == 'Start') { + content = + '
    ' + + text + + '
    '; + midPoint = coord; + anchor = new naver.maps.Point(45, 35); } else { - content = '
    '+ text +'
    ' - let dis1 = coord[coord.length-2]; - let dis2 = coord[coord.length-1]; - if(circle) { - midPoint = coord + content = + '
    ' + + text + + '
    '; + let dis1 = coord[coord.length - 2]; + let dis2 = coord[coord.length - 1]; + if (circle) { + midPoint = coord; } else { - midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2); + midPoint = new naver.maps.LatLng( + (dis1.y + dis2.y) / 2, + (dis1.x + dis2.x) / 2 + ); } - anchor = new naver.maps.Point(20, 35) + anchor = new naver.maps.Point(20, 35); } - + var marker = new naver.maps.Marker({ position: midPoint, icon: { content: content, anchor: anchor - }, + } // map: map }); // marker.setVisible(false) - - - if(circle) { + + if (circle) { distanceMarker = marker; } else { marker.setMap(map); distanceMarker.push(marker); } - } - + }; + //거리 재기 - const fromMetersToText = (meters) => { + const fromMetersToText = meters => { meters = meters || 0; let text = parseFloat(meters.toFixed(1)) + 'm'; return text; - } + }; - return( - - ) -}; \ No newline at end of file + return ; +}; diff --git a/src/components/map/naver/draw/FlightPlanDraw_JQuery.js b/src/components/map/naver/draw/FlightPlanDraw_JQuery.js index 1ae7b61c..71b9b137 100644 --- a/src/components/map/naver/draw/FlightPlanDraw_JQuery.js +++ b/src/components/map/naver/draw/FlightPlanDraw_JQuery.js @@ -1,15 +1,14 @@ import $ from 'jquery'; -import '../../../../assets/css/custom.css'; +import '../../../../assets/css/custom.css'; import { CustomInput } from 'reactstrap'; -import buffer from '@turf/buffer' +import buffer from '@turf/buffer'; export const FlightPlanDraw = props => { - const {naver} = props; - const {map} = props; + const { naver } = props; + const { map } = props; - - var Measure = function(buttons) { + var Measure = function (buttons) { this.$btnLine = buttons.line; this.$btnPolygon = buttons.polygon; this.$btnCircle = buttons.circle; @@ -20,12 +19,10 @@ export const FlightPlanDraw = props => { this._bindDOMEvents(); }; - $.extend( - Measure.prototype,{ + $.extend(Measure.prototype, { constructor: Measure, - setMap: function(map) { - // console.log('setMap') + setMap: function (map) { if (this.map) { this._unbindMap(this.map); } @@ -37,62 +34,86 @@ export const FlightPlanDraw = props => { } }, - startMode: function(mode) { - // console.log('startMode') + startMode: function (mode) { if (!mode) return; if (mode === 'line') { this._startDistance(); - } if (mode === 'polygon') { + } + if (mode === 'polygon') { this._startArea(); - } if (mode === 'circle') { + } + if (mode === 'circle') { this._startCircle(); - } if (mode === 'rectangle') { + } + if (mode === 'rectangle') { this._startRectangle(); } }, - _startDistance: function() { - // console.log('startDistance') + _startDistance: function () { var map = this.map; this._distanceListeners = [ - naver.maps.Event.addListener(map, 'click', this._onClickDistance.bind(this)) + naver.maps.Event.addListener( + map, + 'click', + this._onClickDistance.bind(this) + ) ]; }, - _startArea: function() { - //console.log('startArea') + _startArea: function () { 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)) + 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') + _startCircle: function () { 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)) + 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') + _startRectangle: function () { 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)) - ] + 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') - + _finishDistance: function () { naver.maps.Event.removeListener(this._distanceListeners); delete this._distanceListeners; @@ -104,13 +125,11 @@ export const FlightPlanDraw = props => { } 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++) { - + for (let i = 0; i < polypaths.length; i++) { //파싱 let obj = new Object(); @@ -118,54 +137,51 @@ export const FlightPlanDraw = props => { obj.y = '' + polypaths[i]._lat + ''; obj = JSON.stringify(obj); - polypathJSON.push(JSON.parse(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]); + 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", + type: 'FeatureCollection', features: [ { - type: "Feature", + type: 'Feature', properties: {}, geometry: { - type: "LineString", + type: 'LineString', coordinates: lineStringPaths } } ] }; - // console.log(originalGeojson) //버퍼 객체 - const bufferObj = buffer(originalGeojson, 50, {units:'meters'}); + 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, + path: bufferPath, map: map }); // 이거 하면 그동안 한거 싹 사라짐 -> 얘를 통해서 drawType이 바뀌면 다 날라가는 걸로 해보면 될듯 // this._polyline.setMap(null) delete this._polyline; - } //onfocus()의 반대기능 = blur() this.$btnLine.removeClass('control-on').blur(); @@ -173,8 +189,7 @@ export const FlightPlanDraw = props => { this._mode = null; }, - _finishArea: function() { - // console.log('finishArea') + _finishArea: function () { naver.maps.Event.removeListener(this._areaListeners); delete this._areaListeners; @@ -192,23 +207,20 @@ export const FlightPlanDraw = props => { this._mode = null; }, - _finishCircle: function() { - // console.log('finishCircle') - + _finishCircle: function () { naver.maps.Event.removeListener(this._circleListeners); delete this._circleListeners; $(document).off('mousemove.measure'); - if(this._guidecircle) { + 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; } @@ -218,15 +230,13 @@ export const FlightPlanDraw = props => { this._mode = null; }, - _finishRectangle: function() { - // console.log('finishRectangle') - + _finishRectangle: function () { naver.maps.Event.removeListener(this._rectangleListeners); delete this._rectangleListeners; $(document).off('mousemove.measure'); - if(this._rectangle) { + if (this._rectangle) { this._guiderectangle.setMap(null); delete this._guiderectangle; } @@ -236,28 +246,30 @@ export const FlightPlanDraw = props => { this._mode = null; }, - finishMode: function(mode) { - // console.log('finishMode') + finishMode: function (mode) { if (!mode) return; if (mode === 'line') { this._finishDistance(); - } if (mode === 'polygon') { + } + if (mode === 'polygon') { this._finishArea(); - } if (mode === 'circle') { + } + if (mode === 'circle') { this._finishCircle(); - } if (mode === 'rectangle') { + } + if (mode === 'rectangle') { this._finishRectangle(); } }, - _fromMetersToText: function(meters) { + _fromMetersToText: function (meters) { meters = meters || 0; var km = 1000, text = meters; - if(meters >= km) { + if (meters >= km) { text = parseFloat((meters / km).toFixed(1)) + 'km'; } else { text = parseFloat(meters.toFixed(1)) + 'm'; @@ -266,14 +278,20 @@ export const FlightPlanDraw = props => { return text; }, - _addMileStone: function(coord, text, css) { - if(!this._ms) this._ms = []; + _addMileStone: function (coord, text, css) { + if (!this._ms) this._ms = []; let content; - if(text == 'Start') { - content = '
    '+ text +'
    ' + if (text == 'Start') { + content = + '
    ' + + text + + '
    '; } else { - content = '
    '+ text +'
    ' + content = + '
    ' + + text + + '
    '; } var ms = new naver.maps.Marker({ @@ -287,7 +305,7 @@ export const FlightPlanDraw = props => { var msElement = $(ms.getElement()); - if(css) { + if (css) { msElement.css(css); } else { msElement.css('font-size', '13px'); @@ -296,8 +314,7 @@ export const FlightPlanDraw = props => { this._ms.push(ms); }, - _onClickDistance: function(e) { - // console.log('onClickDistance') + _onClickDistance: function (e) { var map = this.map, coord = e.coord; @@ -314,8 +331,17 @@ export const FlightPlanDraw = props => { // 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))); + $(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({ @@ -330,23 +356,24 @@ export const FlightPlanDraw = props => { 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._addMileStone( + coord, + this._fromMetersToText(distance - this._lastDistance) + ); this._lastDistance = distance; } }, - _onMouseMoveDistance: function(e) { - // console.log('onMouseMoveDistance') + _onMouseMoveDistance: function (e) { var map = this.map, - proj = this.map.getProjection(), - coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), - path = this._guideline.getPath(); + proj = this.map.getProjection(), + coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), + path = this._guideline.getPath(); if (path.getLength() === 2) { //맨 뒷 값 삭제 = 기존클릭좌표만 남겨둬라 = 실시간으로 좌표들어가야 하니까 @@ -357,8 +384,7 @@ export const FlightPlanDraw = props => { path.push(coord); }, - _onClickArea: function(e) { - // console.log('onClickArea') + _onClickArea: function (e) { var map = this.map, coord = e.coord; @@ -375,14 +401,13 @@ export const FlightPlanDraw = props => { } }, - _onMouseMoveArea: function(e) { - // console.log('onMouseMoveArea') + _onMouseMoveArea: function (e) { 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(); + 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(); @@ -391,13 +416,11 @@ export const FlightPlanDraw = props => { path.push(coord); }, - _onClickCircle: function(e) { - // console.log('onClickCircle') + _onClickCircle: function (e) { var map = this.map, coord = e.coord; - if(!this._circle) { - + if (!this._circle) { //가이드 라인 this._radius = new naver.maps.Polyline({ strokeStyle: [4, 4], @@ -419,8 +442,14 @@ export const FlightPlanDraw = props => { }); $(document).on('mousemove.measure', this._onMouseMoveCircle.bind(this)); - this._circleListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishCircle.bind(this))); - + this._circleListeners.push( + naver.maps.Event.addListener( + map, + 'rightclick', + this._finishCircle.bind(this) + ) + ); + // 실제 사용되는 원형 this._circle = new naver.maps.Circle({ strokeOpacity: 0.8, @@ -430,52 +459,46 @@ export const FlightPlanDraw = props => { 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; + _onMouseMoveCircle: function (e) { + 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); + 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) { + if (path.getLength() === 2) { path.pop(); } path.push(coord); this._guidecircle.setRadius(r); }, - _onClickRectangle: function(e) { - // console.log('onClickRectangle') + _onClickRectangle: function (e) { var map = this.map, coord = e.coord; - + this.max_x = 0; this.max_y = 0; - - if(!this._rectangle) { + if (!this._rectangle) { //min = 고정값 this.fixed = coord; this.min = [this.fixed.x, this.fixed.y]; @@ -490,8 +513,17 @@ export const FlightPlanDraw = props => { map: map }); - $(document).on('mousemove.measure', this._onMouseMoveRectangle.bind(this)); - this._rectangleListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishRectangle.bind(this))); + $(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({ @@ -501,7 +533,6 @@ export const FlightPlanDraw = props => { 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]]; @@ -509,53 +540,54 @@ export const FlightPlanDraw = props => { } }, - _onMouseMoveRectangle: function(e) { - // console.log('onMouseMoveRectangle') - if(!this._rectangle) return; + _onMouseMoveRectangle: function (e) { + if (!this._rectangle) return; var map = this.map, - proj = this.map.getProjection(), + proj = this.map.getProjection(), coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), - bounds = this._guiderectangle.getBounds(), - max = [coord.x, coord.y]; + bounds = this._guiderectangle.getBounds(), + max = [coord.x, coord.y]; - this.boundscoord = [this.min[0], this.min[1],max[0], max[1]]; + this.boundscoord = [this.min[0], this.min[1], max[0], max[1]]; this._guiderectangle.setBounds(this.boundscoord); }, - _bindMap: function(map) { - // console.log('bindMap') - }, + _bindMap: function (map) {}, - _unbindMap: function() { - // console.log('unbindMap') + _unbindMap: function () { this.unbindAll(); }, - _bindDOMEvents: function() { - // console.log('bindDOMEvents') + _bindDOMEvents: function () { 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')); - + 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) { + _onClickButton: function (newMode, e) { //newMode는 방금 클릭한 값(line, polygon, circle...) - // console.log('onClickButton') + e.preventDefault(); var btn = $(e.target), - map = this.map, - mode = this._mode; + 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'); } @@ -571,8 +603,7 @@ export const FlightPlanDraw = props => { this.startMode(newMode); }, - _clearMode: function(mode) { - // console.log('clearMode') + _clearMode: function (mode) { if (!mode) return; if (mode === 'line') { @@ -597,7 +628,7 @@ export const FlightPlanDraw = props => { this._finishCircle(); } else if (mode === 'rectangle') { - if(this._rectangle) { + if (this._rectangle) { this._rectangle.setMap(null); delete this._rectangle; } @@ -615,38 +646,38 @@ export const FlightPlanDraw = props => { measures.setMap(map); - return( + return ( <>
    -
      -
    • - - - - -
      • -
    +
      +
    • + + + + +
      • +
    - ) -} \ No newline at end of file + ); +}; diff --git a/src/components/map/naver/draw/FlightPlanDraw_Test.js b/src/components/map/naver/draw/FlightPlanDraw_Test.js index 1958b48a..330b7593 100644 --- a/src/components/map/naver/draw/FlightPlanDraw_Test.js +++ b/src/components/map/naver/draw/FlightPlanDraw_Test.js @@ -16,7 +16,7 @@ export const FlightPlanDraw = props => { const [pastClickEve, setClickEve] = useState(); const [pastMarker, setMarker] = useState([]); - + const [figure, setFigure] = useState(); const [areaDetail, setAreaDetail] = useState(); @@ -25,13 +25,13 @@ export const FlightPlanDraw = props => { isOpen: false, title: '', desc: '' - }) + }); const naver = props.naver; const map = props.map; let mode = props.mode; let dragCircleSize = props.dragCircleSize; - + let areaInfo; let lastDistance; @@ -48,7 +48,7 @@ export const FlightPlanDraw = props => { clickEve: '', mousedownEve: '', rightclickEve: '' - } + }; let dragCircle = []; let dragCircleEve = []; @@ -57,28 +57,28 @@ export const FlightPlanDraw = props => { const handleBufferList = () => { dispatch(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.request(areaDetail)); - } + }; useEffect(() => { drawInit(); - }, [mapControl.drawType]) - + }, [mapControl.drawType]); + useEffect(() => { handleDetailDraw(); - }, [props.areaCoordList]) + }, [props.areaCoordList]); useEffect(() => { - if(figure) { + if (figure) { props.handleConfirm(props.areaCoordList); setAreaDetail(props.areaCoordList); } - }, [figure]) - + }, [figure]); + useEffect(() => { - if(pastPolyline) { + if (pastPolyline) { handleBufferList(); } - }, [areaDetail]) + }, [areaDetail]); const drawInit = () => { if (mapControl.drawType === 'LINE') { @@ -88,13 +88,11 @@ export const FlightPlanDraw = props => { } else if (mapControl.drawType === 'POLYGON') { onClickButton('POLYGON'); } else if (mapControl.drawType === 'RESET') { - onClickReset('RESET') + onClickReset('RESET'); } - } - - const onClickButton = (newMode) => { - //console.log('onClickButton'); + }; + const onClickButton = newMode => { clearMode(mode); if (mode === newMode) { @@ -102,18 +100,15 @@ export const FlightPlanDraw = props => { return; } - // mode = newMode; + // mode = newMode; startMode(newMode); - } - - const clearMode = (mode) => { - //console.log('clearMode') + }; + const clearMode = mode => { // if(!mode) return; if (pastPolyline) { - // console.log('clear polyline ', pastPolyline) pastPolyline.setMap(null); pastDragCircle.forEach(c => c.setMap(null)); pastBuffer.setMap(null); @@ -122,14 +117,12 @@ export const FlightPlanDraw = props => { setBuffer(); } if (pastCircle.length != 0) { - //console.log('clear circle ', pastCircle) - pastCircle.forEach(prev => prev.setMap(null)) + pastCircle.forEach(prev => prev.setMap(null)); naver.maps.Event.removeListener(pastClickEve); setCircle([]); } if (pastPolygon) { - // console.log('clear polygon ', pastPolygon) pastPolygon.setMap(null); pastDragCircle.forEach(c => c.setMap(null)); @@ -137,38 +130,39 @@ export const FlightPlanDraw = props => { setDragCircle([]); } if (pastMarker.length != 0) { - // console.log('clear marker ', pastMarker) - pastMarker.forEach(m => m.setMap(null)) + pastMarker.forEach(m => m.setMap(null)); setMarker([]); } finishDraw(); - props.handleInitCoordinates(); - } - - const startMode = (mode) => { - // console.log('startMode') + props.handleInitCoordinates(); + }; + const startMode = mode => { if (!mode) return; - if(pastClickEve) { + if (pastClickEve) { naver.maps.Event.removeListener(pastClickEve); } 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); + }); setClickEve(Eve.clickEve); } 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); + }); setClickEve(Eve.clickEve); } else if (mode === 'CIRCLE') { - Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) }); + Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { + onClickCircle(e); + }); setClickEve(Eve.clickEve); } - } + }; const removeListener = () => { - // console.log('removeListener') - naver.maps.Event.removeListener(Eve.clickEve); naver.maps.Event.removeListener(pastClickEve); setClickEve(); @@ -176,10 +170,9 @@ export const FlightPlanDraw = props => { naver.maps.Event.removeListener(Eve.mousedownEve); naver.maps.Event.removeListener(Eve.rightclickEve); if (!circle) $(document).off('mousemove.measure'); - } + }; const finishDraw = () => { - //console.log('finishDraw') removeListener(); if (polyline) { @@ -190,8 +183,8 @@ export const FlightPlanDraw = props => { let polypaths = polyline.getPath()._array; - setMarker(distanceMarker) - distanceMarker.forEach(c => c.setMap(null)) + setMarker(distanceMarker); + distanceMarker.forEach(c => c.setMap(null)); if (polypaths.length >= 2) { setPolyline(polyline); @@ -201,14 +194,13 @@ export const FlightPlanDraw = props => { isOpen: true, title: '좌표 최소 개수', desc: '좌표를 두 개 점으로 이어주세요.' - }) + }); polyline.setMap(null); polyline = ''; } - setFigure(polyline) - + setFigure(polyline); } else if (polygon) { let path = polygon.getPath(); path.pop(); @@ -222,9 +214,9 @@ export const FlightPlanDraw = props => { // addMileStone(polygonpaths[0], fromMetersToText(distance - lastDistance)); setMarker(distanceMarker); - distanceMarker.forEach(c => c.setMap(null)) + distanceMarker.forEach(c => c.setMap(null)); - if(polygonpaths.length >= 3) { + if (polygonpaths.length >= 3) { setPolygon(polygon); setAreaInfo(polygonpaths); } else { @@ -232,17 +224,16 @@ export const FlightPlanDraw = props => { isOpen: true, title: '좌표 최소 개수', desc: '좌표를 세 개 점으로 이어주세요.' - }) - polygon.setMap(null) + }); + polygon.setMap(null); polygon = ''; } - setFigure(polygon) + setFigure(polygon); } - } + }; - const onClickPolyline = (e) => { - //console.log('onClickPolyline') + const onClickPolyline = e => { var coord = e.coord; if (!polyline) { @@ -268,24 +259,34 @@ export const FlightPlanDraw = props => { 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(); - addMileStone(coord, 'Start') + addMileStone(coord, 'Start'); } else { guideline.setPath([e.coord]); polyline.getPath().push(coord); var distance = polyline.getDistance(); // addMileStone(coord, fromMetersToText(distance - lastDistance)); - addMileStone(polyline.getPath()._array, fromMetersToText(distance - lastDistance)); + addMileStone( + polyline.getPath()._array, + fromMetersToText(distance - lastDistance) + ); lastDistance = distance; } - } + }; - const onMouseMovePolyline = (e) => { - // console.log('onMouseMovePolyline') + const onMouseMovePolyline = e => { var proj = map.getProjection(), coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), path = guideline.getPath(); @@ -295,10 +296,9 @@ export const FlightPlanDraw = props => { } path.push(coord); - } + }; - const onClickPolygon = (e) => { - // console.log('onClickPolygon') + const onClickPolygon = e => { var coord = e.coord; // let guide; @@ -319,28 +319,34 @@ export const FlightPlanDraw = props => { }); guideline.setVisible(false); - 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); + }); lastDistance = guideline.getDistance(); - addMileStone(coord, 'Start') + addMileStone(coord, 'Start'); } else { polygon.getPath().push(coord); guideline.getPath().push(coord); - // console.log(polygon.getPath()._array, 'polygon') - // console.log(guideline.getPath()._array.length, 'guide') - // console.log(polygon.getPath()._array.length) - var distance = guideline.getDistance(); // addMileStone(coord, fromMetersToText(distance - lastDistance)); - addMileStone(guideline.getPath()._array, fromMetersToText(distance - lastDistance)); + addMileStone( + guideline.getPath()._array, + fromMetersToText(distance - lastDistance) + ); lastDistance = distance; } - } + }; - const onMouseMovePolygon = (e) => { - //console.log('onMouseMovePolygon') + const onMouseMovePolygon = e => { if (!polygon) return; var proj = map.getProjection(), @@ -352,19 +358,18 @@ export const FlightPlanDraw = props => { } path.push(coord); - } + }; - const onClickCircle = (e) => { - // console.log('onClickCircle') + const onClickCircle = e => { var coord = e.coord; - if(!circle) { + if (!circle) { radiusline = new naver.maps.Polyline({ strokeStyle: [4, 4], strokeOpacity: 0.6, - path: [coord], + path: [coord] // map: map - }) + }); lastDistance = radiusline.getDistance(); circle = new naver.maps.Circle({ @@ -376,25 +381,29 @@ export const FlightPlanDraw = props => { radius: 100, map: map, clickable: true - }) + }); - Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); }) + Eve.mousedownEve = naver.maps.Event.addListener( + circle, + 'mousedown', + function () { + onMouseDownDrag(0); + } + ); addMileStone(coord, fromMetersToText(100)); } else { circle.setCenter(coord); circle.setRadius(100); - distanceMarker.setPosition(coord) + distanceMarker.setPosition(coord); } - setCircle(prev => ([...prev, circle])) + setCircle(prev => [...prev, circle]); setAreaInfo(''); setMarker(distanceMarker); setFigure(circle.center); - } - - const onMouseDownDrag = (index) => { - // console.log('onMouseDownDrag') + }; + const onMouseDownDrag = index => { map.setOptions({ draggable: false, pinchZoom: false, @@ -403,19 +412,21 @@ export const FlightPlanDraw = props => { disableDoubleTapZoom: true, disableDoubleClickZoom: true, disableTwoFingerTapZoom: true - }) + }); - if(circle) { + if (circle) { removeListener(); } - $(document).on('mousemove.measure', function (e) { onMouseMoveDrag(e, index) }); - $(document).on('mouseup.measure', function () { onMouseUpDrag(index) }); - } + $(document).on('mousemove.measure', function (e) { + onMouseMoveDrag(e, index); + }); + $(document).on('mouseup.measure', function () { + onMouseUpDrag(index); + }); + }; const onMouseMoveDrag = (e, index) => { - //console.log('onMouseMoveDrag') - var proj = map.getProjection(), coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)); @@ -428,13 +439,12 @@ export const FlightPlanDraw = props => { if (i === index) { path = coord; } else { - path = polypaths[i] + path = polypaths[i]; } movepath.push(path); } polyline.setPath(movepath); - } else if (polygon) { var polygonpaths = polygon.getPath()._array; @@ -444,12 +454,11 @@ export const FlightPlanDraw = props => { if (i === index) { path = coord; } else { - path = polygonpaths[i] + path = polygonpaths[i]; } movepath.push(path); } - polygon.setPaths(movepath) - + polygon.setPaths(movepath); } else if (circle) { var center = circle.getCenter(), r = proj.getDistance(coord, center); @@ -460,11 +469,9 @@ export const FlightPlanDraw = props => { if (!circle) { dragCircle[index].setCenter(coord); } - } - - const onMouseUpDrag = (index) => { - // console.log('onMouseUpDrag') + }; + const onMouseUpDrag = index => { map.setOptions({ draggable: true, pinchZoom: true, @@ -473,7 +480,7 @@ export const FlightPlanDraw = props => { disableDoubleTapZoom: false, disableDoubleClickZoom: false, disableTwoFingerTapZoom: false - }) + }); if (polyline) { var path = polyline.getPath()._array; @@ -491,7 +498,7 @@ export const FlightPlanDraw = props => { // if(pastMarker.length !=0) { // //마커 위치 변경 // pastMarker[index].setPosition(path[index]); - + // //마커 content 변경 // if(index == 0) { // //시작 지점 이동 @@ -508,11 +515,11 @@ export const FlightPlanDraw = props => { // //사이 지점 이동(index+1 마커도 변경) // isLastIndex = 2; // } - + // for(let i = index; i < index+isLastIndex; i++) { // var proj = map.getProjection(), // r = proj.getDistance(pastMarker[i-1].position, pastMarker[i].position); - + // let text = fromMetersToText(r); // pastMarker[i].setIcon({ // content: '
    '+ text +'
    ', @@ -527,34 +534,36 @@ export const FlightPlanDraw = props => { $(document).off('mouseup.measure'); if (circle) { - Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) }) + Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { + onClickCircle(e); + }); setClickEve(Eve.clickEve); - setCircle(prev => ([...prev, circle])) + setCircle(prev => [...prev, circle]); setAreaInfo(''); - setFigure(circle) + setFigure(circle); } - } + }; - const setAreaInfo = (path) => { + const setAreaInfo = path => { let bufferZone = 100; - if(polygon) bufferZone = 0; - + if (polygon) bufferZone = 0; + areaInfo = { coordinates: [], - bufferZone: bufferZone, + bufferZone: bufferZone }; let prePath = []; if (path) { - path.forEach((item) => { + path.forEach(item => { const p = { lat: item.y, lon: item.x - } + }; prePath.push(p); - }) + }); // path.forEach(prev=> prePath.push([prev.x, prev.y])) } @@ -568,38 +577,35 @@ export const FlightPlanDraw = props => { const point = { lat: circle.getCenter().y, lon: circle.getCenter().x - } + }; areaInfo.coordinates.push(point); areaInfo.bufferZone = circle.getRadius(); areaInfo.areaType = 'CIRCLE'; } props.handleCoordinates(areaInfo); - } + }; const onClickReset = () => { - // console.log('onClickRest - ', mapControl.drawType); if (mapControl.drawType === 'RESET') { clearMode('RESET'); } - } + }; const handleDetailDraw = () => { if (props.areaCoordList) { - // console.log('handleDetailDraw') - const areas = props.areaCoordList[0]; const paths = []; - areas.coordList.forEach((coord) => { - const path = new naver.maps.LatLng(coord.lat, coord.lon) + areas.coordList.forEach(coord => { + const path = new naver.maps.LatLng(coord.lat, coord.lon); paths.push(path); }); if (areas.areaType && areas.areaType === 'LINE') { //polyline 생성 - if(pastPolyline) { + if (pastPolyline) { pastPolyline.setMap(null); pastDragCircle.forEach(c => c.setMap(null)); } @@ -613,10 +619,10 @@ export const FlightPlanDraw = props => { map: map }); - setPolyline(polyline) + setPolyline(polyline); //dragCircle 생성 - for(let i = 0; i < paths.length; i++) { + for (let i = 0; i < paths.length; i++) { dragCircle.push( new naver.maps.Circle({ strokestrokeOpacity: 1, @@ -629,9 +635,16 @@ export const FlightPlanDraw = props => { map: map, clickable: true }) - ) - dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) })) - + ); + dragCircleEve.push( + naver.maps.Event.addListener( + dragCircle[i], + 'mousedown', + function () { + onMouseDownDrag(i); + } + ) + ); } setDragCircle(dragCircle); @@ -640,14 +653,13 @@ export const FlightPlanDraw = props => { if (areas.bufferCoordList) { const bufferPaths = []; - areas.bufferCoordList.forEach((bfCoord) => { + areas.bufferCoordList.forEach(bfCoord => { const path = new naver.maps.LatLng(bfCoord.lat, bfCoord.lon); bufferPaths.push(path); }); - // console.log('buffer test : ',areas.bufferCoordList); - - if(pastBuffer) { + + if (pastBuffer) { pastBuffer.setMap(null); } @@ -662,41 +674,52 @@ export const FlightPlanDraw = props => { } //marker 생성 - if(pastMarker) { + if (pastMarker) { pastMarker.forEach(c => c.setMap(null)); } - for(let i = 0; i < paths.length; i++) { - if(i == 0) { + for (let i = 0; i < paths.length; i++) { + if (i == 0) { distanceMarker.push( new naver.maps.Marker({ position: paths[i], icon: { - content: '
    '+ 'Start' +'
    ', + content: + '
    ' + + 'Start' + + '
    ', anchor: new naver.maps.Point(45, 35) - }, map: map + }, + map: map }) - ) + ); } else { var proj = map.getProjection(), - r = proj.getDistance(paths[i-1], paths[i]); - - let text = fromMetersToText(r); + r = proj.getDistance(paths[i - 1], paths[i]); + + let text = fromMetersToText(r); - let dis1 = paths[i-1] - let dis2 = paths[i] - let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2); + let dis1 = paths[i - 1]; + let dis2 = paths[i]; + let midPoint = new naver.maps.LatLng( + (dis1.y + dis2.y) / 2, + (dis1.x + dis2.x) / 2 + ); distanceMarker.push( new naver.maps.Marker({ // position: paths[i], position: midPoint, icon: { - content: '
    '+ text +'
    ', + content: + '
    ' + + text + + '
    ', anchor: new naver.maps.Point(20, 35) - }, map: map + }, + map: map }) - ) + ); } } setMarker(distanceMarker); @@ -704,7 +727,7 @@ export const FlightPlanDraw = props => { if (areas.areaType && areas.areaType === 'POLYGON') { //polygon 생성 - if(pastPolygon) { + if (pastPolygon) { pastPolygon.setMap(null); pastDragCircle.forEach(c => c.setMap(null)); } @@ -720,7 +743,7 @@ export const FlightPlanDraw = props => { setPolygon(polygon); //dragCircle 생성 - for(let i = 0; i < paths.length; i++) { + for (let i = 0; i < paths.length; i++) { dragCircle.push( new naver.maps.Circle({ strokestrokeOpacity: 1, @@ -733,85 +756,106 @@ export const FlightPlanDraw = props => { map: map, clickable: true }) - ) - dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) })) + ); + dragCircleEve.push( + naver.maps.Event.addListener( + dragCircle[i], + 'mousedown', + function () { + onMouseDownDrag(i); + } + ) + ); } setDragCircle(dragCircle); - //marker 생성 - if(pastMarker) { - pastMarker.forEach(c => c.setMap(null)) + if (pastMarker) { + pastMarker.forEach(c => c.setMap(null)); } - for(let i = 0; i < paths.length+1; i++) { + for (let i = 0; i < paths.length + 1; i++) { //start - if(i == 0) { + if (i == 0) { distanceMarker.push( new naver.maps.Marker({ position: paths[0], icon: { - content: '
    '+ 'Start' +'
    ', + content: + '
    ' + + 'Start' + + '
    ', anchor: new naver.maps.Point(45, 35) }, map: map }) - ) - //첫좌표이자 마지막 좌표 - } else if(i == paths.length) { + ); + //첫좌표이자 마지막 좌표 + } else if (i == paths.length) { var proj = map.getProjection(), - r = proj.getDistance(paths[0], paths[i-1]); + r = proj.getDistance(paths[0], paths[i - 1]); let text = fromMetersToText(r); - let dis1 = paths[0] - let dis2 = paths[i-1] - let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2); + let dis1 = paths[0]; + let dis2 = paths[i - 1]; + let midPoint = new naver.maps.LatLng( + (dis1.y + dis2.y) / 2, + (dis1.x + dis2.x) / 2 + ); distanceMarker.push( new naver.maps.Marker({ // position: paths[0], position: midPoint, icon: { - content: '
    '+ text +'
    ', + content: + '
    ' + + text + + '
    ', anchor: new naver.maps.Point(0, 35) }, map: map }) - ) - //그 외 나머지 + ); + //그 외 나머지 } else { var proj = map.getProjection(), - r = proj.getDistance(paths[i-1], paths[i]); + r = proj.getDistance(paths[i - 1], paths[i]); - let text = fromMetersToText(r); + let text = fromMetersToText(r); - let dis1 = paths[i-1] - let dis2 = paths[i] - let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2); + let dis1 = paths[i - 1]; + let dis2 = paths[i]; + let midPoint = new naver.maps.LatLng( + (dis1.y + dis2.y) / 2, + (dis1.x + dis2.x) / 2 + ); distanceMarker.push( new naver.maps.Marker({ // position: paths[i], position: midPoint, icon: { - content: '
    '+ text +'
    ', + content: + '
    ' + + text + + '
    ', anchor: new naver.maps.Point(20, 35) }, map: map }) - ) + ); } } setMarker(distanceMarker); } - if (areas.areaType && areas.areaType === 'CIRCLE') { //circle 생성 - if(pastCircle) { + if (pastCircle) { pastCircle.forEach(prev => prev.setMap(null)); } @@ -826,12 +870,18 @@ export const FlightPlanDraw = props => { map: map, clickable: true }); - Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); }) + Eve.mousedownEve = naver.maps.Event.addListener( + circle, + 'mousedown', + function () { + onMouseDownDrag(0); + } + ); setCircle([circle]); //marker 생성 - if(pastMarker) { + if (pastMarker) { pastMarker.forEach(c => c.setMap(null)); } @@ -839,75 +889,83 @@ export const FlightPlanDraw = props => { distanceMarker = new naver.maps.Marker({ position: paths[0], icon: { - content: '
    '+ text +'
    ', + content: + '
    ' + + text + + '
    ', anchor: new naver.maps.Point(-5, -5) }, map: map - }) + }); setMarker([distanceMarker]); } } - } + }; //div로 보여주기 const addMileStone = (coord, text) => { let content; let midPoint; let anchor; - if(text == 'Start') { - content = '
    '+ text +'
    ' - midPoint = coord - anchor = new naver.maps.Point(45, 35) + if (text == 'Start') { + content = + '
    ' + + text + + '
    '; + midPoint = coord; + anchor = new naver.maps.Point(45, 35); } else { - content = '
    '+ text +'
    ' - let dis1 = coord[coord.length-2]; - let dis2 = coord[coord.length-1]; - if(circle) { - midPoint = coord + content = + '
    ' + + text + + '
    '; + let dis1 = coord[coord.length - 2]; + let dis2 = coord[coord.length - 1]; + if (circle) { + midPoint = coord; } else { - midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2); + midPoint = new naver.maps.LatLng( + (dis1.y + dis2.y) / 2, + (dis1.x + dis2.x) / 2 + ); } - anchor = new naver.maps.Point(20, 35) + anchor = new naver.maps.Point(20, 35); } - + var marker = new naver.maps.Marker({ position: midPoint, icon: { content: content, anchor: anchor - }, + } // map: map }); // marker.setVisible(false) - - - if(circle) { + + if (circle) { distanceMarker = marker; } else { marker.setMap(map); distanceMarker.push(marker); } - } - + }; + //거리 재기 - const fromMetersToText = (meters) => { + const fromMetersToText = meters => { meters = meters || 0; - + var km = 1000, text = meters; text = parseFloat(meters.toFixed(1)) + 'm'; - - + // if(meters >= km) { // text = parseFloat((meters / km).toFixed(1)) + 'km'; // } else { // text = parseFloat(meters.toFixed(1)) + 'm'; // } return text; - } + }; - return( - - ) -}; \ No newline at end of file + return ; +}; diff --git a/src/components/map/naver/dron/DronMarker.js b/src/components/map/naver/dron/DronMarker.js index c895ed07..44fb82ce 100644 --- a/src/components/map/naver/dron/DronMarker.js +++ b/src/components/map/naver/dron/DronMarker.js @@ -4,28 +4,35 @@ import { useDispatch, useSelector } from 'react-redux'; import '../../../../assets/css/custom.css'; import DronIconPulple from '../../../../assets/images/drone-marker-icon-pulple.png'; import DronIcon from '../../../../assets/images/drone-marker-icon.png'; -import { controlGpDtlAction, controlGpFlightPlanAction } from '../../../../modules/control/gp'; -import { objectClickAction, objectUnClickAction } from '../../../../modules/control/map/actions/controlMapActions'; +import { + controlGpDtlAction, + controlGpFlightPlanAction +} from '../../../../modules/control/gp'; +import { + objectClickAction, + objectUnClickAction +} from '../../../../modules/control/map/actions/controlMapActions'; import { toast } from 'react-toastify'; import DronToast from './DronToast'; export const DronMarker = props => { - const dispatch = useDispatch(); + const dispatch = useDispatch(); - const { controlGpList } = useSelector(state => state.controlGpState); - const { objectId, isClickObject } = useSelector(state => state.controlMapReducer); + const { controlGpList } = useSelector(state => state.controlGpState); + const { objectId, isClickObject } = useSelector( + state => state.controlMapReducer + ); - const [arrMarkers, setArrMarkers] = useState([]); - // const [arrInfos, setArrInfos] = useState([]); + const [arrMarkers, setArrMarkers] = useState([]); + // const [arrInfos, setArrInfos] = useState([]); - let naver = props.naver; - let map = props.map; - let CustomOverlay; + let naver = props.naver; + let map = props.map; + let CustomOverlay; - let infoWindow; - const infowindowOpen = (data) => { - - const content = ` + let infoWindow; + const infowindowOpen = data => { + const content = `
    ${data?.id} @@ -33,344 +40,344 @@ export const DronMarker = props => {
    - ${data?.speed}${data?.speedType} | ${data?.elev}${data?.elevType} | ${data?.heading} - ${(data?.coord._lat).toFixed(6)} | ${(data?.coord._lng).toFixed(6)} + ${ + data?.speed + }${data?.speedType} | ${data?.elev}${data?.elevType} | ${ + data?.heading + } + ${(data?.coord._lat).toFixed( + 6 + )} | ${(data?.coord._lng).toFixed(6)}
    `; - infoWindow = new naver.maps.InfoWindow({ - class: 'tooltip-dblock', - content: content, - maxWidth: 160, - backgroundColor: '#283046', //박스안쪽영역 컬러 - // borderColor: '#333', //테두리컬러 - // borderWidth: 3, //테두리 굵기 - // anchorSize: new naver.maps.Size(30, -10), - anchorSkew: false, - anchorColor: '#283046', - - pixelOffset: new naver.maps.Point(20, -20) - }); - - infoWindow.open(props.map, data.coord); - }; - - useEffect(() => { - markerInit(); - }, [controlGpList]); - - useEffect(() => { - arrMarkers.map(clickMarker => { - if (objectId === clickMarker.controlId && isClickObject) { - // clickMarker.setIcon(DronIconPulple); - clickMarker.setIcon({ - url: DronIconPulple, - origin: new naver.maps.Point(0, 0), - anchor: new naver.maps.Point(15, 15), - }); - } else { - clickMarker.setIcon({ - url: DronIcon, - origin: new naver.maps.Point(0, 0), - anchor: new naver.maps.Point(15, 15), - }); - } - }); - }, [objectId, isClickObject]); - - useEffect(() => { - arrMarkers.map(clickMarker => { - if (objectId === clickMarker.controlId) { - props.map.setCenter(clickMarker.getPosition()); - props.map.setZoom(13, true); - } - }); - }, [objectId]); - - //마커를 그린다. - const addMarkers = (position, id, controlId, gps) => { - // console.log(gps, '>>>.') - const marker = new naver.maps.Marker({ - position: position, - title: id, - id: id, - controlId: controlId, - icon: { - // content: [ - // '
    dddd
    ', - - // ].join(''), - url: DronIcon, - // size: new naver.maps.Size(50, 50), - origin: new naver.maps.Point(0, 0), - anchor: new naver.maps.Point(15, 15), - }, - gps: gps + infoWindow = new naver.maps.InfoWindow({ + class: 'tooltip-dblock', + content: content, + maxWidth: 160, + backgroundColor: '#283046', //박스안쪽영역 컬러 + // borderColor: '#333', //테두리컬러 + // borderWidth: 3, //테두리 굵기 + // anchorSize: new naver.maps.Size(30, -10), + anchorSkew: false, + anchorColor: '#283046', + + pixelOffset: new naver.maps.Point(20, -20) + }); + + infoWindow.open(props.map, data.coord); + }; + + useEffect(() => { + markerInit(); + }, [controlGpList]); + + useEffect(() => { + arrMarkers.map(clickMarker => { + if (objectId === clickMarker.controlId && isClickObject) { + // clickMarker.setIcon(DronIconPulple); + clickMarker.setIcon({ + url: DronIconPulple, + origin: new naver.maps.Point(0, 0), + anchor: new naver.maps.Point(15, 15) }); - marker.setMap(props.map); - - // drone 정보 창 - naver.maps.Event.addListener(marker, 'click', function (e) { - handlerDronClick(marker.controlId, marker.id); + } else { + clickMarker.setIcon({ + url: DronIcon, + origin: new naver.maps.Point(0, 0), + anchor: new naver.maps.Point(15, 15) }); + } + }); + }, [objectId, isClickObject]); + + useEffect(() => { + arrMarkers.map(clickMarker => { + if (objectId === clickMarker.controlId) { + props.map.setCenter(clickMarker.getPosition()); + props.map.setZoom(13, true); + } + }); + }, [objectId]); + + //마커를 그린다. + const addMarkers = (position, id, controlId, gps) => { + const marker = new naver.maps.Marker({ + position: position, + title: id, + id: id, + controlId: controlId, + icon: { + // content: [ + // '
    dddd
    ', + + // ].join(''), + url: DronIcon, + // size: new naver.maps.Size(50, 50), + origin: new naver.maps.Point(0, 0), + anchor: new naver.maps.Point(15, 15) + }, + gps: gps + }); + marker.setMap(props.map); + + // drone 정보 창 + naver.maps.Event.addListener(marker, 'click', function (e) { + handlerDronClick(marker.controlId, marker.id); + }); + + naver.maps.Event.addListener(marker, 'mouseover', function (e) { + // // handlerDronMouseOver(marker); + + const data = {}; + data.id = marker.id; + data.speed = marker.gps?.speed; + data.speedType = marker.gps?.speedType; + data.elev = marker.gps?.elev; + data.elevType = marker.gps?.elevType; + data.heading = marker.gps?.heading; + data.coord = marker.position; + + infowindowOpen(data); + }); + + naver.maps.Event.addListener(marker, 'mouseout', function (e) { + if (infoWindow) { + infoWindow.close(); + } + }); - naver.maps.Event.addListener(marker, 'mouseover', function(e) { - // // handlerDronMouseOver(marker); - - const data = {}; - data.id = marker.id; - data.speed = marker.gps?.speed; - data.speedType = marker.gps?.speedType; - data.elev = marker.gps?.elev; - data.elevType = marker.gps?.elevType; - data.heading = marker.gps?.heading; - data.coord = marker.position; + setArrMarkers(m => [...m, marker]); + // markerInfo(marker, position, id); + }; - infowindowOpen(data); - }) + const handlerDronMouseOver = marker => {}; - naver.maps.Event.addListener(marker, 'mouseout', function(e) { - if (infoWindow) { - infoWindow.close(); - } - }) - - setArrMarkers(m => [...m, marker]); - // markerInfo(marker, position, id); - }; + const handlerDronClick = (controlId, idntfNum) => { + // const idntfNum = marker.id; + // const contorlId = marker.controlId; - const handlerDronMouseOver = (marker) => { - - } + // 클릭한 식별번호 정보를 가진 그룹 추출 + // const group = controlGroupAuthInfo.find(group => group.idntfNum === idntfNum); - const handlerDronClick = (controlId, idntfNum) => { - // const idntfNum = marker.id; - // const contorlId = marker.controlId; + //히스토리 불러오기 + dispatch(objectClickAction(controlId)); + dispatch(controlGpDtlAction.request(controlId)); + dispatch(controlGpFlightPlanAction.request(idntfNum)); + // dispatch(controlGpLogAction.request({ id: controlId })); + // dispatch(controlGpLogAction.request(controlId)); - // 클릭한 식별번호 정보를 가진 그룹 추출 - // const group = controlGroupAuthInfo.find(group => group.idntfNum === idntfNum); + // dispatch(controlGpHisAction.request({ id: objectId })); + }; - //히스토리 불러오기 - dispatch(objectClickAction(controlId)); - dispatch(controlGpDtlAction.request(controlId)); - dispatch(controlGpFlightPlanAction.request(idntfNum)); - // dispatch(controlGpLogAction.request({ id: controlId })); - // dispatch(controlGpLogAction.request(controlId)); + //마커를 삭제 한다. + const removeMarkers = marker => { + marker.setMap(null); + }; - // dispatch(controlGpHisAction.request({ id: objectId })); - }; + const removeInfos = info => { + info.setMap(null); + }; - //마커를 삭제 한다. - const removeMarkers = marker => { - marker.setMap(null); - }; + //마커에 위치를 이동한다. + const moveMarkers = (marker, position) => { + marker.setPosition(position); + }; - const removeInfos = info => { - info.setMap(null); + const moveInfos = (info, position) => { + if (info) { + info.setPosition(position, info); } - - //마커에 위치를 이동한다. - const moveMarkers = (marker, position) => { - marker.setPosition(position); - }; - - const moveInfos = (info, position) => { - if(info) { - info.setPosition(position, info); - } - }; - - //데이터가 없는 마커를 모두 삭제 한다. - const allRemoveMarkers = () => { - if (arrMarkers && controlGpList) { - - arrMarkers.map(marker => { - const isExists = controlGpList.find( - item => item.objectId === marker.id - ); - if (!isExists) { - removeMarkers(marker); - const arrData = arrMarkers.filter( - item => item.id != marker.id - ); - removeArrMarkers(arrData); - - dispatch(objectUnClickAction()); - } - }); - - // arrInfos.map(info => { - // const isExists = arrMarkers.find( - // marker => marker.id === info._id - // ); - // if (!isExists) { - // removeInfos(info); - // const arrData = arrInfos.filter( - // item => item.id != info._id - // ); - // removeArrInfos(arrData); - - // // dispatch(objectUnClickAction()); - // } - // }); - + }; + + //데이터가 없는 마커를 모두 삭제 한다. + const allRemoveMarkers = () => { + if (arrMarkers && controlGpList) { + arrMarkers.map(marker => { + const isExists = controlGpList.find( + item => item.objectId === marker.id + ); + if (!isExists) { + removeMarkers(marker); + const arrData = arrMarkers.filter(item => item.id != marker.id); + removeArrMarkers(arrData); + + dispatch(objectUnClickAction()); } - }; + }); - //마커를 셋팅 한다. - const markerInit = () => { - if (controlGpList) { - allRemoveMarkers(); - controlGpList.map(item => { - let position = new naver.maps.LatLng(item.lat, item.lng); - - if (arrMarkers) { - const isExists = arrMarkers.find( ele => ele.id === item.objectId ); - // const isInfos = arrInfos.find( info => info._id === item.objectId ) - if (isExists) { - moveMarkers(isExists, position); - // moveInfos(isInfos, position); - } else { - addMarkers(position, item.objectId, item.controlId, item); - } - } else { - addMarkers(position, item.objectId, item.controlId, item); - } - }); + // arrInfos.map(info => { + // const isExists = arrMarkers.find( + // marker => marker.id === info._id + // ); + // if (!isExists) { + // removeInfos(info); + // const arrData = arrInfos.filter( + // item => item.id != info._id + // ); + // removeArrInfos(arrData); + + // // dispatch(objectUnClickAction()); + // } + // }); + } + }; + + //마커를 셋팅 한다. + const markerInit = () => { + if (controlGpList) { + allRemoveMarkers(); + controlGpList.map(item => { + let position = new naver.maps.LatLng(item.lat, item.lng); + + if (arrMarkers) { + const isExists = arrMarkers.find(ele => ele.id === item.objectId); + // const isInfos = arrInfos.find( info => info._id === item.objectId ) + if (isExists) { + moveMarkers(isExists, position); + // moveInfos(isInfos, position); + } else { + addMarkers(position, item.objectId, item.controlId, item); + } + } else { + addMarkers(position, item.objectId, item.controlId, item); } - }; + }); + } + }; - //운항정보 창 셋팅 - const infoInit = (marker, gps, idx) => { - CustomOverlay = function(options) { - this._element = $(` + //운항정보 창 셋팅 + const infoInit = (marker, gps, idx) => { + CustomOverlay = function (options) { + this._element = $(`
    ${marker?.id} ${gps?.speed}${gps?.speedType} | ${gps?.elev}${gps?.elevType} | ${gps?.heading}
    - `) - - // this._element = $(` - //
    - //
    - // ${marker?.id} - //
    - //
    - //
    - // 속도: ${gps?.speed}${gps?.speedType} - //
    - //
    - // 고도: ${gps?.elev}${gps?.elevType} - //
    - //
    - // 헤딩방향: ${gps?.heading} - //
    - //
    - //
    - //
    - // `) - - this.setPosition(options.position, idx); - this.setMap(options.map || null); - this.setId(options.id); - this.setIdx(idx); - }; - - CustomOverlay.prototype = new naver.maps.OverlayView(); - CustomOverlay.prototype.constructor = CustomOverlay; - - //메소드 재정의 - //필수 - CustomOverlay.prototype.onAdd = function() { - let overlayLayer = this.getPanes().overlayLayer; - - this._element.appendTo(overlayLayer); - }; - - CustomOverlay.prototype.draw = function(idx) { - if (!this.getMap()) { - return; - } - - let projection = this.getProjection(), + `); + + // this._element = $(` + //
    + //
    + // ${marker?.id} + //
    + //
    + //
    + // 속도: ${gps?.speed}${gps?.speedType} + //
    + //
    + // 고도: ${gps?.elev}${gps?.elevType} + //
    + //
    + // 헤딩방향: ${gps?.heading} + //
    + //
    + //
    + //
    + // `) + + this.setPosition(options.position, idx); + this.setMap(options.map || null); + this.setId(options.id); + this.setIdx(idx); + }; + + CustomOverlay.prototype = new naver.maps.OverlayView(); + CustomOverlay.prototype.constructor = CustomOverlay; + + //메소드 재정의 + //필수 + CustomOverlay.prototype.onAdd = function () { + let overlayLayer = this.getPanes().overlayLayer; + + this._element.appendTo(overlayLayer); + }; + + CustomOverlay.prototype.draw = function (idx) { + if (!this.getMap()) { + return; + } + + let projection = this.getProjection(), position = this.getPosition(), pixelPosition = projection.fromCoordToOffset(position); - - // let cnt = 0; - // let index = idx?._idx; - // cnt = index * 98; - this._element.css('left', pixelPosition.x) - this._element.css('top', pixelPosition.y) - // this._element.css('top', pixelPosition.y + -cnt) - - }; - - CustomOverlay.prototype.onRemove = function() { - let overlayLayer = this.getPanes().overlayLayer; - - this._element.remove(); - this._element.off(); - }; - - //속성 - CustomOverlay.prototype.setPosition = function(position, idx) { - this._position = position; - this.draw(idx); - }; - - CustomOverlay.prototype.getPosition = function() { - return this._position; - }; - - CustomOverlay.prototype.setId = function(id) { - this._id = id; - }; - - CustomOverlay.prototype.getId = function() { - return this._id; - }; - - CustomOverlay.prototype.setIdx = function(idx) { - this._idx = idx; - }; - - CustomOverlay.prototype.getIdx = function() { - return this._idx; - }; - } - const removeArrMarkers = arrData => { - setArrMarkers(arrData); + // let cnt = 0; + // let index = idx?._idx; + // cnt = index * 98; + this._element.css('left', pixelPosition.x); + this._element.css('top', pixelPosition.y); + // this._element.css('top', pixelPosition.y + -cnt) }; - const removeArrInfos = arrData => { - setArrInfos(arrData); + CustomOverlay.prototype.onRemove = function () { + let overlayLayer = this.getPanes().overlayLayer; + + this._element.remove(); + this._element.off(); }; - const markerInfo = () => { - arrMarkers.forEach((marker, idx) => { - // infoInit(marker, controlGpList[idx], idx); - - if(controlGpList.length != 0) { - const info = new CustomOverlay({ - position: new naver.maps.LatLng(controlGpList[idx]?.lat, controlGpList[idx]?.lng), - // map: map, - id: marker.id, - idx: idx - }); - info.setMap(map); - // console.log(info) - setArrInfos(m => [...m, info]); - } - }); - } + //속성 + CustomOverlay.prototype.setPosition = function (position, idx) { + this._position = position; + this.draw(idx); + }; + + CustomOverlay.prototype.getPosition = function () { + return this._position; + }; + + CustomOverlay.prototype.setId = function (id) { + this._id = id; + }; + + CustomOverlay.prototype.getId = function () { + return this._id; + }; + + CustomOverlay.prototype.setIdx = function (idx) { + this._idx = idx; + }; + + CustomOverlay.prototype.getIdx = function () { + return this._idx; + }; + }; + + const removeArrMarkers = arrData => { + setArrMarkers(arrData); + }; + + const removeArrInfos = arrData => { + setArrInfos(arrData); + }; + + const markerInfo = () => { + arrMarkers.forEach((marker, idx) => { + // infoInit(marker, controlGpList[idx], idx); + + if (controlGpList.length != 0) { + const info = new CustomOverlay({ + position: new naver.maps.LatLng( + controlGpList[idx]?.lat, + controlGpList[idx]?.lng + ), + // map: map, + id: marker.id, + idx: idx + }); + info.setMap(map); + + setArrInfos(m => [...m, info]); + } + }); + }; - - return null; + return null; }; diff --git a/src/components/map/naver/dron/DronToast.js b/src/components/map/naver/dron/DronToast.js index bbfa6d44..9c89de3f 100644 --- a/src/components/map/naver/dron/DronToast.js +++ b/src/components/map/naver/dron/DronToast.js @@ -3,87 +3,87 @@ import { useSelector, useDispatch } from 'react-redux'; import { Fragment } from 'react'; import { toast } from 'react-toastify'; import Avatar from '../../../../@core/components/avatar'; -import { Bell, Check, X, AlertTriangle, Info } from 'react-feather' -import { controlGpDtlAction, controlGpFlightPlanAction } from '../../../../modules/control/gp'; -import { objectClickAction, objectUnClickAction } from '../../../../modules/control/map/actions/controlMapActions'; +import { Bell, Check, X, AlertTriangle, Info } from 'react-feather'; +import { + controlGpDtlAction, + controlGpFlightPlanAction +} from '../../../../modules/control/gp'; +import { + objectClickAction, + objectUnClickAction +} from '../../../../modules/control/map/actions/controlMapActions'; import 'react-toastify/dist/ReactToastify.css'; const DronToast = () => { - const dispatch = useDispatch(); - - const { controlGpArcrftWarnList } = useSelector(state => state.controlGpLogState); - const [toastId, setToastId] = useState(); + const dispatch = useDispatch(); - useEffect(() => { - if (controlGpArcrftWarnList) { - if (!toastId) { + const { controlGpArcrftWarnList } = useSelector( + state => state.controlGpLogState + ); + const [toastId, setToastId] = useState(); - for (let i=0; i { - handleNotiClick(controlGpArcrftWarnList[i].cntrlId, controlGpArcrftWarnList[i].idntfNum); - // setToastId(null); - }, - onClose: () => { - setToastId(null); - } - } - ); - - setToastId(id); - - break; - } + useEffect(() => { + if (controlGpArcrftWarnList) { + if (!toastId) { + for (let i = 0; i < controlGpArcrftWarnList.length; i++) { + if (controlGpArcrftWarnList[i].controlWarnCd) { + const id = toast.info( + toastRender( + `${controlGpArcrftWarnList[i].idntfNum} 비정상 상황 알림`, + `경로 상에 비행 구역을 이탈했습니다.` + ), + { + autoClose: false, + hideProgressBar: true, + position: toast.POSITION.BOTTOM_RIGHT, + onClick: () => { + handleNotiClick( + controlGpArcrftWarnList[i].cntrlId, + controlGpArcrftWarnList[i].idntfNum + ); + // setToastId(null); + }, + onClose: () => { + setToastId(null); } - } - } - }, [controlGpArcrftWarnList]); + } + ); - const handleNotiClick = (controlId, idntfNum) => { - console.log(controlId + ', ' + idntfNum); + setToastId(id); - dispatch(objectClickAction(controlId)); - dispatch(controlGpDtlAction.request(controlId)); - dispatch(controlGpFlightPlanAction.request(idntfNum)); + break; + } + } + } } + }, [controlGpArcrftWarnList]); - const toastRender = (title, message) => { + const handleNotiClick = (controlId, idntfNum) => { + dispatch(objectClickAction(controlId)); + dispatch(controlGpDtlAction.request(controlId)); + dispatch(controlGpFlightPlanAction.request(idntfNum)); + }; - return ( - -
    -
    - } /> -
    - {title} -
    -
    -
    - -
    - - {message} - -
    -     - ) - } + const toastRender = (title, message) => { + return ( + +
    +
    + } /> +
    + {title} +
    +
    +
    - return ( - null - ) - -} +
    + {message} +
    +     + ); + }; + return null; +}; -export default DronToast; \ No newline at end of file +export default DronToast; diff --git a/src/components/map/naver/feature/FeatureAirZone.js b/src/components/map/naver/feature/FeatureAirZone.js index 99ab9f65..ed1c2127 100644 --- a/src/components/map/naver/feature/FeatureAirZone.js +++ b/src/components/map/naver/feature/FeatureAirZone.js @@ -7,14 +7,11 @@ export const FeatureAirZone = props => { let infoWindow; useEffect(() => { - // console.log('>>>>>', mapControl); featureAirZoneInit(); featureAirEvent(); }, [mapControl]); - useEffect(() => { - // console.log(">>>>>>>>" , props.features) - }, []); + useEffect(() => {}, []); const infowindowOpen = data => { const content = @@ -122,7 +119,6 @@ export const FeatureAirZone = props => { const featureAirEvent = () => { props.map.data.addListener('click', function (e) { // e.feature.setProperty('isColorful', true); - // console.log(e.feature.property_name); }); props.map.data.addListener('mouseover', function (e) { diff --git a/src/components/map/naver/search/NaverMapSearch.js b/src/components/map/naver/search/NaverMapSearch.js index 99985135..f5328a8f 100644 --- a/src/components/map/naver/search/NaverMapSearch.js +++ b/src/components/map/naver/search/NaverMapSearch.js @@ -2,7 +2,6 @@ import { useEffect } from 'react'; export const NaverMapSearch = props => { useEffect(() => { - console.log('>>>>', props.naver.maps.Service); props.naver.maps.Service.geocode( { address: '산곡동' @@ -14,7 +13,6 @@ export const NaverMapSearch = props => { var result = response.result, // 검색 결과의 컨테이너 items = result.items; // 검색 결과의 배열 - // console.log(result); // do Something } diff --git a/src/components/map/naver/sensor/SensorZone.js b/src/components/map/naver/sensor/SensorZone.js index 529e7f87..cce57844 100644 --- a/src/components/map/naver/sensor/SensorZone.js +++ b/src/components/map/naver/sensor/SensorZone.js @@ -1,23 +1,21 @@ -import React, {useEffect, useState} from 'react'; -import {useSelector} from "react-redux"; +import React, { useEffect, useState } from 'react'; +import { useSelector } from 'react-redux'; const SENSOR_RADIUS = '100'; const SENSOR_RADIUS_DIVISION = '3'; let lenderCnt = 0; -const SensorZone = (props) => { - const {naver} = props; +const SensorZone = props => { + const { naver } = props; // 드론 실시간 정보 - const {controlGpList} = useSelector(state => state.controlGpState); + const { controlGpList } = useSelector(state => state.controlGpState); // 환경지표 타입(dust, co, o3, no2, so2) - const {sensor} = useSelector(state => state.controlMapReducer); + const { sensor } = useSelector(state => state.controlMapReducer); // 센서레이어(환경지표) 관리 const [circleLayers, setCircleLayers] = useState([]); const [polilineGroupLayers, setPolilineGroupLayers] = useState({}); - // console.log('########## SensorZone ###########', lenderCnt, {controlGpList, circleLayer: circleLayers, polilineLayer: polilineGroupLayers}); - useEffect(() => { - lenderCnt++ + lenderCnt++; if (!sensor) { removeSensorLayers(); } else { @@ -27,7 +25,6 @@ const SensorZone = (props) => { let infoWindow; // 센서 레이어 Info const infowindowOpen = data => { - // console.log('data', data) const content = `
    @@ -81,7 +78,7 @@ const SensorZone = (props) => { emtpyLayerRemove(); if (controlGpList) { controlGpList.forEach(controlGp => { - const {controlId, lat, lng, objectId} = controlGp; + const { controlId, lat, lng, objectId } = controlGp; let color = undefined; const sensorData = convtSensorData(controlGp); if (sensorData) { @@ -104,21 +101,23 @@ const SensorZone = (props) => { addPolilineLayers(controlId, objectId, position, color); } - const circleLayer = circleLayers.find(layer => layer.controlId === controlId); - if (circleLayer) moveCircleLayer(circleLayer, position, color, sensorData); + const circleLayer = circleLayers.find( + layer => layer.controlId === controlId + ); + if (circleLayer) + moveCircleLayer(circleLayer, position, color, sensorData); else addCircleLayer(controlId, objectId, position, color, sensorData); }); } - } + }; // 센서레이어 생성 const addSensorLayer = (position, id, controlId, color, sensorData) => { addPolilineLayers(controlId, id, position, color); addCircleLayer(controlId, id, position, color, sensorData); - } + }; // Circle 레이어 생성 const addCircleLayer = (controlId, id, position, color, sensorData) => { - // console.log({controlId, id, position, color, sensorData}) const circleLayer = new naver.maps.Circle({ title: id, id: id, @@ -133,7 +132,7 @@ const SensorZone = (props) => { fillColor: color, fillOpacity: 0.2, sensorData: sensorData - }) + }); // Circle 이벤트 주입 naver.maps.Event.addListener(circleLayer, 'mouseover', function (e) { const data = {}; @@ -144,131 +143,147 @@ const SensorZone = (props) => { e.overlay.setOptions({ strokeWeight: 5, fillOpacity: 0.5 - }) + }); infowindowOpen(data); }); naver.maps.Event.addListener(circleLayer, 'mouseout', function (e) { e.overlay.setOptions({ strokeWeight: 2, fillOpacity: 0.2 - }) + }); // props.map.Event.revertStyle(); if (infoWindow) { infoWindow.close(); } }); - circleLayer.setMap(props.map) - setCircleLayers(prev => ([...prev, circleLayer])); - - } + circleLayer.setMap(props.map); + setCircleLayers(prev => [...prev, circleLayer]); + }; const addPolilineLayers = (controlId, id, position, color) => { // 지도에 적용 및 레이어 관리 추가 - // console.log('addPolilineLayers', controlId) + const polilineLayers = createCircleInGrid(position, id, controlId, color); polilineLayers.forEach(layer => layer.setMap(props.map)); setPolilineGroupLayers(prev => ({ ...prev, [controlId]: polilineLayers })); - } + }; // 센서레이어 이동 const moveSensorLayer = (controlId, position, color) => { - const circleLayer = circleLayers.find(layer => layer.controlId === controlId); + const circleLayer = circleLayers.find( + layer => layer.controlId === controlId + ); moveCircleLayer(circleLayer, position, color); const polilineLayers = polilineGroupLayers[controlId]; movePolilineLayers(polilineLayers, position, color); - } + }; const moveCircleLayer = (circleLayer, position, color, sensorData) => { // const circleLayer = circleLayers.find(layer => layer.controlId === controlId); if (circleLayer) { circleLayer.sensorData = sensorData; - circleLayer.setOptions({center: position, strokeColor: color, fillColor: color}) + circleLayer.setOptions({ + center: position, + strokeColor: color, + fillColor: color + }); } - } + }; const movePolilineLayers = (polilineLayers, position, color) => { - const {controlId, id, position: prevPosition} = polilineLayers[0]; + const { controlId, id, position: prevPosition } = polilineLayers[0]; if (prevPosition.equals(position)) { if (polilineLayers) { - polilineLayers.forEach(layer => layer.setOptions({strokeColor: color})); + polilineLayers.forEach(layer => + layer.setOptions({ strokeColor: color }) + ); } } else { if (polilineLayers) { polilineLayers.forEach(layer => layer.setMap(null)); } - const newPolilineLayers = createCircleInGrid(position, id, controlId, color); + const newPolilineLayers = createCircleInGrid( + position, + id, + controlId, + color + ); newPolilineLayers.forEach(layer => layer.setMap(props.map)); setPolilineGroupLayers(prev => ({ ...prev, [controlId]: newPolilineLayers })); } - } + }; // 센서레이어 제거 - const removeSensorLayer = (controlId) => { + const removeSensorLayer = controlId => { removeCircleLayer(controlId); removePolilineLayer(controlId); - } - const removeCircleLayer = (controlId) => { + }; + const removeCircleLayer = controlId => { const idx = circleLayers.findIndex(layer => layer.controlId === controlId); circleLayers[idx].setMap(null); setCircleLayers(prev => { prev.splice(idx, 1); return prev; - }) - } - const removePolilineLayer = (controlId) => { + }); + }; + const removePolilineLayer = controlId => { const polilineLayers = polilineGroupLayers[controlId]; if (polilineLayers) polilineLayers.forEach(layer => layer.setMap(null)); setPolilineGroupLayers(prev => { delete prev[controlId]; return prev; - }) - } + }); + }; // 센서레이어 모두 제거 const removeSensorLayers = () => { circleLayers.forEach(layer => layer.setMap(null)); setCircleLayers([]); const keys = Object.keys(polilineGroupLayers); - keys.forEach((key) => { + keys.forEach(key => { polilineGroupLayers[key].forEach(layer => layer.setMap(null)); - }) + }); setPolilineGroupLayers({}); - } + }; // 레이어관리시 새로운 데이터에 없는 좌표 제거 const emtpyLayerRemove = () => { setCircleLayers(prev => { const remainCircleLayers = prev.filter((circleLayer, i) => { const controlId = circleLayer.controlId; - const findObj = controlGpList.find(controlGp => controlGp.controlId === controlId); + const findObj = controlGpList.find( + controlGp => controlGp.controlId === controlId + ); if (findObj) { return circleLayer; } else { circleLayer.setMap(null); } - }) + }); return remainCircleLayers; - }) + }); setPolilineGroupLayers(prev => { const keys = Object.keys(prev); const remainPolilineGroupLayer = {}; keys.forEach((controlId, i) => { - const findObj = controlGpList.find(controlGp => controlGp.controlId === controlId); + const findObj = controlGpList.find( + controlGp => controlGp.controlId === controlId + ); if (findObj) { remainPolilineGroupLayer[controlId] = prev[controlId]; } else { const polilineLayers = prev[controlId]; polilineLayers.forEach(layer => { layer.setMap(null); - }) + }); } - }) + }); return remainPolilineGroupLayer; - }) - } + }); + }; // Circle안에 격자 무늬 생성 const createCircleInGrid = (position, id, controlId, color) => { @@ -278,14 +293,30 @@ const SensorZone = (props) => { // 각 사분면 각도 const diff = 90 / SENSOR_RADIUS_DIVISION; const angleQuadrant1 = diff * i; - const angleQuadrant2 = 180 - (diff * i); - const angleQuadrant3 = 180 + (diff * i); + const angleQuadrant2 = 180 - diff * i; + const angleQuadrant3 = 180 + diff * i; const angleQuadrant4 = diff * -i; // 각 사분면 좌표 - const coord1 = new naver.maps.EPSG3857.getDestinationCoord(position, angleQuadrant1, SENSOR_RADIUS); - const coord2 = new naver.maps.EPSG3857.getDestinationCoord(position, angleQuadrant2, SENSOR_RADIUS); - const coord3 = new naver.maps.EPSG3857.getDestinationCoord(position, angleQuadrant3, SENSOR_RADIUS); - const coord4 = new naver.maps.EPSG3857.getDestinationCoord(position, angleQuadrant4, SENSOR_RADIUS); + const coord1 = new naver.maps.EPSG3857.getDestinationCoord( + position, + angleQuadrant1, + SENSOR_RADIUS + ); + const coord2 = new naver.maps.EPSG3857.getDestinationCoord( + position, + angleQuadrant2, + SENSOR_RADIUS + ); + const coord3 = new naver.maps.EPSG3857.getDestinationCoord( + position, + angleQuadrant3, + SENSOR_RADIUS + ); + const coord4 = new naver.maps.EPSG3857.getDestinationCoord( + position, + angleQuadrant4, + SENSOR_RADIUS + ); const polyline12 = new naver.maps.Polyline({ id, position, @@ -296,7 +327,7 @@ const SensorZone = (props) => { strokeOpacity: 1, strokeColor: color, strokeStyle: 'shortdash' - }) + }); polilineLayers.push(polyline12); const polyline23 = new naver.maps.Polyline({ id, @@ -308,7 +339,7 @@ const SensorZone = (props) => { strokeOpacity: 1, strokeColor: color, strokeStyle: 'shortdash' - }) + }); polilineLayers.push(polyline23); const polyline34 = new naver.maps.Polyline({ id, @@ -320,7 +351,7 @@ const SensorZone = (props) => { strokeOpacity: 1, strokeColor: color, strokeStyle: 'shortdash' - }) + }); polilineLayers.push(polyline34); const polyline41 = new naver.maps.Polyline({ id, @@ -332,14 +363,14 @@ const SensorZone = (props) => { strokeOpacity: 1, strokeColor: color, strokeStyle: 'shortdash' - }) + }); polilineLayers.push(polyline41); } return polilineLayers; - } + }; // 환경지표 필요한 데이터로 변환 - const convtSensorData = (sensorData) => { + const convtSensorData = sensorData => { const r = { sensorDust: { title: '미세먼지', @@ -371,13 +402,13 @@ const SensorZone = (props) => { text: '-', color: undefined } - } + }; // 정수: 미세먼지 || 소수점 1자리 : 일산화탄소 || 소수점 3자리 : 오존, 이산화질소, 아황산가스 // 좋음 : 파랑, 보통 : 노랑, 나쁨 : 주황, 매우나쁨 : 빨강 // 미세먼지 : 좋음(0~30) 보통(31~80) 나쁨(81~150) 매우나쁨(151~) if (sensorData.sensorDust != undefined && sensorData.sensorDust != null) { - const val = r.sensorDust.value = Math.round(sensorData.sensorDust); + const val = (r.sensorDust.value = Math.round(sensorData.sensorDust)); if (val <= 30) { r.sensorDust.text = '좋음'; r.sensorDust.color = '#37c9ff'; @@ -397,7 +428,8 @@ const SensorZone = (props) => { } // 일산화탄소 : 좋음(0~2) 보통(2.1~9) 나쁨(9.1~15) 매우나쁨(15.1~) if (sensorData.sensorCo != undefined && sensorData.sensorCo != null) { - const val = r.sensorCo.value = Math.round(sensorData.sensorCo * 10) / 10; + const val = (r.sensorCo.value = + Math.round(sensorData.sensorCo * 10) / 10); if (val <= 0.2) { r.sensorCo.text = '좋음'; r.sensorCo.color = '#37c9ff'; @@ -417,7 +449,8 @@ const SensorZone = (props) => { } // 아황산가스 : 좋음(0~0.02) 보통(0.021~0.05) 나쁨(0.051~0.15) 매우나쁨 (0.151 ~) if (sensorData.sensorSo2 != undefined && sensorData.sensorSo2 != null) { - const val = r.sensorSo2.value = Math.round(sensorData.sensorSo2 * 1000) / 1000; + const val = (r.sensorSo2.value = + Math.round(sensorData.sensorSo2 * 1000) / 1000); if (val <= 0.02) { r.sensorSo2.text = '좋음'; r.sensorSo2.color = '#37c9ff'; @@ -437,7 +470,8 @@ const SensorZone = (props) => { } // 이산화질소 : 좋음(0~0.03) 보통(0.031~0.06) 나쁨(0.061~0.2) 매우나쁨(0.201~) if (sensorData.sensorNo2 != undefined && sensorData.sensorNo2 != null) { - const val = r.sensorNo2.value = Math.round(sensorData.sensorNo2 * 1000) / 1000; + const val = (r.sensorNo2.value = + Math.round(sensorData.sensorNo2 * 1000) / 1000); if (val <= 0.03) { r.sensorNo2.text = '좋음'; r.sensorNo2.color = '#37c9ff'; @@ -454,11 +488,11 @@ const SensorZone = (props) => { r.sensorNo2.text = '-'; r.sensorNo2.color = '#a1a1a1'; } - } // 오존 : 좋음(0~0.03) 보통(0.031~0.09) 나쁨(0.091~0.15) 매우나쁨(0.151~) if (sensorData.sensorO3 != undefined && sensorData.sensorO3 != null) { - const val = r.sensorO3.value = Math.round(sensorData.sensorO3 * 1000) / 1000; + const val = (r.sensorO3.value = + Math.round(sensorData.sensorO3 * 1000) / 1000); if (val <= 0.03) { r.sensorO3.text = '좋음'; r.sensorO3.color = '#37c9ff'; @@ -477,7 +511,7 @@ const SensorZone = (props) => { } } return r; - } + }; return null; }; diff --git a/src/components/map/nhn/NMap.js b/src/components/map/nhn/NMap.js index d5eb224e..61784038 100644 --- a/src/components/map/nhn/NMap.js +++ b/src/components/map/nhn/NMap.js @@ -7,9 +7,6 @@ export const NMap = props => { useEffect(() => { mapInit(); - // console.log(map); - - // console.log(features); // setIsMapLoad(true); }, []); @@ -30,11 +27,11 @@ export const NMap = props => { // map = ; props.setMapObject(new naver.maps.Map('map', mapOptions)); // naver.maps.Event.addListener(map, 'click', function (e) { - // console.log(e); + // }); // naver.maps.Event.addListener(map, 'idle', function (e) { - // console.log(e); + // }); }; return
    ; diff --git a/src/components/map/nhn/NMapMarker.js b/src/components/map/nhn/NMapMarker.js index 2c83dbbe..1ab4d028 100644 --- a/src/components/map/nhn/NMapMarker.js +++ b/src/components/map/nhn/NMapMarker.js @@ -25,9 +25,6 @@ export const NMapMarker = props => { }, [props.data]); useEffect(() => { - // console.log('info>>>:' + props.info.lat); - // console.log(props.selMarker); - if (props.selMarker && props.selMarker) { const position = new naver.maps.LatLng(props.info?.lat, props.info?.lon); props.selMarker?.setPosition(position); @@ -45,8 +42,8 @@ export const NMapMarker = props => { id: id, icon: { url: DronIcon, - origin: new naver.maps.Point(0,0), - anchor: new naver.maps.Point(15, 15), + origin: new naver.maps.Point(0, 0), + anchor: new naver.maps.Point(15, 15) } }); props.map.setCenter(position); @@ -56,7 +53,6 @@ export const NMapMarker = props => { }; const moveMarkers = (marker, position) => { - // console.log('dddddddddddddddddddd', marker, position); // marker.setPositon(position); }; diff --git a/src/components/map/nhn/NMapPolyline.js b/src/components/map/nhn/NMapPolyline.js index 676e1034..c83a47be 100644 --- a/src/components/map/nhn/NMapPolyline.js +++ b/src/components/map/nhn/NMapPolyline.js @@ -3,8 +3,6 @@ import { useEffect } from 'react'; export const NMapPolyline = props => { const naver = window.naver; - // console.log(props); - let polyline; let polylinePath = []; @@ -32,7 +30,6 @@ export const NMapPolyline = props => { const position = new naver.maps.LatLng(item.lat, item.lon); polylinePath.push(position); } - // console.log('>>>>>>>>>>>', item); }); polyline.setPath(polylinePath); diff --git a/src/components/mapDraw/MapControlDraw.js b/src/components/mapDraw/MapControlDraw.js index b36edb43..fe0c5270 100644 --- a/src/components/mapDraw/MapControlDraw.js +++ b/src/components/mapDraw/MapControlDraw.js @@ -3,7 +3,6 @@ import { GoogleCustomMap } from './google/GoogleMap'; import { NaverCustomMap } from './naver/NaverMap'; export const MapControlDraw = props => { - // console.log('```````````````````````'); return ( <>{props.mapType === 'google' ? : } ); diff --git a/src/components/mapDraw/google/GoogleMap.js b/src/components/mapDraw/google/GoogleMap.js index b311388a..cc419b5f 100644 --- a/src/components/mapDraw/google/GoogleMap.js +++ b/src/components/mapDraw/google/GoogleMap.js @@ -17,9 +17,7 @@ const MapInit = () => { const { controlGpList } = useSelector(state => state.controlGpState); const [bounds, setBounds] = useState(null); - useEffect(() => { - // console.log('GoogleMap >>>>>', controlGpList); - }, [controlGpList]); + useEffect(() => {}, [controlGpList]); const onSearchBoxMounted = () => {}; const onPlacesChanged = () => {}; @@ -50,7 +48,6 @@ export const GoogleCustomMap = () => { url: 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing,geometryplaces' }; - // console.log(`${mapProps.url}&key=${mapProps.key}`); return (
    { const mapControl = useSelector(state => state.controlMapReducer); - useEffect(() => { - }, [mapControl]); + useEffect(() => {}, [mapControl]); //맵타입 변경 if (mapControl.mapType === 'NORMAL') { @@ -18,11 +17,11 @@ const NaverMapControl = props => { //그리기타입 변경 // if(mapControl.drawType === 'CIRCLE') { - // console.log("circle") + // } else if(mapControl.drawType === 'LINE') { - // console.log("line") + // } else if(mapControl.drawType === 'POLYGON') { - // console.log("polygon") + // } return null; diff --git a/src/components/mapDraw/naver/draw/DrawMap.js b/src/components/mapDraw/naver/draw/DrawMap.js index 1c6e5704..d9365ad4 100644 --- a/src/components/mapDraw/naver/draw/DrawMap.js +++ b/src/components/mapDraw/naver/draw/DrawMap.js @@ -1,13 +1,13 @@ -import { useEffect, useState } from "react"; -import { useSelector } from "react-redux"; +import { useEffect, useState } from 'react'; +import { useSelector } from 'react-redux'; export const DrawMap = props => { - const {naver} = props; - const {map} = props; + const { naver } = props; + const { map } = props; const [drawing, setDrawing] = useState(); const [overlay, setOverlay] = useState([]); - const {drawCheck} = useSelector(state => state.controlMapReducer); + const { drawCheck } = useSelector(state => state.controlMapReducer); useEffect(() => { removeOverlay(); @@ -17,35 +17,34 @@ export const DrawMap = props => { init(); }, [drawCheck]); - const removeOverlay = () => { - if(overlay.length >= 2) { + if (overlay.length >= 2) { drawing.removeDrawing(overlay[0]); - setOverlay(prev => ([prev[overlay.length-1]])); + setOverlay(prev => [prev[overlay.length - 1]]); } - } + }; const init = () => { initRemove(); removeDrawManager(); - } + }; const initRemove = () => { - if(overlay) { + if (overlay) { overlay.forEach(prev => drawing.removeDrawing(prev)); setOverlay([]); } - } + }; const removeDrawManager = () => { - if(drawing) { + if (drawing) { drawing.setMap(null); } drawSetting(); - } + }; const drawSetting = () => { - if(drawCheck) { + if (drawCheck) { // debugger; let drawingManager = new naver.maps.drawing.DrawingManager({ drawingControl: [ @@ -59,58 +58,53 @@ export const DrawMap = props => { style: naver.maps.drawing.DrawingStyle.VERTICAL }, controlPointOptions: { - anchorPointOptions: { - radius: 5, - fillColor: '#ff0000', - strokeColor: '#ffffff', - strokeWeight: 2 - }, - midPointOptions: { - radius: 4, - fillColor: '#0067a3', - strokeColor: '#ffffff', - strokeWeight: 2, - } + anchorPointOptions: { + radius: 5, + fillColor: '#ff0000', + strokeColor: '#ffffff', + strokeWeight: 2 + }, + midPointOptions: { + radius: 4, + fillColor: '#0067a3', + strokeColor: '#ffffff', + strokeWeight: 2 + } }, ellipseOptions: { - fillColor: '#ff25dc', - fillOpacity: 0.3, - strokeWeight: 2, - strokeColor: '#ff25dc' + fillColor: '#ff25dc', + fillOpacity: 0.3, + strokeWeight: 2, + strokeColor: '#ff25dc' }, polylineOptions: { - strokeColor: '#222', - strokeWeight: 10 + strokeColor: '#222', + strokeWeight: 10 }, polygonOptions: { - fillColor: '#ffc300', - fillOpacity: 0.3, - strokeWeight: 2, - strokeColor:'#ffc300' + fillColor: '#ffc300', + fillOpacity: 0.3, + strokeWeight: 2, + strokeColor: '#ffc300' } }); - // console.log(drawingManager.) - addEvent(drawingManager); drawingManager.setMap(map); setDrawing(drawingManager); } - - } + }; - const addEvent = (drawingManager) => { - drawingManager.addListener('drawing_added', function(overlay) { - // console.log(overlay) + const addEvent = drawingManager => { + drawingManager.addListener('drawing_added', function (overlay) { // if(overlay.OVERLAY_TYPE === 'Polygon') { - // console.log(overlay.paths._array[0]._array) + // } else if(overlay.OVERLAY_TYPE === 'Ellipse') { - // console.log(overlay.bounds) + // } - setOverlay(prev=> ([...prev, overlay])); + setOverlay(prev => [...prev, overlay]); }); - } + }; return null; }; - diff --git a/src/components/mapDraw/naver/draw/JQueryDraw.js b/src/components/mapDraw/naver/draw/JQueryDraw.js index f8e2d72e..0012c6d5 100644 --- a/src/components/mapDraw/naver/draw/JQueryDraw.js +++ b/src/components/mapDraw/naver/draw/JQueryDraw.js @@ -1,13 +1,12 @@ import $ from 'jquery'; -import '../../../../assets/css/custom.css'; +import '../../../../assets/css/custom.css'; import { CustomInput } from 'reactstrap'; export const JQueryDraw = props => { - const {naver} = props; - const {map} = props; + const { naver } = props; + const { map } = props; - - var Measure = function(buttons) { + var Measure = function (buttons) { this.$btnLine = buttons.line; this.$btnPolygon = buttons.polygon; this.$btnCircle = buttons.circle; @@ -18,12 +17,10 @@ export const JQueryDraw = props => { this._bindDOMEvents(); }; - $.extend( - Measure.prototype,{ + $.extend(Measure.prototype, { constructor: Measure, - setMap: function(map) { - // console.log('setMap') + setMap: function (map) { if (this.map) { this._unbindMap(this.map); } @@ -35,62 +32,86 @@ export const JQueryDraw = props => { } }, - startMode: function(mode) { - // console.log('startMode') + startMode: function (mode) { if (!mode) return; if (mode === 'line') { this._startDistance(); - } if (mode === 'polygon') { + } + if (mode === 'polygon') { this._startArea(); - } if (mode === 'circle') { + } + if (mode === 'circle') { this._startCircle(); - } if (mode === 'rectangle') { + } + if (mode === 'rectangle') { this._startRectangle(); } }, - _startDistance: function() { - // console.log('startDistance') + _startDistance: function () { var map = this.map; this._distanceListeners = [ - naver.maps.Event.addListener(map, 'click', this._onClickDistance.bind(this)) + naver.maps.Event.addListener( + map, + 'click', + this._onClickDistance.bind(this) + ) ]; }, - _startArea: function() { - // console.log('startArea') + _startArea: function () { 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)) + 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') + _startCircle: function () { 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)) + 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') + _startRectangle: function () { 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)) - ] + 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') - + _finishDistance: function () { naver.maps.Event.removeListener(this._distanceListeners); delete this._distanceListeners; @@ -102,13 +123,11 @@ export const JQueryDraw = props => { } 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++) { - + for (let i = 0; i < polypaths.length; i++) { //파싱 let obj = new Object(); @@ -116,54 +135,51 @@ export const JQueryDraw = props => { obj.y = '' + polypaths[i]._lat + ''; obj = JSON.stringify(obj); - polypathJSON.push(JSON.parse(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]); + 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", + type: 'FeatureCollection', features: [ { - type: "Feature", + type: 'Feature', properties: {}, geometry: { - type: "LineString", + type: 'LineString', coordinates: lineStringPaths } } ] }; - // console.log(originalGeojson) //버퍼 객체 - const bufferObj = buffer(originalGeojson, 50, {units:'meters'}); + 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, + path: bufferPath, map: map }); // 이거 하면 그동안 한거 싹 사라짐 -> 얘를 통해서 drawType이 바뀌면 다 날라가는 걸로 해보면 될듯 // this._polyline.setMap(null) delete this._polyline; - } //onfocus()의 반대기능 = blur() this.$btnLine.removeClass('control-on').blur(); @@ -171,8 +187,7 @@ export const JQueryDraw = props => { this._mode = null; }, - _finishArea: function() { - // console.log('finishArea') + _finishArea: function () { naver.maps.Event.removeListener(this._areaListeners); delete this._areaListeners; @@ -190,21 +205,19 @@ export const JQueryDraw = props => { this._mode = null; }, - _finishCircle: function() { - // console.log('finishCircle') - + _finishCircle: function () { naver.maps.Event.removeListener(this._circleListeners); delete this._circleListeners; $(document).off('mousemove.measure'); - if(this._guidecircle) { + 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; @@ -216,15 +229,13 @@ export const JQueryDraw = props => { this._mode = null; }, - _finishRectangle: function() { - // console.log('finishRectangle') - + _finishRectangle: function () { naver.maps.Event.removeListener(this._rectangleListeners); delete this._rectangleListeners; $(document).off('mousemove.measure'); - if(this._rectangle) { + if (this._rectangle) { this._guiderectangle.setMap(null); delete this._guiderectangle; } @@ -234,28 +245,30 @@ export const JQueryDraw = props => { this._mode = null; }, - finishMode: function(mode) { - // console.log('finishMode') + finishMode: function (mode) { if (!mode) return; if (mode === 'line') { this._finishDistance(); - } if (mode === 'polygon') { + } + if (mode === 'polygon') { this._finishArea(); - } if (mode === 'circle') { + } + if (mode === 'circle') { this._finishCircle(); - } if (mode === 'rectangle') { + } + if (mode === 'rectangle') { this._finishRectangle(); } }, - _fromMetersToText: function(meters) { + _fromMetersToText: function (meters) { meters = meters || 0; var km = 1000, text = meters; - if(meters >= km) { + if (meters >= km) { text = parseFloat((meters / km).toFixed(1)) + 'km'; } else { text = parseFloat(meters.toFixed(1)) + 'm'; @@ -264,14 +277,20 @@ export const JQueryDraw = props => { return text; }, - _addMileStone: function(coord, text, css) { - if(!this._ms) this._ms = []; + _addMileStone: function (coord, text, css) { + if (!this._ms) this._ms = []; let content; - if(text == 'Start') { - content = '
    '+ text +'
    ' + if (text == 'Start') { + content = + '
    ' + + text + + '
    '; } else { - content = '
    '+ text +'
    ' + content = + '
    ' + + text + + '
    '; } var ms = new naver.maps.Marker({ @@ -285,7 +304,7 @@ export const JQueryDraw = props => { var msElement = $(ms.getElement()); - if(css) { + if (css) { msElement.css(css); } else { msElement.css('font-size', '13px'); @@ -294,8 +313,7 @@ export const JQueryDraw = props => { this._ms.push(ms); }, - _onClickDistance: function(e) { - // console.log('onClickDistance') + _onClickDistance: function (e) { var map = this.map, coord = e.coord; @@ -312,8 +330,17 @@ export const JQueryDraw = props => { // 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))); + $(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({ @@ -328,23 +355,24 @@ export const JQueryDraw = props => { 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._addMileStone( + coord, + this._fromMetersToText(distance - this._lastDistance) + ); this._lastDistance = distance; } }, - _onMouseMoveDistance: function(e) { - // console.log('onMouseMoveDistance') + _onMouseMoveDistance: function (e) { var map = this.map, - proj = this.map.getProjection(), - coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), - path = this._guideline.getPath(); + proj = this.map.getProjection(), + coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), + path = this._guideline.getPath(); if (path.getLength() === 2) { //맨 뒷 값 삭제 = 기존클릭좌표만 남겨둬라 = 실시간으로 좌표들어가야 하니까 @@ -355,8 +383,7 @@ export const JQueryDraw = props => { path.push(coord); }, - _onClickArea: function(e) { - // console.log('onClickArea') + _onClickArea: function (e) { var map = this.map, coord = e.coord; @@ -373,14 +400,13 @@ export const JQueryDraw = props => { } }, - _onMouseMoveArea: function(e) { - // console.log('onMouseMoveArea') + _onMouseMoveArea: function (e) { 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(); + 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(); @@ -389,13 +415,11 @@ export const JQueryDraw = props => { path.push(coord); }, - _onClickCircle: function(e) { - // console.log('onClickCircle') + _onClickCircle: function (e) { var map = this.map, coord = e.coord; - if(!this._circle) { - + if (!this._circle) { //가이드 라인 this._radius = new naver.maps.Polyline({ strokeStyle: [4, 4], @@ -417,8 +441,14 @@ export const JQueryDraw = props => { }); $(document).on('mousemove.measure', this._onMouseMoveCircle.bind(this)); - this._circleListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishCircle.bind(this))); - + this._circleListeners.push( + naver.maps.Event.addListener( + map, + 'rightclick', + this._finishCircle.bind(this) + ) + ); + // 실제 사용되는 원형 this._circle = new naver.maps.Circle({ strokeOpacity: 0.8, @@ -428,52 +458,46 @@ export const JQueryDraw = props => { 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; + _onMouseMoveCircle: function (e) { + 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); + 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) { + if (path.getLength() === 2) { path.pop(); } path.push(coord); this._guidecircle.setRadius(r); }, - _onClickRectangle: function(e) { - // console.log('onClickRectangle') + _onClickRectangle: function (e) { var map = this.map, coord = e.coord; - + this.max_x = 0; this.max_y = 0; - - if(!this._rectangle) { + if (!this._rectangle) { //min = 고정값 this.fixed = coord; this.min = [this.fixed.x, this.fixed.y]; @@ -488,8 +512,17 @@ export const JQueryDraw = props => { map: map }); - $(document).on('mousemove.measure', this._onMouseMoveRectangle.bind(this)); - this._rectangleListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishRectangle.bind(this))); + $(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({ @@ -499,7 +532,6 @@ export const JQueryDraw = props => { 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]]; @@ -507,53 +539,54 @@ export const JQueryDraw = props => { } }, - _onMouseMoveRectangle: function(e) { - // console.log('onMouseMoveRectangle') - if(!this._rectangle) return; + _onMouseMoveRectangle: function (e) { + if (!this._rectangle) return; var map = this.map, - proj = this.map.getProjection(), + proj = this.map.getProjection(), coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)), - bounds = this._guiderectangle.getBounds(), - max = [coord.x, coord.y]; + bounds = this._guiderectangle.getBounds(), + max = [coord.x, coord.y]; - this.boundscoord = [this.min[0], this.min[1],max[0], max[1]]; + this.boundscoord = [this.min[0], this.min[1], max[0], max[1]]; this._guiderectangle.setBounds(this.boundscoord); }, - _bindMap: function(map) { - // console.log('bindMap') - }, + _bindMap: function (map) {}, - _unbindMap: function() { - // console.log('unbindMap') + _unbindMap: function () { this.unbindAll(); }, - _bindDOMEvents: function() { - // console.log('bindDOMEvents') + _bindDOMEvents: function () { 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')); - + 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) { + _onClickButton: function (newMode, e) { //newMode는 방금 클릭한 값(line, polygon, circle...) - // console.log('onClickButton') + e.preventDefault(); var btn = $(e.target), - map = this.map, - mode = this._mode; + 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'); } @@ -569,8 +602,7 @@ export const JQueryDraw = props => { this.startMode(newMode); }, - _clearMode: function(mode) { - // console.log('clearMode') + _clearMode: function (mode) { if (!mode) return; if (mode === 'line') { @@ -601,7 +633,7 @@ export const JQueryDraw = props => { this._finishCircle(); } else if (mode === 'rectangle') { - if(this._rectangle) { + if (this._rectangle) { this._rectangle.setMap(null); delete this._rectangle; } @@ -619,40 +651,38 @@ export const JQueryDraw = props => { measures.setMap(map); - return( + return ( <>
    -
      -
    • - - - - -
      • -
    +
      +
    • + + + + +
      • +
    - ) - + ); }; - diff --git a/src/components/mapDraw/naver/dron/DronHistory.js b/src/components/mapDraw/naver/dron/DronHistory.js index f83006e0..c3a98eaa 100644 --- a/src/components/mapDraw/naver/dron/DronHistory.js +++ b/src/components/mapDraw/naver/dron/DronHistory.js @@ -15,7 +15,6 @@ export const DronHistory = props => { const dispatch = useDispatch(); useEffect(() => { - // console.log('>>>', controlGpHistory); polylineRemove(); polylineInit(); }, [controlGpHistory]); @@ -50,7 +49,6 @@ export const DronHistory = props => { const position = new naver.maps.LatLng(item.lat, item.lng); polylinePath.push(position); } - // console.log('>>>>>>>>>>>', item); }); polyline.setPath(polylinePath); diff --git a/src/components/mapDraw/naver/dron/DronMarker.js b/src/components/mapDraw/naver/dron/DronMarker.js index 5d35d4f5..69d8bd34 100644 --- a/src/components/mapDraw/naver/dron/DronMarker.js +++ b/src/components/mapDraw/naver/dron/DronMarker.js @@ -26,8 +26,6 @@ export const DronMarker = props => { }, [controlGpList]); useEffect(() => { - // console.log('>>>>>>>>>>>>>>>>', objectId, isClickObject); - props.arrMarkers.map(clickMarker => { if (objectId === clickMarker.id && isClickObject) { clickMarker.setIcon(DronIconPulple); @@ -43,7 +41,6 @@ export const DronMarker = props => { useEffect(() => { props.arrMarkers.map(clickMarker => { if (objectId === clickMarker.id) { - // console.log(clickMarker); props.map.setCenter(clickMarker.getPosition()); // $('#btn_modal').click(); props.map.setZoom(13, true); @@ -63,7 +60,7 @@ export const DronMarker = props => { // '
    dddd
    ', // ].join(''), - url: DronIcon, + url: DronIcon // scaledSize: new naver.maps.scaledSize(50, 50) // size: new naver.maps.Size(1000, 1000), // origin: new naver.maps.Point(0, 0) @@ -91,10 +88,10 @@ export const DronMarker = props => { } // marker.setIcon(DronIconPulple); - // console.log(marker.id); + const markerId = marker.id; const contorlId = marker.controlId; - // console.log('contorlId ::::::::::< ', marker.controlId); + //히스토리 불러오기 dispatch(objectClickAction(markerId)); @@ -108,7 +105,6 @@ export const DronMarker = props => { //마커에 위치를 이동한다. const moveMarkers = (marker, position) => { - // console.log(marker); marker.setPosition(position); }; @@ -144,7 +140,6 @@ export const DronMarker = props => { if (isExists) { moveMarkers(isExists, position); } else { - // console.log(' ADD >>>', props.arrMarkers); addMarkers(position, item.objectId, item.controlId); } } else { diff --git a/src/components/mapDraw/naver/feature/FeatureAirZone.js b/src/components/mapDraw/naver/feature/FeatureAirZone.js index 12095153..ed1c2127 100644 --- a/src/components/mapDraw/naver/feature/FeatureAirZone.js +++ b/src/components/mapDraw/naver/feature/FeatureAirZone.js @@ -7,14 +7,11 @@ export const FeatureAirZone = props => { let infoWindow; useEffect(() => { - // console.log('>>>>>', mapControl); featureAirZoneInit(); featureAirEvent(); }, [mapControl]); - useEffect(() => { - // console.log(">>>>>>>>" , props.features) - }, []); + useEffect(() => {}, []); const infowindowOpen = data => { const content = @@ -122,7 +119,6 @@ export const FeatureAirZone = props => { const featureAirEvent = () => { props.map.data.addListener('click', function (e) { // e.feature.setProperty('isColorful', true); - // console.log(e.feature.property_name); }); props.map.data.addListener('mouseover', function (e) { diff --git a/src/components/mapDraw/naver/search/NaverMapSearch.js b/src/components/mapDraw/naver/search/NaverMapSearch.js index 97890ca9..f5328a8f 100644 --- a/src/components/mapDraw/naver/search/NaverMapSearch.js +++ b/src/components/mapDraw/naver/search/NaverMapSearch.js @@ -2,7 +2,6 @@ import { useEffect } from 'react'; export const NaverMapSearch = props => { useEffect(() => { - // console.log('>>>>', props.naver.maps.Service); props.naver.maps.Service.geocode( { address: '산곡동' @@ -14,7 +13,6 @@ export const NaverMapSearch = props => { var result = response.result, // 검색 결과의 컨테이너 items = result.items; // 검색 결과의 배열 - // console.log(result); // do Something } diff --git a/src/components/mapDraw/naver/sensor/SensorZone.js b/src/components/mapDraw/naver/sensor/SensorZone.js index 67fc7b48..75a06ded 100644 --- a/src/components/mapDraw/naver/sensor/SensorZone.js +++ b/src/components/mapDraw/naver/sensor/SensorZone.js @@ -1,23 +1,21 @@ -import React, {useEffect, useState} from 'react'; -import {useSelector} from "react-redux"; +import React, { useEffect, useState } from 'react'; +import { useSelector } from 'react-redux'; const SENSOR_RADIUS = '100'; const SENSOR_RADIUS_DIVISION = '3'; let lenderCnt = 0; -const SensorZone = (props) => { - const {naver} = props; +const SensorZone = props => { + const { naver } = props; // 드론 실시간 정보 - const {controlGpList} = useSelector(state => state.controlGpState); + const { controlGpList } = useSelector(state => state.controlGpState); // 환경지표 타입(dust, co, o3, no2, so2) - const {sensor} = useSelector(state => state.controlMapReducer); + const { sensor } = useSelector(state => state.controlMapReducer); // 센서레이어(환경지표) 관리 const [circleLayers, setCircleLayers] = useState([]); const [polilineGroupLayers, setPolilineGroupLayers] = useState({}); - // console.log('########## SensorZone ###########', lenderCnt, {controlGpList, circleLayer: circleLayers, polilineLayer: polilineGroupLayers}); - useEffect(() => { - lenderCnt++ + lenderCnt++; if (!sensor) { removeSensorLayers(); } else { @@ -28,7 +26,6 @@ const SensorZone = (props) => { let infoWindow; // 센서 레이어 Info const infowindowOpen = data => { - // console.log('data', data) const content = `
    @@ -82,7 +79,7 @@ const SensorZone = (props) => { emtpyLayerRemove(); if (controlGpList) { controlGpList.forEach(controlGp => { - const {controlId, lat, lng, objectId} = controlGp; + const { controlId, lat, lng, objectId } = controlGp; let color = undefined; const sensorData = convtSensorData(controlGp); if (sensorData) { @@ -105,21 +102,23 @@ const SensorZone = (props) => { addPolilineLayers(controlId, objectId, position, color); } - const circleLayer = circleLayers.find(layer => layer.controlId === controlId); - if (circleLayer) moveCircleLayer(circleLayer, position, color, sensorData); + const circleLayer = circleLayers.find( + layer => layer.controlId === controlId + ); + if (circleLayer) + moveCircleLayer(circleLayer, position, color, sensorData); else addCircleLayer(controlId, objectId, position, color, sensorData); }); } - } + }; // 센서레이어 생성 const addSensorLayer = (position, id, controlId, color, sensorData) => { addPolilineLayers(controlId, id, position, color); addCircleLayer(controlId, id, position, color, sensorData); - } + }; // Circle 레이어 생성 const addCircleLayer = (controlId, id, position, color, sensorData) => { - // console.log({controlId, id, position, color, sensorData}) const circleLayer = new naver.maps.Circle({ title: id, id: id, @@ -134,7 +133,7 @@ const SensorZone = (props) => { fillColor: color, fillOpacity: 0.2, sensorData: sensorData - }) + }); // Circle 이벤트 주입 naver.maps.Event.addListener(circleLayer, 'mouseover', function (e) { const data = {}; @@ -145,133 +144,149 @@ const SensorZone = (props) => { e.overlay.setOptions({ strokeWeight: 5, fillOpacity: 0.5 - }) + }); infowindowOpen(data); }); naver.maps.Event.addListener(circleLayer, 'mouseout', function (e) { e.overlay.setOptions({ strokeWeight: 2, fillOpacity: 0.2 - }) + }); // props.map.Event.revertStyle(); if (infoWindow) { infoWindow.close(); } }); - circleLayer.setMap(props.map) - setCircleLayers(prev => ([...prev, circleLayer])); + circleLayer.setMap(props.map); + setCircleLayers(prev => [...prev, circleLayer]); + }; - } - const addPolilineLayers = (controlId, id, position, color) => { // 지도에 적용 및 레이어 관리 추가 - // console.log('addPolilineLayers', controlId) + const polilineLayers = createCircleInGrid(position, id, controlId, color); polilineLayers.forEach(layer => layer.setMap(props.map)); setPolilineGroupLayers(prev => ({ ...prev, [controlId]: polilineLayers })); - } + }; // 센서레이어 이동 const moveSensorLayer = (controlId, position, color) => { - const circleLayer = circleLayers.find(layer => layer.controlId === controlId); + const circleLayer = circleLayers.find( + layer => layer.controlId === controlId + ); moveCircleLayer(circleLayer, position, color); const polilineLayers = polilineGroupLayers[controlId]; movePolilineLayers(polilineLayers, position, color); - } + }; const moveCircleLayer = (circleLayer, position, color, sensorData) => { // const circleLayer = circleLayers.find(layer => layer.controlId === controlId); if (circleLayer) { circleLayer.sensorData = sensorData; - circleLayer.setOptions({center: position, strokeColor: color, fillColor: color}) + circleLayer.setOptions({ + center: position, + strokeColor: color, + fillColor: color + }); } - } - + }; + const movePolilineLayers = (polilineLayers, position, color) => { - const {controlId, id, position: prevPosition} = polilineLayers[0]; + const { controlId, id, position: prevPosition } = polilineLayers[0]; if (prevPosition.equals(position)) { if (polilineLayers) { - polilineLayers.forEach(layer => layer.setOptions({strokeColor: color})); + polilineLayers.forEach(layer => + layer.setOptions({ strokeColor: color }) + ); } } else { if (polilineLayers) { polilineLayers.forEach(layer => layer.setMap(null)); } - const newPolilineLayers = createCircleInGrid(position, id, controlId, color); + const newPolilineLayers = createCircleInGrid( + position, + id, + controlId, + color + ); newPolilineLayers.forEach(layer => layer.setMap(props.map)); setPolilineGroupLayers(prev => ({ ...prev, [controlId]: newPolilineLayers })); } - } + }; // 센서레이어 제거 - const removeSensorLayer = (controlId) => { + const removeSensorLayer = controlId => { removeCircleLayer(controlId); removePolilineLayer(controlId); - } - const removeCircleLayer = (controlId) => { + }; + const removeCircleLayer = controlId => { const idx = circleLayers.findIndex(layer => layer.controlId === controlId); circleLayers[idx].setMap(null); setCircleLayers(prev => { prev.splice(idx, 1); return prev; - }) - } - const removePolilineLayer = (controlId) => { + }); + }; + const removePolilineLayer = controlId => { const polilineLayers = polilineGroupLayers[controlId]; if (polilineLayers) polilineLayers.forEach(layer => layer.setMap(null)); setPolilineGroupLayers(prev => { delete prev[controlId]; return prev; - }) - } + }); + }; // 센서레이어 모두 제거 const removeSensorLayers = () => { circleLayers.forEach(layer => layer.setMap(null)); setCircleLayers([]); const keys = Object.keys(polilineGroupLayers); - keys.forEach((key) => { + keys.forEach(key => { polilineGroupLayers[key].forEach(layer => layer.setMap(null)); - }) + }); setPolilineGroupLayers({}); - } + }; // 레이어관리시 새로운 데이터에 없는 좌표 제거 const emtpyLayerRemove = () => { setCircleLayers(prev => { const remainCircleLayers = prev.filter((circleLayer, i) => { const controlId = circleLayer.controlId; - const findObj = controlGpList.find(controlGp => controlGp.controlId === controlId); + const findObj = controlGpList.find( + controlGp => controlGp.controlId === controlId + ); if (findObj) { return circleLayer; } else { circleLayer.setMap(null); } - }) + }); return remainCircleLayers; - }) + }); setPolilineGroupLayers(prev => { const keys = Object.keys(prev); const remainPolilineGroupLayer = {}; keys.forEach((controlId, i) => { - const findObj = controlGpList.find(controlGp => controlGp.controlId === controlId); + const findObj = controlGpList.find( + controlGp => controlGp.controlId === controlId + ); if (findObj) { remainPolilineGroupLayer[controlId] = prev[controlId]; } else { const polilineLayers = prev[controlId]; polilineLayers.forEach(layer => { layer.setMap(null); - }) + }); } - }) + }); return remainPolilineGroupLayer; - }) - } + }); + }; // Circle안에 격자 무늬 생성 const createCircleInGrid = (position, id, controlId, color) => { @@ -281,14 +296,30 @@ const SensorZone = (props) => { // 각 사분면 각도 const diff = 90 / SENSOR_RADIUS_DIVISION; const angleQuadrant1 = diff * i; - const angleQuadrant2 = 180 - (diff * i); - const angleQuadrant3 = 180 + (diff * i); + const angleQuadrant2 = 180 - diff * i; + const angleQuadrant3 = 180 + diff * i; const angleQuadrant4 = diff * -i; // 각 사분면 좌표 - const coord1 = new naver.maps.EPSG3857.getDestinationCoord(position, angleQuadrant1, SENSOR_RADIUS); - const coord2 = new naver.maps.EPSG3857.getDestinationCoord(position, angleQuadrant2, SENSOR_RADIUS); - const coord3 = new naver.maps.EPSG3857.getDestinationCoord(position, angleQuadrant3, SENSOR_RADIUS); - const coord4 = new naver.maps.EPSG3857.getDestinationCoord(position, angleQuadrant4, SENSOR_RADIUS); + const coord1 = new naver.maps.EPSG3857.getDestinationCoord( + position, + angleQuadrant1, + SENSOR_RADIUS + ); + const coord2 = new naver.maps.EPSG3857.getDestinationCoord( + position, + angleQuadrant2, + SENSOR_RADIUS + ); + const coord3 = new naver.maps.EPSG3857.getDestinationCoord( + position, + angleQuadrant3, + SENSOR_RADIUS + ); + const coord4 = new naver.maps.EPSG3857.getDestinationCoord( + position, + angleQuadrant4, + SENSOR_RADIUS + ); const polyline12 = new naver.maps.Polyline({ id, position, @@ -299,7 +330,7 @@ const SensorZone = (props) => { strokeOpacity: 1, strokeColor: color, strokeStyle: 'shortdash' - }) + }); polilineLayers.push(polyline12); const polyline23 = new naver.maps.Polyline({ id, @@ -311,7 +342,7 @@ const SensorZone = (props) => { strokeOpacity: 1, strokeColor: color, strokeStyle: 'shortdash' - }) + }); polilineLayers.push(polyline23); const polyline34 = new naver.maps.Polyline({ id, @@ -323,7 +354,7 @@ const SensorZone = (props) => { strokeOpacity: 1, strokeColor: color, strokeStyle: 'shortdash' - }) + }); polilineLayers.push(polyline34); const polyline41 = new naver.maps.Polyline({ id, @@ -335,14 +366,14 @@ const SensorZone = (props) => { strokeOpacity: 1, strokeColor: color, strokeStyle: 'shortdash' - }) + }); polilineLayers.push(polyline41); } return polilineLayers; - } + }; // 환경지표 필요한 데이터로 변환 - const convtSensorData = (sensorData) => { + const convtSensorData = sensorData => { const r = { sensorDust: { title: '미세먼지', @@ -374,13 +405,13 @@ const SensorZone = (props) => { text: '-', color: undefined } - } + }; // 정수: 미세먼지 || 소수점 1자리 : 일산화탄소 || 소수점 3자리 : 오존, 이산화질소, 아황산가스 // 좋음 : 파랑, 보통 : 노랑, 나쁨 : 주황, 매우나쁨 : 빨강 // 미세먼지 : 좋음(0~30) 보통(31~80) 나쁨(81~150) 매우나쁨(151~) if (sensorData.sensorDust != undefined && sensorData.sensorDust != null) { - const val = r.sensorDust.value = Math.round(sensorData.sensorDust); + const val = (r.sensorDust.value = Math.round(sensorData.sensorDust)); if (val <= 30) { r.sensorDust.text = '좋음'; r.sensorDust.color = '#37c9ff'; @@ -400,7 +431,8 @@ const SensorZone = (props) => { } // 일산화탄소 : 좋음(0~2) 보통(2.1~9) 나쁨(9.1~15) 매우나쁨(15.1~) if (sensorData.sensorCo != undefined && sensorData.sensorCo != null) { - const val = r.sensorCo.value = Math.round(sensorData.sensorCo * 10) / 10; + const val = (r.sensorCo.value = + Math.round(sensorData.sensorCo * 10) / 10); if (val <= 0.2) { r.sensorCo.text = '좋음'; r.sensorCo.color = '#37c9ff'; @@ -420,7 +452,8 @@ const SensorZone = (props) => { } // 아황산가스 : 좋음(0~0.02) 보통(0.021~0.05) 나쁨(0.051~0.15) 매우나쁨 (0.151 ~) if (sensorData.sensorSo2 != undefined && sensorData.sensorSo2 != null) { - const val = r.sensorSo2.value = Math.round(sensorData.sensorSo2 * 1000) / 1000; + const val = (r.sensorSo2.value = + Math.round(sensorData.sensorSo2 * 1000) / 1000); if (val <= 0.02) { r.sensorSo2.text = '좋음'; r.sensorSo2.color = '#37c9ff'; @@ -440,7 +473,8 @@ const SensorZone = (props) => { } // 이산화질소 : 좋음(0~0.03) 보통(0.031~0.06) 나쁨(0.061~0.2) 매우나쁨(0.201~) if (sensorData.sensorNo2 != undefined && sensorData.sensorNo2 != null) { - const val = r.sensorNo2.value = Math.round(sensorData.sensorNo2 * 1000) / 1000; + const val = (r.sensorNo2.value = + Math.round(sensorData.sensorNo2 * 1000) / 1000); if (val <= 0.03) { r.sensorNo2.text = '좋음'; r.sensorNo2.color = '#37c9ff'; @@ -457,11 +491,11 @@ const SensorZone = (props) => { r.sensorNo2.text = '-'; r.sensorNo2.color = '#a1a1a1'; } - } // 오존 : 좋음(0~0.03) 보통(0.031~0.09) 나쁨(0.091~0.15) 매우나쁨(0.151~) if (sensorData.sensorO3 != undefined && sensorData.sensorO3 != null) { - const val = r.sensorO3.value = Math.round(sensorData.sensorO3 * 1000) / 1000; + const val = (r.sensorO3.value = + Math.round(sensorData.sensorO3 * 1000) / 1000); if (val <= 0.03) { r.sensorO3.text = '좋음'; r.sensorO3.color = '#37c9ff'; @@ -480,7 +514,7 @@ const SensorZone = (props) => { } } return r; - } + }; return null; }; diff --git a/src/components/mapDraw/nhn/NMap.js b/src/components/mapDraw/nhn/NMap.js index b093f899..50f0230d 100644 --- a/src/components/mapDraw/nhn/NMap.js +++ b/src/components/mapDraw/nhn/NMap.js @@ -7,9 +7,6 @@ export const NMap = props => { useEffect(() => { mapInit(); - // console.log(map); - - // console.log(features); // setIsMapLoad(true); }, []); @@ -31,11 +28,11 @@ export const NMap = props => { // map = ; props.setMapObject(new naver.maps.Map('map', mapOptions)); // naver.maps.Event.addListener(map, 'click', function (e) { - // console.log(e); + // }); // naver.maps.Event.addListener(map, 'idle', function (e) { - // console.log(e); + // }); }; return
    ; diff --git a/src/components/mapDraw/nhn/NMapMarker.js b/src/components/mapDraw/nhn/NMapMarker.js index 0f41c6de..ceeaa083 100644 --- a/src/components/mapDraw/nhn/NMapMarker.js +++ b/src/components/mapDraw/nhn/NMapMarker.js @@ -25,9 +25,6 @@ export const NMapMarker = props => { }, [props.data]); useEffect(() => { - // console.log('info>>>:' + props.info.lat); - // console.log(props.selMarker); - if (props.selMarker && props.selMarker) { const position = new naver.maps.LatLng(props.info?.lat, props.info?.lon); props.selMarker?.setPosition(position); @@ -54,7 +51,6 @@ export const NMapMarker = props => { }; const moveMarkers = (marker, position) => { - // console.log('dddddddddddddddddddd', marker, position); // marker.setPositon(position); }; diff --git a/src/components/mapDraw/nhn/NMapPolyline.js b/src/components/mapDraw/nhn/NMapPolyline.js index 676e1034..c83a47be 100644 --- a/src/components/mapDraw/nhn/NMapPolyline.js +++ b/src/components/mapDraw/nhn/NMapPolyline.js @@ -3,8 +3,6 @@ import { useEffect } from 'react'; export const NMapPolyline = props => { const naver = window.naver; - // console.log(props); - let polyline; let polylinePath = []; @@ -32,7 +30,6 @@ export const NMapPolyline = props => { const position = new naver.maps.LatLng(item.lat, item.lon); polylinePath.push(position); } - // console.log('>>>>>>>>>>>', item); }); polyline.setPath(polylinePath); diff --git a/src/components/message/MessageErrorModal.js b/src/components/message/MessageErrorModal.js index b0e1297c..2b933dae 100644 --- a/src/components/message/MessageErrorModal.js +++ b/src/components/message/MessageErrorModal.js @@ -11,7 +11,7 @@ export const MessageErrorModal = props => { ); // useEffect(() => { - // console.log('isError>>>>>>>>>>>>>', isError); + // }, [isError]); return ( diff --git a/src/components/message/MessageInfoModal.js b/src/components/message/MessageInfoModal.js index a30125b6..cc0e8ead 100644 --- a/src/components/message/MessageInfoModal.js +++ b/src/components/message/MessageInfoModal.js @@ -11,7 +11,7 @@ export const MessageInfoModal = props => { useSelector(state => state.messageState); // useEffect(() => { - // console.log('isError>>>>>>>>>>>>>', isError); + // }, [isError]); const handlerClose = () => { dispatch(Actions.ISNO_MESSAGE()); diff --git a/src/components/websocket/WebsocketClient.js b/src/components/websocket/WebsocketClient.js index cbaba0b1..0da8a2c0 100644 --- a/src/components/websocket/WebsocketClient.js +++ b/src/components/websocket/WebsocketClient.js @@ -8,14 +8,14 @@ const WebsocketClient = () => { const dispatch = useDispatch(); const reConnectionTime = 5000; //5초 - const [isConnection, setIsConnection] = useState(false); + const [isConnection, setIsConnection] = useState(false); useEffect(() => { connect(); }, []); - const connect = () => { - let websocket = new WebSocket(WS_HOST); + const connect = () => { + let websocket = new WebSocket(WS_HOST); websocket.onopen = () => { setIsConnection(true); @@ -23,13 +23,11 @@ const WebsocketClient = () => { }; websocket.onmessage = e => { - const data = e.data; - const controlGpList = JSON.parse(data); + const data = e.data; + const controlGpList = JSON.parse(data); - // console.log('gps ', controlGpList) - dispatch(Actions.controlGpAction.request(controlGpList)); - }; + }; websocket.onclose = event => { setIsConnection(false); diff --git a/src/containers/account/mypage/AccountMypageContainer.js b/src/containers/account/mypage/AccountMypageContainer.js index caead3ff..e33c6e38 100644 --- a/src/containers/account/mypage/AccountMypageContainer.js +++ b/src/containers/account/mypage/AccountMypageContainer.js @@ -182,7 +182,7 @@ const AccountMypageContainer = () => { }); } } - // console.log(res); + if (isRunning) { clearInterval(timer); } @@ -300,7 +300,8 @@ const AccountMypageContainer = () => { }; //업데이트 const handlerUpdate = () => { - const reg_email = /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/; + const reg_email = + /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/; const param = { cstmrSno: user.cstmrSno, email: userInfo.email, @@ -325,12 +326,10 @@ const AccountMypageContainer = () => { title: '탈퇴 확인', desc: '정말로 탈퇴 하시겠습니까?' }); - }; const waitwait = () => { dispatch(userDeleteAction.request(user.cstmrSno)); - }; return ( diff --git a/src/containers/analysis/simulator/AnalysisSimulationContainer.js b/src/containers/analysis/simulator/AnalysisSimulationContainer.js index 60b8f9b1..e7123e59 100644 --- a/src/containers/analysis/simulator/AnalysisSimulationContainer.js +++ b/src/containers/analysis/simulator/AnalysisSimulationContainer.js @@ -53,9 +53,6 @@ export const AnalysisSimulationContainer = props => { useEffect(() => { if (isPlay) { const timer = setInterval(() => { - // console.log('count>>>>', count); - // console.log(log[count]); - setInfo({ ...log[playCount], playCount: playCount }); if (log[playCount]?.srvrRcvDt) { setTimeCd(moment(log[playCount]?.srvrRcvDt).format('HH:mm')); @@ -93,13 +90,10 @@ export const AnalysisSimulationContainer = props => { if (log[playCount]?.srvrRcvDt) { setTimeCd(moment(log[playCount]?.srvrRcvDt).format('HH:mm')); } - - // console.log('sliderCount>>>>', sliderCount); } }, [sliderCount]); useEffect(() => { - // console.log(log); // let arrDate = log?.map(date => { // const dateval = date.srvrRcvDt; // if (dateval) { @@ -108,17 +102,14 @@ export const AnalysisSimulationContainer = props => { // return 0; // } // }); - // console.log('arrDate>', arrDate); // setSliderVal({ // minVal: Math.min.apply(null, arrDate), // maxVal: Math.max.apply(null, arrDate) // }); - // console.log(Math.max.apply(null, moment(formatar rDate))); // let maxDate = log.map(date => { // return Math.max(date.srvrRcvDt); // }); // let maxDate; - // console.log('minDate :::', minDate, 'maxDate :: ', maxDate); }, [log]); const handlerSearch = search1 => { diff --git a/src/containers/basis/dron/BasisDronContainer.js b/src/containers/basis/dron/BasisDronContainer.js index e7ba7fc7..eece445b 100644 --- a/src/containers/basis/dron/BasisDronContainer.js +++ b/src/containers/basis/dron/BasisDronContainer.js @@ -126,7 +126,6 @@ export const BasisDronContainer = props => { // minWidth: '102px', sortable: true, cell: row => { - // console.log(row); return ( { handlerSearch(); setPageType('update'); } - // console.log(selectData); }, []); useEffect(() => { diff --git a/src/containers/basis/flight/aprv/FlightPlanAprvContainer.js b/src/containers/basis/flight/aprv/FlightPlanAprvContainer.js index 63149245..1fe49f96 100644 --- a/src/containers/basis/flight/aprv/FlightPlanAprvContainer.js +++ b/src/containers/basis/flight/aprv/FlightPlanAprvContainer.js @@ -181,7 +181,7 @@ const FlightPlanAprvContainer = () => { }; const handleClickAprv = type => e => { // notAprov, aprv - // console.log(type, selPlanSnoList, e) + if (!selPlanSnoList || selPlanSnoList.length < 1) { // alert('비행계획서를 선택해 주세요.'); // return; diff --git a/src/containers/basis/group/BasisGroupDetailContainer.js b/src/containers/basis/group/BasisGroupDetailContainer.js index 82392120..0bfc3c6c 100644 --- a/src/containers/basis/group/BasisGroupDetailContainer.js +++ b/src/containers/basis/group/BasisGroupDetailContainer.js @@ -110,7 +110,7 @@ export const BasisGroupDetailContainer = () => { // if (name == 'groupNm') { // // const regex = /^[ㄱ-힣A-Za-z0-9]{0,11}$/; // // if (regex.test(innerRef)) { - // console.log(innerRef); + // setGroupData({ // ...groupData, // [name]: innerRef diff --git a/src/containers/basis/group/BasisGroupUsersContainer.js b/src/containers/basis/group/BasisGroupUsersContainer.js index a31daf91..ca002a6e 100644 --- a/src/containers/basis/group/BasisGroupUsersContainer.js +++ b/src/containers/basis/group/BasisGroupUsersContainer.js @@ -104,8 +104,6 @@ export const BasisGroupUsersContainer = props => { return prev; } }); - // console.log('내 권한 : ', my?.groupAuthCd); - // console.log('이 사람의 권한 : ', row?.groupAuthCd); if (row?.groupAuthCd === 'MASTER') { return
    수정불가
    ; @@ -148,8 +146,6 @@ export const BasisGroupUsersContainer = props => { return prev; } }); - // console.log('내 권한 : ', my?.groupAuthCd); - // console.log('이 사람의 권한 : ', row?.groupAuthCd); if (row?.groupAuthCd === 'LEADER') { if (my?.groupAuthCd === 'MASTER') { @@ -187,7 +183,7 @@ export const BasisGroupUsersContainer = props => { }, [user]); // useEffect(() => { - // console.log('changeParam >>>', params); + // }, [params]); useEffect(() => { diff --git a/src/containers/system/auth/SystemAuthContainer.js b/src/containers/system/auth/SystemAuthContainer.js index 36550674..157afe36 100644 --- a/src/containers/system/auth/SystemAuthContainer.js +++ b/src/containers/system/auth/SystemAuthContainer.js @@ -89,9 +89,7 @@ export const SystemAuthContainer = props => { return; }; - const handlerWidthrowConfirm = () => { - // console.log('탈퇴!!!'); - }; + const handlerWidthrowConfirm = () => {}; const handlerGroupJoin = () => { history.push('/basis/group/join'); diff --git a/src/containers/system/code/SystemCodeContainer.js b/src/containers/system/code/SystemCodeContainer.js index 836d7fed..2be7eeda 100644 --- a/src/containers/system/code/SystemCodeContainer.js +++ b/src/containers/system/code/SystemCodeContainer.js @@ -83,7 +83,6 @@ export const SystemCodeContainer = props => { const handlerCodeList = () => { alert('코드 조회'); - // console.log('코드 조회!!!'); }; const handlerCodeDetail = () => { diff --git a/src/containers/system/menu/SystemMenuContainer.js b/src/containers/system/menu/SystemMenuContainer.js index b1aeae66..6251c578 100644 --- a/src/containers/system/menu/SystemMenuContainer.js +++ b/src/containers/system/menu/SystemMenuContainer.js @@ -83,7 +83,6 @@ export const SystemMenuContainer = props => { const handlerCodeList = () => { alert('코드 조회'); - // console.log('코드 조회!!!'); }; const handlerCodeDetail = () => { diff --git a/src/containers/system/user/SystemUserContainer.js b/src/containers/system/user/SystemUserContainer.js index a2b9d84b..9174ff89 100644 --- a/src/containers/system/user/SystemUserContainer.js +++ b/src/containers/system/user/SystemUserContainer.js @@ -91,9 +91,7 @@ export const SystemUserContainer = props => { return; }; - const handlerWidthrowConfirm = () => { - // console.log('탈퇴!!!'); - }; + const handlerWidthrowConfirm = () => {}; const handlerGroupJoin = () => { history.push('/basis/group/join'); diff --git a/src/modules/account/login/apis/authApi.ts b/src/modules/account/login/apis/authApi.ts index 5d46d242..7cd7ff72 100644 --- a/src/modules/account/login/apis/authApi.ts +++ b/src/modules/account/login/apis/authApi.ts @@ -1,11 +1,17 @@ import axios from '../../../utils/customAxiosUtil'; -import { ResponseUser, UserAccount, TokenAccount, UserPageData,UserPw,UpdateData } from '../models/authModel'; +import { + ResponseUser, + UserAccount, + TokenAccount, + UserPageData, + UserPw, + UpdateData +} from '../models/authModel'; import qs from 'qs'; export const authAPI = { usersLogin: async (data: UserAccount) => { - // console.log('>>>>>>>>>>>>>>>>>>>>>', data); return await axios.post('api/acnt/jwt/login', data); }, getUserProfile: async (id: number) => { @@ -19,7 +25,7 @@ export const authAPI = { return axios.post('api/acnt/jwt/refresh', data); }, - getUserPage: async(id: string) => { + getUserPage: async (id: string) => { return await axios.get(`api/acnt/cstmr/profile/${id}`); }, updateUser: async (data: UpdateData) => { @@ -27,9 +33,9 @@ export const authAPI = { return res; }, pwupdate: async (data: UserPw) => { - return await axios.post('api/acnt/cstmr/profile/pswdupdate', data); + return await axios.post('api/acnt/cstmr/profile/pswdupdate', data); }, - deletedata: async(id: string) => { + deletedata: async (id: string) => { return await axios.post(`api/acnt/cstmr/profile/delete/${id}`); - }, -} + } +}; diff --git a/src/modules/account/login/sagas/authSaga.ts b/src/modules/account/login/sagas/authSaga.ts index 3977ddac..401ba2e6 100644 --- a/src/modules/account/login/sagas/authSaga.ts +++ b/src/modules/account/login/sagas/authSaga.ts @@ -25,10 +25,7 @@ import { Console } from 'console'; function* userLoginSaga(action: ActionType) { const param = action.payload; try { - // console.log('=-==================='); - const { data, errorCode } = yield call(authAPI.usersLogin, param); - //console.log('>>>>>11>>>>>>>', data); if (errorCode == '-101') { throw '계정 정보를 찾을 수 없습니다. 다시 확인해 주세요.'; @@ -48,7 +45,7 @@ function* userLoginSaga(action: ActionType) { // } else { // cookieStorage.removeCookie('SAVE_USR_ID'); // } - // console.log('user>>>', user); + yield put(Actions.login.success({ ...user.data })); } catch (error) { yield put(Actions.login.failure(error)); @@ -61,8 +58,6 @@ function* refreshTokenSaga(action: ActionType) { const param = action.payload; try { const { data, errorCode } = yield call(authAPI.refreshToken, param); - //console.log('data>>>', data); - //console.log('error>>>', errorCode); // access_token 세팅 cookieStorage.setCookie(COOKIE_ACCESS_TOKEN, data.accessToken); @@ -79,7 +74,7 @@ function* refreshTokenSaga(action: ActionType) { function* checkAuthencationSaga() { try { const accessToken = cookieStorage.getCookie(COOKIE_ACCESS_TOKEN); - // console.log('accessToken>>>>>>>>>>>>>', accessToken); + if (!accessToken) { yield put( Actions.check.success({ @@ -96,7 +91,6 @@ function* checkAuthencationSaga() { //token 셋팅 cookieStorage.setCookie(COOKIE_ACCESS_TOKEN, accessToken); - // console.log('>>>>>>>>>>>>>>>>>>>>>', data); // storageService.session.setItem(STORAGE_SESSION_ICT, user.icToken); @@ -115,14 +109,12 @@ function* checkAuthencationSaga() { function* userLogoutSaga() { const accessToken = cookieStorage.getCookie(COOKIE_ACCESS_TOKEN); - //console.log('accessToken', accessToken); try { if (accessToken) { - // console.log('dddddddddddddddddddddddddddddddddddd'); const decodedToken = decode(accessToken); const res = yield call(authAPI.usersLogout, decodedToken.cstmrSno); - // console.log('res>>>>>>>>', res); + if (res.data == 'SUCCESS') { location.href = '/account/login'; } @@ -144,7 +136,7 @@ function* userPageSaga( const controlId = action.payload; const { data } = yield call(authAPI.getUserPage, controlId); - // console.log('userPageData : ', data) + yield put(Actions.userPageAction.success(data)); } catch (error) { yield put(Actions.userPageAction.failure(error)); @@ -155,7 +147,7 @@ function* userDeletePageSaga( ) { try { const controlId = action.payload; - // console.log('dddddddddddddddddddddddddddddddddddd'); + const { data } = yield call(authAPI.deletedata, controlId); if (data.result === true) { yield put( @@ -223,7 +215,7 @@ function* userPwSaga( try { const { data, errorCode } = yield call(authAPI.pwupdate, param); //yield put(Actions.pwUpdateAction.success(data)); - // console.log("saaa",data); + if (data.errorCode === '-1') { yield put( MessageActions.IS_ERROR({ diff --git a/src/modules/account/login/service/jwtTokenUtil.ts b/src/modules/account/login/service/jwtTokenUtil.ts index 4f80a892..1fff47a4 100644 --- a/src/modules/account/login/service/jwtTokenUtil.ts +++ b/src/modules/account/login/service/jwtTokenUtil.ts @@ -13,7 +13,6 @@ const JWT_FLEFIX = 'palnet '; export const checkTokenExpired = (token?: string) => { const decodedToken = decode(token as string); - // console.log('decodedToken>>>>>>>>>>>>>>>>>>>>>>>', decodedToken); if (parseInt(decodedToken.exp) < moment().unix()) { return true; } @@ -27,15 +26,14 @@ export const getAccessToken = async () => { if (!token || token == undefined || token == 'undefined') { return ''; } - // console.log('checkTokenExpired>>>>', checkTokenExpired(token)); + if (checkTokenExpired(token)) { //freshtoken 으로 재발급 진행. const refreshToken = getRefreshToken(); - // console.log('refreshToken>>', refreshToken); + const isRefresh = store.getState()?.authState?.isRefresh; - // console.log('>>>>>>>>>>>>isRefresh', isRefresh); + if (refreshToken) { - // console.log('33333333333333333333333'); // if (!store.getState()?.authState?.isRefresh) { const decodeToken = decode(token as string); const cstmrSno: number = decodeToken.cstmrSno; @@ -67,16 +65,14 @@ const refreshTokenAPI = async (cstmrSno: number, refreshToken: string) => { } }) .then(response => response.json()) - .catch(error => { - // console.log('>>>>error ', error); - }); + .catch(error => {}); return result; }; export const getRefreshToken = () => { const token = cookieStorage.getCookie(COOKIE_REFRESH_TOKEN); - // console.log('token::::::::::', token); + if ( !token || token == undefined || diff --git a/src/modules/account/register/apis/accountApi.ts b/src/modules/account/register/apis/accountApi.ts index aaaab1ce..74059521 100644 --- a/src/modules/account/register/apis/accountApi.ts +++ b/src/modules/account/register/apis/accountApi.ts @@ -33,7 +33,6 @@ export const accountApi = { `api/acnt/crtfyhp/register/confirm?hpno=${hpno}&crtfyNo=${crtfyNo}` ); } - // list: async (data: string) => { // const queryString = qs.stringify(data, { @@ -52,7 +51,7 @@ export const accountApi = { // } // getHistory: async (id: string) => { // if (!id) { - // console.log(' ID is Empty'); + // return null; // } // const { data }: ReponseControlGpHistory = await axios.get( diff --git a/src/modules/account/register/reducers/accountReducer.ts b/src/modules/account/register/reducers/accountReducer.ts index a4976e3c..49bf3d47 100644 --- a/src/modules/account/register/reducers/accountReducer.ts +++ b/src/modules/account/register/reducers/accountReducer.ts @@ -15,7 +15,7 @@ export const accountReducer = createReducer< // .handleAction(Actions.register.success, (state, action) => // produce(state, draft => { // const res = action.payload; - // console.log(res); + // }) // ) @@ -30,7 +30,7 @@ export const accountReducer = createReducer< produce(state, draft => { const res = action.payload; draft.termsList = res; - //console.log(res); + // draft.terms = res; }) ); diff --git a/src/modules/account/register/sagas/accountSaga.ts b/src/modules/account/register/sagas/accountSaga.ts index efd3e141..1f55940a 100644 --- a/src/modules/account/register/sagas/accountSaga.ts +++ b/src/modules/account/register/sagas/accountSaga.ts @@ -13,14 +13,11 @@ import * as Models from '../models/accountModel'; function* register(action: ActionType) { try { - // console.log('-------------------------------'); - const { data, agreeTerms } = action.payload; const res = yield call(Apis.accountApi.register, { data, agreeTerms }); const resData = res.data; - //console.log('res>>>>', res); if (resData.errrCode > 0) { yield put(Actions.register.success(resData)); @@ -35,16 +32,12 @@ function* register(action: ActionType) { function* temrsList(action: ActionType) { try { - // console.log("-------------------------------") - const { langDivCd, siteCd } = action.payload; const res = yield call(Apis.accountApi.temrsList, { langDivCd, siteCd }); const resData: Models.AccountTermsData[] = res.data; - //console.log('>>>>>>>>>>>', resData); - yield put(Actions.termsList.success(resData)); } catch (error) { yield put(Actions.termsList.failure(error)); diff --git a/src/modules/analysis/history/apis/annalysisHistoryApi.ts b/src/modules/analysis/history/apis/annalysisHistoryApi.ts index e75df1f4..c315b341 100644 --- a/src/modules/analysis/history/apis/annalysisHistoryApi.ts +++ b/src/modules/analysis/history/apis/annalysisHistoryApi.ts @@ -22,7 +22,7 @@ export const analysisHistory = { } // getHistory: async (id: string) => { // if (!id) { - // console.log(' ID is Empty'); + // return null; // } // const { data }: ReponseControlGpHistory = await axios.get( diff --git a/src/modules/control/gp/sagas/controlGpSaga.ts b/src/modules/control/gp/sagas/controlGpSaga.ts index cd367a2a..cd04f70b 100644 --- a/src/modules/control/gp/sagas/controlGpSaga.ts +++ b/src/modules/control/gp/sagas/controlGpSaga.ts @@ -1,7 +1,10 @@ import { call, put, select, takeEvery } from '@redux-saga/core/effects'; import { ActionType } from 'typesafe-actions'; import { LoginData } from '../../../account/login/models/authModel'; -import { cookieStorage, COOKIE_ACCESS_TOKEN } from '../../../account/login/service/cookie'; +import { + cookieStorage, + COOKIE_ACCESS_TOKEN +} from '../../../account/login/service/cookie'; import * as Actions from '../actions/controlGpAction'; import { controlGpApi } from '../apis/controlGpApi'; import decode from 'jwt-decode'; @@ -9,216 +12,216 @@ import { ControlGpData } from '../models/controlGpModel'; import { detail } from '../../../analysis/history/actions/analysisHistoryAction'; function* getControlGpSaga( - action: ActionType + action: ActionType ) { - try { - const data = action.payload; - const state = yield select(); - const { objectId, isClickObject } = state.controlMapReducer; - - - // 그룹 별 기체 필터링 - const { controlGroupAuthInfo } = state.controlGroupAuthState; - const { controlGpHistory } = state.controlGpHisState; - - let gpsData: ControlGpData[] = []; - - //사용자가 등록한 기체(식별장치 포함)만 관제에서 볼 수 있게 필터처리 - if (controlGroupAuthInfo.length > 0) { - controlGroupAuthInfo.forEach((auth) => { - // if (auth.groupAuthCd === 'CREATER' || auth.groupAuthCd === 'ADMIN') { - - if (gpsData.length > 0) return false; - - gpsData = data.filter(gps => auth.idntfNum === gps.objectId); - // } - - // 식별장치 마다 user를 판단할 수 없기 때문에 일단 주석 처리 - // if (auth.groupAuthCd === 'USER') { - // if (gpsData.length > 0) return false; - - // gpsData.filter(gps => auth.createUserId && auth.idntfNum === gps.objectId); - // } - }); - } - - // console.log('websocket data :: ', data); - - - yield put( - Actions.controlGpAction.success({ - controlGpList: data - }) - ); - - if (data.length > 0) { - const controlIds: any = []; - - data.forEach((gps) => { - if(gps.controlId) controlIds.push(gps.controlId); - }); - - const param = controlIds.join(','); - - const rs = yield call(controlGpApi.getArcrftWarnList, param); - - yield put(Actions.controlGpArcrftWarnAction.success(rs)); - } + try { + const data = action.payload; + const state = yield select(); + const { objectId, isClickObject } = state.controlMapReducer; + + // 그룹 별 기체 필터링 + const { controlGroupAuthInfo } = state.controlGroupAuthState; + const { controlGpHistory } = state.controlGpHisState; + + let gpsData: ControlGpData[] = []; + + //사용자가 등록한 기체(식별장치 포함)만 관제에서 볼 수 있게 필터처리 + if (controlGroupAuthInfo.length > 0) { + controlGroupAuthInfo.forEach(auth => { + // if (auth.groupAuthCd === 'CREATER' || auth.groupAuthCd === 'ADMIN') { + + if (gpsData.length > 0) return false; + + gpsData = data.filter(gps => auth.idntfNum === gps.objectId); + // } + + // 식별장치 마다 user를 판단할 수 없기 때문에 일단 주석 처리 + // if (auth.groupAuthCd === 'USER') { + // if (gpsData.length > 0) return false; + + // gpsData.filter(gps => auth.createUserId && auth.idntfNum === gps.objectId); + // } + }); + } + + yield put( + Actions.controlGpAction.success({ + controlGpList: data + }) + ); + + if (data.length > 0) { + const controlIds: any = []; - if (objectId && isClickObject) { - let detailData; + data.forEach(gps => { + if (gps.controlId) controlIds.push(gps.controlId); + }); - //상세 정보에서 실시간 데이터 호출 - //* - data.map(item => { - if (item.controlId === objectId) { - detailData = item; - } - }); + const param = controlIds.join(','); - yield put(Actions.controlGpRtDtlAction.request(detailData)); + const rs = yield call(controlGpApi.getArcrftWarnList, param); + + yield put(Actions.controlGpArcrftWarnAction.success(rs)); + } + + if (objectId && isClickObject) { + let detailData; + + //상세 정보에서 실시간 데이터 호출 + //* + data.map(item => { + if (item.controlId === objectId) { + detailData = item; } - } catch (error) { - yield put(Actions.controlGpAction.failure(error)); + }); + + yield put(Actions.controlGpRtDtlAction.request(detailData)); } + } catch (error) { + yield put(Actions.controlGpAction.failure(error)); + } } function* getControlGpHistorySaga( - action: ActionType + action: ActionType ) { - try { - const { id } = action.payload; - - const data = yield call(controlGpApi.getHistory, id); - - yield put( - Actions.controlGpHisAction.success({ - controlGpHistory: data - }) - ); - } catch (error) { - yield put(Actions.controlGpHisAction.failure(error)); - } + try { + const { id } = action.payload; + + const data = yield call(controlGpApi.getHistory, id); + + yield put( + Actions.controlGpHisAction.success({ + controlGpHistory: data + }) + ); + } catch (error) { + yield put(Actions.controlGpHisAction.failure(error)); + } } function* controlGpRtDtlSaga( - action: ActionType + action: ActionType ) { - try { - const controlGpDetail = action.payload; - - yield put( - Actions.controlGpRtDtlAction.success({ - controlDetail: undefined, - controlGpDetail: controlGpDetail - }) - ); - } catch (error) { - yield put(Actions.controlGpRtDtlAction.failure(error)); - } + try { + const controlGpDetail = action.payload; + + yield put( + Actions.controlGpRtDtlAction.success({ + controlDetail: undefined, + controlGpDetail: controlGpDetail + }) + ); + } catch (error) { + yield put(Actions.controlGpRtDtlAction.failure(error)); + } } function* controlDtlSaga( - action: ActionType + action: ActionType ) { - try { - const controlId = action.payload; + try { + const controlId = action.payload; - const { data } = yield call(controlGpApi.getDetail, controlId); - yield put(Actions.controlGpDtlAction.success(data)); - } catch (error) { - yield put(Actions.controlGpDtlAction.failure(error)); - } + const { data } = yield call(controlGpApi.getDetail, controlId); + yield put(Actions.controlGpDtlAction.success(data)); + } catch (error) { + yield put(Actions.controlGpDtlAction.failure(error)); + } } function* controlGroupAuthSaga( - action: ActionType + action: ActionType ) { - const token = cookieStorage.getCookie(COOKIE_ACCESS_TOKEN); - - try { - if (token) { - const user = decode(token); - const data = yield call(controlGpApi.getGroupAuth, user.cstmrSno); - - - yield put(Actions.controlGroupAuthAction.success({ - controlGroupAuthInfo: data - })); - } - } catch (error) { - yield put(Actions.controlGroupAuthAction.failure(error)); + const token = cookieStorage.getCookie(COOKIE_ACCESS_TOKEN); + + try { + if (token) { + const user = decode(token); + const data = yield call(controlGpApi.getGroupAuth, user.cstmrSno); + + yield put( + Actions.controlGroupAuthAction.success({ + controlGroupAuthInfo: data + }) + ); } + } catch (error) { + yield put(Actions.controlGroupAuthAction.failure(error)); + } } function* controlGpFlightPlanSaga( - action: ActionType + action: ActionType ) { - try { - const idntfNum = action.payload; - const list = yield call(controlGpApi.getFlightPlan, idntfNum); + try { + const idntfNum = action.payload; + const list = yield call(controlGpApi.getFlightPlan, idntfNum); - yield put(Actions.controlGpFlightPlanAction.success(list)); - - } catch (error) { - yield put(Actions.controlGpFlightPlanAction.failure(error)); - } + yield put(Actions.controlGpFlightPlanAction.success(list)); + } catch (error) { + yield put(Actions.controlGpFlightPlanAction.failure(error)); + } } function* getControlGpWarnLogSaga( action: ActionType ) { - try{ - const {id} = action.payload; - const data = yield call(controlGpApi.getWarnLog, id) + try { + const { id } = action.payload; + const data = yield call(controlGpApi.getWarnLog, id); - yield put( - Actions.controlGpLogAction.success(data) - ); - } catch(error) { + yield put(Actions.controlGpLogAction.success(data)); + } catch (error) { yield put(Actions.controlGpLogAction.failure(error)); } } function* controlGpFlightPlanWarnSaga( - action: ActionType + action: ActionType ) { - try { - const idntfNum = action.payload; - - const rs = yield call(controlGpApi.checkPlanContains, idntfNum); + try { + const idntfNum = action.payload; - yield put(Actions.controlGpFlightPlanWarnAction.success(rs)); + const rs = yield call(controlGpApi.checkPlanContains, idntfNum); - } catch (error) { - yield put(Actions.controlGpFlightPlanWarnAction.failure(error)); - } + yield put(Actions.controlGpFlightPlanWarnAction.success(rs)); + } catch (error) { + yield put(Actions.controlGpFlightPlanWarnAction.failure(error)); + } } function* controlGpArcrftWarnSaga( - action: ActionType + action: ActionType ) { - try { - const id = action.payload; - - const rs = yield call(controlGpApi.getArcrftWarnList, id); + try { + const id = action.payload; - yield put(Actions.controlGpArcrftWarnAction.success(rs)); + const rs = yield call(controlGpApi.getArcrftWarnList, id); - } catch (error) { - yield put(Actions.controlGpArcrftWarnAction.failure(error)); - } + yield put(Actions.controlGpArcrftWarnAction.success(rs)); + } catch (error) { + yield put(Actions.controlGpArcrftWarnAction.failure(error)); + } } - export function* controlGpSaga() { - yield takeEvery(Actions.controlGpAction.request, getControlGpSaga); - yield takeEvery(Actions.controlGpHisAction.request, getControlGpHistorySaga); - yield takeEvery(Actions.controlGpLogAction.request, getControlGpWarnLogSaga); - yield takeEvery(Actions.controlGpRtDtlAction.request, controlGpRtDtlSaga); - yield takeEvery(Actions.controlGpDtlAction.request, controlDtlSaga); - yield takeEvery(Actions.controlGroupAuthAction.request, controlGroupAuthSaga); - yield takeEvery(Actions.controlGpFlightPlanAction.request, controlGpFlightPlanSaga); - yield takeEvery(Actions.controlGpFlightPlanWarnAction.request, controlGpFlightPlanWarnSaga); - yield takeEvery(Actions.controlGpArcrftWarnAction.request, controlGpArcrftWarnSaga); + yield takeEvery(Actions.controlGpAction.request, getControlGpSaga); + yield takeEvery(Actions.controlGpHisAction.request, getControlGpHistorySaga); + yield takeEvery(Actions.controlGpLogAction.request, getControlGpWarnLogSaga); + yield takeEvery(Actions.controlGpRtDtlAction.request, controlGpRtDtlSaga); + yield takeEvery(Actions.controlGpDtlAction.request, controlDtlSaga); + yield takeEvery(Actions.controlGroupAuthAction.request, controlGroupAuthSaga); + yield takeEvery( + Actions.controlGpFlightPlanAction.request, + controlGpFlightPlanSaga + ); + yield takeEvery( + Actions.controlGpFlightPlanWarnAction.request, + controlGpFlightPlanWarnSaga + ); + yield takeEvery( + Actions.controlGpArcrftWarnAction.request, + controlGpArcrftWarnSaga + ); } diff --git a/src/modules/menu/reducers/menuReducer.ts b/src/modules/menu/reducers/menuReducer.ts index 10434027..ed0daf54 100644 --- a/src/modules/menu/reducers/menuReducer.ts +++ b/src/modules/menu/reducers/menuReducer.ts @@ -16,7 +16,7 @@ export const menuReducer = createReducer( // produce(state, draft => { // const res = action.payload; // draft.termsList = res; -// console.log(res); + // // draft.terms = res; // }) // ); diff --git a/src/modules/utils/customAxiosUtil.ts b/src/modules/utils/customAxiosUtil.ts index c05c1ad1..a3055d65 100644 --- a/src/modules/utils/customAxiosUtil.ts +++ b/src/modules/utils/customAxiosUtil.ts @@ -25,14 +25,12 @@ clientInstance.interceptors.request.use( return config; }, error => { - // console.log(error); return Promise.reject(error); } ); clientInstance.interceptors.response.use( response => { - // console.log('res>>', response); // if (response.data.errCode < 0) { // alert('서버 처리중 오류가 발생하였습니다.'); // } @@ -42,20 +40,15 @@ clientInstance.interceptors.response.use( return response.data; }, error => { - // console.log('Error >> ', error); const message = error?.message || ''; const name = error?.name || ''; - // console.log('res>>>>>>>>', error?.response); - // console.log('status>>>>>>>>', error?.response?.status); - if (error?.response?.status == 401) { // alert('인증정보가 없습니다. 다시 로그인해 주세요.'); // window.location.href = '/account/login'; store.dispatch(Actions.logout.request()); } else { - // console.log('서버 응답에 실패하였습니다.'); } return Promise.reject(error); diff --git a/src/redux/reducers/navbar/index.js b/src/redux/reducers/navbar/index.js index a58a31f5..13220107 100644 --- a/src/redux/reducers/navbar/index.js +++ b/src/redux/reducers/navbar/index.js @@ -27,7 +27,6 @@ const navbarReducer = (state = initialState, action) => { } }); case 'CLICK_HEADER_MENU': - // console.log('action>>>>', action); // ** Get index to add or remove bookmark from array const bookmarkIndex = state.bookmarks.findIndex(x => x.id === action.id); diff --git a/src/router/Router.js b/src/router/Router.js index 94ab55b7..972226c0 100644 --- a/src/router/Router.js +++ b/src/router/Router.js @@ -24,7 +24,6 @@ const Router = () => { const dispatch = useDispatch(); useEffect(() => { - // console.log('isLogin>>>>>>>>', isLogin); if (!isLogin) { dispatch(Actions.check.request()); } diff --git a/src/utility/hooks/useFooterType.js b/src/utility/hooks/useFooterType.js index 07cab046..78237284 100644 --- a/src/utility/hooks/useFooterType.js +++ b/src/utility/hooks/useFooterType.js @@ -1,34 +1,34 @@ // ** React Imports -import { useState } from 'react' +import { useState } from 'react'; // ** Configs -import themeConfig from '@configs/themeConfig' +import themeConfig from '@configs/themeConfig'; export const useFooterType = () => { // ** State const [footerType, setFooterType] = useState(() => { try { - return themeConfig.layout.footer.type + return themeConfig.layout.footer.type; } catch (error) { // ** If error also initialValue - // console.log(error) - return themeConfig.layout.footer.type + + return themeConfig.layout.footer.type; } - }) + }); // ** Return a wrapped version of useState's setter function const setValue = value => { try { // ** Allow value to be a function so we have same API as useState - const valueToStore = value instanceof Function ? value(footerType) : value + const valueToStore = + value instanceof Function ? value(footerType) : value; // ** Set state - setFooterType(valueToStore) + setFooterType(valueToStore); } catch (error) { // ** A more advanced implementation would handle the error case - // console.log(error) } - } + }; - return [footerType, setValue] -} + return [footerType, setValue]; +}; diff --git a/src/utility/hooks/useLayout.js b/src/utility/hooks/useLayout.js index 66b805ce..88a4ff26 100644 --- a/src/utility/hooks/useLayout.js +++ b/src/utility/hooks/useLayout.js @@ -1,57 +1,56 @@ //** React Imports -import { useState, useEffect } from 'react' +import { useState, useEffect } from 'react'; // ** Configs -import themeConfig from '@configs/themeConfig' +import themeConfig from '@configs/themeConfig'; export const useLayout = () => { // ** States - const [lastLayout, setLastLayout] = useState(null) + const [lastLayout, setLastLayout] = useState(null); const [layout, setLayout] = useState(() => { try { - return themeConfig.layout.type + return themeConfig.layout.type; } catch (error) { // ** If error return initialValue - // console.log(error) - return themeConfig.layout.type + + return themeConfig.layout.type; } - }) + }); // ** Return a wrapped version of useState's setter function const setValue = value => { try { // ** Allow value to be a function so we have same API as useState - const valueToStore = value instanceof Function ? value(layout) : value + const valueToStore = value instanceof Function ? value(layout) : value; // ** Set state - setLayout(valueToStore) + setLayout(valueToStore); } catch (error) { // ** A more advanced implementation would handle the error case - // console.log(error) } - } + }; const handleLayout = () => { // ** If layout is horizontal & screen size is equals to or below 1200 if (layout === 'horizontal' && window.innerWidth <= 1200) { - setLayout('vertical') - setLastLayout('horizontal') + setLayout('vertical'); + setLastLayout('horizontal'); } // ** If lastLayout is horizontal & screen size is equals to or above 1200 if (lastLayout === 'horizontal' && window.innerWidth >= 1200) { - setLayout('horizontal') + setLayout('horizontal'); } - } + }; // ** ComponentDidMount useEffect(() => { - handleLayout() - }, []) + handleLayout(); + }, []); useEffect(() => { // ** Window Resize Event - window.addEventListener('resize', handleLayout) - }, [layout, lastLayout]) + window.addEventListener('resize', handleLayout); + }, [layout, lastLayout]); - return [layout, setValue] -} + return [layout, setValue]; +}; diff --git a/src/utility/hooks/useNavbarColor.js b/src/utility/hooks/useNavbarColor.js index 9d7e1263..b9cf9c93 100644 --- a/src/utility/hooks/useNavbarColor.js +++ b/src/utility/hooks/useNavbarColor.js @@ -1,34 +1,34 @@ //** React Imports -import { useState } from 'react' +import { useState } from 'react'; // ** Configs -import themeConfig from '@configs/themeConfig' +import themeConfig from '@configs/themeConfig'; export const useNavbarColor = () => { // ** State const [navbarColor, setNavbarColor] = useState(() => { try { - return themeConfig.layout.navbar.backgroundColor + return themeConfig.layout.navbar.backgroundColor; } catch (error) { // ** If error return initialValue - // console.log(error) - return themeConfig.layout.navbar.backgroundColor + + return themeConfig.layout.navbar.backgroundColor; } - }) + }); // ** Return a wrapped version of useState's setter function const setValue = value => { try { // ** Allow value to be a function so we have same API as useState - const valueToStore = value instanceof Function ? value(navbarColor) : value + const valueToStore = + value instanceof Function ? value(navbarColor) : value; // ** Set state - setNavbarColor(valueToStore) + setNavbarColor(valueToStore); } catch (error) { // ** A more advanced implementation would handle the error case - // console.log(error) } - } + }; - return [navbarColor, setValue] -} + return [navbarColor, setValue]; +}; diff --git a/src/utility/hooks/useNavbarType.js b/src/utility/hooks/useNavbarType.js index 3824a5ab..c3c5c77c 100644 --- a/src/utility/hooks/useNavbarType.js +++ b/src/utility/hooks/useNavbarType.js @@ -1,34 +1,34 @@ //** React Imports -import { useState } from 'react' +import { useState } from 'react'; // ** Configs -import themeConfig from '@configs/themeConfig' +import themeConfig from '@configs/themeConfig'; export const useNavbarType = () => { // ** State const [navbarType, setNavbarType] = useState(() => { try { - return themeConfig.layout.navbar.type + return themeConfig.layout.navbar.type; } catch (error) { // ** If error return initialValue - // console.log(error) - return themeConfig.layout.navbar.type + + return themeConfig.layout.navbar.type; } - }) + }); // ** Return a wrapped version of useState's setter function const setValue = value => { try { // ** Allow value to be a function so we have same API as useState - const valueToStore = value instanceof Function ? value(navbarType) : value + const valueToStore = + value instanceof Function ? value(navbarType) : value; // ** Set state - setNavbarType(valueToStore) + setNavbarType(valueToStore); } catch (error) { // ** A more advanced implementation would handle the error case - // console.log(error) } - } + }; - return [navbarType, setValue] -} + return [navbarType, setValue]; +}; diff --git a/src/utility/hooks/useRTL.js b/src/utility/hooks/useRTL.js index 54661b8a..2357f908 100644 --- a/src/utility/hooks/useRTL.js +++ b/src/utility/hooks/useRTL.js @@ -1,38 +1,37 @@ //** React Imports -import { useEffect } from 'react' +import { useEffect } from 'react'; // ** Store & Actions -import { handleRTL } from '@store/actions/layout' -import { useDispatch, useSelector } from 'react-redux' +import { handleRTL } from '@store/actions/layout'; +import { useDispatch, useSelector } from 'react-redux'; export const useRTL = () => { // ** Store Vars - const dispatch = useDispatch() - const isRtl = useSelector(state => state.layout.isRTL) + const dispatch = useDispatch(); + const isRtl = useSelector(state => state.layout.isRTL); // ** Return a wrapped version of useState's setter function const setValue = value => { try { // ** Allow value to be a function so we have same API as useState - const valueToStore = value instanceof Function ? value(isRtl) : value - dispatch(handleRTL(valueToStore)) + const valueToStore = value instanceof Function ? value(isRtl) : value; + dispatch(handleRTL(valueToStore)); } catch (error) { // ** A more advanced implementation would handle the error case - // console.log(error) } - } + }; useEffect(() => { // ** Get HTML Tag - const element = document.getElementsByTagName('html')[0] + const element = document.getElementsByTagName('html')[0]; // ** If isRTL then add attr dir='rtl' with HTML else attr dir='ltr' if (isRtl) { - element.setAttribute('dir', 'rtl') + element.setAttribute('dir', 'rtl'); } else { - element.setAttribute('dir', 'ltr') + element.setAttribute('dir', 'ltr'); } - }, [isRtl]) + }, [isRtl]); - return [isRtl, setValue] -} + return [isRtl, setValue]; +}; diff --git a/src/utility/hooks/useRouterTransition.js b/src/utility/hooks/useRouterTransition.js index 15bb213d..722d5133 100644 --- a/src/utility/hooks/useRouterTransition.js +++ b/src/utility/hooks/useRouterTransition.js @@ -1,34 +1,34 @@ //** React Imports -import { useState } from 'react' +import { useState } from 'react'; // ** Configs -import themeConfig from '@configs/themeConfig' +import themeConfig from '@configs/themeConfig'; export const useRouterTransition = () => { // ** State const [transition, setTransition] = useState(() => { try { - return themeConfig.layout.routerTransition + return themeConfig.layout.routerTransition; } catch (error) { // ** If error return initialValue - // console.log(error) - return themeConfig.layout.routerTransition + + return themeConfig.layout.routerTransition; } - }) + }); // ** Return a wrapped version of useState's setter function const setValue = value => { try { // ** Allow value to be a function so we have same API as useState - const valueToStore = value instanceof Function ? value(transition) : value + const valueToStore = + value instanceof Function ? value(transition) : value; // ** Set state - setTransition(valueToStore) + setTransition(valueToStore); } catch (error) { // ** A more advanced implementation would handle the error case - // console.log(error) } - } + }; - return [transition, setValue] -} + return [transition, setValue]; +}; diff --git a/src/utility/hooks/useSkin.js b/src/utility/hooks/useSkin.js index df523c92..d7ec8cf3 100644 --- a/src/utility/hooks/useSkin.js +++ b/src/utility/hooks/useSkin.js @@ -1,58 +1,57 @@ //** React Imports -import { useState, useEffect } from 'react' +import { useState, useEffect } from 'react'; // ** Configs -import themeConfig from '@configs/themeConfig' +import themeConfig from '@configs/themeConfig'; export const useSkin = () => { // ** State const [skin, setSkin] = useState(() => { try { // ** Get from local storage by key - const item = window.localStorage.getItem('skin') + const item = window.localStorage.getItem('skin'); // ** Parse stored json or if none return initialValue - return item ? JSON.parse(item) : themeConfig.layout.skin + return item ? JSON.parse(item) : themeConfig.layout.skin; } catch (error) { // ** If error also return initialValue - // console.log(error) - return themeConfig.layout.skin + + return themeConfig.layout.skin; } - }) + }); // ** Return a wrapped version of useState's setter function const setValue = value => { try { // ** Allow value to be a function so we have same API as useState - const valueToStore = value instanceof Function ? value(skin) : value + const valueToStore = value instanceof Function ? value(skin) : value; // ** Set state - setSkin(valueToStore) + setSkin(valueToStore); // ** Save to local storage - window.localStorage.setItem('skin', JSON.stringify(valueToStore)) + window.localStorage.setItem('skin', JSON.stringify(valueToStore)); } catch (error) { // ** A more advanced implementation would handle the error case - // console.log(error) } - } + }; useEffect(() => { // ** Get Body Tag - const element = window.document.body + const element = window.document.body; // ** Define classnames for skins const classNames = { dark: 'dark-layout', bordered: 'bordered-layout', 'semi-dark': 'semi-dark-layout' - } + }; // ** Remove all classes from Body on mount - element.classList.remove(...element.classList) + element.classList.remove(...element.classList); // ** If skin is not light add skin class if (skin !== 'light') { - element.classList.add(classNames[skin]) + element.classList.add(classNames[skin]); } - }, [skin]) + }, [skin]); - return [skin, setValue] -} + return [skin, setValue]; +}; diff --git a/src/views/account/AccountRegisterView.js b/src/views/account/AccountRegisterView.js index 3ab74d97..27c62f0f 100644 --- a/src/views/account/AccountRegisterView.js +++ b/src/views/account/AccountRegisterView.js @@ -1,7 +1,6 @@ import { AccountRegister } from '../../components/account/register/AccountRegister'; const AccountResisterView = props => { - // console.log(props); return ; }; diff --git a/src/views/control/main/ControlMain.js b/src/views/control/main/ControlMain.js index 3543a4fa..dfabca3b 100644 --- a/src/views/control/main/ControlMain.js +++ b/src/views/control/main/ControlMain.js @@ -62,7 +62,6 @@ const ControlMain = () => { }; const openReportDetailParam = val => { - // console.log(val); setOpenReportDetail(true); }; @@ -71,17 +70,15 @@ const ControlMain = () => { }; useEffect(() => { - - if(controlGpList) { + if (controlGpList) { const warnGps = controlGpList.find(gps => { - return gps.controlWarnNotyCd === true - }) + return gps.controlWarnNotyCd === true; + }); - if(warnGps) { + if (warnGps) { setAlarm(true); } } - }, [controlGpList]); return ( @@ -111,7 +108,11 @@ const ControlMain = () => { */}
    • diff --git a/src/views/control/report/ControlReportDetail.js b/src/views/control/report/ControlReportDetail.js index 372029a3..9a02f1a4 100644 --- a/src/views/control/report/ControlReportDetail.js +++ b/src/views/control/report/ControlReportDetail.js @@ -19,20 +19,20 @@ const ControlReportDetail = props => { const dispatch = useDispatch(); const [historyModal, setHistoryModal] = useState(false); - const { controlGpDetail, controlDetail } = useSelector(state => state.controlGpDtlState); + const { controlGpDetail, controlDetail } = useSelector( + state => state.controlGpDtlState + ); const { controlGpWarnLog } = useSelector(state => state.controlGpLogState); useEffect(() => { - if(historyModal) { - if(controlGpDetail) { - dispatch(controlGpLogAction.request({id : controlGpDetail.controlId})); + if (historyModal) { + if (controlGpDetail) { + dispatch(controlGpLogAction.request({ id: controlGpDetail.controlId })); } } - }, [historyModal]) - + }, [historyModal]); const handlerClose = () => { - // console.log('================'); dispatch(objectUnClickAction()); }; @@ -58,9 +58,15 @@ const ControlReportDetail = props => {
    - +
    - +
    @@ -227,7 +233,7 @@ const ControlReportDetail = props => {
    - { @@ -55,10 +58,7 @@ const ControlReportList = props => {
    {controlGpList?.map(item => { - // console.log(item); - if (item.objectId && item.objectId.indexOf(filterId) != -1) { - // console.log(item); return (
    { @@ -63,7 +66,6 @@ const ControlMainDraw = () => { }; const openReportDetailParam = val => { - // console.log(val); setOpenReportDetail(true); }; @@ -77,7 +79,7 @@ const ControlMainDraw = () => { const handlerDrawCheck = val => { dispatch(drawCheckAction(val)); - } + }; return ( <> @@ -95,7 +97,6 @@ const ControlMainDraw = () => { - {/* 네이버 그리기 도구모음 */}
      diff --git a/src/views/testDraw/report/ControlReportDetail.js b/src/views/testDraw/report/ControlReportDetail.js index 0417f08c..d150f420 100644 --- a/src/views/testDraw/report/ControlReportDetail.js +++ b/src/views/testDraw/report/ControlReportDetail.js @@ -19,11 +19,10 @@ const ControlReportDetail = props => { ); // useEffect(() => { - // // console.log(controlGpDetail); + // }, [controlGpDetail]); const handlerClose = () => { - // console.log('================'); dispatch(objectUnClickAction()); }; diff --git a/src/views/testDraw/report/ControlReportList.js b/src/views/testDraw/report/ControlReportList.js index 0913d235..b17b595f 100644 --- a/src/views/testDraw/report/ControlReportList.js +++ b/src/views/testDraw/report/ControlReportList.js @@ -13,7 +13,6 @@ const ControlReportList = props => { const dispatch = useDispatch(); useEffect(() => { - // console.log('>>>>', filterId); controlGpList; }, [controlGpList]); @@ -22,8 +21,6 @@ const ControlReportList = props => { dispatch(controlGpDtlAction.request(cntrlId)); }; - // useEffect(() => {}, [filterId]); - return (
      @@ -60,10 +57,7 @@ const ControlReportList = props => {
      {controlGpList?.map(item => { - // console.log(item); - if (item.objectId && item.objectId.indexOf(filterId) != -1) { - // console.log(item); return (
      { @@ -18,9 +15,7 @@ const ControlSetting = props => { const mapControl = useSelector(state => state.controlMapReducer); - useEffect(() => { - // console.log('>>>>', mapControl); - }, [mapControl]); + useEffect(() => {}, [mapControl]); const handlerMapType = val => { dispatch(mapTypeChangeAction(val)); @@ -30,11 +25,8 @@ const ControlSetting = props => { dispatch(areaClickAction(val)); }; - - return (
      -

      지도유형

      @@ -190,7 +182,6 @@ const ControlSetting = props => { />
      */} -
      ); }; diff --git a/test/pav-100-dron.js b/test/pav-100-dron.js index 3811a46b..d9de4f18 100644 --- a/test/pav-100-dron.js +++ b/test/pav-100-dron.js @@ -1,93 +1,98 @@ -const {getConnection, writeData} = require("./pav-client") -const {dumyData} = require("./pav-utils") +const { getConnection, writeData } = require('./pav-client'); +const { dumyData } = require('./pav-utils'); // const host = "192.168.0.24" // const host = "localhost" -const host = "211.253.38.218" -const port = 8082 +const host = '211.253.38.218'; +const port = 8082; -const prefix = 'TEST-DRON-' -const severalDrones = (cnt) => { - // 클라이언트 정보 저장공간 - const clients = []; +const prefix = 'TEST-DRON-'; +const severalDrones = cnt => { + // 클라이언트 정보 저장공간 + const clients = []; + // 최초 좌표 + // y - y' : 37.57 -> 35.36 + // x - x' : 126.60 -> 128.94 + const firstCoord = [37.57, 126.6]; + const lastCoord = [35.36, 128.94]; + // 좌표 차이 계산 + const diffX = firstCoord[0] - lastCoord[0]; + const diffY = lastCoord[1] - firstCoord[1]; + // 구분점 + const divCnt = Math.round(Math.sqrt(cnt)); + const divDiifX = diffX / divCnt; + const divDiifY = diffY / divCnt; - // 최초 좌표 - // y - y' : 37.57 -> 35.36 - // x - x' : 126.60 -> 128.94 - const firstCoord = [37.57, 126.6]; - const lastCoord = [35.36, 128.94]; - // 좌표 차이 계산 - const diffX = firstCoord[0] - lastCoord[0]; - const diffY = lastCoord[1] - firstCoord[1]; - // 구분점 - const divCnt = Math.round(Math.sqrt(cnt)); - const divDiifX = diffX / divCnt; - const divDiifY = diffY / divCnt; + // 초기값 저장 + for (let i = 0; i < cnt; i++) { + const client = {}; + const suffix = i.toString().padStart(3, '0'); + const dronName = prefix + suffix; + // client + client.dronName = dronName; + client.socket = getConnection(dronName, host, port); - // 초기값 저장 - for (let i = 0; i < cnt; i++) { - const client = {}; - const suffix = i.toString().padStart(3, '0') - const dronName = prefix + suffix; - // client - client.dronName = dronName; - client.socket = getConnection(dronName, host, port); + const divX = i % divCnt; + const divY = Math.floor(i / divCnt); + const x = Number((firstCoord[0] - divX * divDiifX).toFixed(5)) || 0; + const y = Number((firstCoord[1] + divY * divDiifY).toFixed(5)) || 0; - const divX = i % divCnt; - const divY = Math.floor(i / divCnt); - const x = Number((firstCoord[0] - (divX * divDiifX)).toFixed(5)) || 0; - const y = Number((firstCoord[1] + (divY * divDiifY)).toFixed(5)) || 0; - - const initialData = { - ...dumyData, - terminalId: dronName, - body: [ - { - ...dumyData.body[0], - objectId: dronName, - lat: x, - lon: y - } - ] + const initialData = { + ...dumyData, + terminalId: dronName, + body: [ + { + ...dumyData.body[0], + objectId: dronName, + lat: x, + lon: y } - client.data = initialData; + ] + }; + client.data = initialData; - console.log(dronName, x, y, JSON.stringify(initialData)) - clients.push(client); - } - return clients; -} + clients.push(client); + } + return clients; +}; // const clients = severalDrones(100); const dist = 0.01; -const sendData = (cnt) => { - const direction = Math.floor(cnt/10) % 4; - clients.forEach((item) => { - // console.log(cnt, item.data.body[0].lat, item.data.body[0].lon) - switch (direction) { - case 1: - item.data.body[0].lat = Number((item.data.body[0].lat - dist).toFixed(5)) - break; - case 2: - item.data.body[0].lon = Number((item.data.body[0].lon - dist).toFixed(5)) - break; - case 3: - item.data.body[0].lat = Number((item.data.body[0].lat + dist).toFixed(5)) - break; - default: - item.data.body[0].lon = Number((item.data.body[0].lon + dist).toFixed(5)) - break; - } +const sendData = cnt => { + const direction = Math.floor(cnt / 10) % 4; + clients.forEach(item => { + switch (direction) { + case 1: + item.data.body[0].lat = Number( + (item.data.body[0].lat - dist).toFixed(5) + ); + break; + case 2: + item.data.body[0].lon = Number( + (item.data.body[0].lon - dist).toFixed(5) + ); + break; + case 3: + item.data.body[0].lat = Number( + (item.data.body[0].lat + dist).toFixed(5) + ); + break; + default: + item.data.body[0].lon = Number( + (item.data.body[0].lon + dist).toFixed(5) + ); + break; + } - writeData(item.socket, JSON.stringify(item.data)); - }) - if(cnt >= 39) cnt = null; - iteratorSendData(++cnt); -} + writeData(item.socket, JSON.stringify(item.data)); + }); + if (cnt >= 39) cnt = null; + iteratorSendData(++cnt); +}; const iteratorSendData = (cnt = 0) => { - setTimeout(() => sendData(cnt), 1000); -} + setTimeout(() => sendData(cnt), 1000); +}; iteratorSendData();