fix error

public/js/admin_bundle.js

@@ -87810,7 +87810,7 @@ var ListItem = function ListItem(_ref) {
 
     return _react2.default.createElement(
         _semanticUiReact.Table.Row,
-        null,
+        { style: { color: (0, _tools.padding)(data.timestamp, 13, 1, '0') < Date.now() - 60000 ? '#f00' : 'inherit' } },
         _react2.default.createElement(
             _semanticUiReact.Table.Cell,
             null,
@@ -93764,6 +93764,8 @@ var _semanticUiReact = __webpack_require__(8);
 
 var _actions = __webpack_require__(20);
 
+var _tools = __webpack_require__(147);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -93787,7 +93789,10 @@ var LocStatusWloc = function (_React$Component) {
         }
 
         return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = LocStatusWloc.__proto__ || Object.getPrototypeOf(LocStatusWloc)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-            loc: []
+            loc: [],
+            ui: {
+                colLoading: false
+            }
         }, _this.tick = null, _this.runTick = function () {
             _this.getStatus();
         }, _this.getLocList = function () {
@@ -93804,6 +93809,10 @@ var LocStatusWloc = function (_React$Component) {
                 _this.setState({
                     loc: json.data.record || []
                 }, function () {
+                    _this.setState({
+                        ui: {
+                            colLoading: true
+                        } }, function () {});
                     _this.getStatus();
                     _this.tick = setInterval(_this.runTick, 5000);
                 });
@@ -93813,6 +93822,7 @@ var LocStatusWloc = function (_React$Component) {
                 toggleLoading = _this$props2.toggleLoading,
                 showDialog = _this$props2.showDialog;
 
+
             fetch('/api/wristband/getstatus', (0, _actions.getRequest)()).then(function (response) {
                 return response.json();
             }).then(function (json) {
@@ -93833,7 +93843,10 @@ var LocStatusWloc = function (_React$Component) {
                 }
 
                 _this.setState({
-                    loc: locs
+                    loc: locs,
+                    ui: {
+                        colLoading: false
+                    }
                 });
             });
         }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -93852,6 +93865,7 @@ var LocStatusWloc = function (_React$Component) {
     }, {
         key: 'render',
         value: function render() {
+            var _this2 = this;
 
             return _react2.default.createElement(
                 _semanticUiReact.Container,
@@ -93866,16 +93880,17 @@ var LocStatusWloc = function (_React$Component) {
                             _react2.default.createElement(_semanticUiReact.Header, { as: 'h5', content: t.name }),
                             _react2.default.createElement(
                                 _semanticUiReact.Segment,
-                                { style: { height: '400px', overflow: 'auto' } },
+                                { style: { height: '400px', overflow: 'auto' }, loading: _this2.state.ui.colLoading },
                                 _react2.default.createElement(
                                     _semanticUiReact.List,
                                     null,
                                     t.list ? t.list.map(function (tt, idx) {
+                                        var isExpire = (0, _tools.padding)(tt.timestamp, 13, 1, '0') < Date.now() - 60000 ? true : false;
                                         return _react2.default.createElement(
                                             _semanticUiReact.List.Item,
                                             { key: idx },
-                                            tt.name ? _react2.default.createElement(_semanticUiReact.Label, { basic: true, color: 'blue', size: 'tiny', content: tt.name }) : null,
+                                            tt.name ? _react2.default.createElement(_semanticUiReact.Label, { basic: true, color: isExpire ? 'red' : 'blue', size: 'tiny', content: tt.name }) : null,
-                                            _react2.default.createElement(_semanticUiReact.Label, { basic: true, color: 'teal', size: 'tiny', content: tt.mac })
+                                            _react2.default.createElement(_semanticUiReact.Label, { basic: true, color: isExpire ? 'red' : 'teal', size: 'tiny', content: tt.mac })
                                         );
                                     }) : null
                                 )

src/components/AdminPage/Wristband/LocStatus/ListItem.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import {Table} from 'semantic-ui-react';
-import {convertTime} from '../../../../tools';
+import {convertTime, padding} from '../../../../tools';
 
 const ListItem = ({i18n, data}) => {
 
     return (
-        <Table.Row>
+        <Table.Row style={{color: padding(data.timestamp, 13, 1, '0') < (Date.now() - 60000) ? '#f00' : 'inherit'}}>
             <Table.Cell>{data.wristband}</Table.Cell>
             <Table.Cell>{data.name}</Table.Cell>
             <Table.Cell>{data.locname}</Table.Cell>

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

@@ -1,10 +1,14 @@
 import React from 'react';
 import {Grid, Header, Container, Segment, List, Label} from 'semantic-ui-react';
 import {getRequest} from '../../../../actions';
+import {padding} from '../../../../tools'
 
 class LocStatusWloc extends React.Component {
     state = {
-        loc: []
+        loc: [],
+        ui: {
+            colLoading: false
+        }
     }
     tick = null
 
@@ -30,6 +34,10 @@ class LocStatusWloc extends React.Component {
                 this.setState({
                     loc: json.data.record || []
                 }, ()=>{
+                    this.setState({
+                        ui:{
+                            colLoading: true
+                        }}, ()=>{})
                     this.getStatus();
                     this.tick = setInterval(this.runTick, 5000);
                 })
@@ -38,6 +46,7 @@ class LocStatusWloc extends React.Component {
 
     getStatus = () => {
         let {toggleLoading, showDialog} = this.props;
+        
         fetch('/api/wristband/getstatus', getRequest())
             .then(response=>response.json())
             .then(json => {
@@ -58,7 +67,10 @@ class LocStatusWloc extends React.Component {
                 }
 
                 this.setState({
-                    loc: locs
+                    loc: locs,
+                    ui:{
+                        colLoading: false
+                    }
                 })
             })
     }
@@ -72,20 +84,21 @@ class LocStatusWloc extends React.Component {
                         this.state.loc.map((t,idx) => (
                             <Grid.Column key={idx} className="clearfix" >
                                 <Header as="h5" content={t.name} />
-                                <Segment style={{height: '400px', overflow: 'auto'}}>
+                                <Segment style={{height: '400px', overflow: 'auto'}} loading={this.state.ui.colLoading}>
                                     <List>
                                         {
                                             t.list ? 
-                                            t.list.map((tt, idx) => (
+                                            t.list.map((tt, idx) => {
-                                                <List.Item key={idx}>
+                                                let isExpire = padding(tt.timestamp, 13, 1, '0') < (Date.now() - 60000) ? true : false;
+                                                return (<List.Item key={idx}>
                                                     {
                                                         tt.name ? (
-                                                            <Label basic color="blue" size="tiny" content={tt.name}/>
+                                                            <Label basic color={isExpire ? 'red' : 'blue'} size="tiny" content={tt.name}/>
                                                         ) : null
                                                     }
-                                                    <Label basic color="teal" size="tiny" content={tt.mac}/>
+                                                    <Label basic color={isExpire ? 'red' : 'teal'} size="tiny" content={tt.mac}/>
-                                                </List.Item>
+                                                </List.Item>)
-                                            )) 
+                                            }) 
                                             : null
                                         }
                                     </List>