pav
/
pav-fe-kac
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

laanc 비행구역 설정 props 정리

master
junh_eee(이준희) 7 months ago
parent
89d3dfc3ad
commit
f6d18fa2bb
8 changed files with 116 additions and 93 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. 25
      src/components/laanc/map/LaancMap.js
  2. 14
      src/components/laanc/map/LaancMapDetail.js
  3. 45
      src/components/laanc/map/LaancMapDraw.js
  4. 72
      src/components/laanc/map/LaancMapModal.js
  5. 5
      src/components/laanc/step/LaancStep1.js
  6. 34
      src/redux/features/laanc/laancSlice.ts
  7. 5
      src/redux/features/laanc/laancState.ts
  8. 9
      src/utility/MapUtils.js

25
src/components/laanc/map/LaancMap.js
Unescape View File

@ -12,6 +12,8 @@ import {
SimpleSelectMode
} from 'mapbox-gl-draw-circle';
import { MAPBOX_TOKEN } from '../../../configs/constants';
import threebox from 'threebox-plugin';
// mapUtils
import {
InitFeature,
handlerCreatePoint,
@ -23,33 +25,31 @@ import {
layerWayPoint,
handlerCreateAirSpace
} from '../../../utility/MapUtils';
// redux
import { clientMapInit } from '@src/redux/features/control/map/mapSlice';
import { clientSetIsMapLoading } from '@src/redux/features/laanc/laancSlice';
// geojson
import gimpo from '../../map/geojson/gimpoAirportAirArea.json';
import threebox from 'threebox-plugin';
// components
import LaancMapModal from './LaancMapModal';
const FeatureAirZone = lazy(() =>
import('../../map/mapbox/feature/FeatureAirZone')
);
export default function LaancMap({ page, handleChange, data }) {
const dispatch = useDispatch();
// 공역 타입
const mapState = useSelector(state => state.mapState);
// 비행구역 정보 저장
const { areaCoordList, isOpenModal } = useSelector(state => state.laancState);
// 비행구역 정보, 비행 구역 설정 모달 오픈 여부, 지도 로딩 여부
const { areaCoordList, isOpenModal, isMapLoading } = useSelector(
state => state.laancState
);
// 지도
const [mapObject, setMapObject] = useState();
const mapContainer = useRef(null);
// 지도 로드 여부
const [isMapLoad, setIsMapLoad] = useState(false);
// 비행구역 그리기
const [drawObj, setDrawObj] = useState();
@ -241,7 +241,7 @@ export default function LaancMap({ page, handleChange, data }) {
map.addLayer(layerBuffer('preview'));
map.addLayer(layerWayPoint('preview'));
setIsMapLoad(true);
dispatch(clientSetIsMapLoading(true));
const preview = map.getSource('preview');
if (preview) setPreviewLayer(preview);
@ -357,7 +357,7 @@ export default function LaancMap({ page, handleChange, data }) {
ref={mapContainer}
style={{ width: '100%', height: '35vh' }}
></div>
{isMapLoad && mapObject ? (
{isMapLoading && mapObject ? (
<Suspense fallback=''>
<FeatureAirZone map={mapObject} mapboxgl={mapboxgl} />
</Suspense>
@ -369,7 +369,6 @@ export default function LaancMap({ page, handleChange, data }) {
drawObj={drawObj}
mapContainer={mapContainer}
weather={weather}
areaCoordList={areaCoordList}
/>
</Suspense>
) : null}

14
src/components/laanc/map/LaancMapDetail.js
Unescape View File

@ -27,15 +27,13 @@ const FeatureAirZone = lazy(() =>
);
const LaancMapDraw = lazy(() => import('./LaancMapDraw'));
export default function LaancMapDetail({
mapContainer,
drawObj,
handlerSaveCheck,
handlerAddChange,
addData,
handlerInitCoordinates,
mapContainer,
setSaveData,
setModal,
handlerSaveElev,
setModal
handlerCheckSavable,
handlerInitCoordinates
}) {
const dispatch = useDispatch();
@ -402,7 +400,6 @@ export default function LaancMapDetail({
<>
<Suspense fallback=''>
<LaancMapDraw
addData={addData}
drawObj={drawObj}
setModal={setModal}
mapObject={mapObject}
@ -411,8 +408,7 @@ export default function LaancMapDetail({
setViewCoordObj={setViewCoordObj}
handlerConfirm={handlerConfirm}
handlerSaveElev={handlerSaveElev}
handlerAddChange={handlerAddChange}
handlerSaveCheck={handlerSaveCheck}
handlerCheckSavable={handlerCheckSavable}
handlerCoordinates={handlerCoordinates}
handlerInitCoordinates={handlerInitCoordinates}
handlerAreaInfoToAreaList={handlerAreaInfoToAreaList}

45
src/components/laanc/map/LaancMapDraw.js
Unescape View File

@ -2,6 +2,7 @@ import { useEffect, useRef, useState, lazy, Suspense } from 'react';
import { useDispatch, useSelector } from '@src/redux/store';
import {
CalculateDistance,
getDrawFeatures,
handlerCreateGroupMarker,
handlerCreateOneMarker,
handlerGetMidPoint,
@ -9,7 +10,12 @@ import {
handlerRemoveGroupMarker,
handlerReturnMode
} from '../../../utility/MapUtils';
import { clientChangeDrawType } from '@src/redux/features/laanc/laancSlice';
import {
clientChangeDrawType,
clientInitAddButton,
clientIsOverAdd,
clientIsViewAdd
} from '@src/redux/features/laanc/laancSlice';
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import {
CircleMode,
@ -31,7 +37,7 @@ export default function LaancDrawControl(props) {
const mapObject = props.mapObject;
// 비행구역 타입
const { drawType } = useSelector(state => state.laancState);
const { drawType, isClickAdd } = useSelector(state => state.laancState);
// mapbox 기본 onClick 함수 저장
const originClickRef = useRef(null);
@ -49,9 +55,7 @@ export default function LaancDrawControl(props) {
useEffect(() => {
if (drawType === 'DONE') {
if (number !== 0) {
const obj = drawObj
.getAll()
.features.filter(o => o.properties.id !== 'BUFFER');
const obj = getDrawFeatures(drawObj);
// 구역 생성 후 바로 directMode
if (obj.length > 0) {
@ -379,7 +383,7 @@ export default function LaancDrawControl(props) {
handlerRemoveError(id);
return;
} else {
props.handlerSaveCheck(true);
props.handlerCheckSavable(true);
}
// 비가시권 체크
@ -423,7 +427,7 @@ export default function LaancDrawControl(props) {
handlerRemoveError(id);
return;
} else {
props.handlerSaveCheck(true);
props.handlerCheckSavable(true);
return areaInfo;
}
};
@ -483,7 +487,7 @@ export default function LaancDrawControl(props) {
if (!isRemain) {
dispatch(clientChangeDrawType('RESET'));
props.handlerSaveCheck(false);
props.handlerCheckSavable(false);
} else {
dispatch(clientChangeDrawType('DONE'));
}
@ -507,7 +511,7 @@ export default function LaancDrawControl(props) {
props.setViewCoordObj(viewCoordObj);
// 계속 20개 미만이라 overAdd false처리
props.handlerAddChange('overAdd', false);
dispatch(clientIsOverAdd(false));
};
/**
@ -518,15 +522,13 @@ export default function LaancDrawControl(props) {
props.handlerCoordinates(areaInfo);
setIsDrawDone(true);
const viewCoordObj = drawObj
.getAll()
.features.filter(o => o.properties.id !== 'BUFFER' && o.properties.id);
const viewCoordObj = getDrawFeatures(drawObj);
props.setViewCoordObj(viewCoordObj);
if (viewCoordObj.length > 19) {
props.handlerAddChange('overAdd', true);
dispatch(clientIsOverAdd(true));
} else {
props.handlerAddChange('isViewAdd', true);
dispatch(clientIsViewAdd(true));
}
};
@ -765,9 +767,7 @@ export default function LaancDrawControl(props) {
}
}
});
const viewCoordObj = drawObj
.getAll()
.features.filter(o => o.properties.id !== 'BUFFER');
const viewCoordObj = getDrawFeatures(drawObj);
props.setViewCoordObj(viewCoordObj);
}
}
@ -811,13 +811,14 @@ export default function LaancDrawControl(props) {
return;
}
if (!props.addData.isAddable) {
// if (!props.addData.isAddable) {
if (!isClickAdd) {
// 추가 상태가 아닐 때
drawObj.deleteAll();
handlerRemoveAllMarker();
props.setViewCoordObj([]);
props.handlerSaveCheck(false);
props.handlerCheckSavable(false);
props.handlerInitCoordinates();
}
@ -830,14 +831,12 @@ export default function LaancDrawControl(props) {
* 초기화
*/
const handlerResetMode = () => {
props.handlerAddChange('isAddable', false);
props.handlerAddChange('isViewAdd', false);
props.handlerAddChange('overAdd', false);
dispatch(clientInitAddButton());
drawObj.deleteAll();
handlerRemoveAllMarker();
props.setViewCoordObj([]);
props.handlerSaveCheck(false);
props.handlerCheckSavable(false);
drawObj.changeMode('simple_select');
};

72
src/components/laanc/map/LaancMapModal.js
Unescape View File

@ -13,6 +13,7 @@ import {
clientAltitudeData,
clientChangeDrawType,
clientControlLaancModal,
clientIsClickAdd,
clientSaveAreaCoordinateList,
clientSaveAreaDetailList
} from '@src/redux/features/laanc/laancSlice';
@ -21,20 +22,24 @@ import { openModal } from '@src/redux/features/comn/message/messageSlice';
const LaancDrawModal = lazy(() => import('./LaancDrawModal'));
const LaancMapWeather = lazy(() => import('./LaancMapWeather'));
export default function LaancMapModal({
drawObj,
mapContainer,
weather,
areaCoordList
}) {
export default function LaancMapModal({ drawObj, mapContainer, weather }) {
const dispatch = useDispatch();
const { drawType, isOpenModal } = useSelector(state => state.laancState);
// Laanc state
const {
drawType,
isOpenModal,
areaCoordList,
isClickAdd,
isOverAdd,
isViewAdd
} = useSelector(state => state.laancState);
// 저장된 비행구역 데이터
const [saveData, setSaveData] = useState();
// 비행구역 저장 가능 여부
const [isSaveable, setIsSaveable] = useState(false);
const [isSavable, setIsSavable] = useState(false);
// 비행구역 고도
const [saveElev, setSaveElev] = useState([]);
@ -53,36 +58,17 @@ export default function LaancMapModal({
* 비행구역 저장 가능 유무 체크
* @param {boolean} save 비행구역 저장 가능 유무
*/
const handlerSaveCheck = save => {
setIsSaveable(save);
const handlerCheckSavable = save => {
setIsSavable(save);
};
// 비행구역 추가 가능 여부 판단
const [addData, setAddData] = useState({
isAddable: false,
isViewAdd: false,
overAdd: false
});
// 비행구역 추가 버튼 클릭 시
const handlerAddClick = () => {
if (!addData.isAddable || !addData.overAdd) {
handlerAddChange('isAddable', true);
if (!isClickAdd || !isOverAdd) {
dispatch(clientIsClickAdd(true));
}
};
/**
* 비행구역 추가 관련 상태 변경
* @param {string} key addData의 key
* @param {boolean} val addData의 value
*/
const handlerAddChange = (key, val) => {
setAddData(prev => ({
...prev,
[key]: val
}));
};
/**
* 비행구역 고도 저장
* @param {number} elev 비행고도
@ -176,15 +162,13 @@ export default function LaancMapModal({
<ModalBody>
<Suspense fallback=''>
<LaancMapDetail
mapContainer={mapContainer}
drawObj={drawObj}
handlerInitCoordinates={handlerInitCoordinates}
handlerSaveCheck={handlerSaveCheck}
handlerAddChange={handlerAddChange}
addData={addData}
mapContainer={mapContainer}
setSaveData={setSaveData}
handlerSaveElev={handlerSaveElev}
setModal={setModal}
handlerSaveElev={handlerSaveElev}
handlerCheckSavable={handlerCheckSavable}
handlerInitCoordinates={handlerInitCoordinates}
/>
</Suspense>
</ModalBody>
@ -193,7 +177,7 @@ export default function LaancMapModal({
<div className='laanc-point'>
<Button
color='primary'
disabled={drawType === 'LINE' || addData.overAdd}
disabled={drawType === 'LINE' || isOverAdd}
onClick={() => {
handlerDrawType('LINE');
}}
@ -202,7 +186,7 @@ export default function LaancMapModal({
</Button>
<Button
color='primary'
disabled={drawType === 'CIRCLE' || addData.overAdd}
disabled={drawType === 'CIRCLE' || isOverAdd}
onClick={() => {
handlerDrawType('CIRCLE');
}}
@ -211,7 +195,7 @@ export default function LaancMapModal({
</Button>
<Button
color='primary'
disabled={drawType === 'POLYGON' || addData.overAdd}
disabled={drawType === 'POLYGON' || isOverAdd}
onClick={() => {
handlerDrawType('POLYGON');
}}
@ -226,16 +210,16 @@ export default function LaancMapModal({
>
초기화
</Button>
{addData.isViewAdd ? (
{isViewAdd ? (
<Button
disabled={addData.overAdd || addData.isAddable}
disabled={isOverAdd || isClickAdd}
color='primary'
onClick={handlerAddClick}
>
추가
</Button>
) : null}
{addData.isViewAdd && weather[0]?.coordList[0].lat != 0 ? (
{isViewAdd && weather[0]?.coordList[0].lat != 0 ? (
<Button color='primary' onClick={handlerWeather}>
날씨 정보
</Button>
@ -248,7 +232,7 @@ export default function LaancMapModal({
</span>
<Button
color='primary'
disabled={!isSaveable}
disabled={!isSavable}
onClick={() => {
handlerSave();
dispatch(clientAltitudeData(saveElev));

5
src/components/laanc/step/LaancStep1.js
Unescape View File

@ -44,7 +44,9 @@ export default function LaancStep1({
// 로그인 정보
const { user } = useSelector(state => state.authState);
// 비행 구역 정보
const { areaCoordList } = useSelector(state => state.laancState);
const { areaCoordList, isMapLoading } = useSelector(
state => state.laancState
);
// 일물 일출, 고도 정보, 관제권안 정보
const { laancSun, laancElev, laancArea } = useSelector(
state => state.laancState
@ -1233,6 +1235,7 @@ export default function LaancStep1({
비행 구역 설정
<Button
size='sm'
disabled={!isMapLoading}
onClick={() => {
dispatch(clientControlLaancModal(true));
}}

34
src/redux/features/laanc/laancSlice.ts
Unescape View File

@ -27,7 +27,7 @@ import {
laancState
} from './laancState';
export const initLaanc: laancState = {
const initLaanc: laancState = {
scheduleList: [],
areaCoordList: [],
weather: {
@ -298,7 +298,11 @@ export const initLaanc: laancState = {
},
drawType: '',
isOpenModal: false
isMapLoading: false,
isOpenModal: false,
isClickAdd: false,
isOverAdd: false,
isViewAdd: false
};
const laancSlice = createSlice({
@ -340,6 +344,25 @@ const laancSlice = createSlice({
// Laanc 계획서 모달
clientControlLaancModal: (state, action) => {
state.isOpenModal = action.payload as boolean;
},
// Laanc 지도 로딩
clientSetIsMapLoading: (state, action) => {
state.isMapLoading = action.payload as boolean;
},
// Laanc 추가 버튼 리셋
clientInitAddButton: (state, action) => {
state.isViewAdd = false;
state.isClickAdd = false;
state.isOverAdd = false;
},
clientIsViewAdd: (state, action) => {
state.isViewAdd = action.payload as boolean;
},
clientIsClickAdd: (state, action) => {
state.isClickAdd = action.payload as boolean;
},
clientIsOverAdd: (state, action) => {
state.isOverAdd = action.payload as boolean;
}
},
extraReducers: builder => {
@ -391,7 +414,12 @@ export const {
clientRoupSelect,
clientSaveAreaDetailList,
clientChangeDrawType,
clientControlLaancModal
clientControlLaancModal,
clientSetIsMapLoading,
clientInitAddButton,
clientIsClickAdd,
clientIsOverAdd,
clientIsViewAdd
} = laancSlice.actions;
export const laancReducer = laancSlice.reducer;

5
src/redux/features/laanc/laancState.ts
Unescape View File

@ -16,8 +16,13 @@ export interface laancState {
scheduleList: IBasFlightScheduleListRs[] | [];
selectGroup: ISelectGroupRs;
// 비행구역 관련 state
drawType: string;
isMapLoading: boolean;
isOpenModal: boolean;
isViewAdd: boolean;
isOverAdd: boolean;
isClickAdd: boolean;
}
export interface IweatherRs {

9
src/utility/MapUtils.js
Unescape View File

@ -373,3 +373,12 @@ export const handlerCreateAirSpace = (
}
});
};
// 그려진 비행 구역
export const getDrawFeatures = drawObj => {
const viewCoordObj = drawObj
.getAll()
.features.filter(o => o.properties.id !== 'BUFFER' && o.properties.id);
return viewCoordObj;
};

Write Preview
Loading…
Cancel
Save