Fixed gather widgets

app/javascripts/components/admin.js

@@ -0,0 +1,89 @@
+const React = require("react");
+import {MenubarMixin} from "javascripts/components/menubar";
+
+const UserLogin = React.createClass({
+	propTypes: {
+		socket: React.PropTypes.object.isRequired
+	},
+
+	getInitialState() {
+		return {
+			userId: null
+		};
+	},
+
+	handleChange(e) {
+		const newId = e.target.value || null;
+		this.setState({ userId: newId });
+	},
+
+	authorizeId(id) {
+		this.props.socket.emit("users:authorize", {
+			id: id
+		});
+	},
+
+	handleSubmit(e) {
+		e.preventDefault();
+		this.authorizeId(this.state.userId);
+	},
+
+	render() {
+		return (
+			<form>
+				<div className="input-group signin">
+					<input 
+						id="btn-input" 
+						type="text" 
+						className="form-control" 
+						vaue={this.state.userId}
+						onChange={this.handleChange}
+						placeholder="Change user (input ID)" />
+					<span className="input-group-btn">
+						<input 
+							type="submit" 
+							className="btn btn-primary" 
+							onClick={this.handleSubmit}
+							value="Assume ID" />
+					</span>
+				</div>
+			</form>
+		);
+	}
+});
+
+const AdminPanel = exports.AdminPanel = React.createClass({
+	mixins: [MenubarMixin],
+
+	propTypes: {
+		socket: React.PropTypes.object.isRequired
+	},
+
+	handleGatherReset() {
+		this.props.socket.emit("gather:reset");
+	},
+
+	render() {
+		return (
+			<li className={this.componentClass()}>
+			  <a href="#" onClick={this.toggleShow}>
+			    <i className="fa fa-rebel"></i>
+			  </a>
+			  <ul className="dropdown-menu">
+			    <li className="header">Admin</li>
+				  <ul className="news-menu">
+				    <h5>Swap Into a Different Account (Only works for admins)</h5>
+						<UserLogin socket={this.props.socket} />
+						<h5>Gather Options</h5>
+						<div>
+							<button
+								className="btn btn-danger max-width"
+								onClick={this.handleGatherReset}>
+								Reset Gather</button>
+						</div>
+				  </ul>
+			  </ul>
+			</li>
+		);
+	}
+});

app/javascripts/components/gather.js

