jam-cloud/web/app/assets/javascripts/react-components/JamBlasterTrackConfig.js.js...

216 lines
8.1 KiB
CoffeeScript

context = window
JamBlasterActions = @JamBlasterActions
@JamBlasterTrackConfig = React.createClass({
mixins: [@ICheckMixin, @BonjourMixin, Reflux.listenTo(@AppStore, "onAppInit"),
Reflux.listenTo(@JamBlasterStore, "onJamBlasterChanged")]
beforeShow: () ->
onAppInit: (@app) ->
onJamBlasterChanged: (jamblasterState) ->
@setState(jamblasterState)
componentDidMount: () ->
@checkboxes = [
{selector: 'input.track1Active', stateKey: 'track1Active'},
{selector: 'input.track2Active', stateKey: 'track2Active'},
{selector: 'input.micActive', stateKey: 'micActive'},
{selector: 'input.track1Phantom', stateKey: 'track1Phantom'},
{selector: 'input.track2Phantom', stateKey: 'track2Phantom'},
{selector: 'input.inputTypeTrack1', stateKey: 'inputTypeTrack1'},
{selector: 'input.inputTypeTrack2', stateKey: 'inputTypeTrack2'},
{selector: 'input.combined', stateKey: 'combined'}]
@root = $(@getDOMNode())
@iCheckify()
componentWillUpdate: (nextProp, nextState) ->
pairedJamBlaster = nextState.pairedJamBlaster
if pairedJamBlaster?
nextState.combined = pairedJamBlaster.tracks?.combined
nextState.track1Active = pairedJamBlaster.tracks?.track1Active
nextState.track2Active = pairedJamBlaster.tracks?.track2Active
nextState.inputTypeTrack1 = pairedJamBlaster.tracks?.inputTypeTrack1
nextState.inputTypeTrack2 = pairedJamBlaster.tracks?.inputTypeTrack2
nextState.track1Phantom = pairedJamBlaster.tracks?.track1Phantom
nextState.track2Phantom = pairedJamBlaster.tracks?.track2Phantom
nextState.micActive = pairedJamBlaster.tracks?.micActive
nextState.track1Instrument = context.JK.convertClientInstrumentToServer(pairedJamBlaster.tracks?.track1Instrument)
nextState.track2Instrument = context.JK.convertClientInstrumentToServer(pairedJamBlaster.tracks?.track2Instrument)
componentDidUpdate: () ->
@iCheckify()
checkboxChanged: (e) ->
checked = $(e.target).is(':checked')
value = $(e.target).val()
name = $(e.target).attr('name')
console.log("checkbox changed: ", checked, value)
if $(e.target).attr('type') == 'checkbox'
state = {}
state[name] = checked
@setState(state)
JamBlasterActions.updateAudio(name, checked)
else
state = {}
value = value == 'line'
state[name] = value
@setState(state)
JamBlasterActions.updateAudio(name, value)
instrumentChanged: (key, e) ->
value = $(e.target).val()
state = {}
state[key] = value
@setState(state)
JamBlasterActions.updateAudio(key, value)
getInitialState: () ->
{
allJamBlasters: [],
userJamBlasters: [],
localJamBlasters: []
}
convertToClientInstrument: (instrumentId) ->
clientInstrumentId = null
if instrumentId != null && instrumentId != ''
clientInstrumentId = context.JK.instrument_id_to_instrument[instrumentId].client_id
else
clientInstrumentId = 10
clientInstrumentId
render: () ->
pairedJamBlaster = this.state.pairedJamBlaster
hasPairedJamBlaster = pairedJamBlaster?
masterDisabled = this.props.disabled
if !hasPairedJamBlaster
return `<div className="jamblaster-track-config">
You have no paired JamBlaster currently. If you've paired the JamBlaster in the past, be sure it's plugged in
and connected to an ethernet cable. If you have not paired a JamBlaster before, please go to the <a
href="/client#/jamblaster">JamBlaster management page</a>.
</div>`
instruments = []
for instrument in context.JK.server_to_client_instrument_alpha
instruments.push(`<option key={instrument.server_id} value={instrument.server_id}>{instrument.display}</option>`)
#console.log("JAMBLASTERTRACKCONFIG", pairedJamBlaster)
combined = @state.combined
track1Active = @state.track1Active
track2Active = @state.track2Active
inputTypeTrack1 = @state.inputTypeTrack1
inputTypeTrack2 = @state.inputTypeTrack2
track1Phantom = @state.track1Phantom
track2Phantom = @state.track2Phantom
micActive = @state.micActive
track1Instrument = @state.track1Instrument #context.JK.convertClientInstrumentToServer(@state.track1Instrument)
track2Instrument = @state.track2Instrument #context.JK.convertClientInstrumentToServer(@state.track2Instrument)
if this.state.waitingOnTracks
contents = `<div className="waiting-on-tracks">
<div className="spinner spinner-large">
</div>
<br/>
<p>Please wait as the JamBlaster reconfigures it's settings.</p>
</div>`
else
contents = `<div>
<div className="input-1">
<h3>Input 1</h3>
<div className="input-type-section">
<h4>Type</h4>
<div className="input-type field">
<div className="input-type-choice">
<input className="input-type inputTypeTrack1" type="radio" name="inputTypeTrack1" readOnly={true}
value="line" disabled={masterDisabled}
defaultChecked={inputTypeTrack1}/><label>Line</label>
</div>
<div className="input-type-choice">
<input className="input-type inputTypeTrack1" type="radio" name="inputTypeTrack1" readOnly={true}
value="instrument" disabled={masterDisabled}
defaultChecked={!inputTypeTrack1}/><label>Instrument</label>
</div>
</div>
</div>
<div className="phantom-section">
<h4>Power</h4>
<div className="phantom field">
<input className="phantom track1Phantom" name="track1Phantom" type="checkbox" disabled={masterDisabled}
value={track1Phantom}/><label>Phantom power</label>
</div>
</div>
<div className="instrument-section">
<h4>Instrument</h4>
<select name="track1Instrument" value={track1Instrument} disabled={masterDisabled}
onChange={this.instrumentChanged.bind(this, 'track1Instrument')}>
{instruments}
</select>
</div>
</div>
<div className="input-2">
<h3>Input 2</h3>
<div className="input-type-section">
<h4>Type</h4>
<div className="input-type field">
<div className="input-type-choice">
<input className="input-type inputTypeTrack2" type="radio" name="inputTypeTrack2" readOnly={true}
value="line" disabled={masterDisabled || combined}
defaultChecked={inputTypeTrack2}/><label>Line</label>
</div>
<div className="input-type-choice">
<input className="input-type inputTypeTrack2" type="radio" name="inputTypeTrack2" readOnly={true}
value="instrument" disabled={masterDisabled || combined}
defaultChecked={!inputTypeTrack2}/><label>Instrument</label>
</div>
</div>
</div>
<div className="phantom-section">
<h4>Power</h4>
<div className="phantom field">
<input className="phantom track2Phantom" name="track2Phantom" type="checkbox" disabled={masterDisabled || combined}
value={track2Phantom}/><label>Phantom power</label>
</div>
</div>
<div className="instrument-section">
<h4>Instrument</h4>
<select name="track2Instrument" value={track2Instrument} disabled={masterDisabled || combined}
onChange={this.instrumentChanged.bind(this, 'track2Instrument')}>
{instruments}
</select>
</div>
</div>
<br className="clearall"/>
<div className="combined-option">
<input className="combined" type="checkbox" name="combined" value={combined}
disabled={masterDisabled}></input><label>Combined inputs 1 &amp; 2 into a single stereo track</label>
</div>
</div>`
`<div className="jamblaster-track-config">
{contents}
</div>`
})