2 files changed, 33 insertions, 3 deletions
diff --git a/animism-align/frontend/views/align/align.css b/animism-align/frontend/views/align/align.css
index a366d40..323dc9a 100644
--- a/animism-align/frontend/views/align/align.css
+++ b/animism-align/frontend/views/align/align.css
@@ -105,8 +105,10 @@ canvas {
   width: 300px;
 }
 .annotationForm {
+  padding: 0.5rem;
   position: absolute;
-  left: 0;
+  left: 0.25rem;
+  background: #448;
 }
 .annotationForm .row {
   justify-content: space-between;
diff --git a/animism-align/frontend/views/align/components/annotations/annotation.form.js b/animism-align/frontend/views/align/components/annotations/annotation.form.js
index db56bcd..03e44e1 100644
--- a/animism-align/frontend/views/align/components/annotations/annotation.form.js
+++ b/animism-align/frontend/views/align/components/annotations/annotation.form.js
@@ -21,6 +21,7 @@ class AnnotationForm extends Component {
     super(props)
     this.handleChange = this.handleChange.bind(this)
     this.handleSelect = this.handleSelect.bind(this)
+    this.handleKeyDown = this.handleKeyDown.bind(this)
   }
   componentDidMount(){
     this.setState({
@@ -30,10 +31,18 @@ class AnnotationForm extends Component {
   componentDidUpdate(prevProps){
     if (this.props.annotation !== prevProps.annotation) {
       this.setState({
-        data: { ...this.props.annotation },
+        data: {
+          ...this.props.annotation,
+          text: this.state.data.text,
+          type: this.state.data.text,
+        },
       })
     }
   }
+  handleKeyDown(e) {
+    switch (e.keyCode) {
+    }
+  }
   handleChange(e) {
     const { name, value } = e.target
     this.handleSelect(name, value)
@@ -46,6 +55,23 @@ class AnnotationForm extends Component {
       }
     })
   }
+  handleSubmit() {
+    const { data } = this.state
+    if (data.id === 'new') {
+      delete data.id
+      actions.graph.create(data)
+        .then(response => {
+          console.log(response)
+          actions.align.hideTimestampForm()
+        })
+    } else {
+      actions.graph.update(data)
+        .then(response => {
+          console.log(response)
+          actions.align.hideTimestampForm()
+        })
+    }
+  }
   render() {
     const { timeline } = this.props
     const { data } = this.state
@@ -58,7 +84,7 @@ class AnnotationForm extends Component {
         }}
       >
         {data.type === 'sentence' && this.renderTextarea()}
-        {data.type === 'heading' && this.renderTextarea()}
+        {data.type === 'header' && this.renderTextarea()}
         <div className='row'>
           <Select
             name='type'
@@ -73,10 +99,12 @@ class AnnotationForm extends Component {
     )
   }
   renderTextarea() {
+    const { data } = this.state
     return (
       <div>
         <textarea
           value={data.text}
+          onKeyDown={this.handleKeyDown}
           onChange={this.handleChange}
         />
       </div>