1 files changed, 25 insertions, 15 deletions
diff --git a/frontend/app/views/graph/components/page.form.js b/frontend/app/views/graph/components/page.form.js
index 2c283aa..91a40a6 100644
--- a/frontend/app/views/graph/components/page.form.js
+++ b/frontend/app/views/graph/components/page.form.js
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom'
 import { session } from 'app/session'
 
 import { TextInput, ColorInput, Checkbox, LabelDescription, TextArea, SubmitButton, Loader } from 'app/common'
+import { AudioSelect } from 'app/views/audio/components/audio.select'
 
 const newPage = (data) => ({
   path: '',
@@ -28,6 +29,16 @@ export default class PageForm extends Component {
     errorFields: new Set([]),
   }
 
+  constructor(props){
+    super(props)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSelect = this.handleSelect.bind(this)
+    this.handleSettingsChange = this.handleSettingsChange.bind(this)
+    this.handleSettingsSelect = this.handleSettingsSelect.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+    this.handleDelete = this.handleDelete.bind(this)
+  }
+
   componentDidMount() {
     const { graph, data, isNew } = this.props
     const title = isNew ? 'new page' : 'editing ' + data.title
@@ -130,14 +141,14 @@ export default class PageForm extends Component {
     return (
       <div className='box'>
         <h1>{title}</h1>
-        <form onSubmit={this.handleSubmit.bind(this)}>
+        <form onSubmit={this.handleSubmit}>
           <TextInput
             title="Path"
             name="path"
             required
             data={data}
             error={errorFields.has('path')}
-            onChange={this.handleChange.bind(this)}
+            onChange={this.handleChange}
             autoComplete="off"
           />
           <LabelDescription>
@@ -149,49 +160,48 @@ export default class PageForm extends Component {
             required
             data={data}
             error={errorFields.has('title')}
-            onChange={this.handleChange.bind(this)}
+            onChange={this.handleChange}
             autoComplete="off"
           />
           <ColorInput
             title='BG Color'
             name='background_color'
             data={data.settings}
-            onChange={this.handleSettingsChange.bind(this)}
+            onChange={this.handleSettingsChange}
             autoComplete="off"
           />
           <TextArea
             title="Description"
             name="description"
             data={data}
-            onChange={this.handleChange.bind(this)}
+            onChange={this.handleChange}
           />
 
-          <TextInput
-            title="Background Audio URL"
-            name="audio"
-            required
-            data={data.settings}
-            onChange={this.handleSettingsChange.bind(this)}
-            autoComplete="off"
+          <AudioSelect
+            title="Background Audio"
+            name="background_audio_id"
+            selected={data.settings.background_audio_id}
+            onChange={this.handleSettingsSelect}
           />
+
           <Checkbox
             label="Restart audio on load"
             name="restartAudio"
             checked={data.settings.restartAudio}
-            onChange={this.handleSettingsSelect.bind(this)}
+            onChange={this.handleSettingsSelect}
             autoComplete="off"
           />
 
           <div className='row buttons'>
             <SubmitButton
               title={submitTitle}
-              onClick={this.handleSubmit.bind(this)}
+              onClick={this.handleSubmit}
             />
             {!isNew && 
               <SubmitButton
                 title={'Delete'}
                 className='destroy'
-                onClick={this.handleDelete.bind(this)}
+                onClick={this.handleDelete}
               />
             }
           </div>