junh_eee(이준희)
10 months ago
1 changed files with 93 additions and 0 deletions
@ -0,0 +1,93 @@ |
|||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import { useDispatch, useSelector } from 'react-redux'; |
||||||
|
import useAudio from '../../../../utility/hooks/useAudio'; |
||||||
|
import warning from '../../../../assets/sounds/warning.mp3'; |
||||||
|
import { toast } from 'react-toastify'; |
||||||
|
import { Fragment } from 'react'; |
||||||
|
import { objectClickAction } from '../../../../modules/control/map/actions/controlMapActions'; |
||||||
|
import { |
||||||
|
controlGpDtlAction, |
||||||
|
controlGpFlightPlanAction |
||||||
|
} from '../../../../modules/control/gp'; |
||||||
|
|
||||||
|
export default function DronToast() { |
||||||
|
const dispatch = useDispatch(); |
||||||
|
const [playing, toggle] = useAudio(warning); |
||||||
|
const { controlGpArcrftWarnList } = useSelector( |
||||||
|
state => state.controlGpLogState |
||||||
|
); |
||||||
|
const [toastId, setToastId] = useState(); |
||||||
|
|
||||||
|
let warningList = []; |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (controlGpArcrftWarnList) { |
||||||
|
if (!toastId) { |
||||||
|
for (let i = 0; i < controlGpArcrftWarnList.length; i++) { |
||||||
|
if (controlGpArcrftWarnList[i].controlWarnCd) { |
||||||
|
const id = toast.info( |
||||||
|
toastRender( |
||||||
|
`${controlGpArcrftWarnList[i].idntfNum} 비정상 상황 알림`, |
||||||
|
`경로 상에 비행 구역을 이탈했습니다.` |
||||||
|
), |
||||||
|
{ |
||||||
|
autoClose: false, |
||||||
|
hideProgressBar: true, |
||||||
|
position: toast.POSITION.BOTTOM_RIGHT, |
||||||
|
onClick: () => { |
||||||
|
handlerToastClick( |
||||||
|
controlGpArcrftWarnList[i].cntrlId, |
||||||
|
controlGpArcrftWarnList[i].idntfNum |
||||||
|
); |
||||||
|
// setToastId(null);
|
||||||
|
}, |
||||||
|
onClose: () => { |
||||||
|
// setIs(true);
|
||||||
|
toggle(false); |
||||||
|
setToastId(null); |
||||||
|
} |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
setToastId(id); |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
for (let i = 0; i < controlGpArcrftWarnList.length; i++) { |
||||||
|
warningList.push(controlGpArcrftWarnList[i].controlWarnCd); |
||||||
|
} |
||||||
|
|
||||||
|
warningList.find(i => i) ? toggle(true) : toggle(false); |
||||||
|
} |
||||||
|
}, [controlGpArcrftWarnList]); |
||||||
|
|
||||||
|
const handlerToastClick = (controlId, idntfNum) => { |
||||||
|
dispatch(objectClickAction(controlId)); |
||||||
|
dispatch(controlGpDtlAction.request(controlId)); |
||||||
|
dispatch(controlGpFlightPlanAction.request(idntfNum)); |
||||||
|
}; |
||||||
|
|
||||||
|
const toastRender = (title, message) => { |
||||||
|
return ( |
||||||
|
<Fragment> |
||||||
|
<div className='toastify-header'> |
||||||
|
<div className='title-wrapper'> |
||||||
|
<Avatar size='sm' color='info' icon={<Info size={10} />} /> |
||||||
|
<h6 className='text-info ml-50 mb-0' style={{ fontSize: 'small' }}> |
||||||
|
{title} |
||||||
|
</h6> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className='toastify-body'> |
||||||
|
<span>{message}</span> |
||||||
|
</div> |
||||||
|
</Fragment> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
return null; |
||||||
|
|
||||||
|
return <div>DronToast</div>; |
||||||
|
} |
Loading…
Reference in new issue