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

Added Settings Webui (view only), rewrite of API, Fixes #14, Fixes #2, now Testing

Browse Source
This commit is contained in:
deranjer
2018-02-20 21:51:49 -05:00
parent d4966f597b
commit 840a965877
19 changed files with 689 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
goTorrentWebUI/src/BackendComm/backendWebsocket.js
View File

@@ -20,6 +20,7 @@ let RSSTorrentList = [];
let serverMessage = [];
let serverPushMessage = [];
let webSocketState = false;
let settingsFile = [];
var torrentListRequest = {
MessageType: "torrentListRequest"
@@ -113,13 +114,9 @@ ws.onmessage = function (evt) { //When we recieve a message from the websocket
RSSName: serverMessage.RSSFeeds[i].RSSName,
})
}
console.log("RSSURLS", RSSList)
console.log("FIRSTURL", RSSList[1])
console.log("FULLURL", RSSList[1].RSSURL)
break;
case "rssTorrentList":
//console.log("RSSTorrentList recieved", evt.data)
RSSTorrentList = [];
for (var i = 0; i < serverMessage.TotalTorrents; i++){
RSSTorrentList.push({
@@ -133,6 +130,10 @@ ws.onmessage = function (evt) { //When we recieve a message from the websocket
console.log("SERVER PUSHED MESSAGE", serverMessage)
serverPushMessage = [serverMessage.MessageLevel, serverMessage.Payload];
break;
case "settingsFile":
settingsFile = [];
console.log("Settings File Returned", serverMessage)
settingsFile = serverMessage.Config
}
}
@@ -221,6 +222,9 @@ class BackendSocket extends React.Component {
console.log("PROPSSERVER", this.props.serverPushMessage, "SERVERPUSH", serverPushMessage)
this.props.newServerMessage(serverPushMessage)
}
if (this.props.settingsModalOpen) { //TODO don't really need to updaate every tick currently until we can edit config
this.props.newSettingsFile(settingsFile)
}
ws.send(JSON.stringify(torrentListRequest))//talking to the server to get the torrent list
if (ws.readyState === ws.CLOSED){ //if our websocket gets closed inform the user
@@ -281,7 +285,9 @@ const mapStateToProps = state => {
selection: state.selection,
RSSModalOpen: state.RSSModalOpen,
RSSTorrentList: state.RSSTorrentList,
serverPushMessage: state.serverPushMessage
serverPushMessage: state.serverPushMessage,
settingsModalOpen: state.settingsModalOpen,
};
}
@@ -295,6 +301,7 @@ const mapDispatchToProps = dispatch => {
RSSTorrentList: (RSSTorrentList) => dispatch({type: actionTypes.RSS_TORRENT_LIST, RSSTorrentList}),
newServerMessage: (serverPushMessage) => dispatch({type: actionTypes.SERVER_MESSAGE, serverPushMessage}),
webSocketStateUpdate: (webSocketState) => dispatch({type: actionTypes.WEBSOCKET_STATE, webSocketState}),
newSettingsFile: (settingsFile) => dispatch({type: actionTypes.NEW_SETTINGS_FILE, settingsFile})
//changeSelection: (selection) => dispatch({type: actionTypes.CHANGE_SELECTION, selection}),//forcing an update to the buttons
}

2
goTorrentWebUI/src/BottomMenu/bottomMenu.js
View File

@@ -1,6 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import 'typeface-roboto'; // contains the font for material UI
//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';

3
goTorrentWebUI/src/TopMenu/Modals/RSSModal/RSSModalLayout.js
View File

@@ -101,8 +101,7 @@ const inlineStyle = {
}
handleRSSModalClose = () => {
let closeState = false
this.props.rssModalOpenState(closeState)
this.props.rssModalOpenState(false)
}
handleAddRSSFeed = () => {

2
goTorrentWebUI/src/TopMenu/Modals/RSSModal/addRSSModal.js
View File

@@ -16,12 +16,10 @@ import Dialog, {
DialogContentText,
DialogTitle,
} from 'material-ui/Dialog';
import InsertLinkIcon from 'material-ui-icons/Link';
import ReactTooltip from 'react-tooltip'
import Icon from 'material-ui/Icon';
import IconButton from 'material-ui/IconButton';
import RSSTorrentIcon from 'material-ui-icons/RssFeed';
import AddRSSIcon from 'material-ui-icons/AddCircle';
import RSSModalLayout from './RSSModalLayout'

65
goTorrentWebUI/src/TopMenu/Modals/SettingsModal/SettingsModalContentTabs/clientSettingsTab.js Normal file
View File

@@ -0,0 +1,65 @@
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';
const styles = theme => ({
root: {
flexGrow: 1,
marginTop: 0,
},
paper: {
padding: 16,
textAlign: 'left',
color: theme.palette.text.primary,
},
floatRight: {
float: 'right',
}
});
class ClientSettingsTab extends React.PureComponent {
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<Grid container spacing={8}>
<Grid item xs={12} sm={4}>
<Paper className={classes.paper}>HTTP Address: <span className={classes.floatRight}>{this.props.settingsFile["HTTPAddrIP"]} </span></Paper>
<Paper className={classes.paper}>HTTP Port: <span className={classes.floatRight}>{this.props.settingsFile["HTTPAddr"]} </span> </Paper>
<Paper className={classes.paper}>Use Proxy: <span className={classes.floatRight}>{String(this.props.settingsFile["UseProxy"])} </span> </Paper>
<Paper className={classes.paper}>Base URL: <span className={classes.floatRight}>{this.props.settingsFile["BaseURL"]} </span> </Paper>
</Grid>
<Grid item xs={12} sm={4}>
<Paper className={classes.paper}>Client Username: <span className={classes.floatRight}>{this.props.settingsFile["ClientUsername"]} </span> </Paper>
<Paper className={classes.paper}>Client Password: <span className={classes.floatRight}>{this.props.settingsFile["ClientPassword"]} </span> </Paper>
</Grid>
<Grid item xs={12} sm={4}>
</Grid>
</Grid>
</div>
);
}
}
const mapStateToProps = state => {
return {
settingsFile: state.settingsFile,
};
}
export default withStyles(styles)(connect(mapStateToProps)(ClientSettingsTab))

83
goTorrentWebUI/src/TopMenu/Modals/SettingsModal/SettingsModalContentTabs/loggingSettingsTab.js Normal file
View File

@@ -0,0 +1,83 @@
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';
let logLevel = "None"
const styles = theme => ({
root: {
flexGrow: 1,
marginTop: 0,
},
paper: {
padding: 16,
textAlign: 'left',
color: theme.palette.text.primary,
},
floatRight: {
float: 'right',
}
});
class LoggingSettingsTab extends React.Component {
componentWillMount = () => {
switch (String(this.props.settingsFile["LoggingLevel"])) { //Options = Debug 5, Info 4, Warn 3, Error 2, Fatal 1, Panic 0
case "0":
logLevel = "Panic"
case "1":
logLevel = "Fatal"
case "2":
logLevel = "Error"
case "3":
logLevel = "Warn"
case "4":
logLevel = "Info"
case "5":
logLevel = "Debug"
}
}
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<Grid container spacing={8}>
<Grid item xs={12} sm={4}>
<Paper className={classes.paper}>Logging Output: <span className={classes.floatRight}>{this.props.settingsFile["LoggingOutput"]} </span></Paper>
<Paper className={classes.paper}>Logging Level: <span className={classes.floatRight}>{logLevel} </span> </Paper>
</Grid>
<Grid item xs={12} sm={4}>
</Grid>
<Grid item xs={12} sm={4}>
</Grid>
</Grid>
</div>
);
}
}
const mapStateToProps = state => {
return {
settingsFile: state.settingsFile,
};
}
export default withStyles(styles)(connect(mapStateToProps)(LoggingSettingsTab))

