162 lines
4.4 KiB
CoffeeScript
162 lines
4.4 KiB
CoffeeScript
context = window
|
|
@JamBlasterPairingDialog = React.createClass({
|
|
|
|
mixins: [@BonjourMixin, Reflux.listenTo(@AppStore, "onAppInit")]
|
|
teacher: null
|
|
|
|
beforeShow: (args) ->
|
|
logger.debug("JamBlasterPairingDialog.beforeShow", args.d1)
|
|
@setState({timer: null, pairing: false, bonjourClientId: args.d1, pairingTimeout: false, paired: false})
|
|
@resyncBonjour()
|
|
@setTimer(false)
|
|
|
|
afterHide: () ->
|
|
@clearTimer()
|
|
|
|
onAppInit: (@app) ->
|
|
dialogBindings = {
|
|
'beforeShow': @beforeShow,
|
|
'afterHide': @afterHide
|
|
};
|
|
|
|
@app.bindDialog('jamblaster-pairing-dialog', dialogBindings);
|
|
|
|
getInitialState: () ->
|
|
{
|
|
timer: null
|
|
pairing: false,
|
|
pairStart: null,
|
|
clients: [],
|
|
pairingTimeout: false
|
|
paired: false,
|
|
userJamBlasters: [],
|
|
localClients: []
|
|
}
|
|
|
|
clearTimer: () ->
|
|
if @interval?
|
|
clearInterval(@interval)
|
|
@interval = null
|
|
|
|
clearPairingTimer: () ->
|
|
if @pairingInterval?
|
|
clearInterval(@pairingInterval)
|
|
@pairingInterval = null
|
|
|
|
setTimer: (connecting) ->
|
|
@clearTimer()
|
|
|
|
if connecting
|
|
time = 5000 # every 5 seconds
|
|
else
|
|
time = 60000 # every minute
|
|
|
|
@interval = setInterval((() => @resyncBonjour()), time)
|
|
|
|
pairingTimer: () ->
|
|
@clearPairingTimer()
|
|
|
|
@pairingInterval = setInterval((() => @updatePairingTimer()), 800)
|
|
|
|
updatePairingTimer: () ->
|
|
|
|
now = new Date().getTime()
|
|
|
|
delta = (now - @state.pairStart) / 1000
|
|
|
|
if delta > 60
|
|
@clearPairingTimer()
|
|
@setTimer(false)
|
|
@setState({pairing: false, pairingTimeout: true, timer: null})
|
|
else
|
|
client = @findJamBlaster(@state.bonjourClientId)
|
|
if client.isPaired
|
|
@clearPairingTimer()
|
|
@setTimer(false)
|
|
@setState({pairing: false, pairingTimeout: false, timer: null, paired: true})
|
|
else
|
|
@setState({timer: 60 - delta})
|
|
|
|
componentDidMount: () ->
|
|
@root = $(@getDOMNode())
|
|
@dialog = @root.closest('.dialog')
|
|
|
|
componentDidUpdate: () ->
|
|
|
|
doCancel: (e) ->
|
|
e.preventDefault()
|
|
|
|
if @state.pairing
|
|
return
|
|
|
|
@app.layout.closeDialog('jamblaster-pairing-dialog', true);
|
|
|
|
close: (e) ->
|
|
e.preventDefault()
|
|
@app.layout.closeDialog('jamblaster-pairing-dialog')
|
|
|
|
pair: (e) ->
|
|
e.preventDefault()
|
|
|
|
if @state.pairing
|
|
return
|
|
|
|
@setState({pairing: true, pairStart: new Date().getTime(), timer: 60})
|
|
@setTimer(true)
|
|
|
|
client = @findJamBlaster(this.state.bonjourClientId)
|
|
|
|
if client.isPaired
|
|
context.JK.Banner.showNotice("JamBlaster already paired", "This JamBlaster is already paired.")
|
|
@app.layout.closeDialog("jamblaster-pairing-dialog", true)
|
|
else if client?
|
|
if client.connect_url?
|
|
context.jamClient.startPairing(client.connect_url)
|
|
else
|
|
context.JK.Banner.showAlert("JamBlaster offline", "JamBlaster appears to be offline. Please reboot it")
|
|
else
|
|
context.JK.Banner.showAlert("JamBlaster offline", "JamBlaster appears to be offline. Please reboot it")
|
|
|
|
render: () ->
|
|
|
|
if @state.pairing
|
|
countdown = @state.timer
|
|
else
|
|
countdown = null
|
|
|
|
actions = `<div className="actions">
|
|
<a onClick={this.doCancel} className={cancelClasses}>CANCEL</a>
|
|
<a onClick={this.pair} className={connectClasses}>CONNECT</a>
|
|
<span className="countdown">{countdown}</span>
|
|
</div>`
|
|
|
|
|
|
if @state.paired
|
|
message = `<p>You have successfully connected to this JamBlaster!</p>`
|
|
actions = `<div className="actions">
|
|
<a onClick={this.close} className="button-orange">CLOSE</a>
|
|
</div>`
|
|
else if @state.pairingTimeout
|
|
message = `<p>No connection established. You may click the CONNECT button to try again. If you cannot connect, please contact us at support@jamkazam.com.</p>`
|
|
else
|
|
|
|
cancelClasses = {"button-grey": true, disabled: @state.pairing}
|
|
connectClasses = {"button-orange": true, disabled: @state.pairing}
|
|
|
|
`<div>
|
|
<div className="content-head">
|
|
<img className="content-icon" src="/assets/content/icon_add.png" height={19} width={19}/>
|
|
|
|
<h1>connect to JamBlaster</h1>
|
|
</div>
|
|
<div>
|
|
|
|
<p>To connect this application/device with the selected JamBlaster, please click the Connect button below, and then push the small black plastic button located on the back of the JamBlaster between the USB and power ports to confirm this pairing within 60 seconds of clicking the Connect button below.</p>
|
|
|
|
{message}
|
|
|
|
{actions}
|
|
</div>
|
|
</div>`
|
|
|
|
}) |