add modbus preview page

src/components/AdminPage/ModbusPreview/DeviceField.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import {Grid, Segment, Header, List} from 'semantic-ui-react';
+import StatusItem from './StatusItem';
+
+const DevField = ({ i18n, data }) => {
+
+    return (
+        <Grid.Column>
+            <Header as="h4" content={`Name: ${data.name} / Node: ${data.node}`} />
+            <Segment style={{height: '400px', overflow: 'auto'}}>
+                <List divided>
+                {
+                    data.list.map((t,idx) => (
+                        <StatusItem key={idx} i18n={i18n} data={t} />
+                    ))
+                }
+                </List>
+            </Segment>
+        </Grid.Column>
+    )
+}
+
+export default DevField;

src/components/AdminPage/ModbusPreview/StatusItem.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { List, Label } from 'semantic-ui-react';
+import {convertTime} from '../../../tools'
+
+const StatusItem = ({ i18n, data }) => {
+    let iotype = i18n&&i18n.getResource&&i18n.language ? i18n.getResource(i18n.language + '.translation.porttype') : [];
+    let iot = {};
+    for(let i in iotype){
+        iot[iotype[i].code] = iotype[i].name;
+    }
+    let tc = {
+        "1": "orange",
+        "2": "green",
+        "3": "violet",
+        "4": "brown"
+    }
+    return (
+        <List.Item>
+            <Label basic size="small" color="teal" content={`Port: ${data.port}`} />
+            <Label basic size="small" color={tc[data.type] || 'blue'} content={`Type: ${iot[data.type]}`} />
+            {
+                data.type == 3 || data.type == 4 ? 
+                (<Label basic size="small" color="teal" content={`Name: ${data.name}`} />) :
+                null
+            }
+            <Label basic size="small" color="blue" content={`數值: ${data.value2}`}/>
+            <List.Description style={{textAlign: 'right'}}>
+                {`最後更新於: ${convertTime(data.tst, true)}`}
+            </List.Description>
+        </List.Item>
+    )
+}
+
+export default StatusItem;

src/components/AdminPage/ModbusPreview/index.js

@@ -1,12 +1,62 @@
 import React from 'react';
 import {Container, Segment, Grid, List, Label} from 'semantic-ui-react';
+import DevField from './DeviceField';
 
 class ModbusPreview extends React.Component {
+    state = {
+        list: []
+    }
+
+    tick = null
+
+    componentDidMount(){
+        this.getList()
+        this.tick = setInterval(this.runTick, 10000);
+    }
+
+    componentWillUnmount(){
+        clearInterval(this.tick);
+    }
+
+    runTick = () => {
+        this.getList();
+    }
+
+    getList = () => {
+        let {getRequest, showDialog} = this.props;
+        fetch('/api/modbus/getalliostatus', getRequest())
+            .then(response=>response.json())
+            .then(json => {
+                if(json.status != 1) return showDialog(json.message);
+                let dev = json.data.rt.device || [];
+                let status = json.data.record || [];
+                for(let i in dev) { 
+                    dev[i].list = [];
+                    for(let j in status){
+                        if(status[j].node == dev[i].node){
+                            dev[i].list.push(status[j]);
+                        }
+                    }
+                }
+
+                this.setState({
+                    list: dev
+                });
+            })
+    }
 
     render() {
-
+        let {i18n} = this.props;
         return (
-            null
+            <Container fluid style={{paddingLeft: '10px', paddingRight: '10px'}}>
+                <Grid columns={3}>
+                    {
+                        this.state.list.map((t,idx) => (
+                            <DevField key={idx} i18n={i18n} data={t} />
+                        ))
+                    }
+                </Grid>
+            </Container>
         )
     }
 }

src/components/AdminPage/Wristband/LocStatusWloc/index.js

@@ -47,7 +47,12 @@ class LocStatusWloc extends React.Component {
     getStatus = () => {
         let {toggleLoading, showDialog} = this.props;
         
-        fetch('/api/wristband/getstatus', getRequest())
+        fetch('/api/wristband/getstatus', getRequest({
+            sort: {
+                field: 'time',
+                order: 'desc'
+            }
+        }))
             .then(response=>response.json())
             .then(json => {
                 if(json.status != 1) return showDialog(json.message);