sanguu516(박상현)
1 year ago
4 changed files with 24 additions and 301 deletions
@ -1,277 +0,0 @@ |
|||||||
import logo from '../../assets/images/pal_logo.png'; |
|
||||||
import tp_logo from '../../assets/images/tplogo_wh.png'; |
|
||||||
import kac_logo from '../../assets/images/kac_logo_wh.png'; |
|
||||||
import FlightPlan from './LaancStep1'; |
|
||||||
import Apply from './LaancStep2'; |
|
||||||
import { useEffect, useState } from 'react'; |
|
||||||
import { AiOutlinePoweroff, AiOutlineExclamation } from 'react-icons/ai'; |
|
||||||
import WebsocketClient from '../../components/websocket/WebsocketClient'; |
|
||||||
import UserDropdown from '../../@core/layouts/components/navbar/UserDropdown'; |
|
||||||
import { ErrorModal } from '../../components/modal/ErrorModal'; |
|
||||||
import { |
|
||||||
initFlight, |
|
||||||
initFlightBas |
|
||||||
} from '../../modules/basis/flight/models/basisFlightModel'; |
|
||||||
import { WeatherContainer } from '../../containers/basis/flight/plan/WeatherContainer'; |
|
||||||
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; |
|
||||||
import moment from 'moment'; |
|
||||||
function LeftMenu() { |
|
||||||
const [step, setStep] = useState(1); |
|
||||||
const [detailData, setDetailData] = useState(initFlightBas.initDetail); |
|
||||||
const [formModal, setFormModal] = useState(false); |
|
||||||
const [modal2, setModal2] = useState({ |
|
||||||
isOpen: false, |
|
||||||
title: '', |
|
||||||
desc: '' |
|
||||||
}); |
|
||||||
|
|
||||||
//날씨 임시 데이터
|
|
||||||
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='left-menu'> |
|
||||||
<h1 className='logo'> |
|
||||||
<img src={logo} width='80' /> |
|
||||||
<span>PAL</span> |
|
||||||
</h1> |
|
||||||
<ul className='left-menu-nav'></ul> |
|
||||||
<ul className='left-menu-footer'> |
|
||||||
<li> |
|
||||||
<AiOutlinePoweroff |
|
||||||
size={25} |
|
||||||
className='logout-btn' |
|
||||||
onClick={handlerLogout} |
|
||||||
/> |
|
||||||
</li> |
|
||||||
<li style={{ marginLeft: '8px' }}> |
|
||||||
<WebsocketClient /> |
|
||||||
</li> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
<div className='right-menu active'> |
|
||||||
<button className='right-layer-btn' onClick={() => {}}></button> |
|
||||||
<div className='right-layer active' style={{ width: '567.58px' }}> |
|
||||||
{step === 1 && ( |
|
||||||
<FlightPlan |
|
||||||
handlerStep={handlerStep} |
|
||||||
data={detailData} |
|
||||||
handleChange={handleChange} |
|
||||||
handlerNext={handlerNext} |
|
||||||
handlerWeather={handlerWeather} |
|
||||||
/> |
|
||||||
)} |
|
||||||
|
|
||||||
{step === 2 && <Apply handlerStep={handlerStep} data={detailData} />} |
|
||||||
</div> |
|
||||||
<ErrorModal modal={modal2} setModal={setModal2} /> |
|
||||||
<Modal |
|
||||||
isOpen={formModal} |
|
||||||
toggle={handlerWeather} |
|
||||||
className='modal-dialog-centered' |
|
||||||
> |
|
||||||
<ModalHeader toggle={handlerWeather}>날씨 정보</ModalHeader> |
|
||||||
<ModalBody> |
|
||||||
<WeatherContainer mapAreaCoordList={wheather} /> |
|
||||||
</ModalBody> |
|
||||||
<ModalFooter> |
|
||||||
<Button color='primary' onClick={handlerWeather}> |
|
||||||
확인 |
|
||||||
</Button> |
|
||||||
</ModalFooter> |
|
||||||
</Modal> |
|
||||||
</div> |
|
||||||
</> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
export default LeftMenu; |
|
||||||
@ -1,16 +0,0 @@ |
|||||||
import { MapControl } from '../../components/map/MapControl'; |
|
||||||
import LeftMenu from './LeftMenu'; |
|
||||||
|
|
||||||
const LaancView = () => { |
|
||||||
return ( |
|
||||||
<div className='pal-container'> |
|
||||||
<div className='map'> |
|
||||||
<MapControl /> |
|
||||||
</div> |
|
||||||
|
|
||||||
<LeftMenu /> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default LaancView; |
|
||||||
Loading…
Reference in new issue