sanguu516(박상현)
1 year ago
4 changed files with 695 additions and 474 deletions
@ -0,0 +1,259 @@ |
|||||||
|
import FlightPlan from '../../../../views/laanc/FlightPlan'; |
||||||
|
import Apply from '../../../../views/laanc/Apply'; |
||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import moment from 'moment'; |
||||||
|
import { WeatherContainer } from '../../../../containers/basis/flight/plan/WeatherContainer'; |
||||||
|
import { ErrorModal } from '../../../../components/modal/ErrorModal'; |
||||||
|
import { |
||||||
|
initFlight, |
||||||
|
initFlightBas |
||||||
|
} from '../../../../modules/basis/flight/models/basisFlightModel'; |
||||||
|
import { |
||||||
|
Row, |
||||||
|
Col, |
||||||
|
Button, |
||||||
|
Modal, |
||||||
|
ModalHeader, |
||||||
|
ModalBody, |
||||||
|
ModalFooter, |
||||||
|
Alert, |
||||||
|
FormGroup, |
||||||
|
Label, |
||||||
|
Input |
||||||
|
} from 'reactstrap'; |
||||||
|
|
||||||
|
const LaancContainer = () => { |
||||||
|
const [step, setStep] = useState(1); |
||||||
|
const [detailData, setDetailData] = useState(initFlightBas.initDetail); |
||||||
|
const [formModal, setFormModal] = useState(false); |
||||||
|
const [disabledAnimation, setDisabledAnimation] = useState(true); |
||||||
|
const [modal2, setModal2] = useState({ |
||||||
|
isOpen: false, |
||||||
|
title: '', |
||||||
|
desc: '' |
||||||
|
}); |
||||||
|
const [centeredModal, setCenteredModal] = useState(false); |
||||||
|
//날씨 임시 데이터
|
||||||
|
const [wheather, setWheather] = useState([ |
||||||
|
{ |
||||||
|
coordList: [ |
||||||
|
{ |
||||||
|
lat: 37.40284040287055, |
||||||
|
lon: 126.68639226254697 |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
]); |
||||||
|
|
||||||
|
// step 핸들러
|
||||||
|
const handlerStep = step => { |
||||||
|
setStep(step); |
||||||
|
}; |
||||||
|
|
||||||
|
const handlerLogout = () => { |
||||||
|
dispatch(Actions.logout.request()); |
||||||
|
}; |
||||||
|
|
||||||
|
useEffect(() => {}, [detailData]); |
||||||
|
|
||||||
|
// 날씨 핸들러
|
||||||
|
const handlerWeather = () => { |
||||||
|
setFormModal(!formModal); |
||||||
|
}; |
||||||
|
|
||||||
|
// 비행계획서 작성 핸들러
|
||||||
|
const handleChange = ({ name, value, type, index, pIndex }) => { |
||||||
|
const arrName = `${type}List`; |
||||||
|
|
||||||
|
switch (type) { |
||||||
|
case 'area': |
||||||
|
case 'pilot': |
||||||
|
case 'arcrft': |
||||||
|
if (name === 'fltElev' || name === 'bufferZone' || name === 'hpno') { |
||||||
|
const newValue = value.replace(/[^0-9]/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.pilotList[0].memberName) { |
||||||
|
setModal2({ |
||||||
|
isOpen: true, |
||||||
|
title: '필수값 입력 오류', |
||||||
|
desc: '이름을 입력해 주세요.' |
||||||
|
}); |
||||||
|
return false; |
||||||
|
} else if (!check_num.test(detailData.pilotList[0].hpno)) { |
||||||
|
setModal2({ |
||||||
|
isOpen: true, |
||||||
|
title: '필수값 입력 오류', |
||||||
|
desc: '연락처를 확인해 주세요.' |
||||||
|
}); |
||||||
|
return false; |
||||||
|
} else if (!reg_email.test(detailData.pilotList[0].email)) { |
||||||
|
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 (!detailData.fltPurpose) { |
||||||
|
setModal2({ |
||||||
|
isOpen: true, |
||||||
|
title: '필수값 입력 오류', |
||||||
|
desc: '비행목적을 선택해 주세요.' |
||||||
|
}); |
||||||
|
|
||||||
|
return false; |
||||||
|
} else if (!detailData.areaList[0].fltElev) { |
||||||
|
setModal2({ |
||||||
|
isOpen: true, |
||||||
|
title: '필수값 입력 오류', |
||||||
|
desc: '고도를 입력해 주세요.' |
||||||
|
}); |
||||||
|
|
||||||
|
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].groupNm) { |
||||||
|
setModal2({ |
||||||
|
isOpen: true, |
||||||
|
title: '필수값 입력 오류', |
||||||
|
desc: '기체 신고 번호를 입력해 주세요.' |
||||||
|
}); |
||||||
|
|
||||||
|
return false; |
||||||
|
} else if (!detailData.arcrftList[0].arcrftTypeCd) { |
||||||
|
setModal2({ |
||||||
|
isOpen: true, |
||||||
|
title: '필수값 입력 오류', |
||||||
|
desc: '기체 종류를 입력해 주세요.' |
||||||
|
}); |
||||||
|
|
||||||
|
return false; |
||||||
|
} else if (!detailData.arcrftList[0].ownerNm) { |
||||||
|
setModal2({ |
||||||
|
isOpen: true, |
||||||
|
title: '필수값 입력 오류', |
||||||
|
desc: '소유자명(법인명)를 입력해 주세요.' |
||||||
|
}); |
||||||
|
|
||||||
|
return false; |
||||||
|
} else { |
||||||
|
//api 호출 부분
|
||||||
|
|
||||||
|
setStep(2); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<div className='disabled-animation-modal'> |
||||||
|
<Modal |
||||||
|
isOpen={disabledAnimation} |
||||||
|
toggle={() => setDisabledAnimation(!disabledAnimation)} |
||||||
|
className='modal-dialog-centered laanc-modal' |
||||||
|
fade={false} |
||||||
|
backdrop={false} |
||||||
|
> |
||||||
|
{step === 1 && ( |
||||||
|
<> |
||||||
|
<FlightPlan |
||||||
|
// handlerStep={handlerStep}
|
||||||
|
data={detailData} |
||||||
|
handleChange={handleChange} |
||||||
|
handlerNext={handlerNext} |
||||||
|
handlerWeather={handlerWeather} |
||||||
|
setDisabledAnimation={setDisabledAnimation} |
||||||
|
disabledAnimation={disabledAnimation} |
||||||
|
/> |
||||||
|
</> |
||||||
|
)} |
||||||
|
|
||||||
|
{step === 2 && <Apply handlerStep={handlerStep} data={detailData} />} |
||||||
|
</Modal> |
||||||
|
<ErrorModal modal={modal2} setModal={setModal2} /> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
export default LaancContainer; |
||||||
@ -0,0 +1,49 @@ |
|||||||
|
import { |
||||||
|
Row, |
||||||
|
Col, |
||||||
|
Button, |
||||||
|
Modal, |
||||||
|
ModalHeader, |
||||||
|
ModalBody, |
||||||
|
ModalFooter, |
||||||
|
Alert, |
||||||
|
FormGroup, |
||||||
|
Label, |
||||||
|
Input |
||||||
|
} from 'reactstrap'; |
||||||
|
|
||||||
|
const FlightArea = ({ centeredModal, setCenteredModal }) => { |
||||||
|
return ( |
||||||
|
<div className='vertically-centered-modal'> |
||||||
|
<Modal |
||||||
|
isOpen={centeredModal} |
||||||
|
toggle={() => setCenteredModal(!centeredModal)} |
||||||
|
className='modal-dialog-centered modal-xl' |
||||||
|
> |
||||||
|
<ModalHeader toggle={() => setCenteredModal(!centeredModal)}> |
||||||
|
비행 구역 설정 |
||||||
|
</ModalHeader> |
||||||
|
<ModalBody>지도영역 지도 height 정해주기</ModalBody> |
||||||
|
<ModalFooter> |
||||||
|
<div className='laanc-map-btn'> |
||||||
|
<div className='laanc-point'> |
||||||
|
<Button color='primary'>버튼1</Button> |
||||||
|
<Button color='primary'>버튼2</Button> |
||||||
|
<Button color='primary'>버튼3</Button> |
||||||
|
<Button color='primary'>버튼4</Button> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<Button |
||||||
|
color='primary' |
||||||
|
onClick={() => setCenteredModal(!centeredModal)} |
||||||
|
> |
||||||
|
닫기 |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</ModalFooter> |
||||||
|
</Modal> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
export default FlightArea; |
||||||
Loading…
Reference in new issue