junh_eee(이준희)
7 months ago
17 changed files with 391 additions and 368 deletions
@ -0,0 +1,274 @@
|
||||
import { useEffect, useRef, useState, lazy, Suspense } from 'react'; |
||||
import { useDispatch, useSelector } from '@src/redux/store'; |
||||
import { |
||||
Button, |
||||
Modal, |
||||
ModalHeader, |
||||
ModalBody, |
||||
ModalFooter |
||||
} from '@component/ui'; |
||||
import LaancMapDetail from './LaancMapDetail'; |
||||
import { initFlightBasState } from '@src/redux/features/laanc/laancState'; |
||||
import { |
||||
clientAltitudeData, |
||||
clientChangeDrawType, |
||||
clientControlLaancModal, |
||||
clientSaveAreaCoordinateList, |
||||
clientSaveAreaDetailList |
||||
} from '@src/redux/features/laanc/laancSlice'; |
||||
import { openModal } from '@src/redux/features/comn/message/messageSlice'; |
||||
|
||||
const LaancDrawModal = lazy(() => import('./LaancDrawModal')); |
||||
const LaancMapWeather = lazy(() => import('./LaancMapWeather')); |
||||
|
||||
export default function LaancMapModal({ |
||||
drawObj, |
||||
mapContainer, |
||||
weather, |
||||
areaCoordList |
||||
}) { |
||||
const dispatch = useDispatch(); |
||||
const { drawType, isOpenModal } = useSelector(state => state.laancState); |
||||
|
||||
// 저장된 비행구역 데이터
|
||||
const [saveData, setSaveData] = useState(); |
||||
|
||||
// 비행구역 저장 가능 여부
|
||||
const [isSaveable, setIsSaveable] = useState(false); |
||||
|
||||
// 비행구역 고도
|
||||
const [saveElev, setSaveElev] = useState([]); |
||||
|
||||
// 날씨 모달
|
||||
const [formModal, setFormModal] = useState(false); |
||||
|
||||
// 특별비행신청 모달(드론 원스톱 바로가기 기능)
|
||||
const [modal, setModal] = useState({ |
||||
title: '', |
||||
desc: '', |
||||
isOpen: false |
||||
}); |
||||
|
||||
/** |
||||
* 비행구역 저장 가능 유무 체크 |
||||
* @param {boolean} save 비행구역 저장 가능 유무 |
||||
*/ |
||||
const handlerSaveCheck = save => { |
||||
setIsSaveable(save); |
||||
}; |
||||
|
||||
// 비행구역 추가 가능 여부 판단
|
||||
const [addData, setAddData] = useState({ |
||||
isAddable: false, |
||||
isViewAdd: false, |
||||
overAdd: false |
||||
}); |
||||
|
||||
// 비행구역 추가 버튼 클릭 시
|
||||
const handlerAddClick = () => { |
||||
if (!addData.isAddable || !addData.overAdd) { |
||||
handlerAddChange('isAddable', true); |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* 비행구역 추가 관련 상태 변경 |
||||
* @param {string} key addData의 key |
||||
* @param {boolean} val addData의 value |
||||
*/ |
||||
const handlerAddChange = (key, val) => { |
||||
setAddData(prev => ({ |
||||
...prev, |
||||
[key]: val |
||||
})); |
||||
}; |
||||
|
||||
/** |
||||
* 비행구역 고도 저장 |
||||
* @param {number} elev 비행고도 |
||||
*/ |
||||
const handlerSaveElev = elev => { |
||||
setSaveElev([elev]); |
||||
}; |
||||
|
||||
/** |
||||
* 비행구역 타입 변경 시 그리기 모드 상태일 때 에러 표출 |
||||
* @param {string} val 비행구역 타입 |
||||
*/ |
||||
const handlerDrawType = val => { |
||||
if (drawObj.getMode().includes('draw')) { |
||||
dispatch( |
||||
openModal({ |
||||
header: '비행 구역 설정', |
||||
body: ( |
||||
<> |
||||
비행구역 설정이 완료되지 않았습니다. |
||||
<br /> |
||||
비행구역 설정 완료 후 타입 변경 부탁드립니다. |
||||
</> |
||||
) |
||||
}) |
||||
); |
||||
} else { |
||||
dispatch(clientChangeDrawType(val)); |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* 비행구역 데이터 초기화 |
||||
*/ |
||||
const handlerInitCoordinates = () => { |
||||
const init = initFlightBasState.initDetail.areaList.concat(); |
||||
dispatch(clientSaveAreaCoordinateList(init)); |
||||
}; |
||||
|
||||
/** |
||||
* laanc계획서 비행구역 저장버튼 클릭 시 비행구역 정보 저장 |
||||
*/ |
||||
const handlerSave = async () => { |
||||
if (areaCoordList) { |
||||
console.log('save'); |
||||
const areaDetail = areaCoordList; |
||||
const resultAreaDetail = areaDetail.map(area => { |
||||
return { |
||||
...area, |
||||
coordList: areaDetail[0].coordList |
||||
}; |
||||
}); |
||||
|
||||
dispatch(clientControlLaancModal(false)); |
||||
dispatch(clientSaveAreaDetailList(resultAreaDetail)); |
||||
} |
||||
}; |
||||
|
||||
/** |
||||
* 날씨 모달 표출 |
||||
*/ |
||||
const handlerWeather = () => { |
||||
setFormModal(!formModal); |
||||
}; |
||||
|
||||
/** |
||||
* 특별비행신청 모달 표출 |
||||
*/ |
||||
const handlerModal = () => { |
||||
setModal(!modal); |
||||
}; |
||||
|
||||
return ( |
||||
<> |
||||
<Modal |
||||
isOpen={isOpenModal} |
||||
toggle={() => { |
||||
dispatch(clientControlLaancModal(false)); |
||||
dispatch(clientSaveAreaCoordinateList(saveData)); |
||||
}} |
||||
className='modal-dialog-centered modal-xl' |
||||
> |
||||
<ModalHeader |
||||
toggle={() => { |
||||
dispatch(clientControlLaancModal(false)); |
||||
dispatch(clientSaveAreaCoordinateList(saveData)); |
||||
}} |
||||
> |
||||
비행 구역 설정 |
||||
</ModalHeader> |
||||
<ModalBody> |
||||
<Suspense fallback=''> |
||||
<LaancMapDetail |
||||
mapContainer={mapContainer} |
||||
drawObj={drawObj} |
||||
handlerInitCoordinates={handlerInitCoordinates} |
||||
handlerSaveCheck={handlerSaveCheck} |
||||
handlerAddChange={handlerAddChange} |
||||
addData={addData} |
||||
setSaveData={setSaveData} |
||||
handlerSaveElev={handlerSaveElev} |
||||
setModal={setModal} |
||||
/> |
||||
</Suspense> |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<div className='laanc-map-btn'> |
||||
<div className='laanc-point'> |
||||
<Button |
||||
color='primary' |
||||
disabled={drawType === 'LINE' || addData.overAdd} |
||||
onClick={() => { |
||||
handlerDrawType('LINE'); |
||||
}} |
||||
> |
||||
선 |
||||
</Button> |
||||
<Button |
||||
color='primary' |
||||
disabled={drawType === 'CIRCLE' || addData.overAdd} |
||||
onClick={() => { |
||||
handlerDrawType('CIRCLE'); |
||||
}} |
||||
> |
||||
원 |
||||
</Button> |
||||
<Button |
||||
color='primary' |
||||
disabled={drawType === 'POLYGON' || addData.overAdd} |
||||
onClick={() => { |
||||
handlerDrawType('POLYGON'); |
||||
}} |
||||
> |
||||
다각형 |
||||
</Button> |
||||
<Button |
||||
color='primary' |
||||
onClick={() => { |
||||
handlerDrawType('RESET'); |
||||
}} |
||||
> |
||||
초기화 |
||||
</Button> |
||||
{addData.isViewAdd ? ( |
||||
<Button |
||||
disabled={addData.overAdd || addData.isAddable} |
||||
color='primary' |
||||
onClick={handlerAddClick} |
||||
> |
||||
추가 |
||||
</Button> |
||||
) : null} |
||||
{addData.isViewAdd && weather[0]?.coordList[0].lat != 0 ? ( |
||||
<Button color='primary' onClick={handlerWeather}> |
||||
날씨 정보 |
||||
</Button> |
||||
) : null} |
||||
</div> |
||||
<div className='right-btn'> |
||||
<span className='etc-txt'> |
||||
※ 비행구역설정 완료를 원하시면 마지막 좌표 지점에서 |
||||
더블클릭해주시기 바랍니다. |
||||
</span> |
||||
<Button |
||||
color='primary' |
||||
disabled={!isSaveable} |
||||
onClick={() => { |
||||
handlerSave(); |
||||
dispatch(clientAltitudeData(saveElev)); |
||||
}} |
||||
> |
||||
저장 |
||||
</Button> |
||||
</div> |
||||
</div> |
||||
</ModalFooter> |
||||
</Modal> |
||||
{/* 날씨 모달 */} |
||||
<Suspense fallback=''> |
||||
<LaancMapWeather |
||||
formModal={formModal} |
||||
weather={weather} |
||||
handlerWeather={handlerWeather} |
||||
/> |
||||
</Suspense> |
||||
<LaancDrawModal modal={modal} handler={handlerModal} /> |
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,38 @@
|
||||
import { lazy, Suspense } from 'react'; |
||||
import { |
||||
Button, |
||||
Modal, |
||||
ModalHeader, |
||||
ModalBody, |
||||
ModalFooter |
||||
} from '@component/ui'; |
||||
|
||||
const WeatherContainer = lazy(() => |
||||
import('@src/containers/basis/flight/plan/WeatherContainer') |
||||
); |
||||
|
||||
export default function LaancMapWeather({ |
||||
formModal, |
||||
handlerWeather, |
||||
weather |
||||
}) { |
||||
return ( |
||||
<Modal |
||||
isOpen={formModal} |
||||
toggle={handlerWeather} |
||||
className='modal-dialog-centered' |
||||
> |
||||
<ModalHeader toggle={handlerWeather}>날씨 정보</ModalHeader> |
||||
<ModalBody> |
||||
<Suspense fallback=''> |
||||
<WeatherContainer mapAreaCoordList={weather} /> |
||||
</Suspense> |
||||
</ModalBody> |
||||
<ModalFooter> |
||||
<Button color='primary' onClick={handlerWeather}> |
||||
확인 |
||||
</Button> |
||||
</ModalFooter> |
||||
</Modal> |
||||
); |
||||
} |
||||
Loading…
Reference in new issue