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
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>*/}
</List.List>
</List.Item>
-
- <List.Item as='li'>Warranty</List.Item>
</List>
);
}
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: