add wating state for applyBtn

diff --git a/front-end/src/component/result-filter/index.css b/front-end/src/component/result-filter/index.css
index 9dca292c2569ff8fda007dd9aa520c106e4ba931..07bb5eb72212e0e6da3ccd970683d24e64400eb5 100644 (file)
--- a/front-end/src/component/result-filter/index.css
+++ b/front-end/src/component/result-filter/index.css
@@ -103,10 +103,15 @@
 
 .title-selected-btn {
     float: right;
+    margin-left: 5px;
 }
 
 .title-selected-btn:focus, .title-selected-btn:active:focus, .title-selected-btn.active:focus, .title-selected-btn.focus, .title-selected-btn:active.focus, .title-selected-btn.active.focus {
     outline: none;
     /*border-color: transparent;*/
     /*box-shadow: none;*/
+}
+
+.title-selected-result {
+    padding-bottom: 8px;
 }
\ No newline at end of file

diff --git a/front-end/src/component/result-filter/index.jsx b/front-end/src/component/result-filter/index.jsx
index 6a7e1bd386ffbd0106314e30aaf24114985b26d2..f25745593cbf6dd85e2e2bef0b0dce98383fd51c 100644 (file)
--- a/front-end/src/component/result-filter/index.jsx
+++ b/front-end/src/component/result-filter/index.jsx
@@ -73,16 +73,20 @@ class ResultFilter extends React.Component {
 
     applyButtonClick() {
         this.setState({
-            selected: newArr,
+            // selected: newArr,
             isClear: false
         });
+        this.handleIsLoading();
+
+        console.log(this.props.isLoading)
     }
 
-    handleTemp(e) {
-        props.onTemperateChange(e.target.value)
+    handleIsLoading(e) {
+        // console.log(e.target.value)
+        this.props.onIsLoadingChange(true);
     }
 
-    clearButtonClick() {
+    resetButtonClick() {
         let newArr = this.state.selected;
         newArr.forEach((_item, _index) => {
             console.log(_item);
@@ -132,6 +136,20 @@ class ResultFilter extends React.Component {
             )
         });
 
+        let apply_btn;
+        if (this.props.isLoading == true) {
+            apply_btn = (
+                <a className="btn btn-primary btn-sm title-selected-btn" href="javascript:void(0)"
+                   disabled={"disabled"}>
+                    <i className="fa fa-spinner fa-pulse"></i> wait...</a>
+            )
+        } else {
+            apply_btn = (
+                <a className="btn btn-primary btn-sm title-selected-btn" href="javascript:void(0)"
+                   onClick={() => this.applyButtonClick()}>
+                    <i className="fa fa-hand-paper-o"></i> Apply</a>
+            )
+        }
         return (
 
             <div id="wrapper">
@@ -151,11 +169,11 @@ class ResultFilter extends React.Component {
                                     {/*clear*/}
                                     {/*</button>*/}
                                     <a className="btn btn-default btn-sm title-selected-btn" href="javascript:void(0)"
-                                       onClick={() => this.clearButtonClick()}
+                                       onClick={() => this.resetButtonClick()}
                                        disabled={ this.state.isClear ? "" : "disabled" }>
                                         <i className="fa fa-cog"></i> Reset</a>
-                                    <a className="btn btn-success btn-sm title-selected-btn" href="javascript:void(0)">
-                                        <i className="fa fa-hand-paper-o"></i> Apply</a>
+
+                                    {apply_btn}
                                     {/*<button data-toggle="button" className="btn btn-primary title-selected-btn">apply*/}
                                     {/*</button>*/}
                                 </div>

diff --git a/front-end/src/page/Status/index.jsx b/front-end/src/page/Status/index.jsx
index 0cf091cec2a788ae1d2ea81b562b036f54303578..bef70035bc50e58540f80e8f9a8652ba3538bddc 100644 (file)
--- a/front-end/src/page/Status/index.jsx
+++ b/front-end/src/page/Status/index.jsx
@@ -9,6 +9,7 @@ class Status extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
+            isLoading: false,
             currentPage: 3,
             std: 150000,
             curMark1: 243732,
@@ -21,19 +22,19 @@ class Status extends React.Component {
                 {
                     'alias': 'a_name',
                     'email': 'a_name@mail.com',
-                    'clients': '2',
-                    'mark': 140000,
+                    'clients': [2,4,6],
+                    'mark': [140000,1,1],
                 }, {
                     'alias': 'b_name',
                     'email': 'b_name@mail.com',
                     'clients': '4',
-                    'mark': 150000,
+                    'mark': 150000
                 }
             ]
 
         }
         this.onPageChange = this.onPageChange.bind(this);
-        this.handleisLoading = this.handleisLoading.bind(this);
+        this.handleIsLoading = this.handleIsLoading.bind(this);
     }
 
     onPageChange(page) {
@@ -44,7 +45,7 @@ class Status extends React.Component {
         });
     }
 
-    handleisLoading(isLoading) {
+    handleIsLoading(isLoading) {
         this.setState({
             isLoading: isLoading
         })
@@ -59,13 +60,24 @@ class Status extends React.Component {
         let listBody = this.state.list.map((machine, index) => {
             return (
                 <tr key={index}>
+
                     <td>{machine.alias}</td>
-                    <td>{machine.email}</td>
-                    <td>{machine.clients}</td>
+                    <td><a href={'mailto:' + machine.email}>{machine.email}</a></td>
                     <td>
+                        {machine.clients}
+                        {/*<th rowspan="3"></th>*/}
+                        {/*<th rowspan="3">1-2</th>*/}
+                        {/*<th rowspan="2">1-3</th>*/}
+                        {/*<th rowspan="1">1-4</th>*/}
+                        {/*<th rowspan="3">1-5</th>*/}
+                    </td>
 
-                        <p> {machine.mark}</p>
-                        <RateBar style={{zIndex: 999}} std={this.state.std} curMark={this.state.curMark1}/>
+                    <td>
+                        <div>
+                            <p>..</p>
+                            <RateBar style={{float: 'right', zIndex: 999}} std={this.state.std} curMark={this.state.curMark1}/>
+                        </div>
+                        {/*<div style={{float: 'left'}}> <p>{machine.mark}</p></div>*/}
                     </td>
                     <td>{new Date().toDateString()}</td>
                 </tr>
@@ -82,7 +94,9 @@ class Status extends React.Component {
                 </p>
 
 
-                <ResultFilter isLoading={this.state.isLoading} onIsLoadingChange={this.handleisLoading}/>
+                <ResultFilter isLoading={this.state.isLoading} onIsLoadingChange={this.handleIsLoading}/>
+
+                <p>...!!{this.state.isLoading}</p>
 
                 <TableList tableHeads={['alias', 'email', 'clients', 'mark', 'date']}>
                     {listBody}

diff --git a/front-end/src/util/rate-bar/index.jsx b/front-end/src/util/rate-bar/index.jsx
index 21d1201dbdaadffc1b97b78580b4965b896c3df1..c319086741f8004ec38ac2a184e5111141383006 100644 (file)
--- a/front-end/src/util/rate-bar/index.jsx
+++ b/front-end/src/util/rate-bar/index.jsx
@@ -44,7 +44,7 @@ class RateBar extends React.Component {
                 right: '0%',
                 bottom: '20%',
                 top: '-20%',
-                containLabel: true
+                containLabel: false
             },
             xAxis:  {
                 type: 'value',
@@ -95,7 +95,7 @@ class RateBar extends React.Component {
     }
     render() {
         return (
-            <div ref="waterall" className="rate-bar" style={{ width: 240, height: 60 }}></div>
+            <div ref="waterall" className="rate-bar" style={{ width: 240, height: 30 }}></div>
         );
     }
 }