working on making the file upload work over websocket and json

goTorrentWebUI/src/BackendComm/backendWebsocket.js

@@ -52,8 +52,10 @@ ws.onmessage = function (evt) { //When we recieve a message from the websocket
                     ETA: serverMessage.data[i].ETA,
                     TotalUploadedSize: serverMessage.data[i].TotalUploadedSize,
                     Ratio: serverMessage.data[i].UploadRatio,
+                    DateAdded: serverMessage.data[i].DateAdded,
                     FileNumber: serverMessage.data[i].NumberofFiles,
                     PieceNumber: serverMessage.data[i].NumberofPieces,
+                    MaxConnections: serverMessage.data[i].MaxConnections,
                 })    
             } 
             var newTitle = '(' + serverMessage.total + ')' + title; //updating the title

goTorrentWebUI/src/BottomMenu/Tabs/generalTab.js

@@ -75,6 +75,7 @@ class GeneralTab extends React.Component {
                     <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}>Max Connections: <span className={classes.floatRight}>{this.state.selectedTorrent["MaxConnections"]} </span> </Paper>
                     
                 </Grid>
                 <Grid item xs={12} sm={4}>

goTorrentWebUI/src/TopMenu/Modals/addTorrentFileModal.js

@@ -6,15 +6,17 @@ import { withStyles } from 'material-ui/styles';
 import PropTypes from 'prop-types';
 import Dialog, {
   DialogContent,
+  DialogContentText,
   DialogTitle,
+  DialogActions,
 } from 'material-ui/Dialog';
 //import InsertLinkIcon from 'material-ui-icons/Link';
 import ReactTooltip from 'react-tooltip'
 //import Icon from 'material-ui/Icon';
 import AddIcon from 'material-ui-icons/AddBox';
 import IconButton from 'material-ui/IconButton';
