82 lines
4.0 KiB
JavaScript
82 lines
4.0 KiB
JavaScript
import React from 'react';
|
|
import { Modal, Grid, List, Menu, Icon, Message } from 'semantic-ui-react';
|
|
import {convertTime} from '../../../tools';
|
|
import ImgGrid from './EvtImgGrid';
|
|
|
|
const EventModal = ({ i18n, open, name, list, sel, closeEventModal, changeSelectEvent,refreshEvt, delEvent }) => {
|
|
|
|
return (
|
|
<Modal open={open} onClose={()=>{closeEventModal()}} size="fullscreen">
|
|
<Modal.Header content={`IPCam: ${name}`} />
|
|
<Modal.Content>
|
|
<Grid>
|
|
<Grid.Column width={4}>
|
|
<Menu vertical>
|
|
<Menu.Item>
|
|
<Menu.Header>
|
|
事件列表
|
|
<Icon name="refresh" style={{
|
|
cursor: "pointer",
|
|
float: 'right'
|
|
}} onClick={()=>{refreshEvt(-1)}}/>
|
|
</Menu.Header>
|
|
<Menu.Menu>
|
|
{
|
|
list.map((t,idx) =>{
|
|
let n = t.name;
|
|
let time = n.split('-')[1];
|
|
return (
|
|
<Menu.Item key={idx} active={sel == idx} >
|
|
<span onClick={()=>{changeSelectEvent(idx)}}
|
|
style={{cursor: "pointer"}}>{convertTime(time, true)}</span>
|
|
<Icon name="download" title="下載事件" style={{
|
|
cursor: "pointer",
|
|
float: 'right'
|
|
}} onClick={()=>{window.open(`/dlevent/${t.name}`, '_blank')}}/>
|
|
<Icon name="trash" title="刪除事件" style={{
|
|
cursor: "pointer",
|
|
float: 'right'
|
|
}} onClick={()=>{delEvent(t.name)}}/>
|
|
</Menu.Item>
|
|
)})
|
|
}
|
|
</Menu.Menu>
|
|
</Menu.Item>
|
|
</Menu>
|
|
</Grid.Column>
|
|
<Grid.Column width={12}>
|
|
{
|
|
sel != -1 && list[sel].files.video.length > 0 ? (
|
|
<Message>
|
|
<Message.Header>影片下載</Message.Header>
|
|
<p>
|
|
{
|
|
list[sel].files.video.map((t, idx) => {
|
|
|
|
return (
|
|
<div key={idx}>
|
|
<a href={`/dlcamvideo/${list[sel].name}/${t}`} target="_blank">{t}</a>
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
</p>
|
|
</Message>
|
|
) :null
|
|
}
|
|
{
|
|
sel != -1 ?
|
|
(
|
|
<ImgGrid i18n={i18n}
|
|
dname={list[sel].name}
|
|
list={list[sel].files.img} />
|
|
) : null
|
|
}
|
|
</Grid.Column>
|
|
</Grid>
|
|
</Modal.Content>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default EventModal; |