Add Groups

js/actions/GroupActions.js

@@ -0,0 +1,135 @@
+var GroupConstants = require('../constants/GroupConstants');
+
+var ErrorActions = require('./ErrorActions');
+
+var models = require('../models');
+var Group = models.Group;
+var Error = models.Error;
+
+function createGroup(group) {
+	return {
+		type: GroupConstants.CREATE_GROUP,
+		group: group
+	}
+}
+
+function groupCreated(group) {
+	return {
+		type: GroupConstants.GROUP_CREATED,
+		group: group
+	}
+}
+
+function fetchGroups() {
+	return {
+		type: GroupConstants.FETCH_GROUPS
+	}
+}
+
+function groupsFetched(groups) {
+	return {
+		type: GroupConstants.GROUPS_FETCHED,
+		groups: groups
+	}
+}
+
+function updateGroup(group) {
+	return {
+		type: GroupConstants.UPDATE_GROUP,
+		group: group
+	}
+}
+
+function groupUpdated(group) {
+	return {
+		type: GroupConstants.GROUP_UPDATED,
+		group: group
+	}
+}
+
+function fetchAll() {
+	return function (dispatch) {
+		dispatch(fetchGroups());
+
+		$.ajax({
+			type: "GET",
+			dataType: "json",
+			url: "group/",
+			success: function(data, status, jqXHR) {
+				var e = new Error();
+				e.fromJSON(data);
+				if (e.isError()) {
+					dispatch(ErrorActions.serverError(e));
+				} else {
+					dispatch(groupsFetched(data.groups.map(function(json) {
+						var g = new Group();
+						g.fromJSON(json);
+						return g;
+					})));
+				}
+			},
+			error: function(jqXHR, status, error) {
+				dispatch(ErrorActions.ajaxError(error));
+			}
+		});
+	};
+}
+
+function create(group) {
+	return function(dispatch) {
+		dispatch(createGroup(group));
+		$.ajax({
+			type: "POST",
+			dataType: "json",
+			url: "group/",
+			data: {group: group.toJSON()},
+			success: function(data, status, jqXHR) {
+				var e = new Error();
+				e.fromJSON(data);
+				if (e.isError()) {
+					dispatch(ErrorActions.serverError(e));
+				} else {
+					var u = new Group();
+					u.fromJSON(data);
+					dispatch(groupCreated(u));
+				}
+			},
+			error: function(jqXHR, status, error) {
+				dispatch(ErrorActions.ajaxError(error));
+			}
+		});
+	};
+}
+
+function update(group) {
+	return function (dispatch) {
+		dispatch(updateGroup());
+
+		$.ajax({
+			type: "PUT",
+			dataType: "json",
+			url: "group/"+group.GroupId+"/",
+			data: {group: group.toJSON()},
+			success: function(data, status, jqXHR) {
+				var e = new Error();
+				e.fromJSON(data);
+				if (e.isError()) {
+					dispatch(ErrorActions.serverError(e));
+				} else {
+					var g = new Group();
+					g.fromJSON(data);
+					dispatch(groupUpdated(u));
+				}
+			},
+			error: function(jqXHR, status, error) {
+				dispatch(ErrorActions.ajaxError(error));
+			}
+		});
+	};
+}
+
+module.exports = {
+	fetchAll: fetchAll,
+	create: create,
+	update: update
+};

js/components/LunchApp.js

@@ -10,18 +10,21 @@ var TopBarContainer = require('../containers/TopBarContainer');
 var RecordLunchContainer = require('../containers/RecordLunchContainer');
 var AccountSettingsModalContainer = require('../containers/AccountSettingsModalContainer');
 var LunchStatsContainer = require('../containers/LunchStatsContainer');
