hide event form by default

ZeusWPI · Oct 28, 2015 · a8dd6d3 · a8dd6d3
1 parent 8c34184
commit a8dd6d3
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 3 deletions.
diff --git a/app/assets/javascripts/components/timeline.js b/app/assets/javascripts/components/timeline.js
@@ -3,15 +3,49 @@ import Event from './timeline/event';
 import EventForm from './timeline/event_form';
 
 class Timeline extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {showForm: false}
+  }
+
+  submitEvent(e){
+    this.hideForm();
+    this.props.eventActions.add(e);
+  }
+
+  showForm() {
+    this.setState({showForm: true});
+  }
+
+  hideForm() {
+    this.setState({showForm: false});
+  }
+
+  renderForm() {
+    const eventActions = this.props.eventActions;
+    if (this.state.showForm){
+      return <EventForm onSubmit={this.submitEvent.bind(this)}
+                        onCancel={this.hideForm.bind(this)}/>
+    } else {
+      return (
+        <div className='button-container'>
+          <button onClick={this.showForm.bind(this)}
+                  className='btn btn-primary pull-right'>
+            Add event
+          </button>
+        </div>
+      );
+    }
+  }
+
   renderEvent(event) {
     return <Event {...event}/>
   }
 
   render() {
-    const eventActions = this.props.eventActions;
     return (
       <div>
-        <EventForm onSubmit={eventActions.add}/>
+        {this.renderForm()}
         {this.props.events.map(this.renderEvent)}
       </div>
     );

diff --git a/app/assets/javascripts/components/timeline/event_form.js b/app/assets/javascripts/components/timeline/event_form.js
@@ -5,7 +5,7 @@ export default class EventForm extends Component {
   constructor(props, context) {
     super(props, context);
     if (this.props.event === undefined) {
-      this.state = {};
+      this.state = { moment: moment().add(30, 'minutes')};
     } else {
       this.state = this.props.event;
     }
@@ -27,6 +27,7 @@ export default class EventForm extends Component {
               <DateTimeField
                 dateTime={this.state.moment}
                 onChange={ e => this.setState({moment: new Date(- -e)}) }
+                minDate={moment()}
               />
             </div>
           </div>

diff --git a/app/assets/stylesheets/events.scss b/app/assets/stylesheets/events.scss
@@ -25,3 +25,8 @@
         resize: none;
     }
 }
+
+.button-container {
+    overflow: hidden;
+    margin-bottom: 15px;
+}