add wristband path history info
This commit is contained in:
@@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
import {Container, Segment, Grid, List, Label} from 'semantic-ui-react';
|
||||
|
||||
class ModbusPreview extends React.Component {
|
||||
|
||||
render() {
|
||||
|
||||
return (
|
||||
null
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default ModbusPreview;
|
||||
@@ -1,13 +1,14 @@
|
||||
import React from 'react';
|
||||
import { Table, Button } from 'semantic-ui-react';
|
||||
|
||||
const ListItem = ({ i18n, data, delWristband, editWristband }) => {
|
||||
const ListItem = ({ i18n, data, delWristband, editWristband, showPathInfo }) => {
|
||||
|
||||
return (
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Button content="Edit" basic onClick={()=>{editWristband(1, data)}} />
|
||||
<Button content="Delete" basic onClick={()=>{delWristband(data.uid)}} />
|
||||
<Button content="地點紀錄" basic onClick={()=>{showPathInfo(data.mac, data.name)}} />
|
||||
</Table.Cell>
|
||||
<Table.Cell>{data.mac}</Table.Cell>
|
||||
<Table.Cell>{data.name}</Table.Cell>
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Modal, List, Menu, Button, Input, Label } from 'semantic-ui-react';
|
||||
import Datetime from 'react-datetime';
|
||||
import {convertTime, padding} from '../../../../tools'
|
||||
|
||||
const getDayTime = ()=>{
|
||||
let d = new Date();
|
||||
d.setHours(0, 0, 0, 0);
|
||||
return d.getTime();
|
||||
}
|
||||
|
||||
class WristbandPathInfo extends React.Component{
|
||||
state = {
|
||||
list: [],
|
||||
stime: (getDayTime()),
|
||||
etime: (Date.now())
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
|
||||
}
|
||||
|
||||
closeView = () => {
|
||||
this.setState({
|
||||
list: [],
|
||||
stime: (getDayTime()),
|
||||
etime: (Date.now())
|
||||
}, ()=>{
|
||||
this.props.closeModal();
|
||||
})
|
||||
}
|
||||
|
||||
getList = () => {
|
||||
let {mac, showDialog, getRequest} = this.props;
|
||||
fetch('/api/wristband/getwristbandlocpath', getRequest({
|
||||
mac,
|
||||
stime: Math.floor(this.state.stime / 1000),
|
||||
etime: Math.floor(this.state.etime / 1000)
|
||||
}))
|
||||
.then(response=>response.json())
|
||||
.then(json => {
|
||||
if(json.status != 1) return showDialog(json.message);
|
||||
this.setState({
|
||||
list: json.data.record || []
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
let {closeModal, open} = this.props;
|
||||
return (
|
||||
<Modal open={open} onClose={()=>{this.closeView()}}>
|
||||
<Modal.Header>
|
||||
手環名稱: {this.props.wbname}
|
||||
</Modal.Header>
|
||||
<Modal.Content>
|
||||
<Menu>
|
||||
<Menu.Item>
|
||||
<Input label="起始時間" input={
|
||||
<Datetime dateFormat="YYYY-MM-DD"
|
||||
timeFormat="HH:mm"
|
||||
value={this.state.stime}
|
||||
input={true}
|
||||
onChange={(e)=>{ this.setState({stime: (e.valueOf())}) }} />
|
||||
}/>
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
<Input label="結束時間" input={
|
||||
<Datetime dateFormat="YYYY-MM-DD"
|
||||
timeFormat="HH:mm"
|
||||
value={this.state.etime}
|
||||
input={true}
|
||||
onChange={(e)=>{ this.setState({etime: (e.valueOf())}) }} />
|
||||
}/>
|
||||
</Menu.Item>
|
||||
<Menu.Menu position="right">
|
||||
<Menu.Item>
|
||||
<Button type="button" content="搜尋" size="tiny" basic onClick={()=>{this.getList()}} />
|
||||
</Menu.Item>
|
||||
</Menu.Menu>
|
||||
</Menu>
|
||||
<List divided>
|
||||
{
|
||||
this.state.list.map((t,idx) => {
|
||||
return (
|
||||
<List.Item key={idx}>
|
||||
{
|
||||
t.devname ?
|
||||
`時間 ${convertTime(t.wloclogtst, true)} 位於 ${t.devname} 附近` :
|
||||
`時間 ${convertTime(t.wloclogtst, true)} 不在範圍內`
|
||||
}
|
||||
</List.Item>
|
||||
)
|
||||
})
|
||||
}
|
||||
</List>
|
||||
</Modal.Content>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default WristbandPathInfo;
|
||||
@@ -3,6 +3,7 @@ import { Container, Segment, Table, Button } from 'semantic-ui-react';
|
||||
import {getRequest} from '../../../../actions';
|
||||
import ListItem from './ListItem';
|
||||
import WristbandModal from './WristbandModal';
|
||||
import WristbandPathInfo from './WristbandPathInfo';
|
||||
|
||||
const stateDefault = ()=>({
|
||||
list: [],
|
||||
@@ -10,6 +11,11 @@ const stateDefault = ()=>({
|
||||
open: false,
|
||||
type: 0,
|
||||
data: {}
|
||||
},
|
||||
pathinfo: {
|
||||
open: false,
|
||||
mac: '',
|
||||
name: ''
|
||||
}
|
||||
})
|
||||
|
||||
@@ -84,6 +90,24 @@ class WristbandInfo extends React.Component {
|
||||
})
|
||||
}
|
||||
|
||||
showPathInfo = (mac, name) => {
|
||||
if(!mac) return ;
|
||||
this.setState({
|
||||
pathinfo:{
|
||||
open: true,
|
||||
mac,
|
||||
name
|
||||
}
|
||||
})
|
||||
}
|
||||
closePathInfo = () => {
|
||||
this.setState({
|
||||
pathinfo: {
|
||||
...stateDefault().pathinfo
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
let { i18n } = this.props;
|
||||
return (
|
||||
@@ -105,7 +129,7 @@ class WristbandInfo extends React.Component {
|
||||
<Table.Body>
|
||||
{
|
||||
this.state.list.map((t,idx) => (
|
||||
<ListItem key={idx} data={t} i18n={i18n} delWristband={this.delWristband} editWristband={this.openModal}/>
|
||||
<ListItem key={idx} data={t} i18n={i18n} delWristband={this.delWristband} editWristband={this.openModal} showPathInfo={this.showPathInfo}/>
|
||||
))
|
||||
}
|
||||
</Table.Body>
|
||||
@@ -117,6 +141,13 @@ class WristbandInfo extends React.Component {
|
||||
data={this.state.modal.data}
|
||||
closeModal={this.closeModal}
|
||||
submitModal={this.submitModal} />
|
||||
<WristbandPathInfo i18n={i18n}
|
||||
open={this.state.pathinfo.open}
|
||||
mac={this.state.pathinfo.mac}
|
||||
wbname={this.state.pathinfo.name}
|
||||
closeModal={this.closePathInfo}
|
||||
showDialog={this.props.showDialog}
|
||||
getRequest={getRequest} />
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -49,10 +49,10 @@ class WristbandPage extends React.Component{
|
||||
定位點設定
|
||||
</Menu.Item>
|
||||
<Menu.Item active={this.state.page == 'locstatus'} onClick={()=>{ this.changePage('locstatus'); }}>
|
||||
位置資訊
|
||||
即時資訊總覽
|
||||
</Menu.Item>
|
||||
<Menu.Item active={this.state.page == 'locstatus_wloc'} onClick={()=>{ this.changePage('locstatus_wloc'); }}>
|
||||
即時資訊總覽
|
||||
位置資訊
|
||||
</Menu.Item>
|
||||
</Menu.Menu>
|
||||
</Menu.Item>
|
||||
|
||||
@@ -16,6 +16,7 @@ const MainMenu = ({i18n, show, toggleMenu, children, permissions, showDashboard,
|
||||
<MItem toLink="/admin/iocmd" txt={i18n && 't' in i18n ? i18n.t('menu.item.iocmd') : ''} permission={permissions.iocmd} onClick={()=>toggleMenu()} />
|
||||
<MItem toLink="/admin/schedule" txt={i18n && 't' in i18n ? i18n.t('menu.item.schedule') : ''} permission={permissions.schedule} onClick={()=>toggleMenu()} />
|
||||
<MItem toLink="/admin/modbus" txt={i18n && 't' in i18n ? i18n.t('menu.item.modbus') : ''} permission={permissions.modbus} onClick={()=>toggleMenu()} />
|
||||
<MItem toLink="/admin/modbuspreview" txt={i18n && 't' in i18n ? i18n.t('menu.item.modbus_preview') : ''} permission={permissions.modbus} onClick={()=>toggleMenu()} />
|
||||
<MItem toLink="/admin/modbuscmd" txt={i18n && 't' in i18n ? i18n.t('menu.item.modbuscmd') : ''} permission={permissions.modbus} onClick={()=>toggleMenu()} />
|
||||
<MItem toLink="/admin/modbuslog" txt={i18n && 't' in i18n ? i18n.t('menu.item.modbuslog') : ''} permission={permissions.modbus} onClick={()=>toggleMenu()} />
|
||||
<MItem toLink="/admin/link" txt={i18n && 't' in i18n ? i18n.t('menu.item.link') : ''} permission={permissions.link} onClick={()=>toggleMenu()} />
|
||||
|
||||
Reference in New Issue
Block a user