summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorHongyuan Ma2018-06-30 14:15:57 +0000
committerHongyuan Ma2018-06-30 14:15:57 +0000
commit999b95ba32e47c9775bb2de8dfd86ef5bfcf693f (patch)
tree4e2c3e5406b684473d4d3e1298ad4b9a5cd71005
parent0ee49da927c64950c6e85895d3af29cd76481c72 (diff)
add Accordion when info too long
-rw-r--r--front-end/src/component/info-list/index.css20
-rw-r--r--front-end/src/component/info-list/index.jsx76
-rw-r--r--front-end/src/page/detailInfo/index.css4
-rw-r--r--front-end/src/util/basic-table/index.jsx6
-rw-r--r--web/apps/test_records/models.py6
-rw-r--r--web/db_tools/data/alias_data.py68
-rw-r--r--web/pgperffarm/settings.py4
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,