mirror of
https://github.com/zoriya/flood.git
synced 2026-05-07 05:39:08 +00:00
Show currently selected speed limits
This commit is contained in:
@@ -1,10 +1,48 @@
|
||||
import React from 'react';
|
||||
|
||||
import ClientActions from '../../actions/ClientActions';
|
||||
import ClientDataStore from '../../stores/ClientDataStore';
|
||||
import Dropdown from '../generic/Dropdown';
|
||||
import EventTypes from '../../constants/EventTypes';
|
||||
import Icon from '../icons/Icon';
|
||||
|
||||
const METHODS_TO_BIND = ['onTransferDataRequestSuccess'];
|
||||
const SPEEDS = [1024, 10240, 102400, 1048576, 2097152, 5242880, 10485760, 0];
|
||||
|
||||
class Sidebar extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.state = {
|
||||
throttle: null
|
||||
};
|
||||
|
||||
METHODS_TO_BIND.forEach((method) => {
|
||||
this[method] = this[method].bind(this);
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
ClientDataStore.listen(
|
||||
EventTypes.CLIENT_TRANSFER_DATA_REQUEST_SUCCESS,
|
||||
this.onTransferDataRequestSuccess
|
||||
);
|
||||
ClientDataStore.fetchTransferData();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
ClientDataStore.unlisten(
|
||||
EventTypes.CLIENT_TRANSFER_DATA_REQUEST_SUCCESS,
|
||||
this.onTransferDataRequestSuccess
|
||||
);
|
||||
}
|
||||
|
||||
onTransferDataRequestSuccess() {
|
||||
this.setState({
|
||||
throttle: ClientDataStore.getThrottles({latest: true})
|
||||
});
|
||||
}
|
||||
|
||||
getDropdownHeader() {
|
||||
return (
|
||||
<a className="client-stats client-stat--limits">
|
||||
@@ -13,132 +51,63 @@ class Sidebar extends React.Component {
|
||||
);
|
||||
}
|
||||
|
||||
getMenuItems() {
|
||||
return [
|
||||
[
|
||||
{
|
||||
displayName: '0.25',
|
||||
property: 'upload',
|
||||
value: '256'
|
||||
},
|
||||
{
|
||||
displayName: '0.5',
|
||||
property: 'upload',
|
||||
value: '512'
|
||||
},
|
||||
{
|
||||
displayName: '1',
|
||||
property: 'upload',
|
||||
value: '1024'
|
||||
},
|
||||
{
|
||||
displayName: '10',
|
||||
property: 'upload',
|
||||
value: '10240'
|
||||
},
|
||||
{
|
||||
displayName: '100',
|
||||
property: 'upload',
|
||||
value: '102400'
|
||||
},
|
||||
{
|
||||
displayName: '1000',
|
||||
property: 'upload',
|
||||
value: '1048576'
|
||||
},
|
||||
{
|
||||
displayName: '5',
|
||||
property: 'upload',
|
||||
value: '5'
|
||||
},
|
||||
{
|
||||
displayName: '6',
|
||||
property: 'upload',
|
||||
value: '6'
|
||||
},
|
||||
{
|
||||
displayName: '7',
|
||||
property: 'upload',
|
||||
value: '7'
|
||||
},
|
||||
{
|
||||
displayName: '8',
|
||||
property: 'upload',
|
||||
value: '8'
|
||||
},
|
||||
{
|
||||
displayName: '9',
|
||||
property: 'upload',
|
||||
value: '9'
|
||||
},
|
||||
{
|
||||
displayName: '10',
|
||||
property: 'upload',
|
||||
value: '10'
|
||||
getHumanReadableSpeed(bytes) {
|
||||
if (bytes === 0) {
|
||||
return 'Unlimited';
|
||||
} else if (bytes < 1048576) {
|
||||
return <span>{bytes / 1024}<em className="unit">kB/s</em></span>;
|
||||
} else {
|
||||
return <span>{bytes / 1024 / 1024}<em className="unit">MB/s</em></span>;
|
||||
}
|
||||
}
|
||||
|
||||
getSpeedList(property) {
|
||||
let heading = {
|
||||
className: `dropdown__label dropdown__label--${property}`,
|
||||
displayName: `${property.charAt(0).toUpperCase()}${property.slice(1)}`,
|
||||
selectable: false,
|
||||
value: null
|
||||
};
|
||||
|
||||
let insertCurrentThrottle = true;
|
||||
let currentThrottle = this.state.throttle;
|
||||
|
||||
let items = SPEEDS.map((bytes) => {
|
||||
let selected = false;
|
||||
if (currentThrottle && currentThrottle[property] === bytes) {
|
||||
if (property === 'upload') {
|
||||
console.log('current: ', currentThrottle[property], property);
|
||||
}
|
||||
], [
|
||||
{
|
||||
displayName: '0.25',
|
||||
property: 'download',
|
||||
value: '256'
|
||||
},
|
||||
{
|
||||
displayName: '0.5',
|
||||
property: 'download',
|
||||
value: '512'
|
||||
},
|
||||
{
|
||||
displayName: '1',
|
||||
property: 'download',
|
||||
value: '1024'
|
||||
},
|
||||
{
|
||||
displayName: '10',
|
||||
property: 'download',
|
||||
value: '10240'
|
||||
},
|
||||
{
|
||||
displayName: '100',
|
||||
property: 'download',
|
||||
value: '102400'
|
||||
},
|
||||
{
|
||||
displayName: '1000',
|
||||
property: 'download',
|
||||
value: '1048576'
|
||||
},
|
||||
{
|
||||
displayName: '5',
|
||||
property: 'download',
|
||||
value: '5'
|
||||
},
|
||||
{
|
||||
displayName: '6',
|
||||
property: 'download',
|
||||
value: '6'
|
||||
},
|
||||
{
|
||||
displayName: '7',
|
||||
property: 'download',
|
||||
value: '7'
|
||||
},
|
||||
{
|
||||
displayName: '8',
|
||||
property: 'download',
|
||||
value: '8'
|
||||
},
|
||||
{
|
||||
displayName: '9',
|
||||
property: 'download',
|
||||
value: '9'
|
||||
},
|
||||
{
|
||||
displayName: '10',
|
||||
property: 'download',
|
||||
value: '10'
|
||||
}
|
||||
]
|
||||
];
|
||||
selected = true;
|
||||
insertCurrentThrottle = false;
|
||||
}
|
||||
return {
|
||||
displayName: this.getHumanReadableSpeed(bytes),
|
||||
property,
|
||||
selected,
|
||||
selectable: true,
|
||||
value: bytes
|
||||
};
|
||||
});
|
||||
|
||||
if (insertCurrentThrottle && currentThrottle) {
|
||||
let insertionPoint = _.sortedIndex(SPEEDS, currentThrottle[property]);
|
||||
|
||||
items.splice(insertionPoint, 0, {
|
||||
displayName: this.getHumanReadableSpeed(currentThrottle[property]),
|
||||
property: property,
|
||||
selectable: true,
|
||||
value: currentThrottle[property]
|
||||
});
|
||||
}
|
||||
|
||||
items.unshift(heading);
|
||||
|
||||
return items;
|
||||
}
|
||||
|
||||
getDropdownLists() {
|
||||
return [this.getSpeedList('upload'), this.getSpeedList('download')];
|
||||
}
|
||||
|
||||
handleItemSelect(data) {
|
||||
@@ -151,8 +120,7 @@ class Sidebar extends React.Component {
|
||||
<Dropdown
|
||||
handleItemSelect={this.handleItemSelect}
|
||||
header={this.getDropdownHeader()}
|
||||
menuItems={this.getMenuItems()}
|
||||
selectedItem={'10000'}
|
||||
menuItems={this.getDropdownLists()}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user