|
|
|
@ -1,15 +1,52 @@
|
|
|
|
|
import moment from 'moment'; |
|
|
|
|
import { useState } from 'react'; |
|
|
|
|
import { useEffect, useState } from 'react'; |
|
|
|
|
import { Search, X } from 'react-feather'; |
|
|
|
|
import { useDispatch, useSelector } from 'react-redux'; |
|
|
|
|
import { Badge, Button, Input, InputGroup } from 'reactstrap'; |
|
|
|
|
import { |
|
|
|
|
Badge, |
|
|
|
|
Button, |
|
|
|
|
Input, |
|
|
|
|
InputGroup, |
|
|
|
|
Modal, |
|
|
|
|
ModalHeader, |
|
|
|
|
ModalBody |
|
|
|
|
} from 'reactstrap'; |
|
|
|
|
import { |
|
|
|
|
controlGpDtlAction, |
|
|
|
|
controlGpFlightPlanAction |
|
|
|
|
} from '../../../modules/control/gp'; |
|
|
|
|
import { objectClickAction } from '../../../modules/control/map/actions/controlMapActions'; |
|
|
|
|
import { NavLink } from 'react-router-dom'; |
|
|
|
|
|
|
|
|
|
const HandlerModal = ({ modal, handler }) => { |
|
|
|
|
return ( |
|
|
|
|
<div |
|
|
|
|
className='vertically-centered-modal' |
|
|
|
|
style={{ maxWidth: '95vh', height: '95vh', margin: 0 }} |
|
|
|
|
> |
|
|
|
|
<Modal |
|
|
|
|
isOpen={modal} |
|
|
|
|
toggle={handler} |
|
|
|
|
className='modal-dialog-centered modal-lg modal-video' |
|
|
|
|
style={{ margin: '0px auto', maxWidth: '90%', minHeight: '100vh' }} |
|
|
|
|
> |
|
|
|
|
<ModalHeader toggle={handler}>실시간 영상보기</ModalHeader> |
|
|
|
|
<ModalBody className='pal-modal-body'> |
|
|
|
|
<> |
|
|
|
|
<iframe |
|
|
|
|
width='100%' |
|
|
|
|
height='100%' |
|
|
|
|
src='https://www.youtube.com/embed/_g3GX_Dr_AA?si=K2QakM3sI5N1V5pe' |
|
|
|
|
title='YouTube video player' |
|
|
|
|
frameborder='0' |
|
|
|
|
allow='accelerometer; autoplay=1; mute=1; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' |
|
|
|
|
allowfullscreen |
|
|
|
|
></iframe> |
|
|
|
|
</> |
|
|
|
|
</ModalBody> |
|
|
|
|
</Modal> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
const ControlReportList = props => { |
|
|
|
|
const { controlGpList } = useSelector(state => state.controlGpState); |
|
|
|
|
const [filterId, setFilterId] = useState(''); |
|
|
|
@ -24,6 +61,12 @@ const ControlReportList = props => {
|
|
|
|
|
|
|
|
|
|
// useEffect(() => {}, [filterId]);
|
|
|
|
|
|
|
|
|
|
const [modal, setModal] = useState(false); |
|
|
|
|
|
|
|
|
|
const handler = () => { |
|
|
|
|
setModal(false); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className='left-layer'> |
|
|
|
|
<div className='layer-content'> |
|
|
|
@ -100,7 +143,12 @@ const ControlReportList = props => {
|
|
|
|
|
|
|
|
|
|
{item.objectId.includes('NAMWON') ? ( |
|
|
|
|
<dt> |
|
|
|
|
<div className='data-list'> |
|
|
|
|
<div |
|
|
|
|
className='data-list' |
|
|
|
|
onClick={() => { |
|
|
|
|
setModal(true); |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{/* <NavLink |
|
|
|
|
to='/system/multi/views' |
|
|
|
|
target='_blank' |
|
|
|
@ -108,13 +156,15 @@ const ControlReportList = props => {
|
|
|
|
|
> |
|
|
|
|
<span>실시간 영상보기</span> |
|
|
|
|
</NavLink> */} |
|
|
|
|
<a |
|
|
|
|
style={{ width: '100%' }} |
|
|
|
|
href='https://youtube.com/live/_g3GX_Dr_AA?feature=share' |
|
|
|
|
target='_blank' |
|
|
|
|
> |
|
|
|
|
|
|
|
|
|
<span>실시간 영상보기</span> |
|
|
|
|
</a> |
|
|
|
|
{/* <iframe |
|
|
|
|
src='https://www.youtube.com/embed/_g3GX_Dr_AA?si=K2QakM3sI5N1V5pe' |
|
|
|
|
title='YouTube video player' |
|
|
|
|
frameborder='0' |
|
|
|
|
allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' |
|
|
|
|
allowfullscreen |
|
|
|
|
></iframe> */} |
|
|
|
|
</div> |
|
|
|
|
</dt> |
|
|
|
|
) : ( |
|
|
|
@ -138,6 +188,7 @@ const ControlReportList = props => {
|
|
|
|
|
} |
|
|
|
|
})} |
|
|
|
|
</div> |
|
|
|
|
{modal ? <HandlerModal modal={modal} handler={handler} /> : <></>} |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|