pav
/
pav-fe-tp-pal
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

laanc 상세보기 화면 변경

pull/2/head
박상현 11 months ago
parent
af9112e8c6
commit
77c34b9278
3 changed files with 299 additions and 43 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 269
      src/components/laanc/LaancDetail.js
  2. 10
      src/components/laanc/LaancGrid.js
  3. 63
      src/components/laanc/LaancStep2.js

269
src/components/laanc/LaancDetail.js
Unescape View File

@ -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>
</>
);
}

10
src/components/laanc/LaancGrid.js
Unescape View File

@ -13,6 +13,7 @@ import {
} from '../../modules/basis/flight/actions/basisFlightAction';
import { drawTypeChangeAction } from '../../modules/control/map/actions/controlMapActions';
import { HOST } from '../../configs/constants';
import LaancDetail from './LaancDetail';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
export default function LaancGrid() {
@ -21,7 +22,6 @@ export default function LaancGrid() {
const [isAnimation, setIsAnimation] = useState(false);
const { laancSearchData } = useSelector(state => state.laancState);
const { areaCoordList } = useSelector(state => state.flightState);
const { loading } = useSelector(state => state.loadingReducer);
const { laancDetail } = useSelector(state => state.laancState);
@ -33,10 +33,6 @@ export default function LaancGrid() {
}
}, [laancDetail]);
useEffect(() => {
if (areaCoordList && laancDetail) {
}
}, [areaCoordList]);
//상세보기
const handleDetail = planSno => {
dispatch(LaancAction.LAANC_DETAIL.request(planSno));
@ -47,6 +43,7 @@ export default function LaancGrid() {
dispatch(AREA_DETAIL_INIT());
setIsAnimation(false);
};
const columns = [
{
name: '비행계획서 일련 번호',
@ -229,9 +226,8 @@ export default function LaancGrid() {
fade={false}
backdrop={false}
>
<LaancStep2
<LaancDetail
data={laancDetail}
type={'detail'}
disabledAnimation={isAnimation}
setDisabledAnimation={setIsAnimation}
handlerLaancClose={handlerLaancClose}

63
src/components/laanc/LaancStep2.js
Unescape View File

@ -24,8 +24,7 @@ export default function LaancStep2({
handlerStep,
centeredModal,
setCenteredModal,
handlerLaancClose,
type
handlerLaancClose
}) {
const obj = {
fltType: {
@ -101,7 +100,6 @@ export default function LaancStep2({
if (flight) {
return (
<>
{' '}
<AlertCircle size={15} />
<span className='ms-1'>검토 결과 미 승인 대상입니다.</span>
<span className='cancel-txt'>
@ -145,7 +143,7 @@ export default function LaancStep2({
취소
</Button>
</ModalHeader>
<ModalBody style={{ paddingBottom: type === 'detail' ? '30px' : '90px' }}>
<ModalBody>
<div>
<div className='ti'>유효성 검사 정보</div>
<Row>
@ -355,11 +353,7 @@ export default function LaancStep2({
id='arcrftWghtCd'
name='arcrftWghtCd'
size='sm'
value={
type === 'detail'
? data.arcrftWght
: obj.arcrftWdth[data.arcrftList[0].arcrftWghtCd]
}
value={obj.arcrftWdth[data.arcrftList[0].arcrftWghtCd]}
placeholder=''
disabled
/>
@ -431,8 +425,7 @@ export default function LaancStep2({
className='terms-check'
id='exampleCustomCheckbox'
label='조종자 준수사항 미 준수 시 처벌에 동의합니다.'
checked={type === 'detail' ? true : isterms}
disabled={type === 'detail' ? true : false}
checked={isterms}
onChange={() => setIsterms(!isterms)}
/>
) : null}
@ -442,31 +435,29 @@ export default function LaancStep2({
</Row>
</div>
</ModalBody>
{type === 'detail' ? null : (
<ModalFooter>
<Button outline color='danger' onClick={() => handlerStep(1)}>
이전
</Button>
<ul className='step'>
<li>
<span></span>
</li>
<li>
<span className='on'></span>
</li>
<li>
<span></span>
</li>
</ul>
<Button
disabled={!isterms || laancIsCheck}
outline
onClick={() => handlerCreate()}
>
다음
</Button>
</ModalFooter>
)}
<ModalFooter>
<Button outline color='danger' onClick={() => handlerStep(1)}>
이전
</Button>
<ul className='step'>
<li>
<span></span>
</li>
<li>
<span className='on'></span>
</li>
<li>
<span></span>
</li>
</ul>
<Button
disabled={!isterms || laancIsCheck}
outline
onClick={() => handlerCreate()}
>
다음
</Button>
</ModalFooter>
</>
);
}

Write Preview
Loading…
Cancel
Save