Add workout logger form

papajo · Apr 17, 2016 · 58b83dd · 58b83dd
1 parent 34fa53f
commit 58b83dd
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -16,8 +16,10 @@
     "vinyl-source-stream": "*",
     "object-assign": "*"
   },
-  "dependencies":{
+  "dependencies": {
+    "node-uuid": "^1.4.7",
     "react": "^0.14.7",
-    "react-dom": "^0.14.7"
+    "react-dom": "^0.14.7",
+    "uuid": "^2.0.2"
   }
 }
diff --git a/src/js/components/AddForm.js b/src/js/components/AddForm.js
@@ -1,15 +1,40 @@
 var React = require('react');
 var AppActions = require('../actions/AppActions');
 var AppStore = require('../stores/AppStore');
+var uuid = require('node-uuid');
 
 var AddForm = React.createClass({
 	render: function(){
 		return(
 			<div>
-				FORM
+				<form onSubmit={this.onSubmit} className="form-group">
+					<select className="form-control" ref="type">
+							<option value="Jogging">Jogging</option>
+							<option value="Weight Lifting">Weight Lifting</option>
+							<option value="Elliptical">Elliptical</option>
+							<option value="Yoga">Yoga</option>
+							<option value="Other">Other</option>
+					</select>
+					<div className="form-group">
+							<input type="text" className="form-control" ref="minutes" placeholder="Minutes" />
+					</div>
+					<div className="form-group">
+							<input type="text" className="form-control" ref="miles" placeholder="Miles (Optional)" />
+					</div>
+					<button type="submit" className="btn btn-success btn-block">Log Workout</button>
+				</form>
 			</div>
 		);
+	},
+	onSubmit: function(e) {
+		e.preventDefault();
+		var workout = {
+				id: uuid.v4(),
+				minutes: this.refs.minutes.value.trim(),
+				miles: this.refs.miles.value.trim(),
+				date: new Date()
+		}
+		console.log(workout);
 	}
 });
-
 module.exports = AddForm;
diff --git a/src/js/components/App.js b/src/js/components/App.js
@@ -2,6 +2,7 @@ var React = require('react');
 var AppActions = require('../actions/AppActions');
 var AppStore = require('../stores/AppStore');
 var AddForm = require('./AddForm.js');
+
 function getAppState(){
 	return {
 			showForm: AppStore.getShowForm()