From cb1ca5d015c336842f8a97d4c249e5addb24dbf4 Mon Sep 17 00:00:00 2001 From: Chris Sprance Date: Tue, 13 Dec 2016 16:49:33 -0500 Subject: [PATCH] got adding and removing banned players/filtering to the views they need to be --- app/components/BansView/BanDialog.js | 51 +++++++++++ app/components/BansView/BansView.js | 71 +++++++++++---- app/components/HomeView/HomeView.js | 2 +- app/components/PlayersView/PlayersView.js | 11 ++- .../{BanDialog.js => PlayersViewBanDialog.js} | 8 +- app/components/StatusBar/StatusBar.js | 7 +- .../WhitelistView/WhitelistDialog.js | 51 +++++++++++ app/components/WhitelistView/WhitelistView.js | 88 +++++++++++++++---- app/containers/HomePage.js | 3 +- 9 files changed, 247 insertions(+), 45 deletions(-) create mode 100644 app/components/BansView/BanDialog.js rename app/components/PlayersView/{BanDialog.js => PlayersViewBanDialog.js} (89%) create mode 100644 app/components/WhitelistView/WhitelistDialog.js diff --git a/app/components/BansView/BanDialog.js b/app/components/BansView/BanDialog.js new file mode 100644 index 00000000..586c6c6d --- /dev/null +++ b/app/components/BansView/BanDialog.js @@ -0,0 +1,51 @@ +/** + * Name: Bans Dialog + * Author: Chrissprance + * Creation Date: 12/13/2016 + * Description: contains the fields needed to add a steamid to the banlist + */ +import React from 'react'; +import Dialog from 'material-ui/Dialog'; +import FlatButton from 'material-ui/FlatButton'; +import TextField from 'material-ui/TextField'; + +const BanDialog = (props) => { + const actions = [ + , + + ]; + + return ( + + + + ); +}; + + +BanDialog.propTypes = { + open: React.PropTypes.bool.isRequired, + updateSteamID: React.PropTypes.func.isRequired, + steamID: React.PropTypes.string.isRequired, + actionSubmit: React.PropTypes.func.isRequired, + actionCancel: React.PropTypes.func.isRequired +}; + +export default BanDialog; + + diff --git a/app/components/BansView/BansView.js b/app/components/BansView/BansView.js index e804b9ce..bdc0cd0b 100644 --- a/app/components/BansView/BansView.js +++ b/app/components/BansView/BansView.js @@ -4,9 +4,9 @@ * Creation Date: 12/11/2016 * Description: Contains the list of all the banned players on the server * and the logic to add remove and filter them + * gets server data sent to it initially in Containers/HomePage */ import React, {Component} from 'react'; - import styled, {keyframes} from 'styled-components'; import store from 'store'; import TextField from 'material-ui/TextField'; @@ -17,13 +17,12 @@ import fuzzy from 'fuzzy'; import Snackbar from 'material-ui/Snackbar'; import Spacer from '../common/Spacer'; - import {sendCommandToServer} from '../../utils/sendCommandToServer'; import JSONifyBanList from '../../utils/JSONifyBanList'; - import {log} from '../../utils/loggerUtils'; -import {white, darkGrey, black} from '../../styles/colors'; +import {white, darkGrey} from '../../styles/colors'; import PlayerCard from '../PlayersView/PlayerCard'; +import BanDialog from './BanDialog'; export default class BansView extends Component { @@ -32,9 +31,9 @@ export default class BansView extends Component { this.state = { loading: true, credentials: store.get('userCredentials'), - players: [{name: 'MenisHead Johnson', steam: '324754783294234'}, { - name: 'ClickMouth Frankhead', - steam: '34234546435345' + players: [{ + name: 'Loading....', + steam: 'Loading....' }], searchString: '', showBanDialog: false, @@ -57,18 +56,20 @@ export default class BansView extends Component { this.setState({ loading: true, }); - sendCommandToServer('mis_ban_status', this.state.credentials) .then((res) => { if (res !== null) { this.setState({ - players: JSONifyBanList(res), + players: JSONifyBanList(res).map((p) => { + return {steam: p} + }), loading: false, }); } }) .catch((err) => { log('error', err); + this.snackBar('Something went wrong try again!'); }); }; @@ -81,17 +82,40 @@ export default class BansView extends Component { addPlayerToBanList = () => { - //this.state.whitelistDialogSteamID - + //comes from this.state.banDialogSteamID + this.setState({ + loading: true, + }); + sendCommandToServer(`mis_ban_steamid ${this.state.banDialogSteamID}`, this.state.credentials) + .then((res) => { + log('silly', res); + this.hideBanDialog(); + this.getPlayersAndAddToState() + }) + .catch((err) => { + log('error', err); + this.snackBar('Something went wrong try again!'); + }); }; removePlayerFromBanList = (steam) => { + this.setState({ + loading: true, + }); + sendCommandToServer(`mis_ban_remove ${steam}`, this.state.credentials) + .then((res) => { + log('silly', res); + this.getPlayersAndAddToState() + }) + .catch((err) => { + log('error', err); + this.snackBar('Something went wrong try again!'); + }); }; - showBanDialog = (steam) => { + showBanDialog = () => { this.setState({ - showBanDialog: true, - banDialogSteamID: steam + showBanDialog: true }) }; @@ -101,6 +125,12 @@ export default class BansView extends Component { }) }; + updateBanDialogSteamID = (e) => { + this.setState({ + banDialogSteamID: e.target.value, + }); + }; + updateSearchString = (e) => { this.setState({ searchString: e.target.value @@ -119,9 +149,10 @@ export default class BansView extends Component { const filterList = this.state.players.filter((player) => fuzzyList.indexOf(player.steam) >= 0); return ( + - + @@ -138,6 +169,7 @@ export default class BansView extends Component { + {filterList.map((player) => )} + + + ); } diff --git a/app/components/HomeView/HomeView.js b/app/components/HomeView/HomeView.js index 0f5413ac..011c342a 100644 --- a/app/components/HomeView/HomeView.js +++ b/app/components/HomeView/HomeView.js @@ -39,7 +39,7 @@ const Home = (props) => ( } label="WHITELIST"> - + } diff --git a/app/components/PlayersView/PlayersView.js b/app/components/PlayersView/PlayersView.js index 08e67583..7e098c4a 100644 --- a/app/components/PlayersView/PlayersView.js +++ b/app/components/PlayersView/PlayersView.js @@ -4,7 +4,7 @@ * Creation Date: 12/8/2016 * Description: Contains the list of all the players currently on the server * and the logic to get, kick, ban players - * gets server data sent to it originally + * gets server data sent to it initially in Containers/HomePage */ import React, {Component} from 'react'; @@ -22,7 +22,7 @@ import {sendCommandToServer} from '../../utils/sendCommandToServer'; import {log} from '../../utils/loggerUtils'; import {white, darkGrey} from '../../styles/colors'; import PlayerCard from './PlayerCard'; -import BanDialog from './BanDialog'; +import PlayersViewBanDialog from './PlayersViewBanDialog'; export default class PlayersView extends Component { @@ -48,11 +48,11 @@ export default class PlayersView extends Component { }); } + getPlayersAndAddToState = () => { this.setState({ loading: true, }); - sendCommandToServer('status', this.state.credentials) .then((res) => { if (res !== null) { @@ -67,6 +67,7 @@ export default class PlayersView extends Component { }); }; + snackBar = (msg) => { this.setState({ showSnackBar: true, @@ -74,6 +75,7 @@ export default class PlayersView extends Component { }); }; + banPlayerAndCloseDialog = () => { log('info', `Banning Player: ${this.state.banDialogSteamID} for reason: ${this.state.banDialogBanReason}`); sendCommandToServer(`mis_ban_steamid ${this.state.banDialogSteamID}`).then((res) => { @@ -164,7 +166,7 @@ export default class PlayersView extends Component { kick={this.kickPlayer} />)} - { +const PlayersViewBanDialog = (props) => { const actions = [ { ); }; -BanDialog.propTypes = { +PlayersViewBanDialog.propTypes = { open: React.PropTypes.bool.isRequired, banReason: React.PropTypes.string.isRequired, updateBanReason: React.PropTypes.func.isRequired, @@ -49,6 +49,6 @@ BanDialog.propTypes = { actionCancel: React.PropTypes.func.isRequired }; -export default BanDialog; +export default PlayersViewBanDialog; diff --git a/app/components/StatusBar/StatusBar.js b/app/components/StatusBar/StatusBar.js index 276300a7..18b3e095 100644 --- a/app/components/StatusBar/StatusBar.js +++ b/app/components/StatusBar/StatusBar.js @@ -3,6 +3,7 @@ * Author: Chrissprance * Creation Date: 12/12/2016 * Description: shows the info on the currently connected to server + * Props flow from Containers/HomePage */ import React, {Component, PropTypes,} from 'react'; import styled from 'styled-components'; @@ -16,9 +17,9 @@ const StatusBar = (props) => { IP: {store.get('userCredentials').ip} Port: {store.get('userCredentials').port} - {/*Name: {this.state.status.name}*/} - {/*Version: {this.state.status.version}*/} - {/*Players: {this.state.status.players}*/} + Name: {props.status !== undefined ? props.status.ip : 'Connecting...'} + Version: {props.status !== undefined ? props.status.version : 'Connecting...'} + Players: {props.status !== undefined ? props.status.players : 'Connecting...'} ); }; diff --git a/app/components/WhitelistView/WhitelistDialog.js b/app/components/WhitelistView/WhitelistDialog.js new file mode 100644 index 00000000..be55ff0f --- /dev/null +++ b/app/components/WhitelistView/WhitelistDialog.js @@ -0,0 +1,51 @@ +/** + * Name: Whitelist Dialog + * Author: Chrissprance + * Creation Date: 12/13/2016 + * Description: contains the fields needed to add a steamid to the whitelist + */ +import React from 'react'; +import Dialog from 'material-ui/Dialog'; +import FlatButton from 'material-ui/FlatButton'; +import TextField from 'material-ui/TextField'; + +const WhitelistDialog = (props) => { + const actions = [ + , + + ]; + + return ( + + + + ); +}; + + +WhitelistDialog.propTypes = { + open: React.PropTypes.bool.isRequired, + updateSteamID: React.PropTypes.func.isRequired, + steamID: React.PropTypes.string.isRequired, + actionSubmit: React.PropTypes.func.isRequired, + actionCancel: React.PropTypes.func.isRequired +}; + +export default WhitelistDialog; + + diff --git a/app/components/WhitelistView/WhitelistView.js b/app/components/WhitelistView/WhitelistView.js index a7855863..1a874867 100644 --- a/app/components/WhitelistView/WhitelistView.js +++ b/app/components/WhitelistView/WhitelistView.js @@ -4,9 +4,9 @@ * Creation Date: 12/11/2016 * Description: Contains the list of all the whitelisted players on the server * and the logic to add remove and filter them + * gets server data sent to it initially in Containers/HomePage */ import React, {Component} from 'react'; - import styled, {keyframes} from 'styled-components'; import store from 'store'; import TextField from 'material-ui/TextField'; @@ -17,12 +17,12 @@ import fuzzy from 'fuzzy'; import Snackbar from 'material-ui/Snackbar'; import Spacer from '../common/Spacer'; - import {sendCommandToServer} from '../../utils/sendCommandToServer'; +import JSONifyWhiteList from '../../utils/JSONifyWhiteList'; import {log} from '../../utils/loggerUtils'; -import {white, darkGrey, black} from '../../styles/colors'; +import {white, darkGrey} from '../../styles/colors'; import PlayerCard from '../PlayersView/PlayerCard'; - +import WhitelistDialog from './WhitelistDialog'; export default class WhitelistView extends Component { @@ -31,7 +31,10 @@ export default class WhitelistView extends Component { this.state = { loading: false, credentials: store.get('userCredentials'), - players: [{name: 'MenisHead Johnson', steam: '324754783294234'}, {name: 'ClickMouth Frankhead', steam: '34234546435345'}], + players: [{ + name: 'Loading....', + steam: 'Loading....' + }], searchString: '', showWhitelistDialog: false, whitelistDialogSteamID: '', @@ -40,15 +43,33 @@ export default class WhitelistView extends Component { }; } - componentWillMount() { - // Go and grab the player list from the server. - this.getPlayersAndAddToState(); + componentWillReceiveProps(nextProps) { + console.log(nextProps); + this.setState({ + players: nextProps.whiteListPlayers, + loading: false + }); } getPlayersAndAddToState = () => { this.setState({ loading: true, }); + sendCommandToServer('mis_whitelist_status', this.state.credentials) + .then((res) => { + if (res !== null) { + this.setState({ + players: JSONifyWhiteList(res).map((p) => { + return {steam: p} + }), + loading: false, + }); + } + }) + .catch((err) => { + log('error', err); + this.snackBar('Something went wrong try again!'); + }); }; snackBar = (msg) => { @@ -60,19 +81,41 @@ export default class WhitelistView extends Component { addPlayerToWhitelist = () => { - //this.state.whitelistDialogSteamID - + //comes from this.state.whitelistDialogSteamID + this.setState({ + loading: true, + }); + sendCommandToServer(`mis_whitelist_add ${this.state.whitelistDialogSteamID}`, this.state.credentials) + .then((res) => { + log('silly', res); + this.hideWhitelistDialog(); + this.getPlayersAndAddToState() + }) + .catch((err) => { + log('error', err); + this.snackBar('Something went wrong try again!'); + }); }; - removePlayerFromWhitelist = (steam) =>{ - + removePlayerFromWhitelist = (steam) => { + this.setState({ + loading: true, + }); + sendCommandToServer(`mis_whitelist_remove ${steam}`, this.state.credentials) + .then((res) => { + log('silly', res); + this.getPlayersAndAddToState() + }) + .catch((err) => { + log('error', err); + this.snackBar('Something went wrong try again!'); + }); }; showWhitelistDialog = (steam) => { this.setState({ - showWhitelistDialog: true, - whitelistDialogSteamID: steam + showWhitelistDialog: true }) }; @@ -82,6 +125,12 @@ export default class WhitelistView extends Component { }) }; + updateWhitelistDialogSteamID = (e) => { + this.setState({ + whitelistDialogSteamID: e.target.value, + }); + }; + updateSearchString = (e) => { this.setState({ searchString: e.target.value @@ -96,13 +145,13 @@ export default class WhitelistView extends Component { render() { - const fuzzyList = fuzzy.filter(this.state.searchString, this.state.players, {extract: (el) => el.name}).map((el) => el.string); - const filterList = this.state.players.filter((player) => fuzzyList.indexOf(player.name) >= 0); + const fuzzyList = fuzzy.filter(this.state.searchString, this.state.players, {extract: (el) => el.steam}).map((el) => el.string); + const filterList = this.state.players.filter((player) => fuzzyList.indexOf(player.steam) >= 0); return ( - + @@ -137,6 +186,11 @@ export default class WhitelistView extends Component { action="OK" onActionTouchTap={this.closeSnackBar} /> + ); } diff --git a/app/containers/HomePage.js b/app/containers/HomePage.js index f6dbf6e9..ed4cd014 100644 --- a/app/containers/HomePage.js +++ b/app/containers/HomePage.js @@ -3,6 +3,7 @@ * Author: Chrissprance * Creation Date: 12/8/2016 * Description: Handles Showing the main app page and the initial login/credential selection + * as well as sending all the initial data to the other components */ import React, {Component} from 'react'; import store from 'store'; @@ -126,7 +127,7 @@ export default class HomePage extends Component { + status={this.state.status}/> )}