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

seperating react files, starting to fix top menu.

Browse Source
This commit is contained in:
deranjer
2017-12-17 21:40:00 -05:00
parent 1904a6ec24
commit c408801447
10 changed files with 1851 additions and 1625 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
torrent-project/src/BackendComm/backendWebsocket.js Normal file
View File

@@ -0,0 +1,124 @@
import React from 'react';
import ReactDOM from 'react-dom';
import {connect} from 'react-redux';
import * as actionTypes from '../store/actions';
import ReactTooltip from 'react-tooltip'
import BackendIcon from 'material-ui-icons/InfoOutline';
var title = document.title; //Set the number of active torrents in the title
let torrents= [];
//websocket is started in kickwebsocket.js and is picked up here so "ws" is already defined
ws.onmessage = function (evt) { //When we recieve a message from the websocket
if(evt.data == "clientUpdate") {
console.log("Client Update Incoming...")
} else { // recieving data
console.log("Recieved Client Update...")
var clientUpdate = JSON.parse(evt.data);
if (clientUpdate.total) { // if it has a total field it is a torrentlist update
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++){
torrents.push({
TorrentHashString: clientUpdate.data[i].TorrentHash,
TorrentName: clientUpdate.data[i].TorrentName,
DownloadedSize: clientUpdate.data[i].DownloadedSize,
Size: clientUpdate.data[i].Size,
DownloadSpeed: clientUpdate.data[i].DownloadSpeed,
UploadSpeed: clientUpdate.data[i].UploadSpeed,
PercentDone: clientUpdate.data[i].PercentDone,
StoragePath: clientUpdate.data[i].StoragePath,
DateAdded: clientUpdate.data[i].DateAdded,
Status: clientUpdate.data[i].Status,
BytesCompleted: clientUpdate.data[i].BytesCompleted,
ActivePeers: clientUpdate.data[i].ActivePeers,
ETA: clientUpdate.data[i].ETA,
})
}
var newTitle = '(' + clientUpdate.total + ')' + title; //updating the title
document.title = newTitle;
}
}
}
ws.onclose = function() {
console.log('Closing connection')
};
var divStyle = {
display: 'inline-block',
paddingTop: '10px',
paddingLeft: '10px',
}
var buttonStyle ={
fontSize: '60px',
}
class BackendSocket extends React.Component {
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
2000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
ws.send("clientUpdateRequest")//talking to the server to get the torrent list
this.props.newTorrentList(torrents)
//console.log("STATE:", this.state.torrentList)
//console.log("Torrents", torrents);
}
render() {
return (
<div style={divStyle}>
<BackendIcon styles={buttonStyle} color="primary" data-tip="BackendStatus: Green=Good" aria-label="Settings" />
</div>
);
}
}
const mapStateToProps = state => {
return {
};
}
const mapDispatchToProps = dispatch => {
return {
newTorrentList: (torrentList) => dispatch({type: actionTypes.TORRENT_LIST, torrentList }),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(BackendSocket);

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

@@ -0,0 +1,18 @@
import React from 'react';
function GeneralTab(props) {
return (
<div>
Here
</div>
);
}
export default GeneralTab

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

@@ -4,7 +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';
import GeneralTab from './Tabs/generalTab';
function TabContainer(props) {
return <div style={{ padding: 8 * 3 }}>{props.children}</div>;
@@ -51,7 +51,7 @@ function TabContainer(props) {
</Tabs>
</AppBar>
</div>
{value === 0 && <TabContainer><generalTab /></TabContainer>}
{value === 0 && <TabContainer><GeneralTab /></TabContainer>}
{value === 1 && <TabContainer>Peers</TabContainer>}
{value === 2 && <TabContainer>Files</TabContainer>}
{value === 3 && <TabContainer>Speed</TabContainer>}

9
torrent-project/src/CSS/topMenu.css Normal file
View File

@@ -0,0 +1,9 @@
.button {
font-size: '60px';
}
.padding {
display: inline-block;
padding-top: '10px';
padding-left: '10px';
}

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

@@ -1,4 +1,6 @@
export const SORTLIST = 'SORTLIST';
export const CHANGE_SELECTION = 'CHANGE_SELECTION';
export const CHANGE_FILTER = 'CHANGE_FILTER';
export const TORRENT_LIST = 'TORRENT_LIST';
export const SET_BUTTON_STATE = 'BUTTON_STATE';

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

@@ -3,11 +3,13 @@ import * as actionTypes from './actions';
const initialState = {
buttonState: "default",
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"}],
sorting: [],
selection: [],
filter: ["Status", ""],
columnName: "Status"
columnName: "Status",
torrentList: [],
}
const reducer = (state = initialState, action) => {
@@ -28,7 +30,20 @@ const reducer = (state = initialState, action) => {
return {
...state,
filter: action.filter
}
};
case actionTypes.TORRENT_LIST:
return {
...state,
torrentList: action.torrentList
};
case actionTypes.SET_BUTTON_STATE:
return {
...state,
buttonState: action.buttonState
};
default:
return state;

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

@@ -23,6 +23,9 @@ import DeleteIcon from 'material-ui-icons/Delete';
import AddShoppingCartIcon from 'material-ui-icons/AddShoppingCart';
//import PhotoCamera from 'material-ui-icons/PhotoCamera';
import BackendSocket from './BackendComm/backendWebsocket';
//Redux
import {connect} from 'react-redux';
import * as actionTypes from './store/actions'
@@ -64,41 +67,19 @@ const styles = theme => ({
class IconButtons extends React.Component {
constructor(props){
super(props);
//let buttonState = "default"
console.log("selection", this.props.selection)
switch("downloading"){
case "paused":
startTorrentState: "primary"
pauseTorrentState: "disabled"
stopTorrentState: "primary"
deleteTorrentState: "accent"
}
buttonHandler = (buttonState) => {
console.log("BUTTONSTATE", buttonState)
}
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"
componentWillReceiveProps = (nextProps) => { //if we get a new buttonstate force a button update
if (this.props.buttonState != nextProps.buttonState){
this.buttonHandler(nextProps.buttonState)
}
console.log("B1State", this.props.buttonState[0].startButton)
}
/* onGlobalSelectRow = (selectedRowProps) => {
console.log("Here...", selectedRowProps)
}
*/
render() {
const { classes } = this.props;
@@ -107,19 +88,19 @@ class IconButtons extends React.Component {
<AddTorrentFilePopup />
<AddTorrentLinkPopup />
<div className={classes.verticalDivider}></div>
<IconButton color={this.props.startTorrentState} data-tip={this.props.selection} className={classes.button} aria-label="Start Torrent">
<IconButton color={this.props.buttonState[0].startButton} data-tip="Start Torrent" className={classes.button} aria-label="Start Torrent" onClick={this.startTorrent}>
<ReactTooltip place="top" type="light" effect="float" />
<StartTorrentIcon />
</IconButton>
<IconButton color={this.props.pauseTorrentState} 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.stopTorrentState} data-tip="Stop Torrent" className={classes.button} aria-label="Stop Torrent">
<IconButton color={this.props.buttonState[0].stopButton} data-tip="Stop Torrent" className={classes.button} aria-label="Stop Torrent">
<ReactTooltip place="top" type="light" effect="float" />
<StopTorrentIcon />
</IconButton>
<IconButton color={this.props.deleteTorrentState} 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} aria-label="Delete Torrent">
<ReactTooltip place="top" type="error" effect="float" />
<DeleteTorrentIcon />
</IconButton>
@@ -132,6 +113,8 @@ class IconButtons extends React.Component {
<ReactTooltip place="top" type="light" effect="float" />
<SettingsIcon />
</IconButton>
<div className={classes.verticalDivider}></div>
<BackendSocket />
</div>
);
}
@@ -142,9 +125,9 @@ IconButtons.propTypes = {
};
const mapStateToProps = (state) => {
const mapStateToProps = state => {
return {
selection: state.selection
buttonState: state.buttonState,
};
}

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

@@ -32,53 +32,7 @@ var torrentLinkModal = document.getElementById('addTorrentLinkModal');
var btnTorrentLink = document.getElementById("addTorrentLink");
*/
var title = document.title; //Set the number of active torrents in the title
let torrents= [];
//websocket is started in kickwebsocket.js and is picked up here so "ws" is already defined
ws.onmessage = function (evt) //When we recieve a message from the websocket
{
if(evt.data == "clientUpdate") {
console.log("Client Update Incoming...")
} else {
console.log("Recieved Client Update...")
var clientUpdate = JSON.parse(evt.data);
// myTextArea.innerHTML = myTextArea.innerHTML + "</br>" + "Client Update Event...";
//myTextArea.innerHTML = myTextArea.innerHTML + "</br>" + clientUpdate.LocalTorrentInfo.DateAdded;
// myTextArea.innerHTML = myTextArea.innerHTML + "</br>" + evt.data;
//myTextArea.innerHTML = myTextArea.innerHTML + "</br>" + clientUpdate[0].TorrentHashString;
// 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++){
torrents.push({
TorrentHashString: clientUpdate.data[i].TorrentHash,
TorrentName: clientUpdate.data[i].TorrentName,
DownloadedSize: clientUpdate.data[i].DownloadedSize,
Size: clientUpdate.data[i].Size,
DownloadSpeed: clientUpdate.data[i].DownloadSpeed,
UploadSpeed: clientUpdate.data[i].UploadSpeed,
PercentDone: clientUpdate.data[i].PercentDone,
StoragePath: clientUpdate.data[i].StoragePath,
DateAdded: clientUpdate.data[i].DateAdded,
Status: clientUpdate.data[i].Status,
BytesCompleted: clientUpdate.data[i].BytesCompleted,
ActivePeers: clientUpdate.data[i].ActivePeers,
ETA: clientUpdate.data[i].ETA,
})
}
var newTitle = '(' + clientUpdate.total + ')' + title; //updating the title
document.title = newTitle;
}
}
ws.onclose = function()
{
//var myTextArea = document.getElementById("loggerData");
//myTextArea.innerHTML = myTextArea.innerHTML + "</br>" + "Connection closed";
console.log('Closing connection')
};
function sendEvent(message)
{
@@ -90,9 +44,7 @@ class TorrentListTable extends React.Component {
constructor(props) {
super(props);
this.state = {
columnName: "Status",
torrentList: torrents,
this.state = { //rows are stored in redux they are sent over from the server
columns: [
{ name: 'TorrentName', title: 'Torrent Name' },
{ name: 'DownloadedSize', title: 'Dl Size'},
@@ -108,8 +60,8 @@ class TorrentListTable extends React.Component {
{ 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,}
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,},
prevSelection: [], //just used to pull data from cell (temp Prevcell holder), real selection is in Redux
};
this.changeColumnOrder = columnOrder => this.setState({columnOrder});
@@ -117,76 +69,47 @@ class TorrentListTable extends React.Component {
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
2000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
componentWillReceiveProps (nextProps){
componentWillReceiveProps (nextProps){ //this is for setting the filter when the left menu activates a new filter
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});
//console.log("STATE:", this.state.torrentList)
//console.log("Torrents", torrents);
determineButtonState = (selectedRows) => {
selectedRows.forEach(element => {
if (element.Status === "Downloading" || "Awaiting Peers" || "Seeding") {
let buttonState = [{startButton: "default", pauseButton: "primary", 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"}]
this.props.setButtonState(buttonState)
} else {
this.props.setButtonState(this.props.buttonStateDefault)
}
});
}
changeSelection = (selection) => {
this.props.changeSelection(selection) //dispatch selection to redux
if (selection.length === 0) { //if selection is empty buttons will be default
console.log("No Selection")
this.props.setButtonState(this.props.buttonStateDefault) //if no selection dispatch that to redux
} else { // if we have selection continue on with logic to determine button state
}
const selectedRows = [] //array of all the selected Rows
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
selection.forEach(element => {
selectedRows.push(this.props.torrentList[element]) //pushing the selected rows out of torrentlist
});
this.determineButtonState(selectedRows) //running a filter on the rows to determing buttonState
}
}
filterHandler = (filter) => {
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') {
@@ -197,26 +120,15 @@ class TorrentListTable extends React.Component {
}
}
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}>
<Grid rows={this.props.torrentList} columns={this.state.columns}>
<SortingState sorting={this.props.sorting} onSortingChange={this.props.changeSorting} />
<LocalSorting />
<FilteringState filters={this.props.filter} />
<LocalFiltering />
<SelectionState onSelectionChange={this.props.changeSelection} selection={this.props.selection}/>
<SelectionState onSelectionChange={this.changeSelection} selection={this.props.selection}/>
<TableView tableCellTemplate={({ row, column, style }) => {
if (column.name === 'PercentDone') {
return (
@@ -237,17 +149,18 @@ class TorrentListTable extends React.Component {
const mapStateToProps = state => {
return {
filter: state.filter
filter: state.filter,
torrentList: state.torrentList,
buttonState: state.buttonState,
buttonStateDefault: state.buttonStateDefault, //all default
};
}
const mapDispatchToProps = dispatch => {
return {
changeSorting: (sorting) => dispatch({type: actionTypes.SORTLIST, sorting }),
changeSelection: (selection) => dispatch({type: actionTypes.CHANGE_SELECTION, selection}),
setButtonState: (buttonState) => dispatch({type: actionTypes.SET_BUTTON_STATE, buttonState})
}
}