add userinfo-card

8 files changed, 119 insertions, 14 deletions

diff --git a/front-end/src/app.jsx b/front-end/src/app.jsx
index 3ed34ff..c2f23ec 100644
--- a/front-end/src/app.jsx
+++ b/front-end/src/app.jsx
@@ -13,6 +13,8 @@ import Home from './page/home/index.jsx'
 import Status from './page/status/index.jsx'
 import PPolicy from './page/ppolicy/index.jsx'
 import DetailInfo from './page/detailInfo/index.jsx'
+
+import Portal from './page/portal/index.jsx'
 // we need to map the `scale` prop we define below
 // to the transform style property
 function mapStyles(styles) {
@@ -64,6 +66,8 @@ class App extends React.Component {
                     <Route exact path="/home/" component={Home}/>
                     <Route exact path="/status/" component={Status}/>
                     <Route exact path="/ppolicy/" component={PPolicy}/>
+
+                    <Route exact path="/portal/" component={Portal}/>
                     <Route path="/detailInfo/:uuid" component={DetailInfo}/>
                     {/*<Route path="/detail/:uuid" component={DetailInfo}/>*/}
                     {/*<Redirect exact from="/order" to="/order/index"/>*/}
diff --git a/front-end/src/component/layout/theme.css b/front-end/src/component/layout/theme.css
index d179450..edb28f9 100644
--- a/front-end/src/component/layout/theme.css
+++ b/front-end/src/component/layout/theme.css
@@ -133,6 +133,8 @@ p {
 
 .panel-default {
     border-color: #ECECEC;
+    border: 1px solid transparent;
+    border-radius: 4px;
 }
 
 .panel-default > .panel-heading {
diff --git a/front-end/src/component/userinfo-card/index.css b/front-end/src/component/userinfo-card/index.css
new file mode 100644
index 0000000..e5c7b4e
--- /dev/null
+++ b/front-end/src/component/userinfo-card/index.css
@@ -0,0 +1,12 @@
+.panel-blue{
+    border-top: 3px solid #2497ba;
+}
+
+.panel-default > .panel-heading {
+    background-color: #dadada;
+}
+
+.panel-body-ul{
+    list-style: none!important;
+    padding: 0!important;
+}
\ No newline at end of file
diff --git a/front-end/src/component/userinfo-card/index.jsx b/front-end/src/component/userinfo-card/index.jsx
new file mode 100644
index 0000000..6aacbe3
--- /dev/null
+++ b/front-end/src/component/userinfo-card/index.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+import NavTop from 'component/nav-top/index.jsx';
+// import './index.css';
+import {Image, Card, Button, List, Icon} from 'semantic-ui-react'
+class UserInfoCard extends React.Component {
+    constructor(props){
+        super(props);
+    }
+    render(){
+        let userinfo = this.props.userinfo || {}
+
+        return (
+
+            <div className="farmer-card">
+                <div className="userinfo-panel panel panel-default panel-blue">
+
+                    <div className="panel-heading">
+                        <h3 className="panel-title">
+                            <i className="fa fa-user"></i>&nbsp; Your Info
+                        </h3>
+                    </div>
+                    <div className="panel-body">
+                        <p><strong>{userinfo.username}</strong></p>
+                        <ul className="panel-body-ul">
+                            <li><i className="fa fa-desktop fa-fw"></i> {userinfo.machine_num} machine(s)</li>
+                            <li><i className="fa fa-file fa-fw"></i> {userinfo.reports} report(s)</li>
+                            <li><i className="fa fa-code-fork fa-fw"></i> {userinfo.branches} branch(es) involved</li>
+                            <li><i className="fa fa-envelope-o fa-fw"></i> <a href={'mailto' + userinfo.email}></a>{userinfo.email}</li>
+                        </ul>
+                    </div>
+                    {/*<div className="panel-footer clearfix">*/}
+                    {/*</div>*/}
+                </div>
+            </div>
+        );
+    }
+}export default UserInfoCard;
+
diff --git a/front-end/src/page/portal/index.css b/front-end/src/page/portal/index.css
index e69de29..d53a1d5 100644
--- a/front-end/src/page/portal/index.css
+++ b/front-end/src/page/portal/index.css
@@ -0,0 +1,3 @@
+.panel-blue{
+    border-top: 3px solid #2497ba;
+}
\ No newline at end of file
diff --git a/front-end/src/page/portal/index.jsx b/front-end/src/page/portal/index.jsx
index c20f25b..3f4ca85 100644
--- a/front-end/src/page/portal/index.jsx
+++ b/front-end/src/page/portal/index.jsx
@@ -1,9 +1,12 @@
 import React from 'react';
-// import './index.css';
+import './index.css';
 import ResultFilter from 'component/result-filter/index.jsx';
 import BasicTable    from 'util/basic-table/index.jsx';
+import UserInfoCard from 'component/userinfo-card/index.jsx'
 import Record      from 'service/record-service.jsx'
 import PGUtil        from 'util/util.jsx'
+import User         from 'service/user-service.jsx'
+const _user = new User();
 
 const _util = new PGUtil();
 const _record = new Record();
@@ -15,6 +18,16 @@ class Portal extends React.Component {
         }
 
     }
+    componentDidMount(){
+        this.loadUserMachineManageList();
+    }
+    loadUserMachineManageList(){
+        _user.getUserMachineManageList().then(res => {
+            this.setState(res);
+        }, errMsg => {
+            _mm.errorTips(errMsg);
+        });
+    }
 
     render() {
         let show = this.state.isLoading ? "none" : "block";
@@ -23,15 +36,40 @@ class Portal extends React.Component {
         };
 
         return (
-            <div id="page-wrapper">
-                <h1>portal page</h1>
-                <p>
+            <div className="container-fluid detail-container">
+
+                <div className="col-md-3">
+
+                    {/*<Segment vertical>Farmer Info</Segment>*/}
+                    <UserInfoCard info={this.state.userinfo}></UserInfoCard>
 
-                </p>
+                    <div className="panel panel-default panel-blue">
+                        <div className="panel-heading">
+                            <h3 className="panel-title">
+                                <i className="fa fa-bookmark"></i>&nbsp; Shortcuts
+                            </h3>
+                        </div>
+                        <div className="list-group">
+                            <a href="\add-machine" className="list-group-item">
+                                <i className="fa fa-globe fa-fw"></i>&nbsp; Add a New Mchine
+                            </a>
+                            <a href="\logout" className="list-group-item">
+                                <i className="fa fa-arrow-left fa-fw"></i>&nbsp; Logout
+                            </a>
+                        </div>
+                    </div>
+                </div>
 
-                {/*<BasicTable list={this.state.list} total={this.state.total} current={this.state.currentPage} loadfunc={this.loadRecordList}/>*/}
+                <div className="col-md-9">
+                    <div className="record-title">
+                        <h2 >Welcome Back, {this.state.username}</h2>
+                    </div>
 
+
+                </div>
             </div>
+
+
         )
     }
 }
diff --git a/front-end/src/service/user-service.jsx b/front-end/src/service/user-service.jsx
index 611bd41..1ca1f0d 100644
--- a/front-end/src/service/user-service.jsx
+++ b/front-end/src/service/user-service.jsx
@@ -44,9 +44,16 @@ class User{
         });
     }
 
