adding more fields to torrentlist, ul speed/dl speed
enter the commit message for your changes. Lines starting
This commit is contained in:
0
torrent-project/src/BottomMenu/Tabs/generalTab.js
Normal file
0
torrent-project/src/BottomMenu/Tabs/generalTab.js
Normal file
@@ -4,6 +4,7 @@ import 'typeface-roboto'; // contains the font for material UI
|
||||
import { withStyles } from 'material-ui/styles';
|
||||
import AppBar from 'material-ui/AppBar';
|
||||
import Tabs, { Tab } from 'material-ui/Tabs';
|
||||
import generalTab from './Tabs/generalTab';
|
||||
|
||||
function TabContainer(props) {
|
||||
return <div style={{ padding: 8 * 3 }}>{props.children}</div>;
|
||||
@@ -50,7 +51,7 @@ function TabContainer(props) {
|
||||
</Tabs>
|
||||
</AppBar>
|
||||
</div>
|
||||
{value === 0 && <TabContainer>General</TabContainer>}
|
||||
{value === 0 && <TabContainer><generalTab /></TabContainer>}
|
||||
{value === 1 && <TabContainer>Peers</TabContainer>}
|
||||
{value === 2 && <TabContainer>Files</TabContainer>}
|
||||
{value === 3 && <TabContainer>Speed</TabContainer>}
|
@@ -24,6 +24,7 @@ const button = {
|
||||
|
||||
const inlineStyle = {
|
||||
display: 'inline-block',
|
||||
backdrop: 'static',
|
||||
}
|
||||
|
||||
export default class addTorrentPopup extends React.Component {
|
||||
|
@@ -13,7 +13,7 @@ import {Provider} from 'react-redux';
|
||||
import reducer from './store/reducer';
|
||||
//Menu and torrentlist imports
|
||||
import TopMenu from './topMenu';
|
||||
import BottomMenu from './bottomMenu';
|
||||
import BottomMenu from './BottomMenu/bottomMenu';
|
||||
import LeftMenu from './leftMenu';
|
||||
import TorrentList from './torrentlist';
|
||||
|
||||
@@ -47,9 +47,9 @@ class BasicLayout extends React.PureComponent {
|
||||
super(props);
|
||||
|
||||
var layout = [
|
||||
{i: 'a', x: 0, y: 0, w: 6, h: 1, static: true},
|
||||
{i: 'a', x: 0, y: 0, w: 6, h: 1},
|
||||
{i: 'b', x: 0, y: 1, w: 1, h: 5},
|
||||
{i: 'c', x: 1, y: 1, w: 5, h: 5, minW: 5, minH: 5, static: true},
|
||||
{i: 'c', x: 1, y: 1, w: 5, h: 3, minW: 5, minH: 3},
|
||||
{i: 'd', x: 1, y: 2, w: 5, h: 2, minW: 5, minH: 1}
|
||||
];
|
||||
this.state = { layout };
|
||||
|
@@ -7,6 +7,11 @@ import Divider from 'material-ui/Divider';
|
||||
import DownloadingTorrentsIcon from 'material-ui-icons/FileDownload'
|
||||
import UploadingTorrentsIcon from 'material-ui-icons/FileUpload'
|
||||
import ActiveTorrentsIcon from 'material-ui-icons/SwapVert'
|
||||
import AllTorrentsIcon from 'material-ui-icons/AllInclusive'
|
||||
|
||||
//react redux
|
||||
import {connect} from 'react-redux';
|
||||
import * as actionTypes from './store/actions';
|
||||
|
||||
|
||||
const styles = theme => ({
|
||||
@@ -16,40 +21,56 @@ const styles = theme => ({
|
||||
backgroundColor: '#e5e5e5',
|
||||
},
|
||||
icons: {
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
},
|
||||
inactiveIcon: {
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
color: 'red',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
color: 'red',
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function SimpleList(props) {
|
||||
const { classes } = props;
|
||||
|
||||
class SimpleList extends React.Component {
|
||||
constructor(props){
|
||||
super(props);
|
||||
}
|
||||
setFilter = (filterState) => {
|
||||
filterState = [{columnName: 'Status', value: filterState}]
|
||||
this.props.changeFilter(filterState)//dispatch to redux
|
||||
|
||||
}
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<List>
|
||||
<ListItem button>
|
||||
<ListItem button onClick={ () => this.setFilter('')}>
|
||||
<ListItemIcon className={classes.icons} >
|
||||
<AllTorrentsIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="All Torrents" />
|
||||
</ListItem>
|
||||
<ListItem button={true} onClick={ () => this.setFilter('Downloading')}>
|
||||
<ListItemIcon className={classes.icons}>
|
||||
<DownloadingTorrentsIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Downloading Torrents" />
|
||||
</ListItem>
|
||||
<ListItem button>
|
||||
<ListItem button={true} onClick={ () => this.setFilter('Seeding')}>
|
||||
<ListItemIcon className={classes.icons}>
|
||||
<UploadingTorrentsIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Uploading Torrents" />
|
||||
</ListItem>
|
||||
<ListItem button>
|
||||
<ListItem button={true} onClick={ () => this.setFilter('Active')}>
|
||||
<ListItemIcon className={classes.icons}>
|
||||
<ActiveTorrentsIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Active Torrents" />
|
||||
</ListItem>
|
||||
<ListItem button>
|
||||
<ListItem button={true} onClick={ () => this.setFilter('Completed')}>
|
||||
<ListItemIcon className={classes.inactiveIcon}>
|
||||
<ActiveTorrentsIcon />
|
||||
</ListItemIcon>
|
||||
@@ -60,9 +81,27 @@ const styles = theme => ({
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
SimpleList.propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
}
|
||||
|
||||
SimpleList.propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
filter: state.filter
|
||||
};
|
||||
|
||||
export default withStyles(styles)(SimpleList);
|
||||
}
|
||||
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
changeFilter: (filter) => dispatch({type: actionTypes.CHANGE_FILTER, filter: filter})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(SimpleList));
|
@@ -13,19 +13,31 @@ const styles = theme => ({
|
||||
backgroundColor: theme.palette.primary[300],
|
||||
float: 'left',
|
||||
height: theme.spacing.unit,
|
||||
whiteSpace: 'nowrap',
|
||||
},
|
||||
progressText: {
|
||||
display: 'inline-block',
|
||||
fontSize: '1em',
|
||||
textAlign: 'right',
|
||||
verticalAlign: 'text-top',
|
||||
fontSize: '12px',
|
||||
fontWeight: 'bold',
|
||||
margin: '5px',
|
||||
whiteSpace: 'nowrap',
|
||||
}
|
||||
});
|
||||
|
||||
export const ProgressBarCellBase = ({ value, classes, style }) => (
|
||||
<TableCell
|
||||
className={classes.progressBarCell}
|
||||
style={style}
|
||||
|
||||
>
|
||||
<div
|
||||
className={classes.progressBar}
|
||||
style={{ width: `${value}%` }}
|
||||
title={`${value.toFixed(1)}%`}
|
||||
/>
|
||||
title={`${value.toFixed(1)}%`}
|
||||
/><div className={classes.progressText}>{value}</div>
|
||||
</TableCell>
|
||||
);
|
||||
ProgressBarCellBase.propTypes = {
|
||||
|
@@ -1,3 +1,4 @@
|
||||
export const SORTLIST = 'SORTLIST';
|
||||
export const CHANGE_SELECTION = 'CHANGE_SELECTION';
|
||||
export const CHANGE_FILTER = 'CHANGE_FILTER';
|
||||
|
||||
|
@@ -6,20 +6,33 @@ const initialState = {
|
||||
buttonState: "default",
|
||||
sorting: [],
|
||||
selection: [],
|
||||
filter: ["Status", ""],
|
||||
columnName: "Status"
|
||||
}
|
||||
|
||||
const reducer = (state = initialState, action) => {
|
||||
switch(action.type){
|
||||
|
||||
case actionTypes.CHANGE_SELECTION:
|
||||
console.log("Selection change", action.selection)
|
||||
return state;
|
||||
console.log("Change Selection", action.selection)
|
||||
return {
|
||||
...state,
|
||||
selection: action.selection,
|
||||
};
|
||||
|
||||
case actionTypes.SORTLIST:
|
||||
console.log("List Sort", action.sorting)
|
||||
return state;
|
||||
|
||||
case actionTypes.CHANGE_FILTER:
|
||||
return {
|
||||
...state,
|
||||
filter: action.filter
|
||||
}
|
||||
|
||||
}
|
||||
default:
|
||||
return state;
|
||||
};
|
||||
|
||||
console.log("no actiontypes found", action)
|
||||
return state;
|
||||
|
@@ -25,6 +25,7 @@ import AddShoppingCartIcon from 'material-ui-icons/AddShoppingCart';
|
||||
|
||||
//Redux
|
||||
import {connect} from 'react-redux';
|
||||
import * as actionTypes from './store/actions'
|
||||
|
||||
|
||||
const styles = theme => ({
|
||||
@@ -63,9 +64,11 @@ const styles = theme => ({
|
||||
class IconButtons extends React.Component {
|
||||
constructor(props){
|
||||
super(props);
|
||||
let buttonState = "default"
|
||||
console.log("buttonState", buttonState)
|
||||
switch(buttonState){
|
||||
//let buttonState = "default"
|
||||
|
||||
console.log("selection", this.props.selection)
|
||||
|
||||
switch("downloading"){
|
||||
case "paused":
|
||||
startTorrentState: "primary"
|
||||
pauseTorrentState: "disabled"
|
||||
@@ -96,7 +99,6 @@ class IconButtons extends React.Component {
|
||||
console.log("Here...", selectedRowProps)
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
render() {
|
||||
const { classes } = this.props;
|
||||
@@ -105,7 +107,7 @@ class IconButtons extends React.Component {
|
||||
<AddTorrentFilePopup />
|
||||
<AddTorrentLinkPopup />
|
||||
<div className={classes.verticalDivider}></div>
|
||||
<IconButton color={this.props.startTorrentState} data-tip="Start Torrent" className={classes.button} aria-label="Start Torrent">
|
||||
<IconButton color={this.props.startTorrentState} data-tip={this.props.selection} className={classes.button} aria-label="Start Torrent">
|
||||
<ReactTooltip place="top" type="light" effect="float" />
|
||||
<StartTorrentIcon />
|
||||
</IconButton>
|
||||
@@ -140,11 +142,17 @@ IconButtons.propTypes = {
|
||||
};
|
||||
|
||||
|
||||
const mapStateToProps = state => {
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
buttonState: state.selection
|
||||
selection: state.selection
|
||||
};
|
||||
}
|
||||
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
changeSelection: (selection) => dispatch({type: actionTypes.CHANGE_SELECTION, selection: selection})
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(styles)(connect(mapStateToProps)(IconButtons))
|
||||
|
||||
export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(IconButtons))
|
||||
|
@@ -4,7 +4,7 @@ import styles from '../node_modules/react-bootstrap-table/dist/react-bootstrap-t
|
||||
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
|
||||
|
||||
import {
|
||||
SortingState, LocalSorting, PagingState, VirtualTableLayout, SelectionState,
|
||||
SortingState, LocalSorting, PagingState, VirtualTableLayout, SelectionState, FilteringState, LocalFiltering,
|
||||
} from '@devexpress/dx-react-grid';
|
||||
|
||||
import {
|
||||
@@ -51,10 +51,8 @@ ws.onmessage = function (evt) //When we recieve a message from the websocket
|
||||
// torrentHash.innerHTML = "Hash: " + clientUpdate.data[0].TorrentHashString;
|
||||
torrents = []; //clearing out the torrent array to make room for new (so that it does keep adding)
|
||||
for(var i = 0; i < clientUpdate.total; i++){
|
||||
//console.log("TorrentName: ", clientUpdate.data[i].TorrentName)
|
||||
console.log("PercentDone: ", clientUpdate.data[i].PercentDone)
|
||||
torrents.push({
|
||||
TorrentHashString: clientUpdate.data[i].TorrentHashString,
|
||||
TorrentHashString: clientUpdate.data[i].TorrentHash,
|
||||
TorrentName: clientUpdate.data[i].TorrentName,
|
||||
DownloadedSize: clientUpdate.data[i].DownloadedSize,
|
||||
Size: clientUpdate.data[i].Size,
|
||||
@@ -66,7 +64,7 @@ ws.onmessage = function (evt) //When we recieve a message from the websocket
|
||||
Status: clientUpdate.data[i].Status,
|
||||
BytesCompleted: clientUpdate.data[i].BytesCompleted,
|
||||
ActivePeers: clientUpdate.data[i].ActivePeers,
|
||||
TotalPeers: clientUpdate.data[i].TotalPeers,
|
||||
ETA: clientUpdate.data[i].ETA,
|
||||
})
|
||||
|
||||
}
|
||||
@@ -88,12 +86,12 @@ function sendEvent(message)
|
||||
console.log('Sending message... ', message)
|
||||
}
|
||||
|
||||
|
||||
class TorrentListTable extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
columnName: "Status",
|
||||
torrentList: torrents,
|
||||
columns: [
|
||||
{ name: 'TorrentName', title: 'Torrent Name' },
|
||||
@@ -104,14 +102,13 @@ class TorrentListTable extends React.Component {
|
||||
{ name: 'DownloadSpeed', title: 'DL Speed'},
|
||||
{ name: 'UploadSpeed', title: 'UL Speed'},
|
||||
{ name: 'ActivePeers', title: 'Active Peers' },
|
||||
{ name: 'TotalPeers', title: 'Total Peers' },
|
||||
{ name: 'ETA', title: 'ETA'},
|
||||
{ name: 'Ratio', title: 'Ratio'},
|
||||
{ name: 'Availability', title: 'Availability'},
|
||||
{ name: 'TorrentHashString', title: 'Torrent Hash' }
|
||||
],
|
||||
columnOrder: ['TorrentName', 'DownloadedSize', 'Size', 'PercentDone', 'Status', 'DownloadSpeed', 'UploadSpeed','ActivePeers', 'TotalPeers', 'ETA', 'Ratio', 'Availability', 'TorrentHashString'],
|
||||
columnWidths: {TorrentName: 250, DownloadedSize: 175, Size: 175, PercentDone: 175, Status: 250, DownloadSpeed: 100, UploadSpeed: 100, ActivePeers: 100, TotalPeers: 100, ETA: 175, Ratio: 175, Availability: 175, TorrentHashString: 250,}
|
||||
columnOrder: ['TorrentName', 'DownloadedSize', 'Size', 'PercentDone', 'Status', 'DownloadSpeed', 'UploadSpeed','ActivePeers', 'ETA', 'Ratio', 'Availability', 'TorrentHashString'],
|
||||
columnWidths: {TorrentName: 250, DownloadedSize: 100, Size: 100, PercentDone: 175, Status: 150, DownloadSpeed: 100, UploadSpeed: 100, ActivePeers: 100, ETA: 100, Ratio: 75, Availability: 75, TorrentHashString: 250,}
|
||||
|
||||
};
|
||||
|
||||
@@ -134,6 +131,12 @@ class TorrentListTable extends React.Component {
|
||||
clearInterval(this.timerID);
|
||||
}
|
||||
|
||||
componentWillReceiveProps (nextProps){
|
||||
if (this.props.filter != nextProps.filter){
|
||||
this.filterHandler(nextProps.filter)
|
||||
}
|
||||
}
|
||||
|
||||
tick() {
|
||||
ws.send("clientUpdateRequest")//talking to the server to get the torrent list
|
||||
this.setState({torrentList: torrents});
|
||||
@@ -142,12 +145,78 @@ class TorrentListTable extends React.Component {
|
||||
|
||||
}
|
||||
|
||||
createSelectionold = (selection) => {
|
||||
for (i = 0; i < selection.length; i++){
|
||||
buttonState = selection[i]
|
||||
}
|
||||
|
||||
|
||||
|
||||
switch("downloading"){
|
||||
case "paused":
|
||||
startTorrentState: "primary"
|
||||
pauseTorrentState: "disabled"
|
||||
stopTorrentState: "primary"
|
||||
deleteTorrentState: "accent"
|
||||
|
||||
case "stopped":
|
||||
startTorrentState: "primary"
|
||||
pauseTorrentState: "disabled"
|
||||
stopTorrentState: "primary"
|
||||
deleteTorrentState: "accent"
|
||||
|
||||
case "downloading":
|
||||
startTorrentState: "disabled"
|
||||
pauseTorrentState: "primary"
|
||||
stopTorrentState: "primary"
|
||||
deleteTorrentState: "accent"
|
||||
|
||||
default:
|
||||
startTorrentState: "disabled"
|
||||
pauseTorrentState: "disabled"
|
||||
stopTorrentState: "disabled"
|
||||
deleteTorrentState: "disabled"
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
selectionHandler = (selection) => {
|
||||
console.log("Selection", selection) //prints out row number
|
||||
this.props.changeSelection(selection) //dispatch to redux
|
||||
|
||||
}
|
||||
|
||||
filterHandler = (filter) => {
|
||||
console.log("Changing FIlter", filter)
|
||||
console.log("Filter Value", filter[0].value)
|
||||
if (filter[0].value === 'Active') {
|
||||
console.log("Active Filter")
|
||||
values = ['Seeding', 'Downloading'].includes
|
||||
this.props.filter == [{columnName: 'Status', value: values}]
|
||||
return['Downloading', 'Seeding'].includes(row[filter.columnName]);
|
||||
}
|
||||
}
|
||||
|
||||
getCellValueFunc = (selection) => {
|
||||
//console.log("Selection", selection)
|
||||
console.log(selection["Status"])
|
||||
if (selection[0] != undefined) {
|
||||
console.log("Row", selection[0])
|
||||
console.log("Column", "Status")
|
||||
console.log("Data", selection[0]["Status"])
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Grid rows={this.state.torrentList} columns={this.state.columns}>
|
||||
<SortingState sorting={this.props.sorting} onSortingChange={this.props.changeSorting} />
|
||||
<LocalSorting />
|
||||
<SelectionState onSelectionChange={this.props.changeSelection} selection={this.props.selection}/>
|
||||
<FilteringState filters={this.props.filter} />
|
||||
<LocalFiltering />
|
||||
<SelectionState onSelectionChange={this.props.changeSelection} selection={this.props.selection}/>
|
||||
<TableView tableCellTemplate={({ row, column, style }) => {
|
||||
if (column.name === 'PercentDone') {
|
||||
return (
|
||||
@@ -162,15 +231,13 @@ class TorrentListTable extends React.Component {
|
||||
<TableSelection selectByRowClick highlightSelected />
|
||||
<TableHeaderRow allowSorting allowResizing allowDragging />
|
||||
</Grid>
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
|
||||
filter: state.filter
|
||||
};
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user