add Accordion when info too long

7 files changed, 156 insertions, 28 deletions

diff --git a/front-end/src/component/info-list/index.css b/front-end/src/component/info-list/index.css
index 4db74ba..2876f2e 100644
--- a/front-end/src/component/info-list/index.css
+++ b/front-end/src/component/info-list/index.css
@@ -2,5 +2,23 @@
     font-size: 18px!important;
 }
 .clear-list-style {
-    list-style: none!important;
+    list-style-type: none!important;
+}
+.pre {
+    white-space:pre-wrap;
+}
+
+/*Simulation style*/
+.accordion .title{
+    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
+    line-height: 1.28571429em;
+    /*margin: calc(2rem - .14285714em) 0 1rem;*/
+    font-weight: 700;
+    padding: 0;
+    font-size: 1.28571429rem;
+    color: #4183c4!important;
+}
+
+.accordion .title i{
+    color: #000!important;
 }
\ No newline at end of file
diff --git a/front-end/src/component/info-list/index.jsx b/front-end/src/component/info-list/index.jsx
index 7548cbc..681fa2d 100644
--- a/front-end/src/component/info-list/index.jsx
+++ b/front-end/src/component/info-list/index.jsx
@@ -1,43 +1,83 @@
 import React from 'react';
 
 import './index.css';
