You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
334 lines
10 KiB
334 lines
10 KiB
import { useEffect, useState } from 'react'; |
|
import { useHistory, useParams, useLocation } from 'react-router-dom'; |
|
import LaancStep1 from '../../views/laanc/LaancStep1'; // laanc step 1 |
|
import LaancStep2 from '../../views/laanc/LaancStep2'; // laanc step 2 |
|
import LaancStep3 from '../../views/laanc/LaacnStep3'; // laanc step 3 |
|
import moment from 'moment'; |
|
import { WeatherContainer } from '../basis/flight/plan/WeatherContainer'; |
|
import { ErrorModal } from '../../components/modal/ErrorModal'; |
|
import { |
|
initFlight, |
|
initFlightBas |
|
} from '../../modules/laanc/models/laancModels'; |
|
import { Modal } from 'reactstrap'; |
|
import { |
|
AREA_DETAIL_INIT, |
|
FLIGHT_PLAN_AREA_BUFFER_LIST |
|
} from '../../modules/basis/flight/actions/basisFlightAction'; |
|
import { useDispatch, useSelector } from 'react-redux'; |
|
import { drawTypeChangeAction } from '../../modules/control/map/actions/controlMapActions'; |
|
import * as LaancAction from '../../modules/laanc/actions/laancActions'; |
|
export default function LaancPlanContainer({ |
|
currentParm, |
|
disabledAnimation, |
|
setDisabledAnimation |
|
}) { |
|
const { areaCoordList } = useSelector(state => state.flightState); |
|
|
|
const [step, setStep] = useState(1); |
|
const [detailData, setDetailData] = useState(initFlightBas.initDetail); |
|
const [centeredModal, setCenteredModal] = useState(false); |
|
const [formModal, setFormModal] = useState(false); |
|
const [modal2, setModal2] = useState({ |
|
isOpen: false, |
|
title: '', |
|
desc: '' |
|
}); |
|
const { user } = useSelector(state => state.authState); |
|
const dispatch = useDispatch(); |
|
|
|
useEffect(() => { |
|
setDetailData({ |
|
...detailData, |
|
cstmrSno: user.cstmrSno, |
|
memberName: user.memberName |
|
}); |
|
return () => { |
|
dispatch(drawTypeChangeAction('')); |
|
}; |
|
}, []); |
|
|
|
// step 핸들러 |
|
const handlerStep = step => { |
|
setStep(step); |
|
}; |
|
|
|
const handlerLogout = () => { |
|
dispatch(Actions.logout.request()); |
|
}; |
|
|
|
// 날씨 핸들러 |
|
const handlerWeather = () => { |
|
setFormModal(!formModal); |
|
}; |
|
|
|
// 비행계획서 작성 핸들러 |
|
const handleChange = ({ name, value, type, index, pIndex }) => { |
|
const arrName = `${type}List`; |
|
|
|
switch (type) { |
|
case 'coord': |
|
setDetailData(prevState => { |
|
return { |
|
...prevState, |
|
areaList: [ |
|
{ |
|
...prevState.areaList[0], |
|
bufferZone: 100, |
|
coordList: value |
|
} |
|
] |
|
}; |
|
}); |
|
break; |
|
case 'area': |
|
case 'pilot': |
|
case 'arcrft': |
|
if (name === 'fltElev' || name === 'bufferZone' || name === 'hpno') { |
|
const newValue = value.replace(/^0+/, '').replace(/\D/g, ''); |
|
|
|
setDetailData(prevState => { |
|
const arr = [...prevState[arrName]]; |
|
const updateData = { |
|
...prevState[arrName][0], |
|
[name]: newValue |
|
}; |
|
arr[0] = updateData; |
|
return { |
|
...prevState, |
|
[arrName]: arr |
|
}; |
|
}); |
|
} else { |
|
setDetailData(prevState => { |
|
const arr = [...prevState[arrName]]; |
|
const updateData = { |
|
...prevState[arrName][0], |
|
[name]: value |
|
}; |
|
arr[0] = updateData; |
|
return { |
|
...prevState, |
|
[arrName]: arr |
|
}; |
|
}); |
|
} |
|
break; |
|
case 'plan': |
|
default: |
|
setDetailData(prevState => ({ |
|
...prevState, |
|
[name]: value |
|
})); |
|
break; |
|
} |
|
}; |
|
|
|
console.log('>>>', detailData); |
|
// 스텝 1 다음 버튼 이벤트 |
|
const handlerNext = () => { |
|
const reg_email = |
|
/^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/; |
|
const check_num = /[0-9]/; |
|
const check_kor = |
|
/^[가-힣a-zA-Z0-9][^!@#$%^&*()+\=\[\]{};':"\\|,.<>\/?\s]*$/; |
|
// 시작일자 |
|
const schFltStDt = moment(detailData.schFltStDt, 'YYYY-MM-DD HH:mm:ss'); |
|
// 종료일자 |
|
const schFltEndDt = moment(detailData.schFltEndDt, 'YYYY-MM-DD HH:mm:ss'); |
|
|
|
const currentDate = moment(); // 현재 날짜와 시간을 가져옵니다. |
|
|
|
if (!detailData.commercial) { |
|
setModal2({ |
|
isOpen: true, |
|
title: '필수값 입력 오류', |
|
desc: '비행 종류(상업/비상업)를 선택해주세요.' |
|
}); |
|
return false; |
|
} else if ( |
|
!schFltStDt.isAfter(currentDate) || |
|
!schFltEndDt.isAfter(currentDate) |
|
) { |
|
setModal2({ |
|
isOpen: true, |
|
title: '필수값 입력 오류', |
|
desc: '비행 일자가 이미 지난 일자입니다.' |
|
}); |
|
return false; |
|
} else if (schFltStDt.isAfter(schFltEndDt)) { |
|
setModal2({ |
|
isOpen: true, |
|
title: '필수값 입력 오류', |
|
desc: '비행일자를 확인해주세요.' |
|
}); |
|
return false; |
|
} else if (schFltStDt.format('A h:mm') === 'PM 11:00') { |
|
setModal2({ |
|
isOpen: true, |
|
title: '특별 비행', |
|
desc: '야간 비행은 특별 비행에 해당됩니다. 특별 비행의 경우 드론원스톱을 통해서 신청해주시기 바랍니다.' |
|
}); |
|
return false; |
|
} else if (schFltStDt.format('A h:mm') === 'PM 5:00') { |
|
setModal2({ |
|
isOpen: true, |
|
title: '비행구역 및 비행일자 중복', |
|
desc: '설정하신 비행구역 및 비행시간에 이미 승인완료된 신청건이 있습니다. 다시 설정 부탁드립니다.' |
|
}); |
|
return false; |
|
} else if (!detailData.fltPurpose) { |
|
setModal2({ |
|
isOpen: true, |
|
title: '필수값 입력 오류', |
|
desc: '비행목적을 선택해 주세요.' |
|
}); |
|
|
|
return false; |
|
} else if (!detailData.areaList[0].fltElev) { |
|
setModal2({ |
|
isOpen: true, |
|
title: '필수값 입력 오류', |
|
desc: '고도를 입력해 주세요.' |
|
}); |
|
|
|
return false; |
|
} else if (parseInt(detailData.areaList[0].fltElev, 10) > 150) { |
|
setModal2({ |
|
isOpen: true, |
|
title: '고도 재설정', |
|
desc: '설정하신 고도가 150m를 초과하였습니다. 150m 이하로 설정 부탁드립니다.' |
|
}); |
|
|
|
return false; |
|
} else if (!detailData.areaList[0].bufferZone) { |
|
setModal2({ |
|
isOpen: true, |
|
title: '필수값 입력 오류', |
|
desc: '반경을 입력해 주세요.' |
|
}); |
|
|
|
return false; |
|
} else if (!detailData.areaList[0].fltMethod) { |
|
setModal2({ |
|
isOpen: true, |
|
title: '필수값 입력 오류', |
|
desc: '비행방식를 입력해 주세요.' |
|
}); |
|
|
|
return false; |
|
} else if ( |
|
!detailData.arcrftList[0].arcrftTypeCd && |
|
(detailData.commercial === 'COMMERCIAL' || |
|
detailData.arcrftList[0].arcrftWdth == '9' || |
|
detailData.arcrftList[0].arcrftWdth == '10' || |
|
detailData.arcrftList[0].arcrftWdth == '11') |
|
) { |
|
setModal2({ |
|
isOpen: true, |
|
title: '필수값 입력 오류', |
|
desc: '기체 종류를 입력해 주세요.' |
|
}); |
|
|
|
return false; |
|
} else if ( |
|
!detailData.arcrftList[0].idntfNum && |
|
(detailData.commercial === 'COMMERCIAL' || |
|
detailData.arcrftList[0].arcrftWdth == '9' || |
|
detailData.arcrftList[0].arcrftWdth == '10' || |
|
detailData.arcrftList[0].arcrftWdth == '11') |
|
) { |
|
setModal2({ |
|
isOpen: true, |
|
title: '필수값 입력 오류', |
|
desc: '기체 신고 번호를 입력해 주세요.' |
|
}); |
|
|
|
return false; |
|
} else { |
|
//api 호출 부분 |
|
dispatch(LaancAction.LAANC_FLIGHT_Approval.request(detailData)); |
|
setStep(2); |
|
} |
|
}; |
|
|
|
const handlerBufferApply = () => { |
|
if (areaCoordList) { |
|
if (areaCoordList[0].coordList.length > 0) { |
|
const array = []; |
|
const copy = { ...areaCoordList[0] }; |
|
copy.bufferZone = detailData.areaList[0].bufferZone; |
|
array.push(copy); |
|
|
|
dispatch(FLIGHT_PLAN_AREA_BUFFER_LIST.request(array)); |
|
} |
|
} else { |
|
setModal2({ |
|
isOpen: true, |
|
title: '필수값 입력 오류', |
|
desc: '비행 구역을 설정해 주세요.' |
|
}); |
|
} |
|
}; |
|
|
|
const handlerLaancClose = () => { |
|
setDisabledAnimation(!disabledAnimation); |
|
dispatch(AREA_DETAIL_INIT()); |
|
}; |
|
|
|
return ( |
|
<> |
|
<div className='disabled-animation-modal'> |
|
<Modal |
|
isOpen={disabledAnimation} |
|
toggle={() => setDisabledAnimation(!disabledAnimation)} |
|
className='modal-dialog-centered laanc-modal' |
|
fade={false} |
|
backdrop={false} |
|
> |
|
{step === 1 && ( |
|
<> |
|
<LaancStep1 |
|
// handlerStep={handlerStep} |
|
data={detailData} |
|
handleChange={handleChange} |
|
handlerNext={handlerNext} |
|
handlerWeather={handlerWeather} |
|
setDisabledAnimation={setDisabledAnimation} |
|
disabledAnimation={disabledAnimation} |
|
centeredModal={centeredModal} |
|
setCenteredModal={setCenteredModal} |
|
currentParm={currentParm} |
|
handlerLaancClose={handlerLaancClose} |
|
handlerBufferApply={handlerBufferApply} |
|
/> |
|
</> |
|
)} |
|
{step === 2 && ( |
|
<LaancStep2 |
|
handlerStep={handlerStep} |
|
data={detailData} |
|
disabledAnimation={disabledAnimation} |
|
setDisabledAnimation={setDisabledAnimation} |
|
centeredModal={centeredModal} |
|
setCenteredModal={setCenteredModal} |
|
handlerLaancClose={handlerLaancClose} |
|
/> |
|
)} |
|
{step === 3 && ( |
|
<LaancStep3 |
|
handlerStep={handlerStep} |
|
data={detailData} |
|
disabledAnimation={disabledAnimation} |
|
setDisabledAnimation={setDisabledAnimation} |
|
handlerLaancClose={handlerLaancClose} |
|
centeredModal={centeredModal} |
|
setCenteredModal={setCenteredModal} |
|
/> |
|
)} |
|
</Modal> |
|
<ErrorModal modal={modal2} setModal={setModal2} /> |
|
</div> |
|
</> |
|
); |
|
}
|
|
|