|
|
|
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>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|