add modbus log

src/components/AdminPage/ModbusLog/DeviceList.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import {Menu, Header} from 'semantic-ui-react';
+import ListItem from './DeviceListItem';
+
+const DeviceList = ({i18n, list, selected, toggleSelect}) => {
+
+	return (
+		<Menu vertical={true}>
+			<Menu.Item>
+				<Menu.Header content="裝置列表" />
+				<Menu.Menu>
+					{
+						list.map((t, idx) => {
+							return (
+								<ListItem key={idx}
+                                    i18n={i18n}
+                                    data={t}
+                                    toggleSelect={toggleSelect}
+                                    checked={selected.indexOf(t.uid) == -1 ? false : true} />
+							)
+						})
+					}
+				</Menu.Menu>
+			</Menu.Item>
+		</Menu>
+	)
+}
+
+export default DeviceList;

src/components/AdminPage/ModbusLog/DeviceListItem.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import {Menu, Checkbox} from 'semantic-ui-react';
+
+const ListItem = ({i18n, data, checked, toggleSelect}) => {
+
+    return (
+        <Menu.Item>
+            <Checkbox label={data.name} checked={checked} onChange={(e,d)=>{ toggleSelect(data.uid) }}/>
+        </Menu.Item>
+    )
+}
+
+export default ListItem;

src/components/AdminPage/ModbusLog/LogListItem.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import {Table} from 'semantic-ui-react';
+import {convertTime} from '../../../tools'
+
+const ListItem = ({i18n, data}) => {
+    let iotype = i18n&&i18n.getResource&&i18n.language ? i18n.getResource(i18n.language + '.translation.porttype') : [];
+
+    let t = '';
+    for(let i in iotype) {
+        if(data.type == iotype[i].code) t = iotype[i].name;
+    }
+
+    return (
+        <Table.Row>
+            <Table.Cell>{data.devname}</Table.Cell>
+            <Table.Cell>{data.aioname}</Table.Cell>
+            <Table.Cell>{data.port}</Table.Cell>
+            <Table.Cell>{t}</Table.Cell>
+            <Table.Cell>{data.value}</Table.Cell>
+            <Table.Cell>{convertTime(data.tst)}</Table.Cell>
+        </Table.Row>
+    )
+}
+
+export default ListItem;

src/components/AdminPage/ModbusLog/LogPanel.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import {Table, Segment} from 'semantic-ui-react';
+import ListItem from './LogListItem';
+
+const LogPanel = ({i18n, log}) => {
+
+    return (
+        <Segment>
+            <Table>
+                <Table.Header>
+                    <Table.Row>
+                        <Table.HeaderCell>裝置名稱</Table.HeaderCell>
+                        <Table.HeaderCell>接口名稱</Table.HeaderCell>
+                        <Table.HeaderCell>接口號碼</Table.HeaderCell>
+                        <Table.HeaderCell>接口類型</Table.HeaderCell>
+                        <Table.HeaderCell>數值</Table.HeaderCell>
+                        <Table.HeaderCell>時間</Table.HeaderCell>
+                    </Table.Row>
+                </Table.Header>
+                <Table.Body>
+                    {
+                        log.map((t,idx)=>{
+                            return (
+                                <ListItem key={idx} i18n={i18n} 
+                                    data={t} />
+                            )
+                        })
+                    }
+                </Table.Body>
+            </Table>
+        </Segment>
+    )
+}
+
+export default LogPanel;

src/components/AdminPage/ModbusLog/index.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import {Container, Menu, Grid, Button, Input, Segment, Table} from 'semantic-ui-react';
+import DeviceList from './DeviceList';
+import {convertTime} from '../../../tools';
+import Datetime from 'react-datetime';
+import LogPanel from './LogPanel';
+
+let getDayTime = () => {
+    let date = new Date();
+    date.setHours(0,0,0,0);
+    return date.getTime();
+}
+
+class ModbusLogPage extends React.Component {
+    state = {
+        selected: [],
+        stime: getDayTime(),
+        etime: Date.now()
+    }
+
+    toggleSelect = (id) => {
+        let selected = [...this.state.selected];
+        let idx = selected.indexOf(id);
+        if(idx == -1) selected.push(id);
+        else selected.splice(idx, 1);
+
+        this.setState({
+            selected
+        })
+    }
+
+    getLogList = () => {
+        let ids = [...this.state.selected];
+        let data = {
+            ids, 
+            stime: Math.floor(this.state.stime /1000),
+            etime: Math.floor(this.state.etime)
+        }
+
+        if(ids.length == 0) return this.props.showDialog('請選擇裝置');
+
+        this.props.getMBLog(data);
+    }
+
+    componentDidMount(){
+        this.props.getList();
+
+        this.props.router.setRouteLeaveHook(this.props.route, () => {
+			this.props.clearList();
+		});
+    }
+
+    render(){
+        let {i18n, list, log} = this.props;
+
+        return (
+            <Container>
+                <Menu>
+                    <Menu.Item>
+                        <Input label="起始時間" input={
+                        <Datetime dateFormat="YYYY-MM-DD" 
+                            timeFormat="HH:mm" 
+                            value={convertTime(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={convertTime(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.getLogList()}} />
+                        </Menu.Item>
+                    </Menu.Menu>
+                </Menu>
+				<Grid>
+					<Grid.Column width={4}>
+						<DeviceList i18n={i18n}
+                            list={list}
+                            selected={this.state.selected}
+                            toggleSelect={this.toggleSelect}
+                            />
+					</Grid.Column>
+					<Grid.Column width={12}>
+						<LogPanel i18n={i18n} 
+                            log={log} />
+					</Grid.Column>
+				</Grid>
+			</Container>
+        )
+    }
+}
+
+export default ModbusLogPage;