박상현
11 months ago
3 changed files with 299 additions and 43 deletions
@ -0,0 +1,269 @@ |
|||||||
|
import React, { useEffect, useState } from 'react'; |
||||||
|
import { useDispatch, useSelector } from 'react-redux'; |
||||||
|
import { |
||||||
|
Row, |
||||||
|
Col, |
||||||
|
Button, |
||||||
|
ModalHeader, |
||||||
|
ModalBody, |
||||||
|
ModalFooter, |
||||||
|
Alert, |
||||||
|
FormGroup, |
||||||
|
Label, |
||||||
|
Input |
||||||
|
} from 'reactstrap'; |
||||||
|
import FlightArea from './FlightArea'; |
||||||
|
import * as TermsActions from '../../modules/account/register/actions/accountAction'; |
||||||
|
|
||||||
|
export default function LaancDetail({ data, handlerLaancClose }) { |
||||||
|
const dispatch = useDispatch(); |
||||||
|
|
||||||
|
const obj = { |
||||||
|
fltType: { |
||||||
|
COMMERCIAL: '사업', |
||||||
|
NON_COMMERCIAL: '비사업' |
||||||
|
}, |
||||||
|
arcrftWdth: { |
||||||
|
7: '최대이륙중량 250g 이하', |
||||||
|
8: '250g초과 ~ 2kg 이하', |
||||||
|
9: '2kg초과~7kg이하', |
||||||
|
10: '7kg초과~25kg이하', |
||||||
|
11: '25kg초과' |
||||||
|
} |
||||||
|
}; |
||||||
|
const { user } = useSelector(state => state.authState); |
||||||
|
const { termsList } = useSelector(state => state.accountState); |
||||||
|
useEffect(() => { |
||||||
|
dispatch( |
||||||
|
TermsActions.termsList.request({ |
||||||
|
langDivCd: 'KOR', |
||||||
|
siteCd: 'SANDBOX', |
||||||
|
termsCtgryCd: 'AGREE_LAANC' |
||||||
|
}) |
||||||
|
); |
||||||
|
}, []); |
||||||
|
|
||||||
|
// 소수점 6자리에서 반올림 하는 함수
|
||||||
|
const truncateToSixDecimalPlaces = number => { |
||||||
|
const decimalPlaces = 6; |
||||||
|
const multiplier = Math.pow(10, decimalPlaces); |
||||||
|
return Math.round(number * multiplier) / multiplier; |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<ModalHeader>LAANC 승인 요청</ModalHeader> |
||||||
|
<ModalBody> |
||||||
|
<div className='mb-1'> |
||||||
|
<div className='ti'>비행 구역</div> |
||||||
|
<div className='laanc-map-sm'> |
||||||
|
<div className='vertically-centered-modal'> |
||||||
|
<FlightArea page={2} /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<div className='ti'>비행 승인 상세정보</div> |
||||||
|
<Row> |
||||||
|
<Col className='list-input' md='6' sm='12'> |
||||||
|
<FormGroup> |
||||||
|
<div className='ti'>조종자 정보</div> |
||||||
|
<Label for='test'> |
||||||
|
<span className='necessary'>*</span>성명 |
||||||
|
</Label> |
||||||
|
<Input |
||||||
|
type='text' |
||||||
|
id='memberName' |
||||||
|
name='memberName' |
||||||
|
size='sm' |
||||||
|
placeholder='' |
||||||
|
value={user.memberName} |
||||||
|
disabled |
||||||
|
/> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col className='list-input' md='6' sm='12'> |
||||||
|
<FormGroup> |
||||||
|
<div className='ti'>비행 유형</div> |
||||||
|
<Label for='test'> |
||||||
|
<span className='necessary'>*</span>승인 유형 |
||||||
|
</Label> |
||||||
|
<Input |
||||||
|
type='text' |
||||||
|
name='fltType' |
||||||
|
value={obj.fltType[data.fltType]} |
||||||
|
size='sm' |
||||||
|
id='fltType' |
||||||
|
disabled |
||||||
|
/> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col className='list-input' md='12'> |
||||||
|
<div className='ti'>비행 계획 정보</div> |
||||||
|
<Row> |
||||||
|
<Col className='list-input' md='6'> |
||||||
|
<FormGroup> |
||||||
|
<Label for='test'> |
||||||
|
<span className='necessary'>*</span>비행 시작 일시 |
||||||
|
</Label> |
||||||
|
<Input |
||||||
|
type='text' |
||||||
|
id='schFltStDt' |
||||||
|
name='schFltStDt' |
||||||
|
bsSize='sm' |
||||||
|
value={data.schFltStDt.slice(0, 16)} |
||||||
|
placeholder='' |
||||||
|
disabled |
||||||
|
/> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col className='list-input' md='6'> |
||||||
|
<FormGroup> |
||||||
|
<Label for='test'> |
||||||
|
<span className='necessary'>*</span>비행 종료 일시 |
||||||
|
</Label> |
||||||
|
<Input |
||||||
|
type='text' |
||||||
|
id='schFltEndDt' |
||||||
|
name='schFltEndDt' |
||||||
|
bsSize='sm' |
||||||
|
value={data.schFltEndDt.slice(0, 16)} |
||||||
|
placeholder='' |
||||||
|
disabled |
||||||
|
/> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Col> |
||||||
|
|
||||||
|
<Col className='list-input' md='12'> |
||||||
|
<div className='ti'>기체 정보</div> |
||||||
|
<Row> |
||||||
|
<Col className='list-input' md='6'> |
||||||
|
<FormGroup> |
||||||
|
<Label for='test'> |
||||||
|
<span className='necessary'>*</span>기체 중량 |
||||||
|
</Label> |
||||||
|
<Input |
||||||
|
type='text' |
||||||
|
id='arcrftWghtCd' |
||||||
|
name='arcrftWghtCd' |
||||||
|
size='sm' |
||||||
|
value={data.arcrftWght} |
||||||
|
placeholder='' |
||||||
|
disabled |
||||||
|
/> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col className='list-input' md='6'> |
||||||
|
<FormGroup> |
||||||
|
<Label for='test'> |
||||||
|
<span className='necessary'>*</span>기체 번호 |
||||||
|
</Label> |
||||||
|
<Input |
||||||
|
type='text' |
||||||
|
id='idntfNum' |
||||||
|
name='idntfNum' |
||||||
|
size='sm' |
||||||
|
value={ |
||||||
|
data.arcrftList[0].idntfNum |
||||||
|
? data.arcrftList[0].idntfNum |
||||||
|
: '-' |
||||||
|
} |
||||||
|
placeholder='' |
||||||
|
disabled |
||||||
|
/> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Col> |
||||||
|
<Col className='list-input' md='12'> |
||||||
|
<div className='ti'>비행 구역 정보</div> |
||||||
|
<Row> |
||||||
|
<Col className='list-input' md='6'> |
||||||
|
<FormGroup> |
||||||
|
<Label for='test'> |
||||||
|
<span className='necessary'>*</span>위도/경도 |
||||||
|
</Label> |
||||||
|
{data.areaList[0].coordList.map((coord, index) => { |
||||||
|
return index % 2 === 0 ? ( |
||||||
|
<Input |
||||||
|
key={index} |
||||||
|
type='text' |
||||||
|
id='test' |
||||||
|
size='sm' |
||||||
|
value={`${truncateToSixDecimalPlaces( |
||||||
|
`${coord.lat}` |
||||||
|
)} / ${truncateToSixDecimalPlaces(`${coord.lon}`)}`}
|
||||||
|
placeholder='' |
||||||
|
disabled |
||||||
|
/> |
||||||
|
) : null; |
||||||
|
})} |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col className='list-input' md='6'> |
||||||
|
<FormGroup> |
||||||
|
<Label for='test'> |
||||||
|
<span className='necessary'></span> |
||||||
|
</Label> |
||||||
|
{data.areaList[0].coordList.map((coord, index) => { |
||||||
|
return index % 2 != 0 ? ( |
||||||
|
<Input |
||||||
|
type='text' |
||||||
|
id='test' |
||||||
|
size='sm' |
||||||
|
key={index} |
||||||
|
value={`${truncateToSixDecimalPlaces( |
||||||
|
`${coord.lat}` |
||||||
|
)} / ${truncateToSixDecimalPlaces(`${coord.lon}`)}`}
|
||||||
|
placeholder='' |
||||||
|
disabled |
||||||
|
/> |
||||||
|
) : null; |
||||||
|
})} |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
<Row> |
||||||
|
<Col className='list-input' md='6'> |
||||||
|
<FormGroup> |
||||||
|
<Label for='test'> |
||||||
|
<span className='necessary'>*</span>고도 |
||||||
|
</Label> |
||||||
|
<Input |
||||||
|
type='text' |
||||||
|
id='fltElev' |
||||||
|
name='fltElev' |
||||||
|
// defaultValue={data.email || ''}
|
||||||
|
value={data.areaList[0].fltElev + 'm'} |
||||||
|
size='sm' |
||||||
|
disabled |
||||||
|
placeholder='100m' |
||||||
|
/> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col className='list-input' md='12'> |
||||||
|
{termsList ? ( |
||||||
|
<> |
||||||
|
<div className='ti'>{termsList[0]?.termsTitleNm}</div> |
||||||
|
<div |
||||||
|
className='terms-box' |
||||||
|
dangerouslySetInnerHTML={{ __html: termsList[0]?.termsCn }} |
||||||
|
></div> |
||||||
|
</> |
||||||
|
) : null} |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</div> |
||||||
|
</ModalBody> |
||||||
|
<ModalFooter style={{ justifyContent: 'right' }}> |
||||||
|
<Button outline onClick={() => handlerLaancClose()}> |
||||||
|
확인 |
||||||
|
</Button> |
||||||
|
</ModalFooter> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
Loading…
Reference in new issue