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

비행승인 페이지 팝업 적용

master
김장현 3 months ago
parent
5607c1f414
commit
182aa2a0f7
7 changed files with 184 additions and 185 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. 17
      src/components/flight/FlightApprovalsReport.js
  2. 18
      src/components/flight/NewFlightApprovalsReport.js
  3. 165
      src/containers/flight/NewFlightApprovalsContainer.js
  4. 157
      src/containers/flight/flightApprovalsContainer.js
  5. 8
      src/containers/rightMenuContainer.js
  6. 2
      src/views/flight/FlightView.js
  7. 2
      src/views/flight/NewFlightView.js

17
src/components/flight/FlightApprovalsReport.js
Unescape View File

@ -1,4 +1,4 @@
import { useEffect, useState } from 'react';
import { useState } from 'react';
import Flatpickr from 'react-flatpickr';
import { Button, Input, CustomInput, Col, Row } from '@component/ui';
import { Search, Calendar } from 'react-feather';
@ -16,19 +16,6 @@ export default function FlightApprovalsReport(props) {
endDate: dayjs().format('YYYY-MM-DD')
});
useEffect(() => {
const popupSyncSearchData = JSON.parse(localStorage.getItem('popupState'));
if (popupSyncSearchData) {
setSearchDate({
startDate: popupSyncSearchData.startDate,
endDate: popupSyncSearchData.endDate
});
setFilterArea(popupSyncSearchData.selected);
setFilterId(popupSyncSearchData.filter);
localStorage.removeItem('popupState');
}
}, []);
const handleKeyDown = e => {
if (e.key === 'Enter') {
props.handlerSearch(filterId, searchDate, filterArea);
@ -36,7 +23,7 @@ export default function FlightApprovalsReport(props) {
};
return (
<div className='layer-content' onDragEnd={props.handleDragEnd} draggable>
<div className='layer-content'>
<div className='layer-ti'>
<h4>비행승인 신청 검토결과 현황</h4>
</div>

18
src/components/flight/NewFlightApprovalsReport.js
Unescape View File

@ -1,4 +1,4 @@
import { useState } from 'react';
import { useState, useEffect } from 'react';
import Flatpickr from 'react-flatpickr';
import { Button, Input, CustomInput, Col, Row } from '@component/ui';
import { Search, Calendar } from 'react-feather';
@ -16,6 +16,20 @@ export default function NewFlightApprovalsReport(props) {
endDate: dayjs().format('YYYY-MM-DD')
});
useEffect(() => {
const popupSyncSearchData = JSON.parse(localStorage.getItem('popupState'));
if (popupSyncSearchData) {
setFilterArea(popupSyncSearchData.selected);
setFilterId(popupSyncSearchData.filter);
setSearchDate({
startDate: popupSyncSearchData.startDate,
endDate: popupSyncSearchData.endDate
});
localStorage.removeItem('popupState');
}
}, []);
const handleKeyDown = e => {
if (e.key === 'Enter') {
props.handlerSearch(filterId, searchDate, filterArea);
@ -23,7 +37,7 @@ export default function NewFlightApprovalsReport(props) {
};
return (
<div className='layer-content'>
<div className='layer-content' onDragEnd={props.handleDragEnd} draggable>
<div className='layer-ti'>
<h4>비행승인 신청 검토결과 현황</h4>
</div>

165
src/containers/flight/NewFlightApprovalsContainer.js
Unescape View File

@ -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() {
<div className='map' style={{ width: '100%' }}>
<MapControl />
</div>
<div className='right-menu active'>
<div className='right-layer active flight-approval-layer'>
<div className='layer-content'>
<NewFlightApprovalsReport handlerSearch={handlerSearch} />
<NewFlightApprovalsTable
filter={filter}
startDate={startDate}
endDate={endDate}
selected={selected}
handlerDetail={handlerDetail}
/>
{!isPopup && (
<div className='right-menu active'>
<div className='right-layer active flight-approval-layer'>
<div className='layer-content'>
<NewFlightApprovalsReport
handlerSearch={handlerSearch}
handleDragEnd={handleDragEnd}
/>
<NewFlightApprovalsTable
filter={filter}
startDate={startDate}
endDate={endDate}
selected={selected}
handlerDetail={handlerDetail}
/>
</div>
</div>
</div>
</div>
)}
</>
);
}

157
src/containers/flight/flightApprovalsContainer.js
Unescape View File

@ -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 }) {
</div>
</>
{!isPopup && (
<div className='right-menu active'>
<div className='right-layer active flight-approval-layer'>
<div className='layer-content'>
<FlightApprovalsReport
handlerSearch={handlerSearch}
handleDragEnd={handleDragEnd}
/>
<FlightApprovalsTable
filter={filter}
startDate={startDate}
endDate={endDate}
selected={selected}
handlerDetail={handlerDetail}
/>
</div>
<div className='right-menu active'>
<div className='right-layer active flight-approval-layer'>
<div className='layer-content'>
<FlightApprovalsReport handlerSearch={handlerSearch} />
<FlightApprovalsTable
filter={filter}
startDate={startDate}
endDate={endDate}
selected={selected}
handlerDetail={handlerDetail}
/>
</div>
</div>
)}
</div>
</>
);
}

8
src/containers/rightMenuContainer.js
Unescape View File

@ -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' }}
>
<div className='layer-content'>
<FlightApprovalsReport handlerSearch={handlerSearch} />
<FlightApprovalsTable
<NewFlightApprovalsReport handlerSearch={handlerSearch} />
<NewFlightApprovalsTable
filter={filter}
startDate={startDate}
endDate={endDate}

2
src/views/flight/FlightView.js
Unescape View File

@ -11,7 +11,7 @@ export default function FlightView() {
{/* <Helmet>
<title>관제시스템</title>
</Helmet> */}
<FlightApprovalsContainer mode='container' />;
<FlightApprovalsContainer />;
</div>
);
}

2
src/views/flight/NewFlightView.js
Unescape View File

@ -9,7 +9,7 @@ export default function NewFlightView() {
{/* <Helmet>
<title>관제시스템</title>
</Helmet> */}
<NewFlightApprovalsContainer />;
<NewFlightApprovalsContainer mode='container' />;
</div>
);
}

Write Preview
Loading…
Cancel
Save