Added logging, changed some directory structure

goTorrentWebUI/src/BottomMenu/Tabs/fileTab.js

@@ -0,0 +1,156 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Button from 'material-ui/Button';
+
+import { ProgressBarCell } from '../../CustomCells/progressBarCell';
+
+
+import {
+    SortingState, LocalSorting, VirtualTableLayout, SelectionState,
+} from '@devexpress/dx-react-grid';
+
+import {
+    Grid, TableHeaderRow, PagingPanel, VirtualTableView, TableColumnResizing,
+    DragDropContext, TableColumnReordering, TableSelection,
+} 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: 'FilePercent', title: 'File Percent'},
+                { name: 'FilePriority', title: 'File Priority'}, 
+            ],
+            sorting: [],
+            columnOrder: ['FileName', 'FilePath', 'FileSize', 'FilePercent', 'FilePriority'],
+            columnWidths: {FileName: 450, FilePath: 650, FileSize: 100, FilePercent: 100, FilePriority: 75},
+            fileSelection: [],
+            selected: [],
+ 
+            
+        };
+
+
+        this.changeColumnOrder = columnOrder => this.setState({columnOrder});
+        this.changeColumnWidths = columnWidths => this.setState({columnWidths});
+        this.changeSorting = sorting => this.setState({sorting});
+
+    }
+
+    changeSelection = (selection) => {
+        console.log("Filelist is changing selection now", selection)
+        this.setState({selected: selection})
+         if (selection.length > 0) { //if selection is empty buttons will be default and selectionHashes will be blanked out and pushed to redux
+            console.log("Getting the selected Rows")
+            const selectedRows = [] //array of all the selected Rows
+            selection.forEach(element => {   
+                selectedRows.push(this.props.fileList[element])   //pushing the selected rows out of torrentlist
+            });
+           this.setState({fileSelection: selectedRows})
+        }
+       
+    }
+
+    sendPriorityRequest = (priority, sendfileNames) =>  {
+        this.state.fileSelection.forEach(element => {
+            console.log("element", element)
+            sendFileNames.push(element.FilePath)
+        })
+        let setFilePriority = {
+            MessageType: "setFilePriority",
+            Payload: sendFileNames,    
+        }
+        console.log(JSON.stringify(setFilePriority))
+        ws.send(JSON.stringify(setFilePriority))
+    }
+
+    setHighPriority = () => {
+        let priorty = "High"
+        let selectionHash = this.props.selectionHashes[0] //getting the first element (should be the only one)
+        let sendFileNames = [selectionHash, "High"]// adding the selection hash as the first element will be stripped out by the server, second element is the prioty request
+    }
+    setNormalPriority = () => {
+        let priorty = "Normal"
+        let selectionHash = this.props.selectionHashes[0] //getting the first element (should be the only one)
+        let sendFileNames = [selectionHash, "Normal"]// adding the selection hash as the first element will be stripped out by the server, second element is the prioty request
+    }
+    setCancelPriority = () => {
+        let priorty = "Cancel"
+        let selectionHash = this.props.selectionHashes[0] //getting the first element (should be the only one)
+        let sendFileNames = [selectionHash, "Cancel"]// adding the selection hash as the first element will be stripped out by the server, second element is the prioty request
+    }
+
+
+
+    render() {
+        return (  
+            //Buttons here 
+            <div>
+                Set File Priority: 
+                <Button raised color="primary" onClick={this.setHighPriority}>
+                    High
+                </Button>
+                <Button raised color="primary" onClick={this.setNormalPriority}>
+                    Normal
+                </Button>
+                <Button raised color="accent" onClick={this.setCancelPriority}>
+                    Do Not Download
+                </Button>
+                <Grid rows={this.props.fileList} columns={this.state.columns}>
+                    <SortingState sorting={this.state.sorting} onSortingChange={this.changeSorting} />
+                    <LocalSorting />
+                    <DragDropContext />
+                    <SelectionState onSelectionChange={this.changeSelection} selection={this.state.selection}/>
+                
+                    <VirtualTableView height={300} tableCellTemplate={({ row, column, style }) => {
+                    if (column.name === 'FilePercent') {
+                        return (
+                            <ProgressBarCell value={row.FilePercent * 100} style={style} />
+                        );
+                        }
+                        return undefined;
+                    }}/>/>
+    
+                    <TableColumnResizing columnWidths={this.state.columnWidths} onColumnWidthsChange={this.changeColumnWidths}/>
+                    <TableColumnReordering order={this.state.columnOrder} onOrderChange={this.changeColumnOrder} />
+                    <TableSelection selectByRowClick highlightSelected />
+                    <TableHeaderRow allowSorting allowResizing allowDragging />
+                </Grid>
+            </div>
+        );
+    }
+
+
+}
+
+
+
+const mapStateToProps = state => {
+    return {
+        selectionHashes: state.selectionHashes,
+        fileList: state.fileList,
+        //fileSelectionNames: state.fileSelectionNames,
+    };
+  }
+
+  const mapDispatchToProps = dispatch => {
+    return {
+       
+        //changeFileSelection: (fileSelection) => dispatch({type: actionTypes.CHANGE_FILE_SELECTION, fileSelection}),
+      
+        sendSelectionHashes: (selectionHashes) => dispatch({type: actionTypes.SELECTION_HASHES, selectionHashes}),
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(FileTab)

goTorrentWebUI/src/BottomMenu/Tabs/generalTab.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { withStyles } from 'material-ui/styles';
+import Paper from 'material-ui/Paper';
+import Grid from 'material-ui/Grid';
+
+
+
+import {connect} from 'react-redux';
+import * as actionTypes from '../../store/actions';
+
+const styles = theme => ({
+    root: {
+      flexGrow: 1,
+      marginTop: 0,
+    },
+    paper: {
+      padding: 16,
+      textAlign: 'left',
+      color: theme.palette.text.primary,
+    },
+    floatRight: {
+        float: 'right',
+    }
+});
+
+
+class GeneralTab extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            selectedTorrent: []
+        }
+
+    }
+
+    componentWillReceiveProps = () => {
+        //console.log("recieving props in generaltab", "TYPE", this.props.selectionHashes[Object.keys(this.props.selectionHashes)[0]])
+        if (this.props.selectionHashes.length === 1) { //if one torrent is selected
+            let selectionHashTemp = this.props.selectionHashes[Object.keys(this.props.selectionHashes)[0]]// extract out the hash of the single selection
+            let selectedTorrentTemp = []
+            this.props.torrentList.forEach(function(singleTorrent){
+                if (singleTorrent.TorrentHashString === selectionHashTemp){
+                    selectedTorrentTemp = singleTorrent
+                }
+            })
+            //selectedTorrentTemp = this.props.torrentList.filter(torrent => torrent.TorrentHashString === this.props.selectionHashes)
+            //console.log("SelectedTorrentTemp", selectedTorrentTemp)
+            this.setState({ selectedTorrent: selectedTorrentTemp });    
+        } else {
+            this.setState({ selectedTorrent: [] })
+        }
+    }
+
+
+    render() {
+        const { classes } = this.props;
+        return (   
+            <div className={classes.root}>
+             <Grid container spacing={8}>
+                <Grid item xs={12} sm={4}>
+                    <Paper className={classes.paper}>Torrent Name: <span className={classes.floatRight}>{this.state.selectedTorrent["TorrentName"]} </span></Paper>
+                    <Paper className={classes.paper}>Torrent Size: <span className={classes.floatRight}>{this.state.selectedTorrent["Size"]} </span> </Paper>
+                    <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}> None </span> </Paper> 
+                    <Paper className={classes.paper}>Torrent Hash: <span className={classes.floatRight}> {this.state.selectedTorrent["TorrentHashString"]} </span> </Paper>
+                    
+                </Grid>
+                <Grid item xs={12} sm={4}>
+                    <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["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>
+                    
+                </Grid>
+                <Grid item xs={12} sm={4}>
+                    <Paper className={classes.paper}>Number of Files: <span className={classes.floatRight}>{this.state.selectedTorrent["FileNumber"]} </span> </Paper>
+                    <Paper className={classes.paper}>Number of Pieces: <span className={classes.floatRight}>{this.state.selectedTorrent["PieceNumber"]} </span> </Paper>
+                
+                
+                
+                </Grid>
+            </Grid>
+            </div>
+        );
+    }
+}
+
+
+
+
+
+const mapStateToProps = state => {
+    return {
+        selectionHashes: state.selectionHashes,
+        torrentList: state.torrentList,
+    };
+}
+
+
+
+export default withStyles(styles)(connect(mapStateToProps)(GeneralTab))

