bumped version to 0.0.2 macadocious added in players tab with filtering

app/components/ConsoleView/ConsoleView.js

@@ -8,7 +8,7 @@ import {sendCommandToServer} from '../../utils/sendCommandToServer';
 import {log} from '../../utils/loggerUtils';
 
 const welcomeMessage = `MisRCON-by @Csprance
-v0.0.1 - Babycakes
+v0.0.2 - Macadocious
 Type help for more options.
 --------------------------
 

app/components/InfoView/InfoView.js

@@ -11,7 +11,7 @@ export default class InfoView extends Component {
   render() {
     return (
       <div>
-        TODO: Bans TAB
+        TODO: INFO TAB
       </div>
     );
   }

app/components/PlayersView/PlayerCard.js

@@ -0,0 +1,97 @@
+/**
+ * Name: PlayersCard
+ * Author: Chrissprance
+ * Creation Date: 12/9/2016
+ * Description: Component used to display player information from the server as well as from the localStorage
+ */
+import React, {
+  Component,
+  PropTypes,
+} from 'react';
+import styled from 'styled-components';
+import {Card, CardActions, CardHeader, CardTitle, CardText} from 'material-ui/Card';
+import FlatButton from 'material-ui/FlatButton';
+import TextField from 'material-ui/TextField';
+import store from 'store';
+import axios from 'axios';
+
+import Spacer from '../common/Spacer';
+import {darkGrey, white} from '../../styles/colors';
+import {log} from '../../utils/loggerUtils';
+import ExternalLink from '../common/ExternalLink'
+
+
+class PlayersCard extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      avatar: 'http://placehold.it/42x42',
+      notes: store.get(this.props.steam) !== undefined ? store.get(this.props.steam).notes : ''
+    }
+  }
+
+  componentWillMount() {
+    this.getAvatar();
+  }
+
+  getAvatar = () => {
+    axios.get('https://api.steampowered.com/ISteamUser/GetPlayerSummaries/v2/', {
+      params: {
+        key: 'C4E62F89FF5D569A481850BCD3098D52',
+        steamids: this.props.steam
+      }
+    }).then((res) => {
+      this.setState({
+        avatar: res.data.response.players[0].avatar,
+      });
+    }).catch((err) => {
+      log('error', err);
+    });
+  };
+
+  updateNotes = (e) => {
+    this.setState({
+      notes: e.target.value,
+    });
+    store.set(this.props.steam, {avatar: this.state.avatar, notes: e.target.value});
+  };
+
+  render() {
+    const link = String('https://steamrep.com/profiles/' + this.props.steam);
+    return (
+      <PCard key={this.props.steam + this.props.name}>
+        <Card>
+          <CardHeader
+            avatar={this.state.avatar}
+            style={{background: darkGrey}}
+            title={this.props.name}
+            subtitle={<ExternalLink to={link}>{this.props.steam}</ExternalLink>}
+          />
+          <CardText>
+            <TextField onChange={this.updateNotes}
+                       value={this.state.notes}
+                       style={{width: '100%'}}
+                       floatingLabelStyle={{color: white}}
+                       floatingLabelText="Notes:"/>
+          </CardText>
+          <CardActions style={{display: 'flex'}}>
+            <Spacer />
+            <FlatButton label="Kick" onTouchTap={this.kickPlayer}/>
+            <FlatButton secondary={true} label="Ban" onTouchTap={this.openBanDialog}/>
+          </CardActions>
+        </Card>
+      </PCard>
+    );
+  }
+}
+
+PlayersCard.propTypes = {};
+PlayersCard.defaultProps = {};
+
+const PCard = styled.div`
+  flex-basis: 20%;
+  margin: 5px;
+`;
+
+
+export default PlayersCard;

app/components/PlayersView/PlayersView.js

@@ -2,17 +2,148 @@
  * Name: PlayersView
  * Author: Chrissprance
  * Creation Date: 12/8/2016
- * Description:
+ * Description: Contains the list of all the players currently on the server
  */
 import React, {Component} from 'react';
 
+import styled, {keyframes} from 'styled-components';
+import store from 'store';
+import TextField from 'material-ui/TextField';
+import FloatingActionButton from 'material-ui/FloatingActionButton';
+import RefreshIcon from 'material-ui/svg-icons/navigation/refresh';
+import fuzzy from 'fuzzy';
+
+import Spacer from '../common/Spacer';
+import {JSONifyStatus} from '../../utils/JSONifyStatus';
+import {sendCommandToServer} from '../../utils/sendCommandToServer';
+import {log} from '../../utils/loggerUtils';
+import {white} from '../../styles/colors';
+import PlayerCard from './PlayerCard';
+
 
 export default class PlayersView extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      loading: false,
+      credentials: store.get('userCredentials'),
+      players: [],
+      searchString: ''
+    };
+  }
+
+  componentWillMount() {
+    // Go and grab the player list from the server.
+    this.getPlayersAndAddToState();
+  }
+
+  getPlayersAndAddToState = () => {
+    this.setState({
+      loading: true,
+    });
+
+    sendCommandToServer('status', this.state.credentials)
+      .then((res) => {
+        if (res !== null) {
+          this.setState({
+            players: JSONifyStatus(res).players,
+            loading: false,
+          });
+        }
+      })
+      .catch((err) => {
+        log('error', err);
+      });
+  };
+
+
+  updateSearchString = (e) => {
+    this.setState({
+      searchString: e.target.value
+    });
+  };
+
+
   render() {
+    const options = {
+      extract: (el) => {
+        return el.name
+      }
+    };
+    const fuzzyList = fuzzy.filter(this.state.searchString, this.state.players, options).map((el) => {
+      return el.string;
+    });
+    const filterList = this.state.players.filter((player) => {
+      return fuzzyList.indexOf(player.name) >= 0
+    });
     return (
-      <div>
-        TODO: Bans TAB
-      </div>
+      <Container>
+        <Actions>
+          <Spacer />
+          <SearchBar value={this.state.searchString} onChange={this.updateSearchString} style={{flex: 4}}
+                     floatingLabelStyle={{color: white}} floatingLabelText="Search...."/>
+          <Spacer />
+          <FloatingActionButton onTouchTap={this.getPlayersAndAddToState} secondary={true}>
+            { (this.state.loading === true ? <AnimatedRefresh /> : <RefreshIcon />) }
+          </FloatingActionButton>
+          <Spacer />
+        </Actions>
+        <PlayerList>
+        {filterList.map((player) => {
+          return (
+            <PlayerCard steam={player.steam} name={player.name}/>
+          )
+        })}
+        </PlayerList>
+      </Container>
     );
   }
 }
+
+
+const rotate360 = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+ 
+  to {
+    transform: rotate(360deg);
+  }
+`;
+
+const AnimatedRefresh = styled(RefreshIcon)`
+  display: inline-block;
+  animation: ${rotate360} 2s linear infinite;
+`;
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column; 
+`;
+
+const SearchBar = styled(TextField)`
+  width: 40%;
+`;
+
+const Actions = styled.div`
+  height: 100px;
+  width: 100%;
+  display: flex; 
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 25px;
+  flex-shrink: 1;
+`;
+
+
+const PlayerList= styled.div`
+  width: 100%;
+  display: flex;
+  flex-flow: row wrap;
+  padding: 10px;
+  overflow-y: auto;
+  align-items: flex-start;
+  justify-content: center;
+`;
+
+

app/components/common/ExternalLink.js

@@ -0,0 +1,33 @@
+/**
+ * Name: ExternalLink
+ * Author: Chrissprance
+ * Creation Date: 12/9/2016
+ * Description: Handles sending a user to an external browser link
+ */
+import {log} from '../../utils/loggerUtils';
+import React, {
+  PropTypes,
+} from 'react';
+import styled from 'styled-components';
+
+const ExternalLink = (props) => {
+  const handleClick = () => {
+    require('electron').shell.openExternal(props.to);
+    log(`Navigating to External Link: ${props.to}`);
+  };
+
+  return (
+    <Pointer onClick={handleClick}>
+      {props.children}
+    </Pointer>
+  );
+};
+
+ExternalLink.propTypes = {
+  to: PropTypes.string.isRequired
+};
+
+const Pointer = styled.div`
+  cursor: pointer;
+`;
+export default ExternalLink;

app/components/common/Spacer.js

@@ -0,0 +1,28 @@
+/**
+ * Name: Spacer
+ * Author: Chrissprance
+ * Creation Date: 12/9/2016
+ * Description: Spacer Component
+ */
+import React, {
+  PropTypes,
+} from 'react';
+import styled from 'styled-components';
+
+const Spacer = (props) => {
+  return (
+    <SpacerDiv>
+
+    </SpacerDiv>
+  );
+};
+
+
+Spacer.propTypes = {};
+Spacer.defaultProps = {};
+const SpacerDiv = styled.div`
+  flex-grow: 1;
+`;
+
+export default Spacer;
+

app/containers/HomePage.js

@@ -1,3 +1,5 @@
+// Handle the login
+
 import React, {Component} from 'react';
 import store from 'store';
 
@@ -30,6 +32,7 @@ export default class HomePage extends Component {
 
   //noinspection JSMethodCanBeStatic
   getStoredCredentials() {
+    // returns false if there are no stored credentials
     return store.get('userCredentials') !== undefined;
   }
 

app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "MisRCON",
   "productName": "MisRCON",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "RCON Tool for Miscreated game.",
   "main": "./main.js",
   "author": {