adapt the style of userinfo-card

4 files changed, 71 insertions, 32 deletions

diff --git a/front-end/src/component/userinfo-card/index.css b/front-end/src/component/userinfo-card/index.css
index e5c7b4e..5493460 100644
--- a/front-end/src/component/userinfo-card/index.css
+++ b/front-end/src/component/userinfo-card/index.css
@@ -2,11 +2,31 @@
     border-top: 3px solid #2497ba;
 }
 
-.panel-default > .panel-heading {
-    background-color: #dadada;
+.panel-default > .userinfo-panel-heading{
+    padding-bottom: 5px;
+    /*border-bottom: 0.5px solid #333333;*/
+    display: flex;
+    justify-content: space-between;
 }
 
+.panel-report-num{
+    font-size: 14px;
+    color: rgba(0,0,0,.4);
+}
 .panel-body-ul{
     list-style: none!important;
     padding: 0!important;
+}
+
+.userinfo-panel-body{
+    font-size: 15.5px;
+    line-height: initial;
+    padding-top: 0;
+    padding-bottom: 0;
+    border-top: 1px solid #ddd;
+}
+
+.user-avatar{
+    height: 35px;
+    width: 35px;
 }
\ 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
index 6aacbe3..ec5fbd3 100644
--- a/front-end/src/component/userinfo-card/index.jsx
+++ b/front-end/src/component/userinfo-card/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import NavTop from 'component/nav-top/index.jsx';
-// import './index.css';
+import './index.css';
 import {Image, Card, Button, List, Icon} from 'semantic-ui-react'
 class UserInfoCard extends React.Component {
     constructor(props){
@@ -15,12 +15,22 @@ class UserInfoCard extends React.Component {
             <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 className="panel-heading userinfo-panel-heading">
+                        <div>
+                            <h3 className="panel-title">
+                                <i className="fa fa-user"></i>&nbsp; Your Info
+                            </h3>
+                            <span className="panel-report-num">
+                                report num: 4
+                            </span>
+                        </div>
+
+                        <div>
+                            <img className="user-avatar" src="http://s.gravatar.com/avatar/6ccc9d4e8fc9f75d253b5a28e05c11b8" alt=""/>
+
+                        </div>
                     </div>
-                    <div className="panel-body">
+                    <div className="panel-body userinfo-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>
@@ -29,8 +39,8 @@ class UserInfoCard extends React.Component {
                             <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 className="panel-footer clearfix">
+                    </div>
                 </div>
             </div>
         );
diff --git a/front-end/src/page/portal/index.jsx b/front-end/src/page/portal/index.jsx
index 3f9b6cb..de542f0 100644
--- a/front-end/src/page/portal/index.jsx
+++ b/front-end/src/page/portal/index.jsx
@@ -14,6 +14,7 @@ class Portal extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
+            username: '',
             isLoading: false,
             machines:[],
             userinfo: {}
@@ -22,6 +23,9 @@ class Portal extends React.Component {
     }
     componentDidMount(){
         let user = _util.getStorage('userInfo')
+        this.setState({
+            username: user.username,
+        });
         console.log(user.token)
         this.loadUserMachineManageList();
     }
@@ -39,7 +43,7 @@ class Portal extends React.Component {
     loadUserMachineManageList(page=1){
         _user.getUserMachineManageList().then(res => {
             this.setState({
-                machines: res.machines,
+                machines: res.results,
                 total: res.count,
                 isLoading: false
             });
diff --git a/front-end/src/util/machine-table/index.jsx b/front-end/src/util/machine-table/index.jsx
index 356bc32..d590bde 100644
--- a/front-end/src/util/machine-table/index.jsx
+++ b/front-end/src/util/machine-table/index.jsx
@@ -4,17 +4,20 @@ import {Icon, Table, Label, Message, Button} from 'semantic-ui-react'
 import Pagination from 'util/pagination/index.jsx'
 import './index.css';
 
-function Bubble(props) {
-
-    if (props.num <= 0) {
+function LastestLink(props) {
+    let _list = props.list
+    if (_list <= 0) {
         return null;
     }
-    let className = props.name + 'IconClassName';
-    return (
-        <Label circular size="mini" className={"mini-label " + className}>
-            {props.num}
-        </Label>
-    );
+
+    let ret = _list.map((item, index) => {
+        return (
+            <Link color='linkedin' to={'detailInfo/' + item.record.uuid}>
+                 {item.branch}
+            </Link>
+        );
+    });
+    return ret;
 }
 
 // general basic table
@@ -44,16 +47,18 @@ class MachineTable extends React.Component {
         let style = {
             display: 'show'
         };
-        let listBody = _list.map((record, index) => {
-            let machine = record.machine_info[0];
+        let listBody = _list.map((machineItem, index) => {
+            let machine = machineItem
             let system = machine.os_name + ' ' + machine.os_version + ' ' + machine.comp_name + ' ' + machine.comp_version;
             let alias = machine.alias;
+            let lastest = machine.lastest;
+            let state = machine.state;
 
+            let reports = machine.reports
 
-            let trend = record.trend
-            let improvedIconClassName = trend.improved > 0 ? 'improved' : 'anonymous'
-            let quoIconClassName = trend.quo > 0 ? 'quo' : 'anonymous'
-            let regressiveIconClassName = trend.regressive > 0 ? 'regressive' : 'anonymous'
+            // let improvedIconClassName = trend.improved > 0 ? 'improved' : 'anonymous'
+            // let quoIconClassName = trend.quo > 0 ? 'quo' : 'anonymous'
+            // let regressiveIconClassName = trend.regressive > 0 ? 'regressive' : 'anonymous'
             return (
 
                 <Table.Row key={index}>
@@ -64,24 +69,24 @@ class MachineTable extends React.Component {
                     <Table.Cell><a href="#">{system}</a></Table.Cell>
 
                     {/*State*/}
-                    <Table.Cell>acitve</Table.Cell>
+                    <Table.Cell>{state}</Table.Cell>
 
                     {/*lastest-records*/}
-
                     <Table.Cell textAlign='center'>
-                        <Icon className={"bgc-clear " + improvedIconClassName} name='smile outline' size='large'/>
-                        <Bubble num={trend.improved} name="improved"/>
+                        {/*<Icon className={"bgc-clear " + improvedIconClassName} name='smile outline' size='large'/>*/}
+                        {/*<Bubble num={trend.improved} name="improved"/>*/}
+                        <LastestLink list={lastest}/>
                     </Table.Cell>
 
                     {/*machine history*/}
                     <Table.Cell textAlign='center'>
-                        <Link color='linkedin' to={'machineInfo/' + record.uuid}>
+                        <Link color='linkedin' to={'machineInfo/' + '123'}>
                             <Icon name='linkify'/> Link
                         </Link>
                     </Table.Cell>
 
                     {/*date*/}
-                    <Table.Cell>{record.add_time}</Table.Cell>
+                    <Table.Cell>{}</Table.Cell>
                 </Table.Row>
             );
         });