goTorrentWebUI/src/BottomMenu/Tabs/peerTab.js

@@ -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 PeerTab extends React.Component {
+    
+    constructor(props) {
+        super(props);
+        this.state = { //rows are stored in redux they are sent over from the server
+            columns: [
+                { name: 'PeerID', title: 'Peer ID' },
+                { name: 'IP', title: 'IP Address'},
+                //{ name: 'Country', title: 'Country of Origin'}, //TODO map IP to country
+                { name: 'Port', title: 'Port'},
+                { name: 'Source', title: 'Source'}, //T=Tracker, I=Incoming, Hg=DHTGetPeers, Ha=DHTAnnouncePeer, X=PEX
+                { name: 'SupportsEncryption', title: 'Supports Encryption'},
+            ],
+            sorting: [],
+            columnOrder: ['PeerID', 'IP', 'Port', 'Source', 'SupportsEncryption'],
+            columnWidths: {PeerID: 250, IP: 150, Port: 100, Source: 150, SupportsEncryption: 150},
+        };
+ 
+        this.changeColumnOrder = columnOrder => this.setState({columnOrder});
+        this.changeColumnWidths = columnWidths => this.setState({columnWidths});
+        this.changeSorting = sorting => this.setState({sorting});
+    }
+
+    render() {
+        return (   
+            <Grid rows={this.props.peerList} columns={this.state.columns}>
+                <SortingState sorting={this.state.sorting} onSortingChange={this.changeSorting} />
+                <LocalSorting />
+                <DragDropContext />
+                <VirtualTableView height={350}/>
+                <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,
+        peerList: state.peerList,
+    };
+  }
+
+export default connect(mapStateToProps)(PeerTab)

goTorrentWebUI/src/BottomMenu/bottomMenu.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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 PeerTab from './Tabs/peerTab';
+import FileTab from './Tabs/fileTab';
+
+
+//Redux
+import {connect} from 'react-redux';
+import * as actionTypes from '../store/actions'
+
+function TabContainer(props) {
+    return <div style={{ padding: 8 * 3 }}>{props.children}</div>;
+  }
+  
+  TabContainer.propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+
+  const styles = theme => ({
+    root: {
+     // flexGrow: 1,
+    //   marginTop: theme.spacing.unit * 3,
+      //backgroundColor: theme.palette.background.paper,
+      backgroundColor: '#e5e5e5',
+      height: '100%',
+      boxShadow: '0 0 20px #000',
+    },
+  });
+  
+  class BasicTabs extends React.Component {
+
+  
+    handleChange = (event, value) => {
+      //this.setState({ value });
+      this.props.changeTab(value)
+    };
+  
+    render() {
+      const { classes } = this.props;
+  
+      return (
+        <div className={classes.root}>
+          <div className="DragHandle"> {/* making the appbar draggable */}
+            <AppBar position="static">
+              <Tabs value={this.props.selectedTab} onChange={this.handleChange}>
+                <Tab label="General"/>
+                <Tab label="Peers"/>
+                <Tab label="Files"/>
+                <Tab label="Speed"/>
+                <Tab label="Logger" href="#basic-tabs"/>
+              </Tabs>
+            </AppBar>
+          </div>
+          {this.props.selectedTab === 0 && <TabContainer><GeneralTab /></TabContainer>}
+          {this.props.selectedTab === 1 && <TabContainer><PeerTab /></TabContainer>}
+          {this.props.selectedTab === 2 && <TabContainer><FileTab /></TabContainer>}
+          {this.props.selectedTab === 3 && <TabContainer>Speed</TabContainer>}
+          {this.props.selectedTab === 4 && <TabContainer>Logger</TabContainer>}
+        </div>
+      );
+    }
+  }
+  
+  BasicTabs.propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+  
+  const mapStateToProps = state => {
+    return {
+        selectedTab: state.selectedTab,
+    };
+  }
+
+  const mapDispatchToProps = dispatch => {
+    return {
+        changeTab: (selectedTab) => dispatch({type: actionTypes.SELECTED_TAB, selectedTab }),      
+    }
+}
+
+
+  export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(BasicTabs));