Implemented stats page

src/components/app.jsx

@@ -76,6 +76,7 @@ export default class App extends React.Component {
 						<LazyRoute path='/patronlist' component={() => import('./pages/patron_list.jsx')} />
 						<LazyRoute path='/news/:postId' component={() => import('./pages/news.jsx')} />
 						<LazyRoute path='/rules' component={() => import('./pages/rules.jsx')} />
+						<LazyRoute path='/statistics' component={() => import('./pages/statistics.jsx')} />
 
 						<LazyRoute path='*' component={() => import('./pages/page_not_found.jsx')} />
 					</Switch>

src/components/pages/statistics.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+//panels
+import CommonLinks from '../panels/common_links.jsx';
+import StatisticsPanel from '../panels/statistics.jsx';
+
+class Statistics extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			warning: '', //TODO: unified warning?
+			fetch: null
+		};
+	}
+
+	componentDidUpdate(prevProps, prevState, snapshot) {
+		this.state.fetch();
+	}
+
+	render() {
+		let warningStyle = {
+			display: this.state.warning.length > 0 ? 'flex' : 'none'
+		};
+
+		return (
+			<div className='page'>
+				<div className='sidePanelPage'>
+					<div className='sidePanel'>
+						<CommonLinks />
+					</div>
+
+					<div className='mainPanel'>
+						<div className='warning' style={warningStyle}>
+							<p>{this.state.warning}</p>
+						</div>
+
+						<h1 className='centered'>Game Statistics</h1>
+						<StatisticsPanel setWarning={this.setWarning.bind(this)} getFetch={ (fn) => this.setState({ fetch: fn }) } />
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	setWarning(s) {
+		this.setState({ warning: s });
+	}
+};
+
+export default Statistics;

src/components/panels/common_links.jsx

@@ -37,6 +37,7 @@ class CommonLinks extends React.Component {
 					<p className='mobile centered'><Link to='/tasklist' onClick={this.props.onClickTaskList}>Task List</Link></p>
 					<p className='mobile centered'><Link to='/patronlist' onClick={this.props.onClickPatronList}>Patron List</Link></p>
 					<p className='mobile centered'><Link to='/rules' onClick={this.props.onClickRules}>Rules</Link></p>
+					<p className='mobile centered'><Link to='/statistics' onClick={this.props.onClickStatistics}>Game Stats</Link></p>
 
 					<Extra />
 
@@ -53,6 +54,7 @@ class CommonLinks extends React.Component {
 					<p className='mobile centered'><Link to='/tasklist' onClick={this.props.onClickTaskList}>Task List</Link></p>
 					<p className='mobile centered'><Link to='/patronlist' onClick={this.props.onClickPatronList}>Patron List</Link></p>
 					<p className='mobile centered'><Link to='/rules' onClick={this.props.onClickRules}>Rules</Link></p>
+					<p className='mobile centered'><Link to='/statistics' onClick={this.props.onClickStatistics}>Game Stats</Link></p>
 
 					<Extra />
 				</div>
@@ -75,7 +77,8 @@ CommonLinks.propTypes = {
 	onClickSpyingLog: PropTypes.func,
 	onClickTaskList: PropTypes.func,
 	onClickPatronList: PropTypes.func,
-	onClickRules: PropTypes.func
+	onClickRules: PropTypes.func,
+	onClickStatistics: PropTypes.func
 };
 
 function mapStoreToProps(store) {

src/components/panels/statistics.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class Statistics extends React.Component {
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			data: {}
+		};
+
+		if (props.getFetch) {
+			props.getFetch(() => this.sendRequest('/statisticsrequest'));
+		}
+	}
+
+	render() {
+		return (
+			<div className='panel table noCollapse'>
+				{Object.keys(this.state.data).map((key) => <div key={key} className='row'>
+					<p className='col'>{key}:</p>
+					<p className='col'>{typeof(this.state.data[key]) === 'object' ? <span style={{color: this.state.data[key].color}}>{this.state.data[key].string}</span> : <span>{this.state.data[key]}</span>}</p>
+					<div className='col mobile hide' />
+				</div>)}
+			</div>
+		);
+	}
+
+	sendRequest(url, args = {}) { //send a unified request, using my credentials
+		//TODO: move sendRequest() into it's own module
+		//build the XHR
+		let xhr = new XMLHttpRequest();
+		xhr.open('POST', url, true);
+
+		xhr.onreadystatechange = () => {
+			if (xhr.readyState === 4) {
+				if (xhr.status === 200) {
+					let json = JSON.parse(xhr.responseText);
+
+					//on success
+					this.setState({ data: json });
+				}
+				else if (xhr.status === 400 && this.props.setWarning) {
+					this.props.setWarning(xhr.responseText);
+				}
+			}
+		};
+
+		xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
+		xhr.send(JSON.stringify({
+			//NOTE: No id or token needed for statistics
+			...args
+		}));
+	}
+};
+
+Statistics.propTypes = {
+	setWarning: PropTypes.func,
+	getFetch: PropTypes.func
+};
+
+export default Statistics;