jam-cloud/web/app/assets/javascripts/react-components/ConfigureLiveTracksDialog.j...

68 lines
2.1 KiB
CoffeeScript

context = window
ConfigureTracksStore = @ConfigureTracksStore
@ConfigureLiveTracksDialog = React.createClass({
mixins: [Reflux.listenTo(@ConfigureTracksStore,"onConfigureTracksChanged")]
onConfigureTracksChanged:(configureTracks) ->
@setState({configureTracks: configureTracks})
getInitialState: () ->
{configureTracks: null}
render: () ->
inputOneOptions = []
inputTwoOptions = []
defaultSelectionOne = `<option value="">Select an input port for this track (required)</option>`
defaultSelectionTwo = `<option value="">Select an input port for this track (optional)</option>`
inputOneOptions.push(defaultSelectionOne)
inputTwoOptions.push(defaultSelectionTwo)
instruments = []
for displayName, value of context.JK.server_to_client_instrument_map
instruments.push(`<option value={value.server_id}>{displayName}</option>`)
if @state.configureTracks?
for input in @state.configureTracks.musicPorts.inputs
item = `<option value={input.id}>{input.name}</option>`
inputOneOptions.push(item)
inputTwoOptions.push(item)
`<div>
<div className="track-type">
<h3>Track Type</h3>
<input type="checkbox" value="audio" name="track-type" />
<input type="checkbox" value="midi" name="track-type"/>
</div>
<div className="audio-input-ports">
<h3>Audio Input Ports</h3>
<p>Select one or two inputs ports to assign to this track. Note that if you assign a single input port, the app will automatically duplicate this port into a stereo track.</p>
<select name="input-one">
{inputOneOptions}
</select>
<select name="input-two">
{inputTwoOptions}
</select>
</div>
<div className="instrument-selection">
<h3>Instrument</h3>
<select name="instrument">
{instruments}
</select>
</div>
<div className="audio-effects">
<h3>Audio Effects (optional)</h3>
<select name="">
</select>
</div>
</div>`
componentDidMount: () ->
$root = $(@getDOMNode())
context.JK.checkbox($root.find('input[type="checkbox"]'))
})