deranjer/goTorrent
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

adding more fields to torrentlist, ul speed/dl speed

Browse Source 
enter the commit message for your changes. Lines starting
This commit is contained in:
deranjer
2017-12-14 20:42:55 -05:00
parent 2de6ba11a5
commit 1904a6ec24
5118 changed files with 127866 additions and 6327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
torrent-project/src/BottomMenu/Tabs/generalTab.js Normal file
View File

3
torrent-project/src/bottomMenu.js → torrent-project/src/BottomMenu/bottomMenu.js
View 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>}

1
torrent-project/src/addTorrentLinkModal.js
View File

@@ -24,6 +24,7 @@ const button = {
const inlineStyle = {
display: 'inline-block',
backdrop: 'static',
}
export default class addTorrentPopup extends React.Component {

6
torrent-project/src/app.jsx
View File

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

73
torrent-project/src/leftMenu.js
View File

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

16
torrent-project/src/progressBarCell.js
View File

@@ -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
torrent-project/src/store/actions.js
View File

@@ -1,3 +1,4 @@
export const SORTLIST = 'SORTLIST';
export const CHANGE_SELECTION = 'CHANGE_SELECTION';
export const CHANGE_FILTER = 'CHANGE_FILTER';

19
torrent-project/src/store/reducer.js
View File

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

24
torrent-project/src/topMenu.js
View File

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

93
torrent-project/src/torrentlist.js
View File

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