You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
4.4 KiB
116 lines
4.4 KiB
import React from 'react';
|
|
import {
|
|
secondsToString
|
|
} from '../../../util/time';
|
|
import { translate } from '../../../translate/translate';
|
|
|
|
export const NotificationsByTypeRender = function(logItem, type, index) {
|
|
return (
|
|
<div key={ logItem.timestamp }>
|
|
<div>{ index + 1 }.</div>
|
|
<div>
|
|
<strong>Time:</strong> { secondsToString(logItem.timestamp, true, true) }
|
|
</div>
|
|
<div>
|
|
<strong>GUI Function:</strong> { logItem.function }
|
|
</div>
|
|
<div>
|
|
<strong>HTTP:</strong> { logItem.httpMethod.toUpperCase() }
|
|
</div>
|
|
<div>
|
|
<strong>URL:</strong> { logItem.url }
|
|
</div>
|
|
<div>
|
|
<strong>Payload:</strong> { JSON.stringify(logItem.payload, null, '\t') }
|
|
</div>
|
|
<div className={ type !== 'pending' ? '' : 'hide' }>
|
|
<strong>Response:</strong> { JSON.stringify(logItem.response, null, '\t') }
|
|
</div>
|
|
<hr />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const NotificationsModalRender = function() {
|
|
return (
|
|
<div onKeyDown={ (event) => this.handleKeydown(event) }>
|
|
<div className="modal show notifications-modal">
|
|
<div className="modal-dialog modal-center modal-lg">
|
|
<div className="modal-content">
|
|
<div className="modal-body modal-body-container">
|
|
<div className="panel nav-tabs-horizontal">
|
|
<ul className="nav nav-tabs nav-tabs-line">
|
|
<li className={ this.state.activeTab === 0 ? 'active' : 'pointer' }>
|
|
<a onClick={ () => this.openTab(0) }>
|
|
<i className="icon fa fa-thumbs-o-up"></i> Success ({ this.state.calls.success })
|
|
</a>
|
|
</li>
|
|
<li className={ this.state.activeTab === 1 ? 'active' : 'pointer' }>
|
|
<a onClick={ () => this.openTab(1) }>
|
|
<i className="icon fa fa-exclamation-triangle"></i> Error ({ this.state.calls.error })
|
|
</a>
|
|
</li>
|
|
<li className={ this.state.activeTab === 2 ? 'active' : 'pointer' }>
|
|
<a onClick={ () => this.openTab(2) }>
|
|
<i className="icon fa fa-clock-o"></i> Pending ({ this.state.calls.pending })
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div className="panel-body panel-body-container">
|
|
<div className="tab-content">
|
|
<div className={ this.state.activeTab === 0 ? 'tab-pane active' : 'tab-pane' }>
|
|
{ this.renderNotificationsByType('success') }
|
|
</div>
|
|
<div className={ this.state.activeTab === 1 ? 'tab-pane active' : 'tab-pane' }>
|
|
{ this.renderNotificationsByType('error') }
|
|
</div>
|
|
<div className={ this.state.activeTab === 2 ? 'tab-pane active' : 'tab-pane' }>
|
|
{ this.renderNotificationsByType('pending') }
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="modal-footer">
|
|
<button
|
|
type="button"
|
|
className="btn btn-default"
|
|
onClick={ this.toggleNotificationsModal }>
|
|
{ translate('INDEX.CLOSE') }
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="modal-backdrop show in"></div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const NotificationsRender = function() {
|
|
return (
|
|
<div>
|
|
<div
|
|
className={ this.props.Dashboard.activeHandle && this.props.Dashboard.activeHandle.status === 'unlocked' ? 'notifications-badge stick-to-top' : 'notifications-badge' }
|
|
onClick={ this.toggleNotificationsModal }>
|
|
<span className="badge success">
|
|
{ this.state.calls.success }
|
|
</span>
|
|
<span className="badge error">
|
|
{ this.state.calls.error }
|
|
</span>
|
|
<span className="badge pending">
|
|
{ this.state.calls.pending }
|
|
</span>
|
|
<div className={ this.state.calls.pending === 0 ? 'spinner spinner-hide' : 'spinner' }>
|
|
<div className="rect1"></div>
|
|
<div className="rect2"></div>
|
|
<div className="rect3"></div>
|
|
<div className="rect4"></div>
|
|
<div className="rect5"></div>
|
|
</div>
|
|
</div>
|
|
{ this.renderNotificationsModal() }
|
|
</div>
|
|
);
|
|
};
|