From: Hongyuan Ma Date: Sun, 27 May 2018 12:41:14 +0000 (+0800) Subject: accomplist table-list X-Git-Url: http://git.postgresql.org/gitweb/static/gitweb.js?a=commitdiff_plain;h=ba6eb683941f1aca4aad0e85f06c2fb1be3817a8;p=pgperffarm.git accomplist table-list --- diff --git a/front-end/src/component/result-filter/index.jsx b/front-end/src/component/result-filter/index.jsx index 8e5e762..6a7e1bd 100644 --- a/front-end/src/component/result-filter/index.jsx +++ b/front-end/src/component/result-filter/index.jsx @@ -7,7 +7,6 @@ class ResultFilter extends React.Component { super(props); this.state = { - current: 3, selected_items: [ {'cate': 'Category 2', 'name': '30 days'} ], @@ -40,7 +39,7 @@ class ResultFilter extends React.Component { isClear: true }; - this.onChange = this.onChange.bind(this); + this.selectItemClick = this.selectItemClick.bind(this); } @@ -54,17 +53,13 @@ class ResultFilter extends React.Component { let newSelected = this.state.selected; - if(newSelected[cate_index]["index"] != item_index) { + if (newSelected[cate_index]["index"] != item_index) { newSelected[cate_index]["index"] = item_index; this.setState({ selected: newSelected, isClear: true }); } - - - - } deleteSelectItemClick(e) { @@ -77,12 +72,19 @@ class ResultFilter extends React.Component { } applyButtonClick() { - //todo + this.setState({ + selected: newArr, + isClear: false + }); + } + + handleTemp(e) { + props.onTemperateChange(e.target.value) } clearButtonClick() { let newArr = this.state.selected; - newArr.forEach((_item,_index) => { + newArr.forEach((_item, _index) => { console.log(_item); _item.index = this.state.restoreNum; }) @@ -92,13 +94,6 @@ class ResultFilter extends React.Component { }); } - onChange(page) { - console.log(page); - console.log(this); - this.setState({ - current: page, - }); - } render() { let _this = this; @@ -116,7 +111,8 @@ class ResultFilter extends React.Component { let filter_item = item["data"].map((s, index) => { let is_high_light = index == item["index"] ? "select-all selected" : "select-all" return ( -
this.selectItemClick(e)} key={index} data-cate-name={item["cate"]} data-cate-index={i} data-item-index={index} data-item-name={s} +
this.selectItemClick(e)} key={index} data-cate-name={item["cate"]} + data-cate-index={i} data-item-index={index} data-item-name={s} className={is_high_light}>{s}
) @@ -137,7 +133,9 @@ class ResultFilter extends React.Component { }); return ( +
+
this.handleClick()}> @@ -148,12 +146,18 @@ class ResultFilter extends React.Component {
-- - - + {/**/} + this.clearButtonClick()} + disabled={ this.state.isClear ? "" : "disabled" }> + Reset + + Apply + {/**/}
@@ -201,171 +205,6 @@ class ResultFilter extends React.Component {

...

- -
-
- Advanced Tables -
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Rendering engine - Browser - Platform(s) - Engine version - CSS grade -
GeckoFirefox 1.0Win 98+ / OSX.2+1.7A
GeckoFirefox 1.5Win 98+ / OSX.2+1.8A
GeckoFirefox 2.0Win 98+ / OSX.2+1.8A
GeckoFirefox 3.0Win 2k+ / OSX.3+1.9A
GeckoCamino 1.0OSX.2+1.8A
GeckoCamino 1.5OSX.3+1.8A
GeckoNetscape 7.2Win 95+ / Mac OS 8.6-9.21.7A
GeckoNetscape Browser 8Win 98SE+1.7A
GeckoNetscape Navigator 9Win 98+ / OSX.2+1.8A
GeckoMozilla 1.0Win 95+ / OSX.1+1A
-
-
- -
-
-
- -
-
-
-
-
-
-
); } diff --git a/front-end/src/index.html b/front-end/src/index.html index 4048f6d..7952f34 100644 --- a/front-end/src/index.html +++ b/front-end/src/index.html @@ -7,6 +7,7 @@ + diff --git a/front-end/src/page/Status/index.jsx b/front-end/src/page/Status/index.jsx index 2e7e271..0cf091c 100644 --- a/front-end/src/page/Status/index.jsx +++ b/front-end/src/page/Status/index.jsx @@ -1,30 +1,94 @@ import React from 'react'; -// import './index.scss'; +// import './index.css'; import ResultFilter from 'component/result-filter/index.jsx'; +import Pagination from 'util/pagination/index.jsx'; import RateBar from 'util/rate-bar/index.jsx'; +import TableList from 'util/table-list/index.jsx'; -class Status extends React.Component{ +class Status extends React.Component { constructor(props) { super(props); this.state = { + currentPage: 3, std: 150000, curMark1: 243732, curMark2: 143733, curMark3: 43732, curMark4: 3732, curMark5: 32, + isLoading: false, + list: [ + { + 'alias': 'a_name', + 'email': 'a_name@mail.com', + 'clients': '2', + 'mark': 140000, + }, { + 'alias': 'b_name', + 'email': 'b_name@mail.com', + 'clients': '4', + 'mark': 150000, + } + ] } + this.onPageChange = this.onPageChange.bind(this); + this.handleisLoading = this.handleisLoading.bind(this); } - render(){ + + onPageChange(page) { + console.log(page); + console.log(this); + this.setState({ + current: page, + }); + } + + handleisLoading(isLoading) { + this.setState({ + isLoading: isLoading + }) + } + + render() { + let show = this.state.isLoading ? "none" : "block"; + let style = { + display: show + }; + + let listBody = this.state.list.map((machine, index) => { + return ( + + {machine.alias} + {machine.email} + {machine.clients} + + +

