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