@@ -570,6 +570,7 @@ const Gather = exports.Gather = React.createClass({
 		const socket = this.props.socket;
 		const gather = this.props.gather;
 		const thisGatherer = this.props.thisGatherer;
+		const soundController = this.props.soundController;
 		const servers = this.props.servers;
 		const maps = this.props.maps;
 		const user = this.props.user;
@@ -614,9 +615,8 @@ const Gather = exports.Gather = React.createClass({
 								socket={socket} />
 						</div>
 					</div>
-					<Gatherers gather={gather} user={user} 
-						soundController={this.props.soundController}
-						thisGatherer={thisGatherer} socket={socket} />
+					<Gatherers gather={gather} user={user} thisGatherer={thisGatherer} 
+						socket={socket} soundController={soundController}/>
 					{gatherTeams}
 					{voting}
 				</div>
@@ -628,7 +628,7 @@ const Gather = exports.Gather = React.createClass({
 						<div className="panel-heading">Current Gather</div>
 					</div>
 					<Gatherers gather={gather} user={user} thisGatherer={thisGatherer} 
-						socket={socket} />
+						socket={socket} soundController={soundController}/>
 				</div>
 			);
 		}
@@ -674,17 +674,14 @@ const LifeformIcons = exports.LifeformIcons = React.createClass({
 	}
 });
 
-const Gatherers = React.createClass({
+const GathererListItem = React.createClass({
 	propTypes: {
-		user: React.PropTypes.object,
-		thisGatherer: React.PropTypes.object,
+		user: React.PropTypes.object.isRequired,
+		gather: React.PropTypes.object.isRequired,
 		socket: React.PropTypes.object.isRequired,
-		gather: React.PropTypes.object.isRequired
-	},
-
-	joinGather(e) {
-		e.preventDefault();
-		this.props.socket.emit("gather:join");
+		gatherer: React.PropTypes.object.isRequired,
+		thisGatherer: React.PropTypes.object,
+		soundController: React.PropTypes.object.isRequired
 	},
 
 	bootGatherer(e) {
@@ -694,18 +691,29 @@ const Gatherers = React.createClass({
 		});
 	},
 
+	getInitialState() {
+		return {
+			collapse: true
+		};
+	},
+
+	toggleCollapse(e) {
+		e.preventDefault();
+		this.setState({ collapse: !this.state.collapse });
+	},
+
+	collapseState() {
+		return `panel-collapse out collapse ${this.state.collapse ? "" : "in"}`;
+	},
+
 	render() {
-		const self = this;
 		const user = this.props.user;
-		const socket = this.props.socket;
 		const gather = this.props.gather;
+		const socket = this.props.socket;
+		const gatherer = this.props.gatherer;
 		const thisGatherer = this.props.thisGatherer;
-		const admin = (user && user.admin) || (user && user.moderator);
-		const gatherers = gather.gatherers
-		.sort((a, b) => {
-				return (b.user.hive.skill || 1000) - (a.user.hive.skill || 1000);
-			})
-		.map(gatherer => {
+		const soundController = this.props.soundController;
+
 		let country;
 		if (gatherer.user.country) {
 			country = (
@@ -715,18 +723,18 @@ const Gatherers = React.createClass({
 			);
 		};
 
-			let skill = gatherer.user.profile.skill || "Not Available";
+		const skill = gatherer.user.profile.skill || "Not Available";
 
-			let hiveStats = [];
+		const hiveStats = [];
 		if (gatherer.user.hive.skill) hiveStats.push(`${gatherer.user.hive.skill} ELO`);
 
 		if (gatherer.user.hive.playTime) {
 			hiveStats.push(`${Math.floor(gatherer.user.hive.playTime / 3600)} Hours`);
 		}
 
-			let hive = (hiveStats.length) ? hiveStats.join(", ") : "Not Available";
+		const hive = (hiveStats.length) ? hiveStats.join(", ") : "Not Available";
 		
-			let team = (gatherer.user.team) ? gatherer.user.team.name : "None";
+		const team = (gatherer.user.team) ? gatherer.user.team.name : "None";
 
 		let action;
 		if (gather.state === "election") {
@@ -738,9 +746,9 @@ const Gatherers = React.createClass({
 				<span>
 					<span className="badge add-right">{votes + " votes"}</span>
 					<VoteButton 
-							socket={this.props.socket}
+						socket={socket}
 						thisGatherer={thisGatherer} 
-							soundController={this.props.soundController}
+						soundController={soundController}
 						candidate={gatherer} />
 				</span>
 			);
@@ -752,7 +760,7 @@ const Gatherers = React.createClass({
 					thisGatherer.team === gather.pickingTurn) {
 				action = (
 					<span>
-							<SelectPlayerButton gatherer={gatherer} />
+						<SelectPlayerButton gatherer={gatherer} socket={socket}/>
 					</span>
 				);
 			} else {
@@ -772,7 +780,7 @@ const Gatherers = React.createClass({
 		}
 
 		let adminOptions;
-			if (admin) {
+		if ((user && user.admin) || (user && user.moderator)) {
 			adminOptions = [
 				<hr />,
 				<dt>Admin</dt>,
@@ -797,11 +805,8 @@ const Gatherers = React.createClass({
 					<h4 className="panel-title">
 						{country} {gatherer.user.username}
 						<span className="pull-right">
-								<a data-toggle="collapse"
-									href={"#"+gatherer.user.id.toString() + "-collapse"} 
-									aria-expanded="false" 
-									className="btn btn-xs btn-primary add-right"
-									aria-controls={gatherer.user.id.toString() + "-collapse"}>
+							<a href="#" className="btn btn-xs btn-primary add-right"
+								onClick={this.toggleCollapse}>
 								Info <span className="caret"></span></a>
 							<LifeformIcons gatherer={gatherer} />
 							{action}
@@ -809,7 +814,7 @@ const Gatherers = React.createClass({
 					</h4>
 				</div>
 				<div id={gatherer.user.id.toString() + "-collapse"} 
-						className="panel-collapse collapse out" >
+					className={this.collapseState()} >
 					<div className="panel-body">
 						<dl className="dl-horizontal">
 							<dt>Skill Level</dt>
@@ -833,7 +838,39 @@ const Gatherers = React.createClass({
 				</div>
 			</div>
 		);
+	}
+});
+
+const Gatherers = React.createClass({
+	propTypes: {
+		user: React.PropTypes.object,
+		thisGatherer: React.PropTypes.object,
+		socket: React.PropTypes.object.isRequired,
+		gather: React.PropTypes.object.isRequired,
+		soundController: React.PropTypes.object.isRequired
+	},
+
+	joinGather(e) {
+		e.preventDefault();
+		this.props.socket.emit("gather:join");
+	},
+
+	render() {
+		const self = this;
+		const user = this.props.user;
+		const socket = this.props.socket;
+		const gather = this.props.gather;
+		const thisGatherer = this.props.thisGatherer;
+		const gatherers = gather.gatherers
+		.sort((a, b) => {
+				return (b.user.hive.skill || 1000) - (a.user.hive.skill || 1000);
 			})
+		.map(gatherer => {
+			return <GathererListItem socket={socket} gatherer={gatherer} thisGatherer={thisGatherer}
+				soundController={this.props.soundController}
+				user={user} gather={gather}/>
+		});
+
 		if (gather.gatherers.length) {
 			return (
 				<div class="panel-group" 

app/javascripts/components/menubar.js

@@ -0,0 +1,17 @@
+const MenubarMixin = exports.MenubarMixin = {
+	getInitialState() {
+		return {
+			show: false
+		}
+	},
+
+	toggleShow() {
+		this.setState({ show: !this.state.show });
+	},
+
+	componentClass() {
+		let componentClass = ["dropdown", "messages-menu"];
+		if (this.state.show) componentClass.push("open");
+		return componentClass.join(" ");
+	}
+};