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