-var NewUserModalContainer = require('../containers//NewUserModalContainer');
+var NewUserModalContainer = require('../containers/NewUserModalContainer');
+var NewGroupModalContainer = require('../containers/NewGroupModalContainer');
 
 module.exports = React.createClass({
 	displayName: "LunchApp",
 	getInitialState: function() {
 		return {
 			showNewUserModal: false,
+			showNewGroupModal: false,
 			showAccountSettingsModal: false
 		};
 	},
 	componentDidMount: function() {
 		this.props.tryResumingSession();
+		this.props.fetchGroups();
 	},
 	handleAccountSettings: function() {
 		this.setState({showAccountSettingsModal: true});
@@ -41,6 +44,15 @@ module.exports = React.createClass({
 	handleNewUserCanceled: function() {
 		this.setState({showNewUserModal: false});
 	},
+	handleCreateNewGroup: function() {
+		this.setState({showNewGroupModal: true});
+	},
+	handleNewGroupCreated: function() {
+		this.setState({showNewGroupModal: false});
+	},
+	handleNewGroupCanceled: function() {
+		this.setState({showNewGroupModal: false});
+	},
 	render: function() {
 		var mainContent;
 		if (this.props.user.isUser())
@@ -65,12 +77,17 @@ module.exports = React.createClass({
 			<div className="fullheight ui">
 				<TopBarContainer
 					onCreateNewUser={this.handleCreateNewUser}
+					onCreateNewGroup={this.handleCreateNewGroup}
 					onAccountSettings={this.handleAccountSettings} />
 				{mainContent}
 				<NewUserModalContainer
 					show={this.state.showNewUserModal}
 					onSubmit={this.handleNewUserCreated}
 					onCancel={this.handleNewUserCanceled}/>
+				<NewGroupModalContainer
+					show={this.state.showNewGroupModal}
+					onSubmit={this.handleNewGroupCreated}
+					onCancel={this.handleNewGroupCanceled}/>
 				<AccountSettingsModalContainer
 					show={this.state.showAccountSettingsModal}
 					onSubmit={this.handleSettingsSubmitted}

js/components/NewGroupModal.js

@@ -0,0 +1,119 @@
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+var ReactBootstrap = require('react-bootstrap');
+var Modal = ReactBootstrap.Modal;
+var Form = ReactBootstrap.Form;
+var FormGroup = ReactBootstrap.FormGroup;
+var FormControl = ReactBootstrap.FormControl;
+var ControlLabel = ReactBootstrap.ControlLabel;
+var Col = ReactBootstrap.Col;
+var Button = ReactBootstrap.Button;
+var ButtonGroup = ReactBootstrap.ButtonGroup;
+
+var models = require('../models');
+var Group = models.Group;
+
+module.exports = React.createClass({
+	displayName: "NewGroupModal",
+	getInitialState: function() {
+		return {error: "",
+			name: "",
+			password: "",
+			confirm_password: ""};
+	},
+	passwordValidationState: function() {
+		if (this.state.password.length >= 10)
+			return "success";
+		else if (this.state.password.length >= 6)
+			return "warning";
+		else
+			return "error";
+	},
+	confirmPasswordValidationState: function() {
+		if (this.state.confirm_password.length > 0) {
+			if (this.state.confirm_password == this.state.password)
+				return "success";
+			else
+				return "error";
+		}
+	},
+	handleCancel: function() {
+		if (this.props.onCancel != null)
+			this.props.onCancel();
+	},
+	handleChange: function() {
+		this.setState({
+			name: ReactDOM.findDOMNode(this.refs.name).value,
+			password: ReactDOM.findDOMNode(this.refs.password).value,
+			confirm_password: ReactDOM.findDOMNode(this.refs.confirm_password).value
+		});
+	},
+	handleSubmit: function(e) {
+		var g = new Group();
+		var error = "";
+		e.preventDefault();
+
+		g.Name = this.state.name;
+		g.Password = this.state.password;
+		if (g.Password != this.state.confirm_password) {
+			this.setState({error: "Error: passwords do not match"});
+			return;
+		}
+
+		this.props.createNewGroup(g);
+		if (this.props.onSubmit != null)
+			this.props.onSubmit(g);
+	},
+	render: function() {
+		return (
+			<Modal show={this.props.show} onHide={this.handleCancel} bsSize="large">
+				<Modal.Header closeButton>
+					<Modal.Title>Create New Group</Modal.Title>
+				</Modal.Header>
+				<Modal.Body>
+				<span style={{color: "red"}}>{this.state.error}</span>
+				<Form horizontal onSubmit={this.handleSubmit}>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>Name</Col>
+						<Col xs={10}>
+						<FormControl type="text"
+							value={this.state.name}
+							onChange={this.handleChange}
+							ref="name"/>
+						</Col>
+					</FormGroup>
+					<FormGroup validationState={this.passwordValidationState()}>
+						<Col componentClass={ControlLabel} xs={2}>Group Password</Col>
+						<Col xs={10}>
+						<FormControl type="password"
+							value={this.state.password}
+							onChange={this.handleChange}
+							ref="password"/>
+						<FormControl.Feedback/>
+						</Col>
+					</FormGroup>
+					<FormGroup validationState={this.confirmPasswordValidationState()}>
+						<Col componentClass={ControlLabel} xs={2}>Confirm Password</Col>
+						<Col xs={10}>
+						<FormControl type="password"
+							value={this.state.confirm_password}
+							onChange={this.handleChange}
+							ref="confirm_password"/>
+						<FormControl.Feedback/>
+						</Col>
+					</FormGroup>
+				</Form>
+				</Modal.Body>
+				<Modal.Footer>
+					<ButtonGroup>
+						<Button onClick={this.handleCancel}
+								bsStyle="warning">Cancel</Button>
+						<Button onClick={this.handleSubmit}
+								bsStyle="success">Create New Group</Button>
+					</ButtonGroup>
+				</Modal.Footer>
+			</Modal>
+		);
+	}
+});

js/components/NewUserModal.js

@@ -11,9 +11,10 @@ var Col = ReactBootstrap.Col;
 var Button = ReactBootstrap.Button;
 var ButtonGroup = ReactBootstrap.ButtonGroup;
 
+var DropdownList = require('react-widgets').DropdownList;
+
 var models = require('../models');
 var User = models.User;
-var Error = models.Error;
 
 module.exports = React.createClass({
 	displayName: "NewUserModal",
@@ -21,21 +22,19 @@ module.exports = React.createClass({
 		return {error: "",
 			name: "",
 			username: "",
+			group: null,
+			group_password: "",
 			email: "",
 			password: "",
-			confirm_password: "",
-			passwordChanged: false,
-			initial_password: ""};
+			confirm_password: ""};
 	},
 	passwordValidationState: function() {
-		if (this.state.passwordChanged) {
-			if (this.state.password.length >= 10)
-				return "success";
-			else if (this.state.password.length >= 6)
-				return "warning";
-			else
-				return "error";
-		}
+		if (this.state.password.length >= 10)
+			return "success";
+		else if (this.state.password.length >= 6)
+			return "warning";
+		else
+			return "error";
 	},
 	confirmPasswordValidationState: function() {
 		if (this.state.confirm_password.length > 0) {
@@ -45,16 +44,21 @@ module.exports = React.createClass({
 				return "error";
 		}
 	},
+	groupPasswordValidationState: function() {
+		if (this.state.group_password.length >= 1)
+			return "success";
+		else
+			return "error";
+	},
 	handleCancel: function() {
 		if (this.props.onCancel != null)
 			this.props.onCancel();
 	},
 	handleChange: function() {
-		if (ReactDOM.findDOMNode(this.refs.password).value != this.state.initial_password)
-			this.setState({passwordChanged: true});
 		this.setState({
 			name: ReactDOM.findDOMNode(this.refs.name).value,
 			username: ReactDOM.findDOMNode(this.refs.username).value,
+			group_password: ReactDOM.findDOMNode(this.refs.group_password).value,
 			email: ReactDOM.findDOMNode(this.refs.email).value,
 			password: ReactDOM.findDOMNode(this.refs.password).value,
 			confirm_password: ReactDOM.findDOMNode(this.refs.confirm_password).value
@@ -67,10 +71,16 @@ module.exports = React.createClass({
 
 		u.Name = this.state.name;
 		u.Username = this.state.username;
+		if (!this.state.group) {
+			this.setState({error: "Error: No group specified!"});
+			return;
+		}
+		u.GroupId = this.state.group.GroupId;
+		u.GroupPassword = this.state.group_password;
 		u.Email = this.state.email;
 		u.Password = this.state.password;
 		if (u.Password != this.state.confirm_password) {
-			this.setState({error: "Error: password do not match"});
+			this.setState({error: "Error: passwords do not match"});
 			return;
 		}
 
@@ -79,13 +89,17 @@ module.exports = React.createClass({
 			this.props.onSubmit(u);
 	},
 	render: function() {
+		var groupList = [];
+		for (var groupIdx in this.props.groups)
+			groupList.push(this.props.groups[groupIdx]);
+
 		return (
 			<Modal show={this.props.show} onHide={this.handleCancel} bsSize="large">
 				<Modal.Header closeButton>
-					<Modal.Title>Create New user</Modal.Title>
+					<Modal.Title>Create New User</Modal.Title>
 				</Modal.Header>
 				<Modal.Body>
-				<span color="red">{this.state.error}</span>
+				<span style={{color: "red"}}>{this.state.error}</span>
 				<Form horizontal onSubmit={this.handleSubmit}>
 					<FormGroup>
 						<Col componentClass={ControlLabel} xs={2}>Name</Col>
@@ -105,6 +119,28 @@ module.exports = React.createClass({
 							ref="username"/>
 						</Col>
 					</FormGroup>
+					<FormGroup>
+						<Col componentClass={ControlLabel} xs={2}>Group</Col>
+						<Col xs={10}>
+						<DropdownList
+							value={this.state.group}
+							data={groupList}
+							valueField="GroupId"
+							textField="Name"
+							onChange={group => this.setState({group})}
+							messages={{'emptyList': "There are no groups yet, please create one first"}}/>
+						</Col>
+					</FormGroup>
+					<FormGroup validationState={this.groupPasswordValidationState()}>
+						<Col componentClass={ControlLabel} xs={2}>Group Password</Col>
+						<Col xs={10}>
+						<FormControl type="password"
+							value={this.state.group_password}
+							onChange={this.handleChange}
+							ref="group_password"/>
+						<FormControl.Feedback/>
+						</Col>
+					</FormGroup>
 					<FormGroup>
 						<Col componentClass={ControlLabel} xs={2}>Email</Col>
 						<Col xs={10}>

js/components/TopBar.js

@@ -35,12 +35,20 @@ const LoginBar = React.createClass({
 		e.preventDefault();
 		this.props.onCreateNewUser();
 	},
+	handleNewGroupSubmit: function(e) {
+		e.preventDefault();
+		this.props.onCreateNewGroup();
+	},
 	render: function() {
 		return (
 			<form onSubmit={this.handleSubmit}>
 			<FormGroup>
 				<Row>
-					<Col xs={4}></Col>
+					<Col xs={2}></Col>
+					<Col xs={2}>
+						<Button bsStyle="link"
+							onClick={this.handleNewGroupSubmit}>New Group</Button>
+					</Col>
 					<Col xs={2}>
 						<Button bsStyle="link"
 							onClick={this.handleNewUserSubmit}>New User</Button>
@@ -102,7 +110,7 @@ module.exports = React.createClass({
 		var barContents;
 		var errorAlert;
 		if (!this.props.user.isUser())
-			barContents = <LoginBar onLogin={this.props.onLogin} onCreateNewUser={this.props.onCreateNewUser} />;
+			barContents = <LoginBar onLogin={this.props.onLogin} onCreateNewUser={this.props.onCreateNewUser} onCreateNewGroup={this.props.onCreateNewGroup} />;
 		else
 			barContents = <LogoutBar user={this.props.user} onLogout={this.props.onLogout} onAccountSettings={this.props.onAccountSettings}/>;
 		if (this.props.error.isError())

js/constants/GroupConstants.js

@@ -0,0 +1,10 @@
+var keyMirror = require('keymirror');
+
+module.exports = keyMirror({
+	CREATE_GROUP: null,
+	GROUP_CREATED: null,
+	FETCH_GROUPS: null,
+	GROUPS_FETCHED: null,
+	UPDATE_GROUP: null,
+	GROUP_UPDATED: null
+});

js/containers/LunchAppContainer.js

@@ -1,6 +1,7 @@
 var connect = require('react-redux').connect;
 
 var UserActions = require('../actions/UserActions');
+var GroupActions = require('../actions/GroupActions');
 
 var LunchApp = require('../components/LunchApp');
 
@@ -13,6 +14,7 @@ function mapStateToProps(state) {
 function mapDispatchToProps(dispatch) {
 	return {
 		tryResumingSession: function() {dispatch(UserActions.tryResumingSession())},
+		fetchGroups: function() {dispatch(GroupActions.fetchAll())}
 	}
 }
 

js/containers/NewGroupModalContainer.js

@@ -0,0 +1,20 @@
+var connect = require('react-redux').connect;
+
+var GroupActions = require('../actions/GroupActions');
+
+var NewGroupModal = require('../components/NewGroupModal');
+
+function mapStateToProps(state) {
+	return {}
+}
+
+function mapDispatchToProps(dispatch) {
+	return {
+		createNewGroup: function(group) {dispatch(GroupActions.create(group))}
+	}
+}
+
+module.exports = connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(NewGroupModal)

js/containers/NewUserModalContainer.js

@@ -5,7 +5,9 @@ var UserActions = require('../actions/UserActions');
 var NewUserModal = require('../components/NewUserModal');
 
 function mapStateToProps(state) {
-	return {}
+	return {
+		groups: state.groups
+	}
 }
 
 function mapDispatchToProps(dispatch) {

js/models.js

@@ -10,6 +10,8 @@ function getJSONObj(json_input) {
 
 function User() {
 	this.UserId = -1;
+	this.GroupId = -1;
+	this.GroupPassword = "";
 	this.Name = "";
 	this.Username = "";
 	this.Password = "";
@@ -19,6 +21,8 @@ function User() {
 User.prototype.toJSON = function() {
 	var json_obj = {};
 	json_obj.UserId = this.UserId;
+	json_obj.GroupId = this.GroupId;
+	json_obj.GroupPassword = this.GroupPassword;
 	json_obj.Name = this.Name;
 	json_obj.Username = this.Username;
 	json_obj.Password = this.Password;
@@ -31,6 +35,10 @@ User.prototype.fromJSON = function(json_input) {
 
 	if (json_obj.hasOwnProperty("UserId"))
 		this.UserId = json_obj.UserId;
+	if (json_obj.hasOwnProperty("GroupId"))
+		this.GroupId = json_obj.GroupId;
+	if (json_obj.hasOwnProperty("GroupPassword"))
+		this.GroupPassword = json_obj.GroupPassword;
 	if (json_obj.hasOwnProperty("Name"))
 		this.Name = json_obj.Name;
 	if (json_obj.hasOwnProperty("Username"))
@@ -43,10 +51,42 @@ User.prototype.fromJSON = function(json_input) {
 
 User.prototype.isUser = function() {
 	var empty_user = new User();
-	return this.UserId != empty_user.UserId ||
+	return this.UserId != empty_user.UserId &&
+		 this.GroupId != empty_user.GroupId &&
 		this.Username != empty_user.Username;
 }
 
+function Group() {
+	this.GroupId = -1;
+	this.Name = "";
+	this.Password = "";
+}
+
+Group.prototype.toJSON = function() {
+	var json_obj = {};
+	json_obj.GroupId = this.GroupId;
+	json_obj.Name = this.Name;
+	json_obj.Password = this.Password;
+	return JSON.stringify(json_obj);
+}
+
+Group.prototype.fromJSON = function(json_input) {
+	var json_obj = getJSONObj(json_input);
+
+	if (json_obj.hasOwnProperty("GroupId"))
+		this.GroupId = json_obj.GroupId;
+	if (json_obj.hasOwnProperty("Name"))
+		this.Name = json_obj.Name;
+	if (json_obj.hasOwnProperty("Password"))
+		this.Password = json_obj.Password;
+}
+
+Group.prototype.isGroup = function() {
+	var empty_group = new Group();
+	return this.GroupId != empty_group.GroupId &&
+		this.Name != empty_group.Name;
+}
+
 function Session() {
 	this.SessionId = -1;
 	this.UserId = -1;
@@ -253,6 +293,7 @@ module.exports = models = {
 
 	// Classes
 	User: User,
+	Group: Group,
 	Session: Session,
 	Error: Error,
 	Attendee: Attendee,

js/reducers/GroupReducer.js

@@ -0,0 +1,24 @@
+var assign = require('object-assign');
+
+var GroupConstants = require('../constants/GroupConstants');
+
+module.exports = function(state = {}, action) {
+	switch (action.type) {
+		case GroupConstants.GROUPS_FETCHED:
+			var groups = {};
+			for (var i = 0; i < action.groups.length; i++) {
+				var group = action.groups[i];
+				groups[group.GroupId] = group;
+			}
+			return groups;
+		case GroupConstants.GROUP_CREATED:
+		case GroupConstants.GROUP_UPDATED:
+			var group = action.group;
+			var groups = assign({}, state, {
+				[group.GroupId]: group
+			});
+			return groups;
+		default:
+			return state;
+	}
+};

js/reducers/LunchReducer.js

@@ -2,6 +2,7 @@ var Redux = require('redux');
 
 var UserReducer = require('./UserReducer');
 var SessionReducer = require('./SessionReducer');
+var GroupReducer = require('./GroupReducer');
 var AttendeeReducer = require('./AttendeeReducer');
 var PopularAttendeeReducer = require('./PopularAttendeeReducer');
 var SuggestionReducer = require('./SuggestionReducer');
@@ -12,6 +13,7 @@ var ErrorReducer = require('./ErrorReducer');
 module.exports = Redux.combineReducers({
 	user: UserReducer,
 	session: SessionReducer,
+	groups: GroupReducer,
 	attendees: AttendeeReducer,
 	popularAttendees: PopularAttendeeReducer,
 	suggestions: SuggestionReducer,