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

비행 구역 설정 구성

pull/2/head
노승철 2 years ago
parent
9c305ea28f
commit
229a059006
8 changed files with 204 additions and 57 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. 99
      src/components/basis/flight/plan/FlightPlanAreaForm.js
  2. 28
      src/components/basis/flight/plan/FlightPlanAreaModal.js
  3. 54
      src/containers/basis/flight/plan/FlightPlanAreaContainer.js
  4. 26
      src/containers/basis/flight/plan/FlightPlanDetailContainer.js
  5. 16
      src/modules/basis/flight/actions/basisFlightAction.ts
  6. 12
      src/modules/basis/flight/models/basisFlightModel.ts
  7. 8
      src/modules/basis/flight/reducers/basisFlightReducer.ts
  8. 18
      src/modules/basis/flight/sagas/basisFlightSaga.ts

99
src/components/basis/flight/plan/FlightPlanAreaForm.js
Unescape View File

@ -1,20 +1,24 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import classnames from 'classnames';
import {
Card,
CardBody,
Col,
FormGroup,
FormFeedback,
Input,
Label,
Row,
Button
Button,
Form
} from 'reactstrap';
const FlightPlanAreaForm = () => {
const FlightPlanAreaForm = (props) => {
return (
<Card>
<CardBody>
<CardBody>
<div className='search-cont search-info pd-0'>
<div className='cont-ti mb-1 d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
<div>
@ -38,11 +42,21 @@ const FlightPlanAreaForm = () => {
</Label>
<Input
type='text'
id='ownerNm'
name='ownerNm'
id='address'
name='address'
size='sm'
placeholder=''
placeholder=''
innerRef={props.data}
readOnly
// className={classnames({
// 'is-invalid': props.errors.address
// })}
/>
{/* {props.errors && props.errors.address && (
<FormFeedback>
{props.errors.address.message}
</FormFeedback>
)} */}
</FormGroup>
</Col>
</Row>
@ -56,11 +70,21 @@ const FlightPlanAreaForm = () => {
</Label>
<Input
type='text'
id='ownerNm'
name='ownerNm'
id='coodinates'
name='coodinates'
size='sm'
placeholder=''
placeholder=''
readOnly
innerRef={props.data}
// className={classnames({
// 'is-invalid': props.errors.coodinates
// })}
/>
{/* {props.errors && props.errors.coodinates && (
<FormFeedback>
{props.errors.coodinates.message}
</FormFeedback>
)} */}
</FormGroup>
</Col>
</Row>
@ -70,15 +94,16 @@ const FlightPlanAreaForm = () => {
<Col className='list-input' lg={6} md={6} sm={12}>
<FormGroup>
<Label for='test'>
<span className='necessary'>*</span>반경(m)
<span className='necessary'></span>반경(m)
</Label>
<Input
type='text'
id='ownerNm'
name='ownerNm'
id='radius'
name='radius'
size='sm'
placeholder=''
/>
placeholder=''
innerRef={props.data}
/>
</FormGroup>
</Col>
</Row>
@ -89,33 +114,55 @@ const FlightPlanAreaForm = () => {
<FormGroup className='m_ft'>
<div className='m_ft_box'>
<Label for='test'>
<span className='necessary'>*</span>고도(m/ft)
<span className='necessary'></span>고도(m/ft)
</Label>
<Input
type='text'
id='ownerNm'
name='ownerNm'
id='altitude_m'
name='altitude_m'
size='sm'
placeholder='m'
placeholder='m'
innerRef={props.data}
/>
</div>
<div className='m_ft_box'>
<Input
type='text'
id='ownerNm'
name='ownerNm'
id='altitude'
name='altitude'
size='sm'
placeholder='ft'
placeholder='ft'
innerRef={props.data}
/>
</div>
</div>
</FormGroup>
</Col>
</Col>
</Row>
</div>
<Button.Ripple
className='mr-1'
color='primary'
size='sm'
onClick={
props.submit
}
>
확인
</Button.Ripple>
<Button.Ripple
className='mr-1'
color='danger'
size='sm'
onClick={() =>
props.setModal({ ...props.modal, isOpen: !props.modal.isOpen })
}
>
취소
</Button.Ripple>
</dt>
</dl>
</div>
</div>
</CardBody>
</Card>
)

28
src/components/modal/FormModal.js → src/components/basis/flight/plan/FlightPlanAreaModal.js
Unescape View File

@ -1,6 +1,11 @@
import { useState } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import FlightPlanAreaContainer from '../../../../containers/basis/flight/plan/FlightPlanAreaContainer';
export const FlightPlanAreaModal = props => {
const [onSubmit, setOnSubmit] = useState(false);
export const FormModal = props => {
return (
<div className='vertically-centered-modal'>
<Modal
@ -18,19 +23,26 @@ export const FormModal = props => {
{props.modal.title}
</ModalHeader>
<ModalBody>
{props.modal.contents}
<FlightPlanAreaContainer
modal={props.modal}
setModal={props.setModal}
onSubmit={onSubmit}
setOnSubmit={setOnSubmit}
/>
</ModalBody>
<ModalFooter>
{/* <ModalFooter>
<Button
type="submit"
color='primary'
onClick={() =>
props.setModal({ ...props.modal, isOpen: !props.modal.isOpen })
}
// onClick={() =>
// // props.setModal({ ...props.modal, isOpen: !props.modal.isOpen })
// setOnSubmit(true)
// }
outline
>
확인
저장
</Button>
</ModalFooter>
</ModalFooter> */}
</Modal>
</div>
);

54
src/containers/basis/flight/plan/FlightPlanAreaContainer.js
Unescape View File

@ -1,29 +1,59 @@
import React, { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import {useHistory} from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import FlightPlanAreaForm from '../../../../components/basis/flight/plan/FlightPlanAreaForm';
import { Button, Col, Row } from 'reactstrap';
import {Col, Row, Form } from 'reactstrap';
import * as Actions from '../../../../modules/basis/flight/actions/basisFlightAction';
import FlightPlanAreaMap from '../../../../components/basis/flight/plan/FlightPlanAreaMap';
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
const FlightPlanAreaContainer = () => {
const FlightPlanAreaContainer = (props) => {
const dispatch = useDispatch();
const history = useHistory();
const { areaList } = useSelector(state => state.flightState);
const [airArea, setAirArea] = useState(null);
const validSchema = yup.object().shape({
// address: yup.string().trim().required('주소가 올바르지 않습니다.'),
// coodinates: yup.string().trim().required('좌표가 올바르지 않습니다.'),
// radius: yup.string().trim().required('반경을 입력해 주세요.'),
// altitude_m: yup.string().trim().required('고도(m)를 입력해 주세요.'),
// altitude_ft: yup.string().trim().required('고도(ft)를 입력해 주세요.'),
});
const { register, getValues, setValue, errors, handleSubmit } = useForm({
defaultValues: {
address: '',
coodinates: '',
radius: '',
altitude_m: '',
altitude_ft: '',
},
resolver: yupResolver(validSchema)
});
const getAriAreaList = () => {
const getAirAreaList = () => {
dispatch(Actions.AREA_LIST.request());
}
const createAirArea = async data => {
dispatch(Actions.FLIGHT_PLAN_AREA.request(data));
props.setModal({ ...props.modal, isOpen: !props.modal.isOpen });
props.setOnSubmit(false);
}
useEffect(() => {
getAriAreaList();
getAirAreaList();
}, []);
useEffect(() => {
setAirArea(areaList);
}, [areaList])
}, [areaList])
return (
<Row>
@ -34,8 +64,14 @@ const FlightPlanAreaContainer = () => {
/>
) : null}
</Col>
<Col md={6} lg={6}>
<FlightPlanAreaForm />
<Col md={6} lg={6}>
<FlightPlanAreaForm
modal={props.modal}
setModal={props.setModal}
data={register}
errors={errors}
submit={handleSubmit(createAirArea)}
/>
</Col>
</Row>

26
src/containers/basis/flight/plan/FlightPlanDetailContainer.js
Unescape View File

@ -1,18 +1,21 @@
import React, {useState} from 'react';
import React, {useEffect, useState} from 'react';
import FlightPlanForm from '../../../../components/basis/flight/plan/FlightPlanForm';
import { CustomDetailLayout } from '../../../../components/layout/CustomDetailLayout';
import { FormModal } from '../../../../components/modal/FormModal';
import { FlightPlanAreaModal } from '../../../../components/basis/flight/plan/FlightPlanAreaModal';
import FlightPlanAreaContainer from './FlightPlanAreaContainer';
import { useSelector } from 'react-redux';
const FlightPlanDetailContainer = () => {
const dispatch = useDispatch();
const history = useHistory();
const { flightPlanArea } = useSelector(state => state.flightState);
const [modal, setModal] = useState({
isOpen: false,
title: '',
contents: '',
title: '',
});
const saveFlightPlanArea = () => {
console.log('비행 구역 설정 저장');
@ -21,20 +24,23 @@ const FlightPlanDetailContainer = () => {
const openModal = () => {
setModal({
isOpen: true,
title: '비행 구역 설정',
contents: <FlightPlanAreaContainer />
title: '비행 구역 설정',
});
}
useEffect(() => {
}, [flightPlanArea]);
return (
<CustomDetailLayout title={"비행 계획 신청서"}>
<FlightPlanForm
openModal={openModal}
/>
<FormModal
<FlightPlanAreaModal
modal={modal}
save={saveFlightPlanArea}
setModal={setModal}
setModal={setModal}
/>
</CustomDetailLayout>
)

16
src/modules/basis/flight/actions/basisFlightAction.ts
Unescape View File

@ -1,6 +1,6 @@
import { AxiosError } from 'axios';
import { createAsyncAction, ActionType} from 'typesafe-actions';
import { FlightAreaData } from '../models/basisFlightModel';
import { FlightAreaData, FlightPlanArea } from '../models/basisFlightModel';
// 공역 조회
@ -8,14 +8,26 @@ const AREA_LIST_REQUEST = 'basis/flight/area/LIST_REQUEST';
const AREA_LIST_SUCCESS = 'basis/flight/area/LIST_SUCCESS';
const AREA_LIST_FAILURE = 'basis/flight/area/LIST_FAILURE';
// 비행 구역 설정
const FLIGHT_PLAN_AREA_REQUEST = 'basis/flight/plan/area/LIST_REQUEST';
const FLIGHT_PLAN_AREA_SUCCESS = 'basis/flight/plan/area/LIST_SUCCESS';
const FLIGHT_PLAN_AREA_FAILURE = 'basis/flight/plan/area/LIST_FAILURE';
export const AREA_LIST = createAsyncAction(
AREA_LIST_REQUEST,
AREA_LIST_SUCCESS,
AREA_LIST_FAILURE
)<FlightAreaData, { data: FlightAreaData }, AxiosError>();
export const FLIGHT_PLAN_AREA = createAsyncAction(
FLIGHT_PLAN_AREA_REQUEST,
FLIGHT_PLAN_AREA_SUCCESS,
FLIGHT_PLAN_AREA_FAILURE
)<FlightPlanArea, { data: FlightPlanArea }, AxiosError>();
const actions = {
AREA_LIST
AREA_LIST,
FLIGHT_PLAN_AREA
};
export type FlightAction = ActionType<typeof actions>;

12
src/modules/basis/flight/models/basisFlightModel.ts
Unescape View File

@ -1,11 +1,21 @@
export interface FlightState {
areaList: FlightAreaData | undefined
flightPlanArea: FlightPlanArea | undefined
}
export interface FlightAreaData {
areaList: []
}
export interface FlightPlanArea {
address : '',
coordinates : '',
redius : '',
altitude_m : '',
altitude_ft : '',
}
export const initFlight = {
areaList: undefined
areaList: undefined,
flightPlanArea: undefined
};

8
src/modules/basis/flight/reducers/basisFlightReducer.ts
Unescape View File

@ -12,4 +12,10 @@ export const flightReducer = createReducer<FlightState, Actions.FlightAction> (
const {data} = action.payload;
draft.areaList = data;
})
) ;
)
.handleAction(Actions.FLIGHT_PLAN_AREA.request, (state, action) =>
produce(state, draft => {
const data = action.payload;
draft.flightPlanArea = data;
})
)

18
src/modules/basis/flight/sagas/basisFlightSaga.ts
Unescape View File

@ -38,6 +38,24 @@ function* listAreaSaga(action: ActionType<typeof Actions.AREA_LIST.request>) {
}
}
function* createFlightPlanArea(action: ActionType<typeof Actions.FLIGHT_PLAN_AREA.request>) {
try {
const data = action.payload;
yield put(
Actions.FLIGHT_PLAN_AREA.success({
data: data
})
)
} catch (error: any) {
yield put(
Actions.FLIGHT_PLAN_AREA.failure(error)
)
}
}
export function* flightSaga() {
yield takeEvery(Actions.AREA_LIST.request, listAreaSaga);
yield takeEvery(Actions.FLIGHT_PLAN_AREA.request, createFlightPlanArea);
}
Write Preview
Loading…
Cancel
Save