update

public/css/main.css

@@ -8,6 +8,7 @@ div#app {
 .login-grid {
     height: 100%;
 }
+
 .login-column {
     max-width: 450px;
 }
@@ -19,6 +20,11 @@ div#app {
     clear: both;
     visibility: hidden;
 }
+
 .hide-element {
     display: 'none' !important;
 }
+
+.pointer {
+    cursor: pointer !important;
+}

public/js/admin_bundle.js

@@ -87851,6 +87851,11 @@ var ListItem = function ListItem(_ref) {
             null,
             data.val7 ? '' + parseInt(data.val7, 16) : ''
         ),
+        _react2.default.createElement(
+            _semanticUiReact.Table.Cell,
+            null,
+            data.val9 ? '' + parseInt(data.val9, 16) : ''
+        ),
         _react2.default.createElement(
             _semanticUiReact.Table.Cell,
             null,
@@ -87896,6 +87901,11 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
+var sort_icon = {
+    "asc": "caret down",
+    "desc": "caret up"
+};
+
 var LocStatus = function (_React$Component) {
     _inherits(LocStatus, _React$Component);
 
@@ -87912,7 +87922,11 @@ var LocStatus = function (_React$Component) {
 
         return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = LocStatus.__proto__ || Object.getPrototypeOf(LocStatus)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
             autoRefresh: false,
-            list: []
+            list: [],
+            sort: {
+                field: '',
+                order: ''
+            }
         }, _this.tick = null, _this.changeRefresh = function () {
             _this.setState({
                 autoRefresh: !_this.state.autoRefresh
@@ -87932,7 +87946,11 @@ var LocStatus = function (_React$Component) {
                 toggleLoading = _this$props.toggleLoading,
                 showDialog = _this$props.showDialog;
 
-            fetch('/api/wristband/getstatus', (0, _actions.getRequest)()).then(function (response) {
+            var json = {
+                sort: _this.state.sort
+            };
+
+            fetch('/api/wristband/getstatus', (0, _actions.getRequest)(json)).then(function (response) {
                 return response.json();
             }).then(function (json) {
                 if (json.status != 1) return showDialog(json.message);
@@ -87940,6 +87958,24 @@ var LocStatus = function (_React$Component) {
                     list: [].concat(_toConsumableArray(json.data.record || []))
                 });
             });
+        }, _this.handlerSort = function (tag) {
+            if (!tag) return;
+            var sort = _this.state.sort;
+            if (tag == sort.field) {
+                if (sort.order == 'asc') sort.order = 'desc';else sort.order = 'asc';
+            } else {
+                sort.field = tag;
+                sort.order = 'asc';
+            }
+
+            _this.setState({
+                sort: sort
+            }, function () {
+                _this.getList();
+            });
+        }, _this.renderSortIcon = function (tag) {
+            if (_this.state.sort.field == tag) return _react2.default.createElement(_semanticUiReact.Icon, { size: 'mini', corner: true, name: sort_icon[_this.state.sort.order] });
+            return null;
         }, _temp), _possibleConstructorReturn(_this, _ret);
     }
 
@@ -87980,8 +88016,11 @@ var LocStatus = function (_React$Component) {
                                 null,
                                 _react2.default.createElement(
                                     _semanticUiReact.Table.HeaderCell,
-                                    null,
+                                    { className: 'pointer', onClick: function onClick() {
-                                    '\u624B\u74B0ID'
+                                            _this2.handlerSort('mac');
+                                        } },
+                                    '\u624B\u74B0ID',
+                                    this.renderSortIcon('mac')
                                 ),
                                 _react2.default.createElement(
                                     _semanticUiReact.Table.HeaderCell,
@@ -87990,33 +88029,59 @@ var LocStatus = function (_React$Component) {
                                 ),
                                 _react2.default.createElement(
                                     _semanticUiReact.Table.HeaderCell,
-                                    null,
+                                    { className: 'pointer', onClick: function onClick() {
-                                    '\u6B65\u6578'
+                                            _this2.handlerSort('val3');
+                                        } },
+                                    '\u6B65\u6578',
+                                    this.renderSortIcon('val3')
                                 ),
                                 _react2.default.createElement(
                                     _semanticUiReact.Table.HeaderCell,
-                                    null,
+                                    { className: 'pointer', onClick: function onClick() {
-                                    '\u5269\u9918\u96FB\u91CF'
+                                            _this2.handlerSort('val4');
+                                        } },
+                                    '\u5269\u9918\u96FB\u91CF',
+                                    this.renderSortIcon('val4')
                                 ),
                                 _react2.default.createElement(
                                     _semanticUiReact.Table.HeaderCell,
-                                    null,
+                                    { className: 'pointer', onClick: function onClick() {
-                                    'HR'
+                                            _this2.handlerSort('val2');
+                                        } },
+                                    'HR',
+                                    this.renderSortIcon('val2')
                                 ),
                                 _react2.default.createElement(
                                     _semanticUiReact.Table.HeaderCell,
-                                    null,
+                                    { className: 'pointer', onClick: function onClick() {
-                                    'SBP'
+                                            _this2.handlerSort('val5');
+                                        } },
+                                    'SBP',
+                                    this.renderSortIcon('val5')
                                 ),
                                 _react2.default.createElement(
                                     _semanticUiReact.Table.HeaderCell,
-                                    null,
+                                    { className: 'pointer', onClick: function onClick() {
-                                    'DBP'
+                                            _this2.handlerSort('val6');
+                                        } },
+                                    'DBP',
+                                    this.renderSortIcon('val6')
                                 ),
                                 _react2.default.createElement(
                                     _semanticUiReact.Table.HeaderCell,
-                                    null,
+                                    { className: 'pointer', onClick: function onClick() {
-                                    '\u5361\u8DEF\u91CC'
+                                            _this2.handlerSort('val7');
+                                        } },
+                                    '\u5361\u8DEF\u91CC',
+                                    this.renderSortIcon('val7')
+                                ),
+                                _react2.default.createElement(
+                                    _semanticUiReact.Table.HeaderCell,
+                                    { className: 'pointer', onClick: function onClick() {
+                                            _this2.handlerSort('val9');
+                                        } },
+                                    'SOS',
+                                    this.renderSortIcon('val9')
                                 ),
                                 _react2.default.createElement(
                                     _semanticUiReact.Table.HeaderCell,

route/api/wristband.js

@@ -98,7 +98,8 @@ router
                         arr.val9 || '',
                         arr.val10 || '',
                         arr.val11 || '',
-                    arr.timestamp || '']
+                        arr.timestamp || ''
+                    ]
 
                     pros.push(tool.promiseQuery(res, lq, lp, 'q2'));
 
@@ -125,26 +126,6 @@ router
         n();
     })
     .post('/getstatus', (req, res, n) => {
-        // let query = "select * from \
-        //     (\
-        //         select xx.`mac`, xx.`val11`, dd.`val2`, dd.`val3`, dd.`val4`, dd.`val5`, dd.`val6`, dd.`val7`, dd.`val8`, dd.`val9`, dd.`val10`, dd.`timestamp`, l.`name` \
-        //         from ??.?? xx \
-        //         left join ??.?? l \
-        //         on l.`serialnumber` = xx.`devid` \
-        //         left join ( \
-        //             select * from (\
-        //                 select * from ??.?? \
-        //                 where `timestamp` > unix_timestamp() - 20 \
-        //                 order by `timestamp` desc \
-        //             ) t1 group by `mac`\
-        //         ) dd \
-        //         on dd.`mac` = xx.`mac`\
-        //         where xx.`timestamp` > unix_timestamp() - 20 \
-        //         order by xx.`val11` desc, xx.`timestamp` desc \
-        //         limit 2147483647\
-        //     ) x \
-        //     group by `mac`";
-        // let param = [config.db.db9, 'rawdata', config.db.db9, 'location', config.db.db9, 'rawdata']
 
         let query = "select w.`name`, l.`name` as locname, l2.`name` as last_locname, ll.*\
             from ??.?? w\
@@ -163,9 +144,36 @@ router
             left join ??.?? l2 \
             on \
             l2.`serialnumber` = ll.`devid` \
-            order by w.`uid`";
+            ";
         let param = [config.db.db9, 'wristband', config.db.db9, 'rawdata', config.db.db9, 'lastdata', config.db.db9, 'location', config.db.db9, 'location', ];
 
+        let sortfield = '';
+        let sortorder = '';
+
+        if (req.body.data && req.body.data.sort) {
+            if (req.body.data.sort.field) sortfield = req.body.data.sort.field;
+            if (req.body.data.sort.order) sortorder = req.body.data.sort.order;
+        }
+
+        switch (sortfield) {
+            case 'mac':
+            case 'val2':
+            case 'val3':
+            case 'val4':
+            case 'val5':
+            case 'val6':
+            case 'val7':
+            case 'val8':
+            case 'val9':
+            case 'val10':
+            case 'val11':
+                query += `order by ll.${sortfield} ${sortorder}`;
+                break;
+            default:
+                query += 'order by w.`uid`';
+                break;
+        }
+
         res.db.query(query, param, (err, row) => {
             if (err) return rt.err(res, err, n, 'ERR8000');
 

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

@@ -14,6 +14,7 @@ const ListItem = ({i18n, data}) => {
             <Table.Cell>{data.val5 ? `${parseInt(data.val5, 16)}` : ''}</Table.Cell>
             <Table.Cell>{data.val6 ? `${parseInt(data.val6, 16)}` : ''}</Table.Cell>
             <Table.Cell>{data.val7 ? `${parseInt(data.val7, 16)}` : ''}</Table.Cell>
+            <Table.Cell>{data.val9 ? `${parseInt(data.val9, 16)}` : ''}</Table.Cell>
             <Table.Cell>{data.timestamp ? convertTime(data.timestamp, true) : ''}</Table.Cell>
         </Table.Row>
     )

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

@@ -1,12 +1,21 @@
 import React from 'react';
-import {Container, Segment, Table, Label, Checkbox} from 'semantic-ui-react';
+import {Container, Segment, Table, Label, Checkbox, Icon} from 'semantic-ui-react';
 import {getRequest} from '../../../../actions';
 import ListItem from './ListItem';
 
+const sort_icon = {
+    "asc": "caret down",
+    "desc": "caret up"
+}
+
 class LocStatus extends React.Component{
     state = {
         autoRefresh: false,
-        list: []
+        list: [],
+        sort: {
+            field: '',
+            order: ''
+        }
     }
     tick = null
 
@@ -40,7 +49,11 @@ class LocStatus extends React.Component{
 
     getList = () => {
         let {toggleLoading, showDialog} = this.props;
-        fetch('/api/wristband/getstatus', getRequest())
+        let json = {
+            sort: this.state.sort
+        };
+
+        fetch('/api/wristband/getstatus', getRequest(json))
             .then(response=>response.json())
             .then(json => {
                 if(json.status != 1) return showDialog(json.message);
@@ -50,6 +63,30 @@ class LocStatus extends React.Component{
             });
     }
 
+    handlerSort = (tag) => {
+        if(!tag) return ;
+        let sort = this.state.sort;
+        if(tag == sort.field){
+            if(sort.order == 'asc') sort.order = 'desc';
+            else sort.order = 'asc';
+        }else{
+            sort.field = tag;
+            sort.order = 'asc';
+        }
+
+        this.setState({
+            sort
+        }, () => {
+            this.getList();
+        })
+    }
+
+    renderSortIcon = (tag) => {
+        if(this.state.sort.field == tag)
+            return (<Icon size="mini" corner name={sort_icon[this.state.sort.order]} />);
+        return null;
+    }
+
     render (){
         let {i18n} = this.props;
         return (
@@ -59,14 +96,45 @@ class LocStatus extends React.Component{
                     <Table>
                         <Table.Header>
                             <Table.Row>
-                                <Table.HeaderCell>手環ID</Table.HeaderCell>
+                                <Table.HeaderCell className="pointer" onClick={()=>{ this.handlerSort('mac') }}>
+                                    手環ID
+                                    {
+                                        this.renderSortIcon('mac')
+                                    }
+                                </Table.HeaderCell>
                                 <Table.HeaderCell>地點</Table.HeaderCell>
-                                <Table.HeaderCell>步數</Table.HeaderCell>
+                                <Table.HeaderCell className="pointer" onClick={()=>{this.handlerSort('val3')}}>
-                                <Table.HeaderCell>剩餘電量</Table.HeaderCell>
+                                    步數
-                                <Table.HeaderCell>HR</Table.HeaderCell>
+                                    {
-                                <Table.HeaderCell>SBP</Table.HeaderCell>
+                                        this.renderSortIcon('val3')
-                                <Table.HeaderCell>DBP</Table.HeaderCell>
+                                    }
-                                <Table.HeaderCell>卡路里</Table.HeaderCell>
+                                </Table.HeaderCell>
+                                <Table.HeaderCell className="pointer" onClick={()=>{this.handlerSort('val4')}}>
+                                    剩餘電量
+                                    {
+                                        this.renderSortIcon('val4')
+                                    }
+                                </Table.HeaderCell>
+                                <Table.HeaderCell className="pointer" onClick={()=>{this.handlerSort('val2')}}>
+                                    HR
+                                    {this.renderSortIcon('val2')}
+                                </Table.HeaderCell>
+                                <Table.HeaderCell className="pointer" onClick={()=>{this.handlerSort('val5')}}>
+                                    SBP
+                                    {this.renderSortIcon('val5')}
+                                </Table.HeaderCell>
+                                <Table.HeaderCell className="pointer" onClick={()=>{this.handlerSort('val6')}}>
+                                    DBP
+                                    {this.renderSortIcon('val6')}
+                                </Table.HeaderCell>
+                                <Table.HeaderCell className="pointer" onClick={()=>{this.handlerSort('val7')}}>
+                                    卡路里
+                                    {this.renderSortIcon('val7')}
+                                </Table.HeaderCell>
+                                <Table.HeaderCell className="pointer" onClick={()=>{this.handlerSort('val9')}}>
+                                    SOS
+                                    {this.renderSortIcon('val9')}
+                                </Table.HeaderCell>
                                 <Table.HeaderCell>時間</Table.HeaderCell>
                                 {/*<Table.HeaderCell></Table.HeaderCell>*/}
                             </Table.Row>