11 changed files with 1489 additions and 892 deletions
@ -1,172 +1,228 @@
|
||||
import React, {useEffect, useState} from 'react'; |
||||
import FlightPlanForm from '../../../../components/basis/flight/plan/FlightPlanForm'; |
||||
import {CustomDetailLayout} from '../../../../components/layout/CustomDetailLayout'; |
||||
import {FlightPlanAreaModal} from '../../../../components/basis/flight/plan/FlightPlanAreaModal'; |
||||
import FlightPlanAreaContainer from './FlightPlanAreaContainer'; |
||||
import {useHistory} from 'react-router-dom'; |
||||
import {useHistory, useLocation, useParams} from 'react-router-dom'; |
||||
import {useDispatch, useSelector} from 'react-redux'; |
||||
import * as yup from 'yup'; |
||||
import {yupResolver} from '@hookform/resolvers/yup'; |
||||
import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction'; |
||||
import {useForm} from 'react-hook-form'; |
||||
import moment from 'moment'; |
||||
import {Save} from 'react-feather'; |
||||
import {initFlightBas} from '../../../../modules/basis/flight/models/basisFlightModel'; |
||||
|
||||
const initFlightPlanData = { |
||||
id: '', |
||||
memberName: '', |
||||
clncd: '+82', |
||||
hpno: '', |
||||
email: '', |
||||
lonlat: '', |
||||
lonlat2: '', |
||||
lonlat3: '', |
||||
fltElev: '', |
||||
fltHight: '', |
||||
fltMethod: '', |
||||
groupNm: '', |
||||
pilotName: '', |
||||
pilotHpno: '', |
||||
pilotEmail: '', |
||||
aGroupNm: '', |
||||
arcrftModelNm: '', |
||||
arcrftTypeCd: '', |
||||
ownerNm: '', |
||||
createUserId: '', |
||||
updateUserId: '' |
||||
|
||||
const initModal = { |
||||
area: false, |
||||
pilot: false, |
||||
arcrft: false |
||||
} |
||||
|
||||
const FlightPlanDetailContainer = props => { |
||||
const FlightPlanDetailContainer = () => { |
||||
const dispatch = useDispatch(); |
||||
const history = useHistory(); |
||||
const [pageType, setPageType] = useState('create'); |
||||
const {flightPlanArea} = useSelector(state => state.flightState); |
||||
const [areaInfo, setAreaInfo] = useState(); |
||||
const [modal, setModal] = useState({ |
||||
isOpen: false, |
||||
title: '', |
||||
}); |
||||
|
||||
const {listFlightP, flightCount, isRefreshFlight} = useSelector( |
||||
state => state.flightState |
||||
); |
||||
const [flightPlanData, setFlightPlanData] = useState(initFlightPlanData); |
||||
const location = useLocation(); |
||||
const urlParams = useParams(); |
||||
const flightState = useSelector(state => state.flightState); |
||||
const {detail} = flightState; |
||||
const [modal, setModal] = useState(initModal); |
||||
const [detailData, setDetailData] = useState(initFlightBas.initDetail); |
||||
|
||||
const [params, setParams] = useState({ |
||||
schFltStDt: moment().subtract(1, 'day').format('YYYY-MM-DD'), |
||||
schFltEndDt: moment().subtract(-1, 'day').format('YYYY-MM-DD'), |
||||
search1: '' |
||||
}); |
||||
useEffect(() => { |
||||
if (Object.keys(urlParams).length === 0 && urlParams.constructor === Object) return; |
||||
dispatch(Actions.FLIGHT_PLAN_DETAIL.request(urlParams.planSno)); |
||||
}, [urlParams]) |
||||
|
||||
useEffect(() => { |
||||
console.log('isRefreshFlight>>>>', isRefreshFlight); |
||||
if (isRefreshFlight) { |
||||
console.log(isRefreshFlight); |
||||
handlerSearch(); |
||||
setDetailData(detail); |
||||
}, [detail]) |
||||
|
||||
const handleModal = (modal) => { |
||||
setModal(prevState => ({ |
||||
...initModal, |
||||
[modal.target]: modal.isOpen |
||||
})) |
||||
} |
||||
}, [isRefreshFlight]); |
||||
|
||||
const [flightPlanDataList, setFlightPlanDataList] = useState([]); |
||||
|
||||
/* Form Validation Checking */ |
||||
const validSchema = yup.object().shape({}); |
||||
const {} = useForm({ |
||||
defaultValues: { |
||||
coodinates: [], |
||||
radius: '', |
||||
altitude_m: '', |
||||
altitude_ft: '', |
||||
}, |
||||
resolver: yupResolver(validSchema) |
||||
// 변경감지
|
||||
const handleChange = ({name, value, type, index, pIndex}) => { |
||||
const arrName = `${type}List`; |
||||
switch (type) { |
||||
case 'coord': |
||||
// TODO 추후 삭제 필요 start
|
||||
if(name == 'lonlat'){ |
||||
const values = value.split("/"); |
||||
let latValue = 1 |
||||
let lonValue = 1 |
||||
if(values.length == 1){ |
||||
latValue = values[0].trim(); |
||||
} else if(values.length == 2){ |
||||
latValue = values[0].trim(); |
||||
lonValue = values[1].trim(); |
||||
} else { |
||||
return; |
||||
} |
||||
setDetailData(prevState => { |
||||
const areaList = prevState.areaList.map((area, i) => { |
||||
if(i !== pIndex) return {...area}; |
||||
|
||||
const coordList = area.coordList.map((coord, j) => { |
||||
if(j !== index) return {...coord}; |
||||
return { |
||||
...coord, |
||||
lat: latValue, |
||||
lon: lonValue |
||||
} |
||||
}) |
||||
|
||||
const saveFlightPlanArea = () => { |
||||
console.log('비행 구역 설정 저장'); |
||||
return { |
||||
...area, |
||||
coordList |
||||
} |
||||
useEffect(() => { |
||||
if (props.id) { |
||||
handlerSearch(); |
||||
setPageType('update'); |
||||
}) |
||||
return { |
||||
...prevState, |
||||
areaList |
||||
} |
||||
// console.log(selectData);
|
||||
}, []); |
||||
|
||||
useEffect(() => { |
||||
let newArr = []; |
||||
|
||||
listFlightP?.map(item => { |
||||
newArr.push({...item}); |
||||
}); |
||||
setFlightPlanDataList(listFlightP); |
||||
}, [listFlightP]); |
||||
|
||||
const openModal = () => { |
||||
setModal({ |
||||
isOpen: true, |
||||
title: '비행 구역 설정', |
||||
}); |
||||
}) |
||||
return; |
||||
} |
||||
|
||||
const handlerCreate = e => { |
||||
// console.log('flightPlanData>>>', {flightPlanData, params});
|
||||
// let saveData = {flightPlanData, params};
|
||||
const saveData = {...flightPlanData}; |
||||
dispatch( |
||||
Actions.FLIGHT_PLAN_CREATE.request(saveData) |
||||
); |
||||
}; |
||||
|
||||
// const handlerInput = (val) => {
|
||||
// console.log('handler input : ', val)
|
||||
// console.log('handler input : ', val[1])
|
||||
// console.log('handler input : ', val[0])
|
||||
// setParams({
|
||||
// ...params,
|
||||
// schFltStDt: moment(val[1]).format('YYYY-MM-DD'),
|
||||
// schFltEndDt: moment(val[0]).format('YYYY-MM-DD')
|
||||
// });
|
||||
// };
|
||||
// console.log('params >>>>> ', params)
|
||||
const onChange = (e) => { |
||||
const {name, value} = e.target; |
||||
setFlightPlanData((prevState) => ({ |
||||
// TODO 추후 삭제 필요 end
|
||||
|
||||
setDetailData(prevState => { |
||||
const areaArr = [...prevState.areaList]; |
||||
const coordArr = areaArr[pIndex].coordList; |
||||
const updateData = { |
||||
...coordArr[index], |
||||
[name]: value |
||||
} |
||||
coordArr[index] = updateData; |
||||
areaArr[pIndex] = coordArr |
||||
return { |
||||
...prevState, |
||||
[name]: value, |
||||
})); |
||||
}; |
||||
areaList: areaArr |
||||
} |
||||
}) |
||||
break; |
||||
case 'area': |
||||
case 'pilot': |
||||
case 'arcrft': |
||||
setDetailData(prevState => { |
||||
const arr = [...prevState[arrName]]; |
||||
const updateData = { |
||||
...prevState[arrName][index], |
||||
[name]: value |
||||
} |
||||
arr[index] = updateData; |
||||
return { |
||||
...prevState, |
||||
[arrName]: arr |
||||
} |
||||
}) |
||||
break; |
||||
case 'plan': |
||||
default: |
||||
setDetailData(prevState => ({ |
||||
...prevState, |
||||
[name]: value |
||||
})) |
||||
break; |
||||
} |
||||
} |
||||
|
||||
console.log('===> ', flightPlanData); |
||||
// 추가
|
||||
const handleAddArray = ({type, pIndex}) => { |
||||
const arrName = `${type}List`; |
||||
switch (type) { |
||||
case 'coord': |
||||
setDetailData(prevState => { |
||||
const areaArr = [...prevState.areaList]; |
||||
const coordArr = [...areaArr[pIndex].coordList, initFlightBas[type]]; |
||||
areaArr[pIndex] = coordArr; |
||||
return { |
||||
...prevState, |
||||
areaList: [...areaArr] |
||||
} |
||||
}) |
||||
break; |
||||
case 'area': |
||||
case 'pilot': |
||||
case 'arcrft': |
||||
setDetailData(prevState => { |
||||
return { |
||||
...prevState, |
||||
[arrName]: [...prevState[arrName], initFlightBas[type]] |
||||
} |
||||
}) |
||||
break; |
||||
default: |
||||
break; |
||||
} |
||||
} |
||||
// 삭제
|
||||
const handleDeleteArray = ({type, index, pIndex}) => { |
||||
const arrName = `${type}List`; |
||||
switch (type) { |
||||
case 'coord': |
||||
setDetailData(prevState => { |
||||
const areaArr = [...prevState.areaList]; |
||||
const coordArr = [...areaArr[pIndex]]; |
||||
const deleteData = coordArr.splice(index, 1); |
||||
areaArr[pIndex] = coordArr; |
||||
return { |
||||
...prevState, |
||||
areaList: [...areaArr] |
||||
} |
||||
}) |
||||
break; |
||||
case 'area': |
||||
case 'pilot': |
||||
case 'arcrft': |
||||
setDetailData(prevState => { |
||||
const arr = [...prevState[type]]; |
||||
const deleteData = arr.splice(index, 1); |
||||
return { |
||||
...prevState, |
||||
[arrName]: arr |
||||
} |
||||
}) |
||||
default: |
||||
break; |
||||
} |
||||
} |
||||
|
||||
const handlerDelete = async data => { |
||||
// dispatch(Actions.IDNTF_DELETE.request(data.arcrftSno));
|
||||
}; |
||||
|
||||
useEffect(() => { |
||||
setAreaInfo(flightPlanArea); |
||||
}, [flightPlanArea]); |
||||
// 저장
|
||||
const handleSave = () => { |
||||
if (!detailData.planSno) { |
||||
dispatch(Actions.FLIGHT_PLAN_CREATE.request(detailData)); |
||||
} else { |
||||
dispatch(Actions.FLIGHT_PLAN_UPDATE.request(detailData)); |
||||
} |
||||
} |
||||
// 삭제
|
||||
const handleDelete = () => { |
||||
dispatch(Actions.FLIGHT_PLAN_DELETE.request(urlParams.planSno)); |
||||
} |
||||
|
||||
return ( |
||||
<CustomDetailLayout title={"비행 계획 신청서"}> |
||||
<FlightPlanForm |
||||
data={flightPlanData} |
||||
openModal={openModal} |
||||
areaInfo={areaInfo} |
||||
params={params} |
||||
handlerSave={ |
||||
pageType === 'create' ? handlerCreate : handlerUpdate |
||||
} |
||||
onChange={onChange} |
||||
handlerDelete={handlerDelete} |
||||
data={detailData} |
||||
handleModal={handleModal} |
||||
handleSave={handleSave} |
||||
handleDelete={handleDelete} |
||||
handleChange={handleChange} |
||||
handleAddArray={handleAddArray} |
||||
handleDeleteArray={handleDeleteArray} |
||||
// handlerSave={
|
||||
// pageType === 'create' ? handlerCreate : handlerUpdate
|
||||
// }
|
||||
// onChange={onChange}
|
||||
// handlerDelete={handlerDelete}
|
||||
// handlerInput={handlerInput}
|
||||
/> |
||||
<FlightPlanAreaModal |
||||
modal={modal} |
||||
save={saveFlightPlanArea} |
||||
setModal={setModal} |
||||
/> |
||||
{/*<FlightPlanAreaModal*/} |
||||
{/* modal={modal}*/} |
||||
{/* save={saveFlightPlanArea}*/} |
||||
{/* setModal={setModal}*/} |
||||
{/*/>*/} |
||||
</CustomDetailLayout> |
||||
) |
||||
|
||||
} |
||||
}; |
||||
|
||||
export default FlightPlanDetailContainer; |
||||
|
||||
Loading…
Reference in new issue