1 files changed, 52 insertions, 11 deletions

diff --git a/frontend/app/views/graph/components/page.form.js b/frontend/app/views/graph/components/page.form.js
index 8fc00b0..a060698 100644
--- a/frontend/app/views/graph/components/page.form.js
+++ b/frontend/app/views/graph/components/page.form.js
@@ -2,8 +2,11 @@ import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 
 import { session } from 'app/session'
+import actions from 'app/actions'
+import { history } from 'app/store'
 
-import { TextInput, ColorInput, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from 'app/common'
+import { TextInput, ColorInput, Checkbox, LabelDescription, TextArea, SubmitButton, Loader } from 'app/common'
+import AudioSelect from 'app/views/audio/components/audio.select'
 
 const newPage = (data) => ({
   path: '',
@@ -14,6 +17,8 @@ const newPage = (data) => ({
     x: 0.05,
     y: 0.05,
     background_color: '#000000',
+    background_audio_id: 0,
+    restart_audio: false,
   },
   ...data,
 })
@@ -26,6 +31,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
@@ -76,6 +91,10 @@ export default class PageForm extends Component {
 
   handleSettingsChange(e) {
     const { name, value } = e.target
+    this.handleSettingsSelect(name, value)
+  }
+
+  handleSettingsSelect(name, value) {
     this.setState({
       data: {
         ...this.state.data,
@@ -110,11 +129,17 @@ export default class PageForm extends Component {
     }
   }
 
-  handleDelete() {
+  handleDelete(e) {
+    e && e.preventDefault()
+    e && e.stopPropagation()
     const { data } = this.state
     console.log(data)
     if (confirm('Really delete this page?')) {
-      actions.page.delete(page_id)
+      actions.page.destroy(data)
+      .then(() => {
+        this.props.actions.graph.hideEditPageForm()
+        history.goBack()
+      })
     }
   }
 
@@ -124,14 +149,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>
@@ -143,32 +168,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'
+            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}
+          />
+
+          <AudioSelect
+            title="Background Audio"
+            name="background_audio_id"
+            selected={data.settings.background_audio_id}
+            onChange={this.handleSettingsSelect}
           />
+
+          <Checkbox
+            label="Restart audio on load"
+            name="restart_audio"
+            checked={data.settings.restart_audio}
+            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>