diff options
author | Hongyuan Ma | 2018-06-30 14:15:57 +0000 |
---|---|---|
committer | Hongyuan Ma | 2018-06-30 14:15:57 +0000 |
commit | 999b95ba32e47c9775bb2de8dfd86ef5bfcf693f (patch) | |
tree | 4e2c3e5406b684473d4d3e1298ad4b9a5cd71005 | |
parent | 0ee49da927c64950c6e85895d3af29cd76481c72 (diff) |
add Accordion when info too long
-rw-r--r-- | front-end/src/component/info-list/index.css | 20 | ||||
-rw-r--r-- | front-end/src/component/info-list/index.jsx | 76 | ||||
-rw-r--r-- | front-end/src/page/detailInfo/index.css | 4 | ||||
-rw-r--r-- | front-end/src/util/basic-table/index.jsx | 6 | ||||
-rw-r--r-- | web/apps/test_records/models.py | 6 | ||||
-rw-r--r-- | web/db_tools/data/alias_data.py | 68 | ||||
-rw-r--r-- | web/pgperffarm/settings.py | 4 |
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, |