박상현
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