36
goTorrentWebUI/src/TopMenu/Modals/SettingsModal/SettingsModalContentTabs/notesTab.js Normal file
View File

@@ -0,0 +1,36 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { withStyles } from 'material-ui/styles';
const styles = theme => ({
root: {
flexGrow: 1,
marginTop: 0,
},
paper: {
padding: 16,
textAlign: 'left',
color: theme.palette.text.primary,
},
floatRight: {
float: 'right',
}
});
class NotesTab extends React.PureComponent {
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
Here will be notes/news/links, etc, maybe pull from github?
</div>
);
}
}
export default withStyles(styles)(NotesTab)

64
goTorrentWebUI/src/TopMenu/Modals/SettingsModal/SettingsModalContentTabs/serverSettingsTab.js Normal file
View File

@@ -0,0 +1,64 @@
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';
const styles = theme => ({
root: {
flexGrow: 1,
marginTop: 0,
},
paper: {
padding: 16,
textAlign: 'left',
color: theme.palette.text.primary,
},
floatRight: {
float: 'right',
}
});
class ServerSettingsTab extends React.PureComponent {
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<Grid container spacing={8}>
<Grid item xs={12} sm={4}>
<Paper className={classes.paper}>Scan Folder for Torrent Files: <span className={classes.floatRight}>{this.props.settingsFile["TorrentWatchFolder"]} </span></Paper>
<Paper className={classes.paper}>Folder that stores Uploaded Torrents: <span className={classes.floatRight}>{this.props.settingsFile["TFileUploadFolder"]} </span> </Paper>
<Paper className={classes.paper}>Default Move Folder: <span className={classes.floatRight}>{String(this.props.settingsFile["DefaultMoveFolder"])} </span> </Paper>
</Grid>
<Grid item xs={12} sm={4}>
<Paper className={classes.paper}>Automatic stop seeding Ratio: <span className={classes.floatRight}>{this.props.settingsFile["SeedRatioStop"]} </span> </Paper>
</Grid>
<Grid item xs={12} sm={4}>
</Grid>
</Grid>
</div>
);
}
}
const mapStateToProps = state => {
return {
settingsFile: state.settingsFile,
};
}
export default withStyles(styles)(connect(mapStateToProps)(ServerSettingsTab))

