From 01824de5055cd1f95c88049bce179b9f72600183 Mon Sep 17 00:00:00 2001
From: Hongyuan Ma <CS_MaleicAcid@163.com>
Date: Sun, 24 Jun 2018 23:52:01 +0800
Subject: [PATCH] add infolist component

---
 front-end/src/component/info-list/index.css |  6 +++
 front-end/src/component/info-list/index.jsx | 48 +++++++++++++++++++++
 front-end/src/page/detailInfo/index.jsx     | 34 +++++++++------
 3 files changed, 74 insertions(+), 14 deletions(-)
 create mode 100644 front-end/src/component/info-list/index.css
 create mode 100644 front-end/src/component/info-list/index.jsx

diff --git a/front-end/src/component/info-list/index.css b/front-end/src/component/info-list/index.css
new file mode 100644
index 0000000..4db74ba
--- /dev/null
+++ b/front-end/src/component/info-list/index.css
@@ -0,0 +1,6 @@
+.info-list{
+    font-size: 18px!important;
+}
+.clear-list-style {
+    list-style: none!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
new file mode 100644
index 0000000..f7142da
--- /dev/null
+++ b/front-end/src/component/info-list/index.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+import './index.css';
+import {List, Item} from 'semantic-ui-react'
+class InfoList extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    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'>
+                    <h3>{key}</h3>
+                    <List.List as='ul'>
+                        <List.Item className="clear-list-style" >{info[key]}</List.Item>
+                    </List.List>
+                </List.Item>
+            );
+        });
+        return (
+            <List className='info-list' as='ul'>
+
+                <List.Item as='li'>
+                    <h2>{name} Info</h2>
+                    <List.List as='ul'>
+
+                        {_list}
+                        {/*<List.Item as='li'>*/}
+                        {/*<a href='#'>Link to somewhere</a>*/}
+                        {/*</List.Item>*/}
+                        {/*<List.Item as='li'>Rebates</List.Item>*/}
+
+
+                    </List.List>
+
+                </List.Item>
+
+                <List.Item as='li'>Warranty</List.Item>
+            </List>
+        );
+    }
+}
+export default InfoList;
+
diff --git a/front-end/src/page/detailInfo/index.jsx b/front-end/src/page/detailInfo/index.jsx
index 84f23b5..8f7e30b 100644
--- a/front-end/src/page/detailInfo/index.jsx
+++ b/front-end/src/page/detailInfo/index.jsx
@@ -3,6 +3,7 @@ import './index.css';
 import {Table, Divider, Segment, Image, Label, Card, Button, List, Icon} from 'semantic-ui-react'
 import PGUtil        from 'util/util.jsx'
 import FarmerCard      from 'component/farmer-card/index.jsx'
+import InfoList      from 'component/info-list/index.jsx'
 import Record      from 'service/record-service.jsx'
 const _util = new PGUtil();
 const _record = new Record();
@@ -43,7 +44,8 @@ class DetailInfo extends React.Component {
     render() {
         let machine = this.state.recordInfo.test_machine || {};
         let dataset = this.state.recordInfo.dataset_info || {};
-
+        let meta_info = this.state.recordInfo.meta_info || {};
+        let linux_info = this.state.recordInfo.linux_info || {};
         let ro = dataset.ro || {};
         let rw = dataset.rw || {};
         console.log(machine)
@@ -194,19 +196,23 @@ class DetailInfo extends React.Component {
                         {/*</Segment>*/}
 
                         <div>
-                            <h2><a href="#linuxInfo">Linux Info</a></h2>
-                            <div className="" data-example-id="">
-                                <dl>
-                                    <dt><a href="#">Description lists</a></dt>
-                                    <dd>A description list is perfect for defining terms.</dd>
-                                    <dt>Euismod</dt>
-                                    <dd>
-                                    </dd>
-                                    <dd></dd>
-                                    <dt>Malesuada porta</dt>
-                                    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
-                                </dl>
-                            </div>
+                            {/*<h2><a href="#linuxInfo">Linux Info</a></h2>*/}
+                            {/*<div className="" data-example-id="">*/}
+                                {/*<dl>*/}
+                                    {/*<dt><a href="#">Description lists</a></dt>*/}
+                                    {/*<dd>A description list is perfect for defining terms.</dd>*/}
+                                    {/*<dt>Euismod</dt>*/}
+                                    {/*<dd>*/}
+                                    {/*</dd>*/}
+                                    {/*<dd></dd>*/}
+                                    {/*<dt>Malesuada porta</dt>*/}
+                                    {/*<dd>Etiam porta sem malesuada magna mollis euismod.</dd>*/}
+                                {/*</dl>*/}
+                            {/*</div>*/}
+
+
+                            <InfoList name="Meta" info={meta_info}> </InfoList>
+                            <InfoList name="Linux" info={linux_info}> </InfoList>
                         </div>
 
                     </div>
-- 
2.39.5