got adding and removing banned players/filtering to the views they ne…

…ed to be

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 = [
+    <FlatButton
+      label="Cancel"
+      onTouchTap={props.actionCancel}/>,
+    <FlatButton
+      label="Submit"
+      secondary={true}
+      onTouchTap={props.actionSubmit}/>
+  ];
+
+  return (
+    <Dialog
+      title="Add To Ban List"
+      actions={actions}
+      modal={false}
+      onRequestClose={props.actionCancel}
+      open={props.open}
+    >
+      <TextField
+        floatingLabelText="Steam ID to Ban"
+        value={props.steamID}
+        onChange={props.updateSteamID}
+      />
+    </Dialog>
+  );
+};
+
+
+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;
+
+

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 (
       <Container>
+
         <Actions>
           <Spacer />
-          <FloatingActionButton onTouchTap={this.addPlayerToBanList} secondary={true}>
+          <FloatingActionButton onTouchTap={this.showBanDialog} secondary={true}>
             <AddIcon />
           </FloatingActionButton>
           <Spacer />
@@ -138,6 +169,7 @@ export default class BansView extends Component {
           </FloatingActionButton>
           <Spacer />
         </Actions>
+
         <PlayerList>
           {filterList.map((player) =>
             <PlayerCard
@@ -147,6 +179,7 @@ export default class BansView extends Component {
               removePlayerFromBanList={this.removePlayerFromBanList}
             />)}
         </PlayerList>
+
         <Snackbar
           bodyStyle={{background: darkGrey}}
           open={this.state.showSnackBar}
@@ -156,6 +189,14 @@ export default class BansView extends Component {
           action="OK"
           onActionTouchTap={this.closeSnackBar}
         />
+
+        <BanDialog
+          open={this.state.showBanDialog}
+          actionCancel={this.hideBanDialog}
+          actionSubmit={this.addPlayerToBanList}
+          updateSteamID={this.updateBanDialogSteamID}
+          steamID={this.state.banDialogSteamID}
+        />
       </Container>
     );
   }

app/components/HomeView/HomeView.js

@@ -39,7 +39,7 @@ const Home = (props) => (
       <Tab
         icon={<WhitelistIcon />}
         label="WHITELIST">
-        <WhitelistView />
+        <WhitelistView whiteListPlayers={props.whiteListPlayers}/>
       </Tab>
       <Tab
         icon={<InfoIcon />}

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,13 +67,15 @@ export default class PlayersView extends Component {
       });
   };
 
+
   snackBar = (msg) => {
     this.setState({
       showSnackBar: true,
       snackBarMsg: msg
     });
   };
 
+
   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}
             />)}
         </PlayerList>
-        <BanDialog
+        <PlayersViewBanDialog
           actionCancel={this.hideBanDialog}
           updateBanReason={this.updateBanReason}
           banReason={this.state.banDialogBanReason}
@@ -212,6 +214,7 @@ const SearchBar = styled(TextField)`
 
 const Actions = styled.div`
   height: 100px;
+  min-height: 100px;
   width: 100%;
   display: flex; 
   align-items: center;

app/components/PlayersView/BanDialog.js → app/components/PlayersView/PlayersViewBanDialog.js

@@ -1,5 +1,5 @@
 /**
- * Name: BanDialog
+ * Name: PlayersViewBanDialog
  * Author: Chrissprance
  * Creation Date: 12/10/2016
  * Description:
@@ -9,7 +9,7 @@ import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import TextField from 'material-ui/TextField';
 
-const BanDialog = (props) => {
+const PlayersViewBanDialog = (props) => {
   const actions = [
     <FlatButton
       label="Cancel"
@@ -40,7 +40,7 @@ const BanDialog = (props) => {
   );
 };
 
-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;
 
 

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) => {
     <Container>
       <Item>IP: {store.get('userCredentials').ip} </Item>
       <Item>Port: {store.get('userCredentials').port} </Item>
-      {/*<Item>Name: {this.state.status.name}</Item>*/}
-      {/*<Item>Version: {this.state.status.version}</Item>*/}
-      {/*<Item>Players: {this.state.status.players}</Item>*/}
+      <Item>Name: {props.status !== undefined ? props.status.ip : 'Connecting...'}</Item>
+      <Item>Version: {props.status !== undefined ? props.status.version : 'Connecting...'}</Item>
+      <Item>Players: {props.status !== undefined ? props.status.players : 'Connecting...'}</Item>
     </Container>
   );
 };

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 = [
+    <FlatButton
+      label="Cancel"
+      onTouchTap={props.actionCancel}/>,
+    <FlatButton
+      label="Submit"
+      secondary={true}
+      onTouchTap={props.actionSubmit}/>
+  ];
+
+  return (
+    <Dialog
+      title="Add To WhiteList"
+      actions={actions}
+      modal={false}
+      onRequestClose={props.actionCancel}
+      open={props.open}
+    >
+      <TextField
+        floatingLabelText="Steam ID to Whitelist"
+        value={props.steamID}
+        onChange={props.updateSteamID}
+      />
+    </Dialog>
+  );
+};
+
+
+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;
+
+