87
goTorrentWebUI/src/TopMenu/Modals/SettingsModal/addSettingsModal.js Normal file
View File

@@ -0,0 +1,87 @@
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 List, {
ListItem,
ListItemIcon,
ListItemSecondaryAction,
ListItemText,
} from 'material-ui/List';
import Dialog, {
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
} from 'material-ui/Dialog';
import ReactTooltip from 'react-tooltip'
import Icon from 'material-ui/Icon';
import IconButton from 'material-ui/IconButton';
import SettingsIcon from 'material-ui-icons/Settings';
import SettingsModalLayout from './settingsModalLayout'
//Redux
import {connect} from 'react-redux';
import * as actionTypes from '../../../store/actions';
const button = {
fontSize: '60px',
marginLeft: '20px',
marginRight: '20px',
}
const inlineStyle = {
display: 'inline-block',
backdrop: 'static',
}
class AddSettingsModal extends React.Component {
settingsModalOpenState = () => {
let settingsFileRequest = {
MessageType: "settingsFileRequest",
}
ws.send(JSON.stringify(settingsFileRequest))
console.log("Opening Settings Modal")
this.props.settingsModalOpenState(true)
}
render() {
const { classes, onRequestClose, handleRequestClose, handleSubmit } = this.props;
return (
<div style={inlineStyle}>
<IconButton onClick={this.settingsModalOpenState} color="primary" data-tip="Settings Modal" style={button} aria-label="Settings Modal">
<ReactTooltip place="top" type="light" effect="float" />
<SettingsIcon />
</IconButton>
<Dialog fullScreen open={this.props.settingsModalOpen} onRequestClose={this.handleRequestClose}>
<DialogTitle>Manage Settings</DialogTitle>
<SettingsModalLayout />
</Dialog>
</div>
);
}
};
const mapStateToProps = state => {
return {
settingsModalOpen: state.settingsModalOpen,
}
}
const mapDispatchToProps = dispatch => {
return {
settingsModalOpenState: (settingsModalOpen) => dispatch({type: actionTypes.SETTINGS_MODAL_OPEN_STATE, settingsModalOpen}),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(AddSettingsModal)

0
goTorrentWebUI/src/TopMenu/Modals/SettingsModal/settingsModal.js
View File

56
goTorrentWebUI/src/TopMenu/Modals/SettingsModal/settingsModalContent.js Normal file
View File

@@ -0,0 +1,56 @@
import React from 'react';
import ReactDOM from 'react-dom';
import Button from 'material-ui/Button';
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';
import {connect} from 'react-redux';
import ClientSettingsTab from './SettingsModalContentTabs/clientSettingsTab';
import LoggingSettingsTab from './SettingsModalContentTabs/loggingSettingsTab';
import NotesTab from './SettingsModalContentTabs/notesTab';
import ServerSettingsTab from './SettingsModalContentTabs/serverSettingsTab';
class SettingsModalContent extends React.Component {
handleChange = (event, value) => {
console.log("HandleChange", event, value)
};
componentDidMount = () => {
console.log("settingsFile", this.props.settingsFile)
}
render() {
switch(this.props.selectedMenuItem){
case 0:
return <NotesTab />
case 1:
return <ClientSettingsTab />
case 2:
return <LoggingSettingsTab />
case 3:
return <ServerSettingsTab />
default:
return <NotesTab />
}
}
}
const mapStateToProps = state => {
return {
settingsFile: state.settingsFile,
};
}
export default connect(mapStateToProps)(SettingsModalContent)

146
goTorrentWebUI/src/TopMenu/Modals/SettingsModal/settingsModalLayout.js Normal file
View File

@@ -0,0 +1,146 @@
import React from 'react';
import ReactDOM from 'react-dom';
//css for react grid
import '../../../../node_modules/react-grid-layout/css/styles.css';
import '../../../../node_modules/react-resizable/css/styles.css';
//react-grid for layout
import RGL, { WidthProvider } from 'react-grid-layout';
import PropTypes from 'prop-types';
import _ from 'lodash';
//Redux
import {connect} from 'react-redux';
import * as actionTypes from '../../../store/actions';
//interior items
import TextField from 'material-ui/TextField';
import { withStyles } from 'material-ui/styles';
import ReactTooltip from 'react-tooltip'
import Icon from 'material-ui/Icon';
import SettingsMenuList from './settingsModalList.js';
import SettingsModalContent from './settingsModalContent';
import IconButton from 'material-ui/IconButton';
import Button from 'material-ui/Button';
import Dialog, {
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
} from 'material-ui/Dialog';
const ReactGridLayout = WidthProvider(RGL);
const background = {
backgroundColor: '#e5e5e5',
boxShadow: '0 0 20px #000',
}
const button = {
fontSize: '60px',
paddingRight: '20px',
paddingLeft: '20px',
}
const smallButton = {
width: '36px',
height: '36px',
padding: '5px',
}
const inlineStyle = {
display: 'inline-block',
backdrop: 'static',
}
class SettingsModalLayout extends React.Component {
static propTypes = {
onLayoutChange: PropTypes.func.isRequired
};
static defaultProps = {
className: "layout",
items: 4,
rowHeight: 100,
onLayoutChange: function() {},
cols: 8,
draggableCancel: '.NoDrag',
draggableHandle: '.DragHandle'
};
constructor(props) {
super(props);
var layout = [
{i: 'b', x: 0, y: 0, w: 1, h: 5, static: true},
{i: 'c', x: 1, y: 0, w: 7, h: 5, minW: 4, minH: 3, static: true},
];
this.state = {
layout ,
textValue: "",
selectedMenuItem: 0,
};
};
onLayoutChange(layout) {
this.props.onLayoutChange(layout);
}
handleSettingsModalClose = () => {
this.props.settingsModalOpenState(false)
}
changeMenuSelection = (menuItem) => {
this.setState({selectedMenuItem: menuItem})
}
render() {
return (
<div style={inlineStyle}>
<DialogContent>
<ReactGridLayout layout={this.state.layout} onLayoutChange={this.onLayoutChange}
{...this.props}>
<div key="b" style={background} className="DragHandle">
<SettingsMenuList changeMenuSelection={this.changeMenuSelection} />
</div>
<div key="c" style={background} className="DragHandle">
<SettingsModalContent selectedMenuItem={this.state.selectedMenuItem} />
</div>
</ReactGridLayout>
</DialogContent>
<DialogActions>
<Button onClick={this.handleSettingsModalClose} color="primary">
Close
</Button>
</DialogActions>
</div>
);
}
};
const mapStateToProps = state => {
return {
settingsModalOpen: state.settingsModalOpen,
};
}
const mapDispatchToProps = dispatch => {
return {
settingsModalOpenState: (settingsModalOpen) => dispatch({type: actionTypes.SETTINGS_MODAL_OPEN_STATE, settingsModalOpen}),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(SettingsModalLayout)

102
goTorrentWebUI/src/TopMenu/Modals/SettingsModal/settingsModalList.js Normal file
View File

@@ -0,0 +1,102 @@
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 List, {
ListItem,
ListItemIcon,
ListItemSecondaryAction,
ListItemText,
} from 'material-ui/List';
import Dialog, {
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
} from 'material-ui/Dialog';
import InsertLinkIcon from 'material-ui-icons/Link';
import ReactTooltip from 'react-tooltip'
import Icon from 'material-ui/Icon';
import IconButton from 'material-ui/IconButton';
import RSSTorrentIcon from 'material-ui-icons/RssFeed';
import AddRSSIcon from 'material-ui-icons/AddCircle';
import DeleteIcon from 'material-ui-icons/Delete';
//Redux
import {connect} from 'react-redux';
import * as actionTypes from '../../../store/actions';
const styles = theme => ({
root: {
width: '100%',
maxWidth: 360,
backgroundColor: '#e5e5e5',
},
icons: {
width: '40px',
height: '40px',
},
inactiveIcon: {
width: '40px',
height: '40px',
color: 'red',
},
active: {
backgroundColor: '#80b3ff',
}
});
const inlineStyle = {
display: 'inline-block',
backdrop: 'static',
}
class SettingsMenuList extends React.Component {
constructor(props){
super(props)
this.state = {
activeIndex: 0
}
}
changeMenuSelection = (listItem) => {
console.log("Menu Selection", listItem)
this.setState({activeIndex: listItem})
this.props.changeMenuSelection(listItem)
console.log("ACTIVEINDEX", this.state.activeIndex)
}
render() {
const { classes } = this.props;
return (
<div style={inlineStyle}>
<List component="nav">
<ListItem className={this.state.activeIndex==0 ? classes.active: null} button onClick={() => this.changeMenuSelection(0)}>
<ListItemText primary="News/About" />
</ListItem>
<ListItem className={this.state.activeIndex==1 ? classes.active: null} button onClick={() => this.changeMenuSelection(1)}>
<ListItemText primary="Client Connect" />
</ListItem>
<ListItem className={this.state.activeIndex==2 ? classes.active: null} button onClick={() => this.changeMenuSelection(2)}>
<ListItemText primary="Logging" />
</ListItem>
<ListItem className={this.state.activeIndex==3 ? classes.active: null} button onClick={() => this.changeMenuSelection(3)}>
<ListItemText primary="Server Settings" />
</ListItem>
</List>
</div>
);
}
};
export default withStyles(styles)(SettingsMenuList)

8
goTorrentWebUI/src/TopMenu/topMenu.js
View File

@@ -11,12 +11,13 @@ import AddRSSModal from './Modals/RSSModal/addRSSModal';
import DeleteTorrentModal from './Modals/deleteTorrentModal';
import ChangeStorageModal from './Modals/changeStorageModal';
import TorrentSearch from './torrentSearch';
import AddSettingsModal from './Modals/SettingsModal/addSettingsModal';
import StartTorrentIcon from 'material-ui-icons/PlayArrow';
//import PauseTorrentIcon from 'material-ui-icons/Pause';
import StopTorrentIcon from 'material-ui-icons/Stop';
import RSSTorrentIcon from 'material-ui-icons/RssFeed';
import SettingsIcon from 'material-ui-icons/Settings';
import ForceUploadIcon from 'material-ui-icons/KeyboardArrowUp';
@@ -136,10 +137,7 @@ class IconButtons extends React.Component {
<div className={classes.verticalDivider}></div>
<ChangeStorageModal />
<AddRSSModal />
<IconButton color="primary" data-tip="Settings" className={classes.button} aria-label="Settings">
<ReactTooltip place="top" type="light" effect="float" />
<SettingsIcon />
</IconButton>
<AddSettingsModal />
<div className={classes.verticalDivider}></div>
<TorrentSearch />
<div className={classes.verticalDivider}></div>

2
goTorrentWebUI/src/app.jsx
View File

@@ -83,7 +83,7 @@ class BasicLayout extends React.PureComponent {
<ReactGridLayout layout={this.state.layout} onLayoutChange={this.onLayoutChange} {...this.props}>
<div key="a" style={background} className="DragHandle"><TopMenu /></div>
<div key="b" style={background} className="DragHandle"><LeftMenu /></div>
{ this.state.loggedin
{ this.state.loggedin //if we are not logged into the app don't show the list of torrents
? <div key="c" style={background} className="DragHandle"><TorrentList /></div>
: <div key="c" style={background} className="DragHandle"></div>
}

84
goTorrentWebUI/src/leftMenu/leftMenu.js
View File

@@ -8,12 +8,12 @@ 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'
import StopTorrentIcon from 'material-ui-icons/Stop';
//react redux
import {connect} from 'react-redux';
import * as actionTypes from '../store/actions';
//TODO, clean up the goddamn variable names you are all over the place
const styles = theme => ({
root: {
width: '100%',
@@ -40,32 +40,14 @@ class SimpleList extends React.Component {
super(props);
const { classes } = this.props;
this.state = {
allTorrentsClass: classes.active,
downloadingClass: '',
seedingClass: '',
activeTorrentsClass: '',
completedTorrentsClass: '',
allID: "All",
downloadingID: "Downloading",
seedingID: "Seeding",
activeID: "Active",
completedID: "Completed",
activeIndex: 0,
}
}
componentWillReceiveProps = (nextprops) => {
const { classes } = this.props;
if (nextprops.filter[0].columnName == "TorrentName"){ //If we are using the top searchbox move back to all torrents
this.setState({
allTorrentsClass: classes.active,
downloadingClass: '',
seedingClass: '',
activeTorrentsClass: '',
completedTorrentsClass: '',
})
this.setState({activeIndex: 0})
}
}
@@ -75,79 +57,41 @@ class SimpleList extends React.Component {
filterState = [{columnName: 'Status', value: filterState}]
this.props.changeFilter(filterState)//dispatch to redux
console.log("Switching filters classes", id)
switch (id){ //TODO.. there has to be a better fucking way to do this
case "All":
this.state.allTorrentsClass = classes.active
this.state.downloadingClass = ''
this.state.seedingClass = ''
this.state.activeTorrentsClass = ''
this.state.completedTorrentsClass = ''
break
case "Downloading":
console.log("Downloading...")
this.state.downloadingClass = classes.active
this.state.allTorrentsClass = ''
this.state.seedingClass = ''
this.state.activeTorrentsClass = ''
this.state.completedTorrentsClass = ''
break
case "Seeding":
this.state.seedingClass = classes.active
this.state.allTorrentsClass = ''
this.state.downloadingClass = ''
this.state.activeTorrentsClass = ''
this.state.completedTorrentsClass = ''
break
case "Active":
this.state.activeTorrentsClass = classes.active
this.state.allTorrentsClass = ''
this.state.downloadingClass = ''
this.state.seedingClass = ''
this.state.completedTorrentsClass = ''
break
case "Completed":
this.state.completedTorrentsClass = classes.active
this.state.allTorrentsClass = ''
this.state.downloadingClass = ''
this.state.seedingClass = ''
this.state.activeTorrentsClass = ''
break
this.setState({activeIndex: id})
}
}
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<List dense>
<ListItem dense className={this.state.allTorrentsClass} button onClick={ () => this.setFilter('', this.state.allID)}>
<ListItem dense className={this.state.activeIndex==0 ? classes.active: null} button onClick={ () => this.setFilter('', 0)}>
<ListItemIcon className={classes.icons} >
<AllTorrentsIcon />
</ListItemIcon>
<ListItemText primary="All Torrents" />
</ListItem>
<ListItem className={this.state.downloadingClass} button={true} onClick={ () => this.setFilter('Downloading', this.state.downloadingID)}>
<ListItem className={this.state.activeIndex==1 ? classes.active: null} button onClick={ () => this.setFilter('Downloading', 1)}>
<ListItemIcon className={classes.icons}>
<DownloadingTorrentsIcon />
</ListItemIcon>
<ListItemText primary="Downloading Torrents" />
</ListItem>
<ListItem className={this.state.seedingClass} button={true} onClick={ () => this.setFilter('Seeding', this.state.seedingID)}>
<ListItem className={this.state.activeIndex==2 ? classes.active: null} button onClick={ () => this.setFilter('Seeding', 2)}>
<ListItemIcon className={classes.icons}>
<UploadingTorrentsIcon />
</ListItemIcon>
<ListItemText primary="Seeding Torrents" />
</ListItem>
{/* <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 className={this.state.completedTorrentsClass} button={true} onClick={ () => this.setFilter('Completed', this.state.completedID)}>
<ListItem className={this.state.activeIndex==3 ? classes.active: null} button onClick={ () => this.setFilter('Stopped', 3)}>
<ListItemIcon className={classes.inactiveIcon}>
<StopTorrentIcon />
</ListItemIcon>
<ListItemText primary="Stopped Torrents" />
</ListItem>
<ListItem className={this.state.activeIndex==4 ? classes.active: null} button onClick={ () => this.setFilter('Completed', 4)}>
<ListItemIcon className={classes.icons}>
<ActiveTorrentsIcon />
</ListItemIcon>
<ListItemText primary="Completed Torrents" />

2
goTorrentWebUI/src/store/actions.js
View File

@@ -10,6 +10,8 @@ export const FILE_LIST = 'FILE_LIST';
export const CHANGE_FILE_SELECTION = 'CHANGE_FILE_SELECTION';
export const NEW_RSS_FEED_STORE = 'NEW_RSS_FEED_STORE';
export const RSS_MODAL_OPEN_STATE = 'RSS_MODAL_OPEN_STATE';
export const SETTINGS_MODAL_OPEN_STATE = 'SETTINGS_MODAL_OPEN_STATE';
export const NEW_SETTINGS_FILE = 'NEW_SETTINGS_FILE';
export const RSS_TORRENT_LIST = 'RSS_TORRENT_LIST';
export const SERVER_MESSAGE = 'SERVER_MESSAGE';
export const WEBSOCKET_STATE = 'WEBSOCKET_STATE';

17
goTorrentWebUI/src/store/reducer.js
View File

@@ -20,7 +20,8 @@ const initialState = {
RSSModalOpen: false,
serverPushMessage: [],
webSocketState: false,
searchFilterTerm: ""
searchFilterTerm: "",
settingsFile: [],
}
@@ -106,6 +107,20 @@ const reducer = (state = initialState, action) => {
...state,
RSSModalOpen: action.RSSModalOpen
}
case actionTypes.SETTINGS_MODAL_OPEN_STATE:
console.log("Settings Modal State...", action.settingsModalOpen)
return {
...state,
settingsModalOpen: action.settingsModalOpen
}
case actionTypes.NEW_SETTINGS_FILE:
console.log("New settings file", action.settingsFile)
return {
...state,
settingsFile: action.settingsFile
}
case actionTypes.SERVER_MESSAGE:
console.log("New server push message", action.serverPushMessage)