laanc 비행구역 추가버튼 기능 완료

11 months ago · 2c73a55f61
4 changed files with 105 additions and 44 deletions
--- a/src/components/map/mapbox/draw/LaancDrawControl.js
+++ b/src/components/map/mapbox/draw/LaancDrawControl.js
@ -76,10 +76,6 @@ export const LaancDrawControl = props => {
    }
  }, [isDrawDone]);

-  // useEffect(() => {
-  //   console.log(inAirArea, '--1122');
-  // }, [inAirArea]);
-
  // 클릭할 때마다 마커 찍어줌
  const handlerCustomOnClick = (state, e) => {
    console.log('click');
@ -91,7 +87,6 @@ export const LaancDrawControl = props => {
      inAirArea = 'Y';
      // setInAirArea(true);
      // console.log(features, '>>>>>관제권?');
-      // areaCoordList 컬럼 새로 만든거에 TRUE 머시기... 가 아니라 여기가 아님 일단은!! 노트 참고해!!!
    }

    const type = handlerReturnMode(drawObj.getMode());
@ -147,7 +142,6 @@ export const LaancDrawControl = props => {
      const length = state.currentVertexPosition;
      drawObj.setFeatureProperty(obj.id, 'id', mode);
      drawObj.setFeatureProperty(obj.id, 'inAirArea', inAirArea);
-      // console.log(inAirArea, '--------------------');

      // dbl클릭이 click 두번으로 인식돼서, 마지막 값을 없애버리기로 함
      if (mode === 'LINE') {
@ -162,6 +156,7 @@ export const LaancDrawControl = props => {
        }
      } else if (mode === 'POLYGON') {
        obj.coordinates[0].splice(-1);
+
        if (length < 2) {
          setAlertModal({
            isOpen: true,
@ -206,7 +201,7 @@ export const LaancDrawControl = props => {
          id: obj.id
        };
        handlerRemoveGroupMarker(obj.id);
-        handlerCreateGroupMarker(data.coord, obj.id);
+        handlerCreateGroupMarker(data, mode);
        handlerAbnormalityCheck(data, mode);
      }
    }
@ -227,7 +222,6 @@ export const LaancDrawControl = props => {
        : null;

    const datas = { coord: initCoord, mode: mode, inAirArea: inAirArea };
-    // handlerSaveAreaInfo(initCoord, mode);
    handlerSaveAreaInfo(datas);
  };

@ -314,6 +308,15 @@ export const LaancDrawControl = props => {
    }
    props.handlerCoordinates(areaInfo);
    setIsDrawDone(true);
+
+    const obj = drawObj
+      .getAll()
+      .features.filter(obj => obj.properties.id !== 'BUFFER');
+    if (obj.length > 1) {
+      props.handlerAddChange('overAdd', true);
+    } else {
+      props.handlerAddChange('isViewAdd', true);
+    }
  };

  const handlerPastDraw = () => {
@ -411,40 +414,52 @@ export const LaancDrawControl = props => {
  };

  // 해당되는 id의 마커 생성
-  const handlerCreateGroupMarker = (coords, id) => {
+  const handlerCreateGroupMarker = (data, mode) => {
    const areas = props.areaCoordList[0];

-    if (areas.areaType !== 'CIRCLE') {
-      for (let i = 0; i < coords.length; i++) {
+    if (mode !== 'CIRCLE') {
+      const coord = mode === 'LINE' ? data.coord : data.coord[0];
+      for (let i = 0; i < coord.length; i++) {
+        const coords = coord;
        if (i === 0) {
-          handlerCreateOneMarker([0, -10], coords[i], 'Start', id);
+          handlerCreateOneMarker([0, -10], coords[i], 'Start', data.id);
        } else {
          const lngLat = handlerGetMidPoint(coords[i - 1], coords[i]);
          const text = CalculateDistance(coords[i - 1], coords[i]);
-          handlerCreateOneMarker([0, 0], lngLat, text, id);
+          handlerCreateOneMarker([0, 0], lngLat, text, data.id);
        }
      }
    } else {
-      handlerCreateOneMarker([0, -10], coords[0], areas.bufferZone, id);
+      handlerCreateOneMarker([0, -10], coords[0], areas.bufferZone, data.id);
    }
  };

  const drawInit = () => {
-    // drawObj.deleteAll();
-    // handlerRemoveAllMarker();
-    // setInAirArea(false);
+    if (!props.addData.isAddable) {
+      drawObj.deleteAll();
+      handlerRemoveAllMarker();

-    props.handlerSaveCheck(false);
-    setDrawObjId();
+      props.handlerSaveCheck(false);
+      setDrawObjId();

-    props.handlerInitCoordinates();
+      props.handlerInitCoordinates();
+    }

    const mode = mapControl.drawType;
    if (!mode || mode === 'RESET') {
+      props.handlerAddChange('isAddable', false);
+      props.handlerAddChange('isViewAdd', false);
+      props.handlerAddChange('overAdd', false);
      drawObj.deleteAll();
      handlerRemoveAllMarker();
      return;
    }
+
+    const addData = props.addData;
+    if (addData.isAddable && addData.isViewAdd && addData.overAdd) {
+      alert('구역은 최대 2개까지 설정 가능합니다.');
+      return;
+    }
    handlerStartMode(mode);
  };

--- a/src/modules/basis/flight/reducers/basisFlightReducer.ts
+++ b/src/modules/basis/flight/reducers/basisFlightReducer.ts
@ -128,7 +128,6 @@ export const flightReducer = createReducer<FlightState, Actions.FlightAction>(
        if (draft.areaCoordList.length > 0) {
          // const inAirArea = draft.areaCoordList[0].inAirArea;
          const inAirArea = sessionStorage.getItem('inAirArea') as string;
-          console.log(inAirArea, '>>>');
          if (inAirArea.includes('N')) {
            draft.areaCoordList[0] = { ...data[0], inAirArea: false };
          } else {
--- a/src/views/laanc/FlightArea.js
+++ b/src/views/laanc/FlightArea.js
@ -37,6 +37,13 @@ import axios from '../../modules/utils/customAxiosUtil';
 import { ErrorModal } from '../../components/modal/ErrorModal';
 import { FeatureAirZone } from '../../components/map/mapbox/feature/FeatureAirZone';
 import { WeatherContainer } from '../../containers/basis/flight/plan/WeatherContainer';
+import { InfoModal } from '../../components/modal/InfoModal';
+
+const initialAddData = {
+  isAddable: false,
+  isViewAdd: false,
+  overAdd: false
+};

 export default function FlightArea({
  centeredModal,
@ -63,11 +70,17 @@ export default function FlightArea({
  const [formModal, setFormModal] = useState(false);
  const [alertModal, setAlertModal] = useState({
    isOpen: false,
-    title: '',
-    desc: ''
+    title: '비행구역 설정',
+    desc: '구역은 최대 2개까지 설정 가능합니다.'
+  });
+  const [addModal, setAddModal] = useState({
+    isOpen: false,
+    title: '비행구역 설정',
+    desc: '모드를 변경하고 추가구역을 설정해주세요. 구역은 최대 2개까지 설정 가능합니다.'
  });

  const [isSaveable, setIsSaveable] = useState(false);
+  const [addData, setAddData] = useState(initialAddData);

  //날씨 임시 데이터
  const [wheather, setWheather] = useState([]);
@ -482,6 +495,31 @@ export default function FlightArea({
    }
  };

+  const handlerAddClick = () => {
+    if (!addData.isAddable) {
+      setAddModal(prev => ({
+        ...prev,
+        isOpen: true
+      }));
+      handlerAddChange('isAddable', true);
+    } else {
+      alert('구역은 최대 2개까지 설정 가능합니다.');
+    }
+  };
+
+  const handlerAddChange = (key, val) => {
+    // const [addData, setAddData] = useState({
+    //   isAddalbe: false,
+    //   isViewAdd: false,
+    //   overAdd: false
+    // })
+
+    setAddData(prev => ({
+      ...prev,
+      [key]: val
+    }));
+  };
+
  return (
    <div className='vertically-centered-modal'>
      <div>
@ -509,6 +547,8 @@ export default function FlightArea({
              mapContainer={mapContainer}
              drawObj={drawObj}
              setIsSaveable={setIsSaveable}
+              handlerAddChange={handlerAddChange}
+              addData={addData}
            />
          </ModalBody>
          <ModalFooter>
@ -550,26 +590,28 @@ export default function FlightArea({
                >
                  초기화
                </Button>
-                <Button
-                  color='primary'
-                  onClick={() => {
-                    const drawObjCnt = drawObj
-                      .getAll()
-                      .features.filter(
-                        obj => obj.properties.id !== 'BUFFER'
-                      ).length;
-
-                    console.log(
-                      drawObj.getAll().features,
-                      '>>>>현재 그려진 도형들'
-                    );
-                    // if (drawObjCnt > 2) {
-                    //   alert('구역은 2개까지만 설정 가능합니다.');
-                    // }
-                  }}
-                >
-                  추가
-                </Button>
+                {addData.isViewAdd ? (
+                  <Button
+                    color='primary'
+                    onClick={() => {
+                      handlerAddClick();
+                      // const drawObjCnt = drawObj
+                      //   .getAll()
+                      //   .features.filter(
+                      //     obj => obj.properties.id !== 'BUFFER'
+                      //   ).length;
+                      // console.log(
+                      //   drawObj.getAll().features,
+                      //   '>>>>현재 그려진 도형들'
+                      // );
+                      // if (drawObjCnt > 2) {
+                      //   alert('구역은 2개까지만 설정 가능합니다.');
+                      // }
+                    }}
+                  >
+                    추가
+                  </Button>
+                ) : null}
                {wheather[0]?.coordList[0].lat != 0 ? (
                  <Button color='primary' onClick={handlerWeather}>
                    날씨 정보
@ -593,6 +635,7 @@ export default function FlightArea({
        </Modal>
      ) : null}
      <ErrorModal modal={alertModal} setModal={setAlertModal} />
+      <InfoModal modal={addModal} setModal={setAddModal} />
      <Modal
        isOpen={formModal}
        toggle={handlerWeather}
--- a/src/views/laanc/LaancAreaMap.js
+++ b/src/views/laanc/LaancAreaMap.js
@ -37,7 +37,9 @@ export default function LaancAreaMap({
  centeredModal,
  mapContainer,
  drawObj,
-  setIsSaveable
+  setIsSaveable,
+  handlerAddChange,
+  addData
 }) {
  const dispatch = useDispatch();
  const mapControl = useSelector(state => state.controlMapReducer);
@ -342,6 +344,8 @@ export default function LaancAreaMap({
                handlerInitCoordinates={handlerInitCoordinates}
              /> */}
              <LaancDrawControl
+                handlerAddChange={handlerAddChange}
+                addData={addData}
                drawObj={drawObj}
                setModal={setModal}
                mapboxgl={mapboxgl}