-    // getUserList(pageNum){
-    //     # todo
-    // }
+    getUserMachineManageList(pageNum){
+        let url = PGConstant.base_url + '/my-machine';
+        return _util.request({
+            type    : 'get',
+            url     : url,
+            data    : {
+                pageNum : pageNum
+            }
+        });
+    }
 }
 
 export default User;
\ No newline at end of file
diff --git a/front-end/src/util/basic-table/index.jsx b/front-end/src/util/basic-table/index.jsx
index c5677db..22d5b41 100644
--- a/front-end/src/util/basic-table/index.jsx
+++ b/front-end/src/util/basic-table/index.jsx
@@ -74,8 +74,8 @@ class BasicTable extends React.Component {
     }
 
     render() {
-        let branch = record.pg_info.pg_branch;
-        let _list = this.props.list
+        // let branch = record.pg_info.pg_branch;
+        let _list = this.props.list || []
         let style = {
             display: 'show'
         };
@@ -134,9 +134,9 @@ class BasicTable extends React.Component {
         return (
             <Table celled structured compact textAlign='center'>
                 <Table.Header>
-                    <Table.Row>
-                        <Table.HeaderCell rowSpan='9'>Branch: 10_STABLE</Table.HeaderCell>
-                    </Table.Row>
+                    {/*<Table.Row>*/}
+                        {/*<Table.HeaderCell rowSpan='9'>Branch: 10_STABLE</Table.HeaderCell>*/}
+                    {/*</Table.Row>*/}
                     <Table.Row>
                         <Table.HeaderCell rowSpan='2'>Alias</Table.HeaderCell>
                         <Table.HeaderCell rowSpan='2'>System</Table.HeaderCell>