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

Added the Files tab, fixed peer tab, started adding functionality for the buttons, cleaned up general tab

Browse Source
This commit is contained in:
deranjer
2017-12-30 23:24:17 -05:00
parent a9315a4b54
commit 7411638c95
17 changed files with 21952 additions and 21939 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
torrent-project/src/BackendComm/backendWebsocket.js
View File

@@ -12,6 +12,7 @@ import Select from 'material-ui/Select/Select';
var title = document.title; //Set the number of active torrents in the title
let torrents= [];
let peerList = [];
let fileList = [];
var torrentListRequest = {
messageType: "torrentListRequest"
@@ -23,7 +24,7 @@ var torrentListRequest = {
//websocket is started in kickwebsocket.js and is picked up here so "ws" is already defined 22
ws.onmessage = function (evt) { //When we recieve a message from the websocket
var serverMessage = JSON.parse(evt.data)
//console.log("message", serverMessage.MessageType)
console.log("message", serverMessage.MessageType)
switch (serverMessage.MessageType) {
case "torrentList":
@@ -42,11 +43,13 @@ ws.onmessage = function (evt) { //When we recieve a message from the websocket
PercentDone: serverMessage.data[i].PercentDone,
StoragePath: serverMessage.data[i].StoragePath,
DateAdded: serverMessage.data[i].DateAdded,
SourceType: serverMessage.data[i].SourceType,
Status: serverMessage.data[i].Status,
BytesCompleted: serverMessage.data[i].BytesCompleted,
ActivePeers: serverMessage.data[i].ActivePeers,
ETA: serverMessage.data[i].ETA,
Ratio: serverMessage.data[i].Ratio,
TotalUploadedSize: serverMessage.data[i].TotalUploadedSize,
Ratio: serverMessage.data[i].UploadRatio,
})
}
var newTitle = '(' + serverMessage.total + ')' + title; //updating the title
@@ -70,16 +73,18 @@ ws.onmessage = function (evt) { //When we recieve a message from the websocket
break
case "torrentFileList":
console.log("Recieved FileListUpdate", serverMessage.fileList)
console.log("Recieved FileListUpdate", evt.data)
fileList = [];
for (var i = 0; i < serverMessage.total; i++){
for (var i = 0; i < serverMessage.TotalFiles; i++){
fileList.push({
fileList: serverMessage.fileList[i]
FileName: serverMessage.FileList[i].FileName,
FilePath: serverMessage.FileList[i].FilePath,
FileSize: serverMessage.FileList[i].FileSize,
FilePercent: serverMessage.FileList[i].FilePercent,
FilePriority: serverMessage.FileList[i].FilePriority,
})
}
console.log("filelist", fileList)
break
case "speedTab":
@@ -123,11 +128,16 @@ class BackendSocket extends React.Component {
MessageType: "torrentPeerListRequest",
Payload: selectionHashes,
}
//console.log("Peers tab information requested", peerListHashes)
console.log("Peers tab information requested", peerListHashes)
ws.send(JSON.stringify(peerListHashes))
break;
case 2:
console.log("Files tab information requested")
let fileListHashes = {
MessageType: "torrentFileListRequest",
Payload: selectionHashes,
}
console.log("Files tab information requested", fileListHashes)
ws.send(JSON.stringify(fileListHashes))
break;
case 3:
console.log("Speed tab information requested")
@@ -166,13 +176,28 @@ class BackendSocket extends React.Component {
ws.send(JSON.stringify(torrentListRequest))//talking to the server to get the torrent list
console.log("Torrentlist", torrents)
this.props.newTorrentList(torrents) //sending the list of torrents to torrentlist.js
if (this.props.selectedTab === 1 && this.props.selectionHashes.length === 1){ //if we are on the peerlist tab dispatch a new peerlist
let peerListHashes = {
MessageType: "torrentPeerListRequest",
Payload: this.props.selectionHashes,
if (this.props.selectionHashes.length === 1){
switch(this.props.selectedTab){
case 1:
let peerListHashes = {
MessageType: "torrentPeerListRequest",
Payload: this.props.selectionHashes,
}
ws.send(JSON.stringify(peerListHashes))
this.props.newPeerList(peerList)
break;
case 2:
let fileListHashes = {
MessageType: "torrentFileListRequest",
Payload: this.props.selectionHashes,
}
console.log("Files tab information requested", fileList)
ws.send(JSON.stringify(fileListHashes))
this.props.newFileList(fileList)
break;
}
ws.send(JSON.stringify(peerListHashes))
this.props.newPeerList(peerList)
}
}
@@ -213,7 +238,8 @@ const mapStateToProps = state => {
const mapDispatchToProps = dispatch => {
return {
newTorrentList: (torrentList) => dispatch({type: actionTypes.TORRENT_LIST, torrentList }),
newPeerList: (peerList) => dispatch({type: actionTypes.PEER_LIST, peerList})
newPeerList: (peerList) => dispatch({type: actionTypes.PEER_LIST, peerList}),
newFileList: (fileList) => dispatch({type: actionTypes.FILE_LIST, fileList}),
}
}

69
torrent-project/src/BottomMenu/Tabs/fileTab.js Normal file
View File

@@ -0,0 +1,69 @@
import React from 'react';
import ReactDOM from 'react-dom';
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
import {
SortingState, LocalSorting, VirtualTableLayout, SelectionState,
} from '@devexpress/dx-react-grid';
import {
Grid, TableView, TableHeaderRow, PagingPanel, VirtualTableView, TableColumnResizing,
DragDropContext, TableColumnReordering,
} from '@devexpress/dx-react-grid-material-ui';
import {connect} from 'react-redux';
import * as actionTypes from '../../store/actions';
class FileTab extends React.Component {
constructor(props) {
super(props);
this.state = { //rows are stored in redux they are sent over from the server
columns: [
{ name: 'FileName', title: 'File Name'},
{ name: 'FilePath', title: 'File Path' },
{ name: 'FileSize', title: 'File Size'},
//{ name: 'Country', title: 'Country of Origin'}, //TODO map IP to country
{ name: 'FilePercent', title: 'File Percent'},
{ name: 'FilePriority', title: 'File Priority'}, //T=Tracker, I=Incoming, Hg=DHTGetPeers, Ha=DHTAnnouncePeer, X=PEX
],
sorting: [],
columnOrder: ['FileName', 'FilePath', 'FileSize', 'FilePercent', 'FilePriority'],
columnWidths: {FileName: 250, FilePath: 450, FileSize: 100, FilePercent: 100, FilePriority: 75},
};
this.changeColumnOrder = columnOrder => this.setState({columnOrder});
this.changeColumnWidths = columnWidths => this.setState({columnWidths});
this.changeSorting = sorting => this.setState({sorting});
}
render() {
return (
<Grid rows={this.props.fileList} columns={this.state.columns}>
<SortingState sorting={this.state.sorting} onSortingChange={this.changeSorting} />
<LocalSorting />
<DragDropContext />
<TableView />
<TableColumnResizing columnWidths={this.state.columnWidths} onColumnWidthsChange={this.changeColumnWidths}/>
<TableColumnReordering order={this.state.columnOrder} onOrderChange={this.changeColumnOrder} />
<TableHeaderRow allowSorting allowResizing allowDragging />
</Grid>
);
}
}
const mapStateToProps = state => {
return {
selectionHashes: state.selectionHashes,
fileList: state.fileList,
};
}
export default connect(mapStateToProps)(FileTab)

7
torrent-project/src/BottomMenu/Tabs/generalTab.js
View File

@@ -64,7 +64,7 @@ class GeneralTab extends React.Component {
<Paper className={classes.paper}>Storage Path: <span className={classes.floatRight}>{this.state.selectedTorrent["StoragePath"]} </span> </Paper>
<Paper className={classes.paper}>Date Added: <span className={classes.floatRight}> {this.state.selectedTorrent["DateAdded"]} </span> </Paper>
<Paper className={classes.paper}>Source Type: <span className={classes.floatRight}> {this.state.selectedTorrent["SourceType"]} </span> </Paper>
<Paper className={classes.paper}>Label: <span className={classes.floatRight}> {this.state.selectedTorrent["Status"]} </span> </Paper>
<Paper className={classes.paper}>Label: <span className={classes.floatRight}> None </span> </Paper>
<Paper className={classes.paper}>Torrent Hash: <span className={classes.floatRight}> {this.state.selectedTorrent["TorrentHashString"]} </span> </Paper>
</Grid>
@@ -72,10 +72,9 @@ class GeneralTab extends React.Component {
<Paper className={classes.paper}>Status: <span className={classes.floatRight}>{this.state.selectedTorrent["Status"]} </span> </Paper>
<Paper className={classes.paper}>Percent Done: <span className={classes.floatRight}>{this.state.selectedTorrent["PercentDone"]} </span> </Paper>
<Paper className={classes.paper}>Torrent DL Amount: <span className={classes.floatRight}>{this.state.selectedTorrent["DownloadedSize"]} </span> </Paper>
<Paper className={classes.paper}>Total Upload Amount: <span className={classes.floatRight}>{this.state.selectedTorrent["Status"]} </span> </Paper>
<Paper className={classes.paper}>Seeding Ratio: <span className={classes.floatRight}>{this.state.selectedTorrent["Status"]} </span> </Paper>
<Paper className={classes.paper}>Total Upload Amount: <span className={classes.floatRight}>{this.state.selectedTorrent["TotalUploadedSize"]} </span> </Paper>
<Paper className={classes.paper}>Seeding Ratio: <span className={classes.floatRight}>{this.state.selectedTorrent["Ratio"]} </span> </Paper>
<Paper className={classes.paper}>ETA: <span className={classes.floatRight}>{this.state.selectedTorrent["ETA"]} </span> </Paper>
<Paper className={classes.paper}>Status: <span className={classes.floatRight}>{this.state.selectedTorrent["Status"]} </span> </Paper>
</Grid>
<Grid item xs={12} sm={4}>

3
torrent-project/src/BottomMenu/bottomMenu.js
View File

@@ -6,6 +6,7 @@ import AppBar from 'material-ui/AppBar';
import Tabs, { Tab } from 'material-ui/Tabs';
import GeneralTab from './Tabs/generalTab';
import PeerTab from './Tabs/peerTab';
import FileTab from './Tabs/fileTab';
//Redux
@@ -57,7 +58,7 @@ function TabContainer(props) {
</div>
{this.props.selectedTab === 0 && <TabContainer><GeneralTab /></TabContainer>}
{this.props.selectedTab === 1 && <TabContainer><PeerTab /></TabContainer>}
{this.props.selectedTab === 2 && <TabContainer>Files</TabContainer>}
{this.props.selectedTab === 2 && <TabContainer><FileTab /></TabContainer>}
{this.props.selectedTab === 3 && <TabContainer>Speed</TabContainer>}
{this.props.selectedTab === 4 && <TabContainer>Logger</TabContainer>}
</div>

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

@@ -50,7 +50,7 @@ export default class addTorrentPopup extends React.Component {
//let magnetLinkSubmit = this.state.textValue;
let magnetLinkMessage = {
messageType: "magnetLinkSubmit",
Payload: { MagnetLink: this.state.textValue}
Payload: [this.state.textValue]
}
console.log("Sending magnet link: ", magnetLinkMessage);
ws.send(JSON.stringify(magnetLinkMessage));

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

@@ -131,12 +131,12 @@ class SimpleList extends React.Component {
</ListItemIcon>
<ListItemText primary="Seeding Torrents" />
</ListItem>
<ListItem className={this.state.activeTorrentsClass} button={true} onClick={ () => this.setFilter('Active', this.state.activeID)}>
{/* <ListItem className={this.state.activeTorrentsClass} button={true} onClick={ () => this.setFilter('Active', this.state.activeID)}>
<ListItemIcon className={classes.icons}>
<ActiveTorrentsIcon />
</ListItemIcon>
<ListItemText primary="Active Torrents" />
</ListItem>
</ListItem> */}
<ListItem className={this.state.completedTorrentsClass} button={true} onClick={ () => this.setFilter('Completed', this.state.completedID)}>
<ListItemIcon className={classes.inactiveIcon}>
<ActiveTorrentsIcon />

1
torrent-project/src/store/actions.js
View File

@@ -6,3 +6,4 @@ export const SET_BUTTON_STATE = 'BUTTON_STATE';
export const SELECTION_HASHES = 'SELECTION_HASHES';
export const SELECTED_TAB = 'SELECTED_TAB';
export const PEER_LIST = 'PEER_LIST';
export const FILE_LIST = 'FILE_LIST';

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

@@ -3,8 +3,8 @@ import * as actionTypes from './actions';
const initialState = {
buttonStateDefault: [{startButton: "default", pauseButton: "default", stopButton: "default", deleteButton: "default", fSeedButton: "default", fRecheckButton: "default"}],
buttonState: [{startButton: "default", pauseButton: "default", stopButton: "default", deleteButton: "default", fSeedButton: "default", fRecheckButton: "default"}],
buttonStateDefault: [{startButton: "default", stopButton: "default", deleteButton: "default", fSeedButton: "default", fRecheckButton: "default"}],
buttonState: [{startButton: "default", stopButton: "default", deleteButton: "default", fSeedButton: "default", fRecheckButton: "default"}],
sorting: [],
selection: [],
selectionHashes: [],
@@ -12,6 +12,7 @@ const initialState = {
columnName: "Status",
torrentList: [],
peerList: [],
fileList: [],
torrentDetailInfo: [],
selectedTab: 0,
}
@@ -56,6 +57,13 @@ const reducer = (state = initialState, action) => {
...state,
peerList: action.peerList
}
case actionTypes.FILE_LIST:
console.log("FILELIST REDUX......", action.fileList)
return {
...state,
fileList: action.fileList
}
case actionTypes.SET_BUTTON_STATE:
return {

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

@@ -10,7 +10,7 @@ import AddTorrentFilePopup from './addTorrentFileModal';
import StartTorrentIcon from 'material-ui-icons/PlayArrow';
import PauseTorrentIcon from 'material-ui-icons/Pause';
//import PauseTorrentIcon from 'material-ui-icons/Pause';
import StopTorrentIcon from 'material-ui-icons/Stop';
import DeleteTorrentIcon from 'material-ui-icons/Delete';
import RSSTorrentIcon from 'material-ui-icons/RssFeed';
@@ -70,7 +70,7 @@ class IconButtons extends React.Component {
startTorrent = () => {
console.log("Starting Torrents", selection)
console.log("Starting Torrents", this.props.selectionHashes)
let startTorrentHashes = {
MessageType: "startTorrents",
Payload: this.props.selectionHashes,
@@ -79,17 +79,26 @@ class IconButtons extends React.Component {
ws.send(JSON.stringify(startTorrentHashes))
}
buttonHandler = (buttonState) => {
console.log("BUTTONSTATE", buttonState)
stopTorrent = () => {
let stopTorrentHashes = {
MessageType: "stopTorrents",
Payload: this.props.selectionHashes,
}
console.log("Stopping Torrents", stopTorrentHashes)
ws.send(JSON.stringify(stopTorrentHashes))
}
componentWillReceiveProps = (nextProps) => { //if we get a new buttonstate force a button update
if (this.props.buttonState != nextProps.buttonState){
this.buttonHandler(nextProps.buttonState)
deleteTorrent = () => {
let deleteTorrentHashes = {
MessageType: "deleteTorrents",
Payload: this.props.selectionHashes,
}
console.log("B1State", this.props.buttonState[0].startButton)
console.log("Deleting Torrents", deleteTorrentHashes)
ws.send(JSON.stringify(deleteTorrentHashes))
}
render() {
const { classes } = this.props;
return (
@@ -101,15 +110,15 @@ class IconButtons extends React.Component {
<ReactTooltip place="top" type="light" effect="float" />
<StartTorrentIcon />
</IconButton>
<IconButton color={this.props.buttonState[0].pauseButton} data-tip="Pause Torrent" className={classes.button} aria-label="Pause Torrent">
{/* <IconButton color={this.props.buttonState[0].pauseButton} data-tip="Pause Torrent" className={classes.button} aria-label="Pause Torrent">
<ReactTooltip place="top" type="light" effect="float" />
<PauseTorrentIcon />
</IconButton>
<IconButton color={this.props.buttonState[0].stopButton} data-tip="Stop Torrent" className={classes.button} aria-label="Stop Torrent">
</IconButton> */}
<IconButton color={this.props.buttonState[0].stopButton} data-tip="Stop Torrent" className={classes.button} onClick={this.stopTorrent} aria-label="Stop Torrent">
<ReactTooltip place="top" type="light" effect="float" />
<StopTorrentIcon />
</IconButton>
<IconButton color={this.props.buttonState[0].deleteButton} data-tip="Delete Torrent" className={classes.button} aria-label="Delete Torrent">
<IconButton color={this.props.buttonState[0].deleteButton} data-tip="Delete Torrent" className={classes.button} onClick={this.deleteTorrent} aria-label="Delete Torrent">
<ReactTooltip place="top" type="error" effect="float" />
<DeleteTorrentIcon />
</IconButton>

20
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, FilteringState, LocalFiltering,
SortingState, LocalSorting, PagingState, VirtualTableLayout, SelectionState, FilteringState,
} from '@devexpress/dx-react-grid';
import {
@@ -57,10 +57,9 @@ class TorrentListTable extends React.Component {
{ 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', '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,},
columnOrder: ['TorrentName', 'DownloadedSize', 'Size', 'PercentDone', 'Status', 'DownloadSpeed', 'UploadSpeed','ActivePeers', 'ETA', 'Ratio', 'Availability'],
columnWidths: {TorrentName: 250, DownloadedSize: 100, Size: 100, PercentDone: 175, Status: 150, DownloadSpeed: 100, UploadSpeed: 100, ActivePeers: 100, ETA: 100, Ratio: 75, Availability: 75},
prevSelection: [], //just used to pull data from cell (temp Prevcell holder), real selection is in Redux
};
@@ -90,10 +89,10 @@ class TorrentListTable extends React.Component {
determineButtonState = (selectedRows) => { //TODO run a filter to corrently determing button status... currently broken
selectedRows.forEach(element => {
if (element.Status === "Downloading" || "Awaiting Peers" || "Seeding") {
let buttonState = [{startButton: "default", pauseButton: "primary", stopButton: "primary", deleteButton: "accent", fSeedButton: "default", fRecheckButton: "primary"}]
let buttonState = [{startButton: "default", stopButton: "primary", deleteButton: "accent", fSeedButton: "default", fRecheckButton: "primary"}]
this.props.setButtonState(buttonState)
} else if (element.Status === "Completed") {
let buttonState = [{startButton: "default", pauseButton: "default", stopButton: "default", deleteButton: "accent", fSeedButton: "primary", fRecheckButton: "primary"}]
let buttonState = [{startButton: "default", stopButton: "default", deleteButton: "accent", fSeedButton: "primary", fRecheckButton: "primary"}]
this.props.setButtonState(buttonState)
} else {
this.props.setButtonState(this.props.buttonStateDefault)
@@ -121,12 +120,8 @@ class TorrentListTable extends React.Component {
filterHandler = (filter) => { //TODO, figure out how to do multiple 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]);
if (filter.value ==="Active"){
console.log("This filter doesn't fucking work")
}
}
@@ -137,7 +132,6 @@ class TorrentListTable extends React.Component {
<SortingState sorting={this.props.sorting} onSortingChange={this.props.changeSorting} />
<LocalSorting />
<FilteringState filters={this.props.filter} />
<LocalFiltering />
<SelectionState onSelectionChange={this.changeSelection} selection={this.props.selection}/>
<TableView tableCellTemplate={({ row, column, style }) => {
if (column.name === 'PercentDone') {