|
|
|
@ -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> |
|
|
|
|
)} |
|
|
|
|
</> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|