-import {List, Item} from 'semantic-ui-react'
+import {List, Item, Accordion} from 'semantic-ui-react'
 class InfoList extends React.Component {
     constructor(props) {
         super(props);
     }
 
-    scrollToAnchor(anchorName)  {
+    scrollToAnchor(anchorName) {
         if (anchorName) {
             let anchorElement = document.getElementById(anchorName);
-            if(anchorElement) { anchorElement.scrollIntoView(); }
+            if (anchorElement) {
+                anchorElement.scrollIntoView();
+            }
         }
     }
 
     render() {
         let info = this.props.info
         let name = this.props.name
-        let _list = Object.keys(info).map(key => {
-            let _list2 = 0
-            return (
-                <List.Item as='li'>
-                    <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>
-                </List.Item>
-            );
-        });
+        let _list = []
+        React.Children.forEach(Object.keys(info), (child, i) => {
+            // console.log('child: ' + i)
+            let Item
+            if(info[child].length >= 300) {
+                console.log(child+' is too long')
+
+                let panel =[{
+                    title: child,
+                    content: info[child],
+                }]
+
+                 Item = (
+                    <List.Item className='clear-list-style' key={i} value='-'>
+                        <Accordion className='pre' defaultActiveIndex={[0, 0]} panels={panel} exclusive={false} fluid />
+
+                        {/*<a href='javascript:void(0)' id={'' + child} onClick={() => this.scrollToAnchor('' + child)}>*/}
+                            {/*<h3>{'' + child}301</h3></a>*/}
+                        {/*/!*<h3>{key}</h3>*!/*/}
+                        {/*<List.List as='ul'>*/}
+                            {/*<List.Item className="clear-list-style pre">{info[child]}</List.Item>*/}
+                        {/*</List.List>*/}
+
+                    </List.Item>
+                )
+            }else{
+                 Item = (
+                    <List.Item as='li' key={i}>
+                        <a href='javascript:void(0)' id={'' + child} onClick={() => this.scrollToAnchor('' + child)}>
+                            <h3>{'' + child}</h3></a>
+                        {/*<h3>{key}</h3>*/}
+                        <List.List as='ul'>
+                            <List.Item className="clear-list-style pre">{info[child]}</List.Item>
+                        </List.List>
+                    </List.Item>
+                )
+            }
+
+
+            _list.push({
+                key: `label${i}`,
+                value: Item
+            })
+        })
+
+        const itemComponents = _list.map(item => {
+            return <div key={item.key}>{item.value}</div>
+        })
+
         return (
             <List className='info-list' as='ul'>
 
                 <List.Item as='li'>
 
-                    <a href='javascript:void(0)' id={name + 'Info'} onClick={()=>this.scrollToAnchor(name + 'Info')}><h2>{name} Info</h2></a>
+                    <a href='javascript:void(0)' id={name + 'Info'} onClick={() => this.scrollToAnchor(name + 'Info')}>
+                        <h2>{name} Info</h2></a>
                     <List.List as='ul'>
 
-                        {_list}
+                        {itemComponents}
                         {/*<List.Item as='li'>*/}
                         {/*<a href='#'>Link to somewhere</a>*/}
                         {/*</List.Item>*/}
@@ -47,8 +87,6 @@ class InfoList extends React.Component {
                     </List.List>
 
                 </List.Item>
-
-                <List.Item as='li'>Warranty</List.Item>
             </List>
         );
     }
diff --git a/front-end/src/page/detailInfo/index.css b/front-end/src/page/detailInfo/index.css
index 8d5a658..6da6a00 100644
--- a/front-end/src/page/detailInfo/index.css
+++ b/front-end/src/page/detailInfo/index.css
@@ -1,3 +1,7 @@
+.record-title{
+    padding-left: 14px;
+}
+
 .card-container{
     margin-left: 5px;
     margin-right: 5px;
diff --git a/front-end/src/util/basic-table/index.jsx b/front-end/src/util/basic-table/index.jsx
index 47c5198..21f2474 100644
--- a/front-end/src/util/basic-table/index.jsx
+++ b/front-end/src/util/basic-table/index.jsx
@@ -143,9 +143,9 @@ class BasicTable extends React.Component {
                         <Table.HeaderCell rowSpan='2'>Date</Table.HeaderCell>
                     </Table.Row>
                     <Table.Row>
-                        <Table.HeaderCell>improved</Table.HeaderCell>
-                        <Table.HeaderCell>quo</Table.HeaderCell>
-                        <Table.HeaderCell>regressive</Table.HeaderCell>
+                        <Table.HeaderCell>improvement</Table.HeaderCell>
+                        <Table.HeaderCell>status quo</Table.HeaderCell>
+                        <Table.HeaderCell>regression</Table.HeaderCell>
                     </Table.Row>
 
                 </Table.Header>
diff --git a/web/apps/test_records/models.py b/web/apps/test_records/models.py
index 9b3e278..856eb53 100644
--- a/web/apps/test_records/models.py
+++ b/web/apps/test_records/models.py
@@ -222,10 +222,10 @@ class TestResult(models.Model):
     threads = models.IntegerField(verbose_name="threads", help_text="threads of the test result")
 
     MODE_CHOICE = (
-        ('simple', 'simple'),
-        ('other', 'other'),
+        ('simple', 1),
+        ('other', 2),
     )
-    mode = models.IntegerField(choices=MODE_CHOICE, default='simple', verbose_name="mode", help_text="test mode")
+    mode = models.IntegerField(choices=MODE_CHOICE, verbose_name="mode", help_text="test mode")
     add_time = models.DateTimeField(default=timezone.now, verbose_name="test result added time")
 
     class Meta:
diff --git a/web/db_tools/data/alias_data.py b/web/db_tools/data/alias_data.py
index e5fd402..d9a643b 100644
--- a/web/db_tools/data/alias_data.py
+++ b/web/db_tools/data/alias_data.py
@@ -1,6 +1,74 @@
 row_data = [
     {
+        'name': 'Avocado',
+        'is_used': True
+    },
+    {
         'name': 'Cabbage',
         'is_used': True
     },
+    {
+        'name': 'Cucumber',
+        'is_used': False
+    },
+    {
+        'name': 'Celery',
+        'is_used': False
+    },
+    {
+        'name': 'Celtuce',
+        'is_used': False
+    },
+    {
+        'name': 'Chaya',
+        'is_used': False
+    },
+    {
+        'name': 'Chicory',
+        'is_used': False
+    },
+    {
+        'name': 'Cress',
+        'is_used': False
+    },
+    {
+        'name': 'Dandelion',
+        'is_used': False
+    },
+    {
+        'name': 'Eggplant',
+        'is_used': False
+    },
+    {
+        'name': 'Fiddlehead',
+        'is_used': False
+    },
+    {
+        'name': 'Grape',
+        'is_used': False
+    },
+    {
+        'name': 'Luffa',
+        'is_used': False
+    },
+    {
+        'name': 'Kale',
+        'is_used': False
+    },
+    {
+        'name': 'Kale',
+        'is_used': False
+    },
+    {
+        'name': 'Pepper',
+        'is_used': False
+    },
+    {
+        'name': 'Sorrel',
+        'is_used': False
+    },
+    {
+        'name': 'Squash',
+        'is_used': False
+    },
 ]
diff --git a/web/pgperffarm/settings.py b/web/pgperffarm/settings.py
index ed73111..c6210ff 100644
--- a/web/pgperffarm/settings.py
+++ b/web/pgperffarm/settings.py
@@ -142,8 +142,8 @@ REST_FRAMEWORK = {
 
 DB_ENUM = {
     "mode":{
-        "simple":'simple',
-        "other":'other'
+        "simple":1,
+        "other":2
     },
     "status": {
         "none": -1,