Added gather manager skeleton

app/javascripts/components/gather.js

@@ -899,7 +899,7 @@ const Gatherers = React.createClass({
 	}
 });
 
-const CompletedGather = React.createClass({
+const CompletedGather = exports.CompletedGather = React.createClass({
 	completionDate() {
 		let d = new Date(this.props.gather.done.time);
 		if (d) {
@@ -1002,34 +1002,4 @@ const GatherVotingResults = React.createClass({
 	}
 });
 
-const ArchivedGathers = exports.ArchivedGathers = React.createClass({
-	propTypes: {
-		archive: React.PropTypes.array.isRequired,
-		servers: React.PropTypes.array.isRequired,
-		maps: React.PropTypes.array.isRequired
-	},
 
-	render() {
-		let archive = this.props.archive
-			.sort((a, b) => {
-				return new Date(b.createdAt) - new Date(a.createdAt);
-			})
-			.map((archivedGather, index) => {
-				return <CompletedGather 
-					id={archivedGather.gather.done.time}
-					show={(index === 0) ? true : false}
-					gather={archivedGather.gather} 
-					maps={this.props.maps}
-					servers={this.props.servers} />
-			});
-
-		return (
-			<div className="panel panel-primary">
-				<div className="panel-heading">Archived Gathers</div>
-				<div className="panel-body">
-					{archive}
-				</div>
-			</div>
-		);
-	}
-});

app/javascripts/components/gatherArchive.js

@@ -0,0 +1,34 @@
+const React = require("react");
+import {CompletedGather} from "javascripts/components/gather";
+
+const ArchivedGathers = exports.ArchivedGathers = React.createClass({
+	propTypes: {
+		archive: React.PropTypes.array.isRequired,
+		servers: React.PropTypes.array.isRequired,
+		maps: React.PropTypes.array.isRequired
+	},
+
+	render() {
+		let archive = this.props.archive
+			.sort((a, b) => {
+				return new Date(b.createdAt) - new Date(a.createdAt);
+			})
+			.map((archivedGather, index) => {
+				return <CompletedGather 
+					id={archivedGather.gather.done.time}
+					show={(index === 0) ? true : false}
+					gather={archivedGather.gather} 
+					maps={this.props.maps}
+					servers={this.props.servers} />
+			});
+
+		return (
+			<div className="panel panel-primary">
+				<div className="panel-heading">Archived Gathers</div>
+				<div className="panel-body">
+					{archive}
+				</div>
+			</div>
+		);
+	}
+});

app/javascripts/components/gatherMenu.js

@@ -0,0 +1,47 @@
+const React = require("react");
+
+const GatherMenu = exports.GatherMenu = React.createClass({
+	getInitialState() {
+		return {
+			open: false
+		};
+	},
+
+	toggleOpen(e) {
+		e.preventDefault();
+		this.setState({ open: !this.state.open });
+	},
+
+	chevron() {
+		if (this.state.open) {
+			return <i className="fa fa-angle-down pull-right"></i>;
+		} else {
+			return <i className="fa fa-angle-right pull-right"></i>; 
+		}
+	},
+
+	render() {
+		const open = this.state.open;
+		let componentClass = ["treeview"];
+		let dropdown;
+		if (open) {
+			componentClass.push("active");
+			dropdown = (
+				<ul className="treeview-menu menu-open" style={{display: "block"}}>
+					<li><a href="#" onClick={this.changeGather}>Public Gather</a></li>
+				</ul>
+			);
+		}
+
+ 		return (
+			<li className={componentClass.join(" ")}>
+				<a href="#" onClick={this.toggleOpen}>
+					<i className="fa fa-play-circle"></i><span>Gathers</span>
+					{this.chevron()}
+				</a>
+				{dropdown}
+			</li>
+		);
+	}
+});
+

app/javascripts/components/main.js

@@ -1,13 +1,15 @@
 import {News} from "javascripts/components/news";
 import {Events} from "javascripts/components/event";
+import {Gather} from "javascripts/components/gather";
 import {InfoButton} from "javascripts/components/info";
 import {AdminPanel} from "javascripts/components/admin";
 import {Chatroom} from "javascripts/components/message";
 import {SoundPanel} from "javascripts/components/sound";
+import {GatherMenu} from "javascripts/components/gatherMenu";
 import {SettingsPanel} from "javascripts/components/settings";
-import {Gather, ArchivedGathers} from "javascripts/components/gather";
-import {TeamSpeakButton, TeamSpeakModal} from "javascripts/components/teamspeak";
+import {ArchivedGathers} from "javascripts/components/gatherArchive";
 import {CurrentUser, ProfileModal, UserMenu} from "javascripts/components/user";
+import {TeamSpeakButton, TeamSpeakModal} from "javascripts/components/teamspeak";
 
 const React = require("react");
 const Sound = require("javascripts/components/sound");
@@ -15,7 +17,7 @@ const SoundController = Sound.SoundController;
 const helper = require("javascripts/helper");
 const storageAvailable = helper.storageAvailable;
 
-const SplashScreen = React.createClass({
+const App = React.createClass({
 	getInitialState() {
 		return {
 			status: "connecting",
@@ -46,7 +48,7 @@ const SplashScreen = React.createClass({
 		const status = this.state.status;
 
 		if (status === "connected") {
-			return <App socket={this.state.socket} />;
+			return <GatherPage socket={this.state.socket} />;
 		} 
 
 		let splash;
@@ -133,7 +135,7 @@ const ConnectingSplash = React.createClass({
 	}
 });
 
-const App = React.createClass({
+const GatherPage = React.createClass({
 	propTypes: {
 		socket: React.PropTypes.object.isRequired
 	},
@@ -440,6 +442,10 @@ const App = React.createClass({
 						</ul>
 						<UserMenu users={this.state.users} user={this.state.user} 
 							socket={socket} mountModal={this.mountModal}/>
+						<ul className="sidebar-menu">
+							<li className="header">Gathers</li>
+							<GatherMenu />
+						</ul>
 						<ul className="sidebar-menu">
 							<li className="header">Information</li>
 							<TeamSpeakButton />
@@ -449,7 +455,8 @@ const App = React.createClass({
 				</aside>
 				<div className="content-wrapper" style={{"minHeight": "916px"}}>
 					<section className="content-header">
-						<h1>Gathers<small>beta</small></h1>
+						<h1>Public Gather</h1>
+						<p>6 v 6 - No player requirements</p>
 					</section>
 					<section className="content">
 						<div className="row">
@@ -489,4 +496,4 @@ const App = React.createClass({
 	}
 });
 
-module.exports = SplashScreen;
+module.exports = App;