비행승인 신청 검토결과 현황
diff --git a/src/containers/flight/NewFlightApprovalsContainer.js b/src/containers/flight/NewFlightApprovalsContainer.js
index 46d830d0..3341653d 100644
--- a/src/containers/flight/NewFlightApprovalsContainer.js
+++ b/src/containers/flight/NewFlightApprovalsContainer.js
@@ -20,7 +20,7 @@ import { getLaancAprvList } from '@src/redux/features/laanc/laancThunk';
import dayjs from 'dayjs';
import { setLogout } from '@src/redux/features/account/auth/authThunk';
-export default function NewFlightApprovalsContainer() {
+export default function NewFlightApprovalsContainer({ mode }) {
const dispatch = useDispatch();
const history = useHistory();
@@ -44,6 +44,11 @@ export default function NewFlightApprovalsContainer() {
const map = useSelector(state => state.mapState.map);
+ // popup
+ const [isPopup, setIsPopup] = useState(false);
+ const [popup, setPopup] = useState(null);
+ const popupRef = useRef(null);
+
const previewGeo2 = {
type: 'FeatureCollection',
features: []
@@ -61,20 +66,113 @@ export default function NewFlightApprovalsContainer() {
}, []);
useEffect(() => {
- if (areaCoordList.length != 0) {
+ if (areaCoordList.length !== 0) {
handlerPreviewDraw();
}
}, [areaCoordList]);
useEffect(() => {
if (map) {
+ window._mapbox = map;
+ let mapInstance = mode === 'container' ? map : window.opener._mapbox;
setMapObject(map);
}
}, [map]);
- useEffect(async () => {
- if (areaCoordList.length === 0) return;
- }, [areaCoordList]);
+ useEffect(() => {
+ const childMessage = e => {
+ if (e.data.type) {
+ const { type } = e.data;
+ const { payload } = e.data;
+ console.log(payload);
+ switch (type) {
+ case 'initalState':
+ popupRef.current.postMessage({
+ type: 'initalState',
+ payload: {
+ filter,
+ selected,
+ startDate,
+ endDate
+ }
+ });
+
+ return;
+ case 'search':
+ const { search, searchDate, filterArea } = payload;
+
+ handlerSearch(search, searchDate, filterArea);
+ return;
+ case 'detail':
+ const { area } = payload;
+ handlerDetail(area);
+ return;
+ case 'closedSync':
+ popupRef.current.close();
+ // localStorage.removeItem('popupState');
+ return;
+ default:
+ break;
+ }
+ }
+ };
+ let timer;
+ if (popup) {
+ timer = setInterval(() => {
+ if (popup.closed) {
+ setIsPopup(false);
+ clearInterval(timer);
+ }
+ }, 1000); // 1초마다 체크
+ }
+ window.addEventListener('message', childMessage);
+
+ return () => {
+ clearInterval(timer);
+ window.removeEventListener('message', childMessage);
+ };
+ }, [popup]);
+
+ useEffect(() => {
+ const handleBeforeUnload = e => {
+ localStorage.removeItem('persist:root');
+
+ if (popupRef.current) {
+ popupRef.current.close();
+ }
+ };
+
+ window.addEventListener('beforeunload', handleBeforeUnload);
+
+ return () => {
+ window.removeEventListener('beforeunload', handleBeforeUnload);
+ };
+ }, []);
+
+ const handleDragEnd = e => {
+ setIsPopup(true);
+ const el = document.querySelector('.flight-approval-layer');
+
+ const popupWidth = el.offsetWidth; // 팝업의 너비
+ const popupHeight = el.offsetHeight; // 팝업의 너비
+ // const popupX = window.screenX + window.outerWidth - e.clientX; // 오른쪽 끝에 띄우기
+ // const popupY = Math.round(
+ // window.screenY + window.outerHeight / 2 - popupHeight / 2
+ // );
+
+ const popupX =
+ window.screenX +
+ (window.outerWidth - popupWidth) / 2 +
+ e.clientX -
+ window.innerWidth / 2; // 드래그 끝나는 지점
+ const popupY = Math.round(
+ window.screenY + window.outerHeight / 2 - popupHeight / 2
+ );
+ const option = `width=${popupWidth},height=${popupHeight},left=${popupX},top=${popupY}`;
+ popupRef.current = window.open('/rightMenu', 'NewWindow', option);
+ // setPopupOption(option);
+ setPopup(popupRef.current);
+ };
const handlerSearch = (search, searchDate, filterArea) => {
setStartDate(searchDate.startDate);
@@ -112,6 +210,12 @@ export default function NewFlightApprovalsContainer() {
}
// );
setFilter(search);
+ if (popup) {
+ popupRef.current.postMessage({
+ type: 'handlerSearchRs',
+ payload: { search }
+ });
+ }
};
const handlerDetail = area => {
@@ -123,28 +227,32 @@ export default function NewFlightApprovalsContainer() {
};
const handlerMapInit = () => {
- if (map.getSource('preview')) {
+ let mapInstance = mode === 'container' ? map : window.opener._mapbox;
+
+ if (mapInstance.getSource('preview')) {
} else {
- map.addSource('preview', {
+ mapInstance.addSource('preview', {
type: 'geojson',
data: previewGeo2
});
- map.addLayer(flightlayerWayPoint('preview'));
- map.addLayer(flightlayerBuffer('preview'));
- map.addLayer(flightlayerPolygon('preview'));
- map.addLayer(flightlayerPolyline('preview'));
+ mapInstance.addLayer(flightlayerWayPoint('preview'));
+ mapInstance.addLayer(flightlayerBuffer('preview'));
+ mapInstance.addLayer(flightlayerPolygon('preview'));
+ mapInstance.addLayer(flightlayerPolyline('preview'));
}
dispatch(clientSetIsMapLoading(true));
- const preview = map.getSource('preview');
+ const preview = mapInstance.getSource('preview');
if (preview) setPreviewLayer(preview);
setIsMapLoading(true);
- setMapObject(map);
- dispatch(clientMapInit(map));
+ setMapObject(mapInstance);
+
+ dispatch(clientMapInit(mapInstance));
};
+
const handlerPreviewDraw = () => {
if (areaCoordList.length > 0) {
const areas = areaCoordList[0];
@@ -188,20 +296,25 @@ export default function NewFlightApprovalsContainer() {
-
-
-
+ )}
>
);
}
diff --git a/src/containers/flight/flightApprovalsContainer.js b/src/containers/flight/flightApprovalsContainer.js
index 1d285189..c3fe7606 100644
--- a/src/containers/flight/flightApprovalsContainer.js
+++ b/src/containers/flight/flightApprovalsContainer.js
@@ -48,10 +48,6 @@ export default function FlightApprovalsContainer({ mode }) {
const { laancAprvList } = useSelector(state => state.laancState);
const map = useSelector(state => state.mapState.map);
- // popup
- const [isPopup, setIsPopup] = useState(false);
- const [popup, setPopup] = useState(null);
- const popupRef = useRef(null);
const previewGeo2 = {
type: 'FeatureCollection',
@@ -77,107 +73,10 @@ export default function FlightApprovalsContainer({ mode }) {
useEffect(() => {
if (map) {
- window._mapbox = map;
- let mapInstance = mode === 'container' ? map : window.opener._mapbox;
setMapObject(mapInstance);
}
}, [map]);
- useEffect(() => {
- const childMessage = e => {
- if (e.data.type) {
- const { type } = e.data;
- const { payload } = e.data;
- console.log(payload);
- switch (type) {
- case 'initalState':
- popupRef.current.postMessage({
- type: 'initalState',
- payload: {
- filter,
- selected,
- startDate,
- endDate
- }
- });
-
- return;
- case 'search':
- const { search, searchDate, filterArea } = payload;
-
- handlerSearch(search, searchDate, filterArea);
- return;
- case 'detail':
- const { area } = payload;
- handlerDetail(area);
- return;
- case 'closedSync':
- popupRef.current.close();
- // localStorage.removeItem('popupState');
- return;
- default:
- break;
- }
- }
- };
- let timer;
- if (popup) {
- timer = setInterval(() => {
- if (popup.closed) {
- setIsPopup(false);
- clearInterval(timer);
- }
- }, 1000); // 1초마다 체크
- }
- window.addEventListener('message', childMessage);
-
- return () => {
- clearInterval(timer);
- window.removeEventListener('message', childMessage);
- };
- }, [popup]);
-
- useEffect(() => {
- const handleBeforeUnload = e => {
- localStorage.removeItem('persist:root');
-
- if (popupRef.current) {
- popupRef.current.close();
- }
- };
-
- window.addEventListener('beforeunload', handleBeforeUnload);
-
- return () => {
- window.removeEventListener('beforeunload', handleBeforeUnload);
- };
- }, []);
-
- const handleDragEnd = e => {
- setIsPopup(true);
- const el = document.querySelector('.flight-approval-layer');
-
- const popupWidth = el.offsetWidth; // 팝업의 너비
- const popupHeight = el.offsetHeight; // 팝업의 너비
- // const popupX = window.screenX + window.outerWidth - e.clientX; // 오른쪽 끝에 띄우기
- // const popupY = Math.round(
- // window.screenY + window.outerHeight / 2 - popupHeight / 2
- // );
-
- const popupX =
- window.screenX +
- (window.outerWidth - popupWidth) / 2 +
- e.clientX -
- window.innerWidth / 2; // 드래그 끝나는 지점
- const popupY = Math.round(
- window.screenY + window.outerHeight / 2 - popupHeight / 2
- );
- const option = `width=${popupWidth},height=${popupHeight},left=${popupX},top=${popupY}`;
- popupRef.current = window.open('/rightMenu', 'NewWindow', option);
- // setPopupOption(option);
- setPopup(popupRef.current);
- };
-
const handlerSearch = (search, searchDate, filterArea) => {
setStartDate(searchDate.startDate);
setEndDate(searchDate.endDate);
@@ -215,12 +114,6 @@ export default function FlightApprovalsContainer({ mode }) {
// );
setFilter(search);
- if (popup) {
- popupRef.current.postMessage({
- type: 'handlerSearchRs',
- payload: { search }
- });
- }
};
const handlerDetail = area => {
@@ -232,30 +125,27 @@ export default function FlightApprovalsContainer({ mode }) {
};
const handlerMapInit = () => {
- let mapInstance = mode === 'container' ? map : window.opener._mapbox;
-
- if (mapInstance.getSource('preview')) {
+ if (map.getSource('preview')) {
} else {
- mapInstance.addSource('preview', {
+ map.addSource('preview', {
type: 'geojson',
data: previewGeo2
});
- mapInstance.addLayer(flightlayerWayPoint('preview'));
- mapInstance.addLayer(flightlayerBuffer('preview'));
- mapInstance.addLayer(flightlayerPolygon('preview'));
- mapInstance.addLayer(flightlayerPolyline('preview'));
+ map.addLayer(flightlayerWayPoint('preview'));
+ map.addLayer(flightlayerBuffer('preview'));
+ map.addLayer(flightlayerPolygon('preview'));
+ map.addLayer(flightlayerPolyline('preview'));
}
dispatch(clientSetIsMapLoading(true));
- const preview = mapInstance.getSource('preview');
+ const preview = map.getSource('preview');
if (preview) setPreviewLayer(preview);
setIsMapLoading(true);
- setMapObject(mapInstance);
-
- dispatch(clientMapInit(mapInstance));
+ setMapObject(map);
+ dispatch(clientMapInit(map));
};
const handlerPreviewDraw = () => {
if (areaCoordList.length > 0) {
@@ -333,25 +223,20 @@ export default function FlightApprovalsContainer({ mode }) {
>
- {!isPopup && (
-
-
-
-
-
-
+
>
);
}
diff --git a/src/containers/rightMenuContainer.js b/src/containers/rightMenuContainer.js
index da3b5a61..58069f02 100644
--- a/src/containers/rightMenuContainer.js
+++ b/src/containers/rightMenuContainer.js
@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react';
import dayjs from 'dayjs';
import { useDispatch } from '@src/redux/store';
import { getLaancAprvList } from '@src/redux/features/laanc/laancThunk';
-import FlightApprovalsTable from '@src/components/flight/FlightApprovalsTable';
-import FlightApprovalsReport from '@src/components/flight/FlightApprovalsReport';
+import NewFlightApprovalsTable from '@src/components/flight/NewFlightApprovalsTable';
+import NewFlightApprovalsReport from '@src/components/flight/NewFlightApprovalsReport';
function RightMenuContainer() {
const [filter, setFilter] = useState('');
@@ -120,8 +120,8 @@ function RightMenuContainer() {
style={{ width: '100vw' }}
>
-
-
+
관제시스템
*/}
- ;
+ ;
);
}
diff --git a/src/views/flight/NewFlightView.js b/src/views/flight/NewFlightView.js
index 12c589c9..f9821b4d 100644
--- a/src/views/flight/NewFlightView.js
+++ b/src/views/flight/NewFlightView.js
@@ -9,7 +9,7 @@ export default function NewFlightView() {
{/*
관제시스템
*/}
-
;
+
;
);
}