From 92566ba17f5e921d5bff1f3fb4e4b0d92ca4fd39 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Wed, 17 Mar 2021 11:54:58 +0100
Subject: audio select

---
 frontend/app/views/graph/components/audio.list.js |  3 +-
 frontend/app/views/graph/components/page.form.js  | 40 ++++++++++++++---------
 2 files changed, 26 insertions(+), 17 deletions(-)

(limited to 'frontend/app/views/graph')

diff --git a/frontend/app/views/graph/components/audio.list.js b/frontend/app/views/graph/components/audio.list.js
index b7bf19a..011ab08 100644
--- a/frontend/app/views/graph/components/audio.list.js
+++ b/frontend/app/views/graph/components/audio.list.js
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'
 import { connect } from 'react-redux'
 
 import { history } from 'app/store'
+import { unslugify } from 'app/utils'
 import actions from 'app/actions'
 
 class AudioList extends Component {
@@ -132,8 +133,6 @@ class AudioList extends Component {
   }
 }
 
-const unslugify = fn => fn.replace(/-/g, ' ').replace(/_/g, ' ').replace('.mp3', '')
-
 const mapStateToProps = state => ({
   graph: state.graph.show.res,
 })
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>
-- 
cgit v1.2.3-70-g09d2