add scrollToAnchor in info-list
authorHongyuan Ma <CS_MaleicAcid@163.com>
Mon, 25 Jun 2018 01:22:39 +0000 (09:22 +0800)
committerHongyuan Ma <CS_MaleicAcid@163.com>
Mon, 25 Jun 2018 01:22:39 +0000 (09:22 +0800)
front-end/src/app.jsx
front-end/src/component/farmer-card/index.jsx
front-end/src/component/info-list/index.jsx
front-end/src/page/detailInfo/index.css
front-end/src/page/detailInfo/index.jsx
front-end/src/util/basic-table/index.jsx
web/apps/users/serializer.py

index 7b5b0f9b3a00acbe8b81c55bb97bc5fa18e12e02..3ed34ff655d85c9ac7846afe2d5a67385cb20017 100644 (file)
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDom from 'react-dom';
-import {BrowserRouter as Router, Route, Link, Redirect, Switch} from 'react-router-dom';
+import {HashRouter as Router, Route, Link, Redirect, Switch} from 'react-router-dom';
 import createHistory from 'history/createHashHistory'
 const history = createHistory()
 import {spring, AnimatedRoute, AnimatedSwitch} from 'react-router-transition';
@@ -72,7 +72,7 @@ class App extends React.Component {
             </Layout>
         );
         return (
-            <Router history={history}>
+            <Router>
                 <AnimatedSwitch
                     atEnter={bounceTransition.atEnter}
                     atLeave={bounceTransition.atLeave}
index 4cec78eead5ed251e6a8aec7fba7896fe156a073..5503f5682df97cb2b96f86e8daeb11eb7ce98cf9 100644 (file)
@@ -17,7 +17,7 @@ class FarmerCard extends React.Component {
                 <Card>
                     <Card.Content>
                         <Image floated='right' size='mini'
-                               src='http://www.semantic-ui.cn/images/avatar2/small/lena.png'/>
+                               src={machine.avatar}/>
                         <Card.Header>Farmer: {machine.alias}</Card.Header>
                         <Card.Meta>report num: {machine.reports}</Card.Meta>
                         <Card.Description>
index f7142da71ea416c10b866290fd4b1260ea85a36c..7548cbc5193241e2f4f3f28643aae41697f13bea 100644 (file)
@@ -7,6 +7,13 @@ class InfoList extends React.Component {
         super(props);
     }
 
+    scrollToAnchor(anchorName)  {
+        if (anchorName) {
+            let anchorElement = document.getElementById(anchorName);
+            if(anchorElement) { anchorElement.scrollIntoView(); }
+        }
+    }
+
     render() {
         let info = this.props.info
         let name = this.props.name
@@ -14,7 +21,8 @@ class InfoList extends React.Component {
             let _list2 = 0
             return (
                 <List.Item as='li'>
-                    <h3>{key}</h3>
+                    <a href='javascript:void(0)' id={'name'+key} onClick={()=>this.scrollToAnchor('name' + key)}><h3>{'name' + key}</h3></a>
+                    {/*<h3>{key}</h3>*/}
                     <List.List as='ul'>
                         <List.Item className="clear-list-style" >{info[key]}</List.Item>
                     </List.List>
@@ -25,7 +33,8 @@ class InfoList extends React.Component {
             <List className='info-list' as='ul'>
 
                 <List.Item as='li'>
-                    <h2>{name} Info</h2>
+
+                    <a href='javascript:void(0)' id={name + 'Info'} onClick={()=>this.scrollToAnchor(name + 'Info')}><h2>{name} Info</h2></a>
                     <List.List as='ul'>
 
                         {_list}
index aabe1baaec44e5a5a3f3b026da15e15917999915..0cc1b936d26bd58c464835d3717f8645fe51e9f2 100644 (file)
@@ -1,5 +1,6 @@
 .card-container{
-    margin-left: 0%;
+    margin-left: 5px;
+    margin-right: 5px;
 }
 .card-div{
     padding-left: 2px;
index 8f7e30b60e0ea6ec3de6200e4fe914977b9b8a43..f881b745ba32cdc57ce7206181891aa8938fe0a6 100644 (file)
@@ -73,7 +73,7 @@ class DetailInfo extends React.Component {
             });
 
             return (
-                <Table celled striped key={key}>
+                <Table celled striped>
                     <Table.Header>
                         <Table.Row>
                             <Table.HeaderCell colSpan="4">Clients:{key} scale:10 <a href=""> >>prev</a>
index bcd26782e5d268791f397c825c5aff235b892595..47c5198503168a1c45185835f8ddc55787e30a91 100644 (file)
@@ -17,6 +17,41 @@ function Bubble(props) {
     );
 }
 
+//todo
+// function TrendCell(trend) {
+//     const isNull = !list;
+//     const isEmpty = !isNull && !list.length;
+//     let improvedIconClassName = trend.improved > 0 ? 'improved' : 'anonymous'
+//     let quoIconClassName = trend.quo > 0 ? 'quo' : 'anonymous'
+//     let regressiveIconClassName = trend.regressive > 0 ? 'regressive' : 'anonymous'
+//     if (!trend.is_first) {
+//         return (
+//             <Table.Cell  textAlign='center'>
+//                 first report
+//             </Table.Cell>
+//         );
+//     } else {
+//         return (
+//             <div>
+//                 <Table.Cell textAlign='center'>
+//                     <Icon className={"bgc-clear " + improvedIconClassName} name='smile outline' size='large'/>
+//                     <Bubble num={trend.improved} name="improved"/>
+//                 </Table.Cell>
+//                 <Table.Cell textAlign='center'>
+//                     <Icon className={"bgc-clear " + quoIconClassName} name='meh outline' size='large'/>
+//                     <Bubble num={trend.quo} name="quo"/>
+//                 </Table.Cell>
+//                 <Table.Cell textAlign='center'>
+//                     <Icon className={"bgc-clear " + regressiveIconClassName} name='frown outline'
+//                           size='large'/>
+//                     <Bubble num={trend.regressive} name="regressive"/>
+//                 </Table.Cell>
+//             </div>
+//         );
+//     }
+//
+// }
+
 // general basic table
 class BasicTable extends React.Component {
     constructor(props) {
@@ -67,6 +102,7 @@ class BasicTable extends React.Component {
                     <Table.Cell>{branch}</Table.Cell>
 
                     {/*trending-data*/}
+
                     <Table.Cell textAlign='center'>
                         <Icon className={"bgc-clear " + improvedIconClassName} name='smile outline' size='large'/>
                         <Bubble num={trend.improved} name="improved"/>
@@ -80,11 +116,15 @@ class BasicTable extends React.Component {
                               size='large'/>
                         <Bubble num={trend.regressive} name="regressive"/>
                     </Table.Cell>
+
+
                     <Table.Cell textAlign='center'>
                         <Link color='linkedin' to={'detailInfo/' + record.uuid}>
                             <Icon name='linkify'/> Link
                         </Link>
                     </Table.Cell>
+
+
                     {/*date*/}
                     <Table.Cell>{record.add_time}</Table.Cell>
                 </Table.Row>
index ec047ed994cbf3177d67375b9d1d8bafcd775600..350fde186384e77ff12ed29a9422f4b9a40b8c37 100644 (file)
@@ -3,6 +3,7 @@ from rest_framework import serializers
 from test_records.models import TestRecord
 from users.models import UserMachine, Alias, UserProfile
 from django.db.models import Q
+import hashlib
 
 class AliasSerializer(serializers.ModelSerializer):
     '''
@@ -21,10 +22,11 @@ class UserMachineSerializer(serializers.ModelSerializer):
     alias = serializers.SerializerMethodField()
     reports = serializers.SerializerMethodField()
     owner = serializers.SerializerMethodField()
+    avatar = serializers.SerializerMethodField()
     class Meta:
         model = UserMachine
         # fields = "__all__"
-        fields = ('alias', 'os_name', 'os_version', 'comp_name', 'comp_version', 'reports', 'owner')
+        fields = ('alias', 'os_name', 'os_version', 'comp_name', 'comp_version', 'reports', 'owner' , 'avatar')
 
     def get_alias(self, obj):
         target_alias = Alias.objects.filter(id=obj.alias_id).first()
@@ -39,4 +41,11 @@ class UserMachineSerializer(serializers.ModelSerializer):
     def get_owner(self, obj):
         target_owner = UserProfile.objects.filter(id=obj.machine_owner_id).values('email').first()
 
-        return target_owner['email']
\ No newline at end of file
+        return target_owner['email']
+
+    def get_avatar(self, obj):
+        target_owner = UserProfile.objects.filter(id=obj.machine_owner_id).values('email').first()
+
+        avatar = 'http://s.gravatar.com/avatar/' + hashlib.md5(target_owner['email']).hexdigest()
+        print avatar
+        return  avatar
\ No newline at end of file