-//import Dropzone from 'react-dropzone'; //the File drop acceptor
-//const request = require('superagent');
+
+import Upload from 'material-ui-upload/Upload';
 
 const button = {
   fontSize: '60px',
@@ -22,16 +24,27 @@ const button = {
   paddingLeft: '20px',
 }
 
+const uploadButton = {
+  fontSize: '35px',
+  paddingLeft: '0px',
+}
+
 const inlineStyle = {
   display: 'inline-block',
 }
 
+const input = {
+  display: 'none',
+}
 
 
 export default class addTorrentFilePopup extends React.Component {
 
   state = {
     open: false,
+    torrentFileName: "",
+    torrentFileValue: new File([""], "tempName"),
+    storageValue: "",
   };
 
   handleClickOpen = () => {
@@ -42,8 +55,35 @@ export default class addTorrentFilePopup extends React.Component {
     this.setState({ open: false });
   };
 
-  setTextValue = (event) => {
-    this.setState({textValue: event.target.value});
+  handleSubmit = () => {
+    this.setState({ open: false });
+    //let magnetLinkSubmit = this.state.textValue;
+    this.setState({torrentFileValue: event.target.value});
+    const reader = new FileReader()
+    let torrentFileBlob = Blob(this.state.torrentFileValue)
+    let base64file = reader.readAsDataURL(torrentFileBlob)
+    
+    let torrentFileMessage = {
+      messageType: "torrentFileSubmit",
+      messageDetail: this.state.torrentFileName,
+      messageDetailTwo: this.state.storageValue,
+      Payload: [base64file],
+    }
+    console.log("Sending magnet link: ", torrentFileMessage);
+    ws.send(JSON.stringify(torrentFileMessage));
+  }
+
+  onFileLoad = (event, file) => {
+    this.setState({torrentFileName: file.name})
+    this.setState({torrentFileValue: File(file, file.name)})
+
+    console.log(event.target.result, file.name);
+  }
+  
+
+
+  setStorageValue = (event) => {
+    this.setState({storageValue: event.target.value})
   }
 
   render() {
@@ -57,11 +97,20 @@ export default class addTorrentFilePopup extends React.Component {
         <Dialog open={this.state.open} onRequestClose={this.handleRequestClose} onEscapeKeyUp={this.handleRequestClose} maxWidth="md">
           <DialogTitle>Add Torrent File</DialogTitle>
           <DialogContent>
-            <form  encType="multipart/form-data" method="post" action="/uploadTorrent">
-               <input  name="fileTest" type="file" /><p />
-               <input type="submit" value="submit" />
-            </form>
+            <DialogContentText>
+                Upload Torrent Here and Add Storage Path
+            </DialogContentText>
+            <Upload label="Upload Torrent" fileTypeRegex={/.torrent/} onFileLoad={this.onFileLoad}/>
+            <TextField id="storagePath" type="text" label="Storage Path" placeholder="Empty will be default torrent storage path" fullWidth onChange={this.setStorageValue} />
           </DialogContent>
+          <DialogActions>
+            <Button onClick={this.handleRequestClose} color="primary">
+              Cancel
+            </Button>
+            <Button onClick={this.handleSubmit} color="primary">
+              Submit
+            </Button>
+          </DialogActions>
         </Dialog>
       </div>
     );

goTorrentWebUI/src/TopMenu/Modals/addTorrentLinkModal.js

@@ -35,6 +35,9 @@ export default class addTorrentPopup extends React.Component {
 
   state = {
     open: false,
+    magnetLinkValue: "",
+    storageValue: "",
+
   };
 
   handleClickOpen = () => {
@@ -50,14 +53,19 @@ export default class addTorrentPopup extends React.Component {
       //let magnetLinkSubmit = this.state.textValue;
       let magnetLinkMessage = {
         messageType: "magnetLinkSubmit",
-        Payload: [this.state.textValue]
+        messageDetail: this.state.storageValue,
+        Payload: [this.state.magnetLinkValue]
       }
       console.log("Sending magnet link: ", magnetLinkMessage);
       ws.send(JSON.stringify(magnetLinkMessage));
   }
 
-  setTextValue = (event) => {
-    this.setState({textValue: event.target.value});
+  setMagnetLinkValue = (event) => {
+    this.setState({magnetLinkValue: event.target.value});
+  }
+
+  setStorageValue = (event) => {
+    this.setState({storageValue: event.target.value})
   }
 
   render() {
@@ -82,8 +90,9 @@ export default class addTorrentPopup extends React.Component {
               type="text"
               placeholder="Enter Magnet Link Here"
               fullWidth
-              onChange={this.setTextValue}
+              onChange={this.setMagnetLinkValue}
             />
+            <TextField id="storagePath" type="text" label="Storage Path" placeholder="Empty will be default torrent storage path" fullWidth onChange={this.setStorageValue} />
           </DialogContent>
           <DialogActions>
             <Button onClick={this.handleRequestClose} color="primary">

goTorrentWebUI/src/TopMenu/Modals/deleteTorrentModal.js

@@ -0,0 +1,136 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Button from 'material-ui/Button';
+import TextField from 'material-ui/TextField';
+import { withStyles } from 'material-ui/styles';
+import PropTypes from 'prop-types';
+import Dialog, {
+  DialogContent,
+  DialogTitle,
+  DialogActions,
+} from 'material-ui/Dialog';
+//import InsertLinkIcon from 'material-ui-icons/Link';
+import ReactTooltip from 'react-tooltip'
+//import Icon from 'material-ui/Icon';
+import AddIcon from 'material-ui-icons/AddBox';
+import IconButton from 'material-ui/IconButton';
+import DeleteTorrentIcon from 'material-ui-icons/Delete';
+
+//Redux
+import {connect} from 'react-redux';
+import * as actionTypes from '../../store/actions';
+
+const button = {
+  fontSize: '60px',
+  paddingRight: '20px',
+  paddingLeft: '20px',
+}
+
+const inlineStyle = {
+  display: 'inline-block',
+}
+
+
+
+class DeleteTorrentModal extends React.Component {
+
+  state = {
+    open: false,
+  };
+
+  handleDeleteTorrent = () => {
+    let selection = []
+    let deleteTorrentHashes = {
+      MessageType: "deleteTorrents",
+      MessageDetail: "true",
+      Payload: this.props.selectionHashes
+    }
+    console.log("Deleting Torrents", deleteTorrentHashes)
+    ws.send(JSON.stringify(deleteTorrentHashes))
+    this.props.setButtonState(this.props.selection) //TODO this currently just forces a button refresh, should be a better way to do this
+    this.props.changeSelection(selection) //purging out our selection after deleting a torent
+    this.setState({ open: false });
+  }
+
+  handleDeleteData = () => {
+    let selection = []
+
+    let deleteTorrentHashes = {
+      MessageType: "deleteTorrents",
+      MessageDetail: "true",
+      Payload: this.props.selectionHashes,
+    }
+    console.log("Deleting Torrents and Data", deleteTorrentHashes)
+    ws.send(JSON.stringify(deleteTorrentHashes))
+    this.props.setButtonState(this.props.selection) //TODO this currently just forces a button refresh, should be a better way to do this
+    this.props.changeSelection(selection) //purging out our selection after deleting a torent
+    this.setState({ open: false });
+  }
+
+
+  handleClickOpen = () => {
+      if (this.props.selection.length > 0){
+        this.setState({ open: true });
+      } else {
+          console.log("Select a torrent to delete..")
+      }
+    
+  };
+
+  handleRequestClose = () => {
+    this.setState({ open: false });
+  };
+
+  setTextValue = (event) => {
+    this.setState({textValue: event.target.value});
+  }
+
+  render() {
+    const { onRequestClose, handleRequestClose, handleSubmit } = this.props;
+    return (
+      <div style={inlineStyle}>
+
+        <IconButton color={this.props.buttonState[0].deleteButton} data-tip="Delete Torrent" style={button} onClick={this.handleClickOpen} aria-label="Delete Torrent">
+          <ReactTooltip place="top" type="error" effect="float" />
+          <DeleteTorrentIcon />
+        </IconButton>
+        <Dialog open={this.state.open} onRequestClose={this.handleRequestClose} onEscapeKeyUp={this.handleRequestClose} maxWidth="md">
+          <DialogTitle>Delete Torrent</DialogTitle>
+          <DialogContent>
+          Are you sure you want to delete Torrent?
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={this.handleRequestClose} color="primary">
+              Cancel
+            </Button>
+            <Button onClick={this.handleDeleteData} color="primary">
+              Delete with Data
+            </Button>
+            <Button onClick={this.handleDeleteTorrent} color="primary">
+              Delete just Torrent
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </div>
+    );
+  }
+  
+};
+
+const mapStateToProps = state => {
+    return {
+      buttonState: state.buttonState,
+      selection: state.selection,
+      selectionHashes: state.selectionHashes,
+    };
+  }
+  
+  const mapDispatchToProps = dispatch => {
+    return {
+        setButtonState: (buttonState) => dispatch({type: actionTypes.SET_BUTTON_STATE, buttonState}),
+        changeSelection: (selection) => dispatch({type: actionTypes.CHANGE_SELECTION, selection}), //used to force a selection empty after deleting torrent
+    }
+  }
+  
+  
+  export default connect(mapStateToProps, mapDispatchToProps)(DeleteTorrentModal)

goTorrentWebUI/src/TopMenu/topMenu.js

@@ -8,12 +8,11 @@ import IconButton from 'material-ui/IconButton';
 import AddTorrentLinkPopup from './Modals/addTorrentLinkModal';
 import AddTorrentFilePopup from './Modals/addTorrentFileModal';
 import AddRSSModal from './Modals/RSSModal/addRSSModal';
-
+import DeleteTorrentModal from './Modals/deleteTorrentModal';
 
 import StartTorrentIcon from 'material-ui-icons/PlayArrow';
 //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';
 import SettingsIcon from 'material-ui-icons/Settings';
 
@@ -90,16 +89,7 @@ class IconButtons extends React.Component {
     this.props.setButtonState(this.props.selection) //TODO this currently just forces a button refresh, should be a better way to do this
   }
 
-  deleteTorrent = () => {
-    
-    let deleteTorrentHashes = {
-      MessageType: "deleteTorrents",
-      Payload: this.props.selectionHashes,    
-    }
-    console.log("Deleting Torrents", deleteTorrentHashes)
-    ws.send(JSON.stringify(deleteTorrentHashes))
-    this.props.setButtonState(this.props.selection) //TODO this currently just forces a button refresh, should be a better way to do this
-  }
+  
 
 
   render() {
@@ -121,10 +111,7 @@ class IconButtons extends React.Component {
           <ReactTooltip place="top" type="light" effect="float" />
           <StopTorrentIcon />
         </IconButton>
-        <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>
+        <DeleteTorrentModal />
         <div className={classes.verticalDivider}></div>
         <AddRSSModal />
         <IconButton color="primary" data-tip="Settings" className={classes.button} aria-label="Settings">
@@ -154,6 +141,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = dispatch => {
   return {
       setButtonState: (buttonState) => dispatch({type: actionTypes.SET_BUTTON_STATE, buttonState}),
+      changeSelection: (selection) => dispatch({type: actionTypes.CHANGE_SELECTION, selection}), //used to force a selection empty after deleting torrent
   }
 }
 

goTorrentWebUI/src/leftMenu/leftMenu.js

@@ -11,7 +11,7 @@ import AllTorrentsIcon from 'material-ui-icons/AllInclusive'
 
 //react redux
 import {connect} from 'react-redux';
-import * as actionTypes from './store/actions';
+import * as actionTypes from '../store/actions';
 
 //TODO, clean up the goddamn variable names you are all over the place
 const styles = theme => ({

goTorrentWebUI/src/torrentlist.js

@@ -58,10 +58,11 @@ class TorrentListTable extends React.Component {
                 { name: 'ActivePeers', title: 'Active Peers' },
                 { name: 'ETA', title: 'ETA'},
                 { name: 'Ratio', title: 'Ratio'},
+                { name: 'DateAdded', title: 'Date Added'},
                 { name: 'Availability', title: 'Availability'},
             ],
-            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},
+            columnOrder: ['TorrentName', 'DownloadedSize', 'Size', 'PercentDone', 'Status', 'DownloadSpeed', 'UploadSpeed','ActivePeers', 'ETA', 'Ratio', 'DateAdded', 'Availability'],
+            columnWidths: {TorrentName: 250, DownloadedSize: 100, Size: 100, PercentDone: 175, Status: 150, DownloadSpeed: 100, UploadSpeed: 100, ActivePeers: 100, ETA: 100, Ratio: 75, DateAdded: 100, Availability: 75},
             prevSelection: [], //just used to pull data from cell (temp Prevcell holder), real selection is in Redux
             pageSizes: [5, 10, 15, 0],
             currentPage: 0,