lukechilds
/
EasyDEX-GUI
mirror of https://github.com/lukechilds/EasyDEX-GUI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

refactored notifications component

all-modes
pbca26 8 years ago
parent
5aae4cddc4
commit
7067434476
1 changed files with 28 additions and 33 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 61
      react/src/components/dashboard/notifications.js

61
react/src/components/dashboard/notifications.js
View File

@ -12,10 +12,12 @@ class Notifications extends React.Component {
super(props); super(props);
this.state = { this.state = {
displayModal: false, displayModal: false,
totalCalls: 0, calls: {
totalErrorCalls: 0, total: 0,
totalSuccessCalls: 0, error: 0,
totalPendingCalls: 0, success: 0,
pending: 0,
},
activeTab: 2, activeTab: 2,
guiLog: null, guiLog: null,
}; };
@ -33,31 +35,27 @@ class Notifications extends React.Component {
if (this.props.Dashboard && if (this.props.Dashboard &&
this.props.Dashboard.guiLog) { this.props.Dashboard.guiLog) {
const _guiLog = this.props.Dashboard.guiLog; const _guiLog = this.props.Dashboard.guiLog;
let totalCalls = Object.keys(_guiLog).length; let _callsLength = {
let totalErrorCalls = 0; total: Object.keys(_guiLog).length,
let totalSuccessCalls = 0; error: 0,
let totalPendingCalls = 0; success: 0,
pending: 0,
}
let guiLogToArray = []; let guiLogToArray = [];
for (let timestamp in _guiLog) { for (let timestamp in _guiLog) {
guiLogToArray.push(_guiLog[timestamp]); guiLogToArray.push(_guiLog[timestamp]);
_callsLength[_guiLog[timestamp].status]++;
if (_guiLog[timestamp].status === 'error') {
totalErrorCalls++;
}
if (_guiLog[timestamp].status === 'success') {
totalSuccessCalls++;
}
if (_guiLog[timestamp].status === 'pending') {
totalPendingCalls++;
}
} }
this.setState(Object.assign({}, this.state, { this.setState(Object.assign({}, this.state, {
totalCalls, calls: {
totalErrorCalls, total: _callsLength.total,
totalSuccessCalls, error: _callsLength.error,
totalPendingCalls, success: _callsLength.success,
pending: _callsLength.pending,
},
guiLog: guiLogToArray, guiLog: guiLogToArray,
})); }));
} }
@ -70,7 +68,6 @@ class Notifications extends React.Component {
let _guiLog = this.state.guiLog; let _guiLog = this.state.guiLog;
_guiLog = sortByDate(_guiLog); _guiLog = sortByDate(_guiLog);
let items = []; let items = [];
let index = 0;
for (let i = 0; i < _guiLog.length; i++) { for (let i = 0; i < _guiLog.length; i++) {
if (_guiLog[i].status === type) { if (_guiLog[i].status === type) {
@ -78,7 +75,7 @@ class Notifications extends React.Component {
items.push( items.push(
<div key={ _logItem.timestamp }> <div key={ _logItem.timestamp }>
<div>{ index + 1 }.</div> <div>{ i + 1 }.</div>
<div> <div>
<strong>Time:</strong> { secondsToString(_logItem.timestamp, true, true) } <strong>Time:</strong> { secondsToString(_logItem.timestamp, true, true) }
</div> </div>
@ -101,8 +98,6 @@ class Notifications extends React.Component {
</div> </div>
); );
} }
index++;
} }
return items; return items;
@ -123,21 +118,21 @@ class Notifications extends React.Component {
<a <a
role="tab" role="tab"
onClick={ () => this.openTab(0) }> onClick={ () => this.openTab(0) }>
<i className="icon fa fa-thumbs-o-up" aria-hidden="true"></i> Success ({ this.state.totalSuccessCalls }) <i className="icon fa fa-thumbs-o-up" aria-hidden="true"></i> Success ({ this.state.calls.success })
</a> </a>
</li> </li>
<li className={ this.state.activeTab === 1 ? 'active' : 'pointer' } role="presentation"> <li className={ this.state.activeTab === 1 ? 'active' : 'pointer' } role="presentation">
<a <a
role="tab" role="tab"
onClick={ () => this.openTab(1) }> onClick={ () => this.openTab(1) }>
<i className="icon fa fa-exclamation-triangle" aria-hidden="true"></i> Error ({ this.state.totalErrorCalls }) <i className="icon fa fa-exclamation-triangle" aria-hidden="true"></i> Error ({ this.state.calls.error })
</a> </a>
</li> </li>
<li className={ this.state.activeTab === 2 ? 'active' : 'pointer' } role="presentation"> <li className={ this.state.activeTab === 2 ? 'active' : 'pointer' } role="presentation">
<a <a
role="tab" role="tab"
onClick={ () => this.openTab(2) }> onClick={ () => this.openTab(2) }>
<i className="icon fa fa-clock-o" aria-hidden="true"></i> Pending ({ this.state.totalPendingCalls }) <i className="icon fa fa-clock-o" aria-hidden="true"></i> Pending ({ this.state.calls.pending })
</a> </a>
</li> </li>
</ul> </ul>
@ -192,10 +187,10 @@ class Notifications extends React.Component {
<div <div
className={ this.props.Dashboard.activeHandle && this.props.Dashboard.activeHandle.status === 'unlocked' ? 'notifications-badge stick-to-top' : 'notifications-badge' } className={ this.props.Dashboard.activeHandle && this.props.Dashboard.activeHandle.status === 'unlocked' ? 'notifications-badge stick-to-top' : 'notifications-badge' }
onClick={ this.toggleNotificationsModal }> onClick={ this.toggleNotificationsModal }>
<span className="badge success">{ this.state.totalSuccessCalls }</span> <span className="badge success">{ this.state.calls.success }</span>
<span className="badge error">{ this.state.totalErrorCalls }</span> <span className="badge error">{ this.state.calls.error }</span>
<span className="badge pending">{ this.state.totalPendingCalls }</span> <span className="badge pending">{ this.state.calls.pending }</span>
<div className={ this.state.totalPendingCalls === 0 ? 'spinner spinner-hide' : 'spinner' }> <div className={ this.state.calls.pending === 0 ? 'spinner spinner-hide' : 'spinner' }>
<div className="rect1"></div> <div className="rect1"></div>
<div className="rect2"></div> <div className="rect2"></div>
<div className="rect3"></div> <div className="rect3"></div>

Write Preview
Loading…
Cancel
Save