diff --git a/client/source/scripts/components/sidebar/SpeedLimitDropdown.js b/client/source/scripts/components/sidebar/SpeedLimitDropdown.js index de902148..93a81978 100644 --- a/client/source/scripts/components/sidebar/SpeedLimitDropdown.js +++ b/client/source/scripts/components/sidebar/SpeedLimitDropdown.js @@ -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 ( @@ -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 {bytes / 1024}kB/s; + } else { + return {bytes / 1024 / 1024}MB/s; + } + } + + 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 { ); diff --git a/client/source/scripts/stores/ClientDataStore.js b/client/source/scripts/stores/ClientDataStore.js index d53972aa..d060e04c 100644 --- a/client/source/scripts/stores/ClientDataStore.js +++ b/client/source/scripts/stores/ClientDataStore.js @@ -23,7 +23,15 @@ class ClientDataStoreClass extends BaseStore { } } - getThrottles() { + getThrottles(options = {}) { + if (options.latest) { + return { + download: this.throttles.download ? + this.throttles.download[this.throttles.download.length - 1] : null, + upload: this.throttles.upload ? + this.throttles.upload[this.throttles.upload.length - 1] : null + }; + } return this.throttles; }