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