{machine.mark}

+ + + {new Date().toDateString()} + + ); + }); + return ( -
+

status page

- Shown here is the latest status of each farm member for each branch it has reported on in the last 30 days. + Shown here is the latest status of each farm member for each branch it has reported on in the last + 30 days. Use the farm member link for history of that member on the relevant branch.

- + + + + + + {listBody} + + +
diff --git a/front-end/src/util/rate-bar/index.jsx b/front-end/src/util/rate-bar/index.jsx index 68ebfc1..21d1201 100644 --- a/front-end/src/util/rate-bar/index.jsx +++ b/front-end/src/util/rate-bar/index.jsx @@ -40,9 +40,10 @@ class RateBar extends React.Component { data: ['std', 'current'] }, grid: { - left: '3%', - right: '4%', - bottom: '3%', + left: '2%', + right: '0%', + bottom: '20%', + top: '-20%', containLabel: true }, xAxis: { @@ -94,7 +95,7 @@ class RateBar extends React.Component { } render() { return ( -
+
); } } diff --git a/front-end/src/util/table-list/index.css b/front-end/src/util/table-list/index.css new file mode 100644 index 0000000..3206f47 --- /dev/null +++ b/front-end/src/util/table-list/index.css @@ -0,0 +1,4 @@ +.table th, .table td { + text-align: center; + vertical-align: middle!important; +} \ No newline at end of file diff --git a/front-end/src/util/table-list/index.jsx b/front-end/src/util/table-list/index.jsx index 4ff4b99..8ec5ac6 100644 --- a/front-end/src/util/table-list/index.jsx +++ b/front-end/src/util/table-list/index.jsx @@ -1,25 +1,55 @@ import React from 'react'; +import './index.css'; // general table -class TableList extends React.Component{ - constructor(props){ +class TableList extends React.Component { + constructor(props) { super(props); this.state = { isFirstLoading: true } } - componentWillReceiveProps(){ + + componentWillReceiveProps() { // Only when the table is loaded for the first time,isFirstLoading equals true this.setState({ - isFirstLoading : false + isFirstLoading: false }); } - render(){ + + render() { + + let tableHeader = this.props.tableHeads.map( + (tableHead, index) => { + if (typeof tableHead === 'object') { + return {tableHead.name} + } else if (typeof tableHead === 'string') { + return {tableHead} + } + } + ); + + let listBody = this.props.children; + + let listInfo = ( + + + {this.state.isFirstLoading ? 'isLoading...' : 'no results~'} + + ); + let tableBody = listBody.length > 0 ? listBody : listInfo; return (
- - {/*todo*/} +
+ + + {tableHeader} + + + + {tableBody} +