Show currently selected speed limits

This commit is contained in:
John Furrow
2016-01-09 09:51:08 -08:00
parent 88a4e9e00d
commit 58cbe5d55a
2 changed files with 104 additions and 128 deletions

View File

@@ -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>
);