jam-cloud/web/app/assets/javascripts/react-components/JamBlasterScreen.js.jsx.coffee

context = window
rest = context.JK.Rest()
logger = context.JK.logger

@JamBlasterScreen = React.createClass({

  mixins: [
    @ICheckMixin,
    @PostProcessorMixin,
    @BonjourMixin,
    Reflux.listenTo(AppStore, "onAppInit"),
    Reflux.listenTo(UserStore, "onUserChanged")
  ]

  TILE_AUDIO: 'audio'
  TILE_INTERNET: 'internet'
  TILE_MANAGEMENT: 'management'
  TILE_USB: 'usb'

  TILES: ['audio', 'internet', 'management', 'usb']

  onAppInit: (@app) ->
    @app.bindScreen('jamblaster',
      {beforeShow: @beforeShow, afterShow: @afterShow, beforeHide: @beforeHide})

  onUserChanged: (userState) ->
    @setState({user: userState?.user})

  componentDidMount: () ->
    @root = $(@getDOMNode())

  componentWillUpdate: (nextProps, nextState) ->

  componentDidUpdate: () ->
    items = @root.find('.jamtable .optionsColumn .jamblaster-options-btn')

    $.each(items, (i, node) => (
      $node = $(node)

      jamblaster = @findJamBlaster($node.attr('data-jamblaster-id'))

      $node.jamblasterOptions(jamblaster).off(context.JK.EVENTS.JAMBLASTER_ACTION).on(context.JK.EVENTS.JAMBLASTER_ACTION,
        @jamblasterOptionSelected)
    ))
#context.JK.popExternalLinks(@root)

  jamblasterOptionSelected: (e, data) ->
    jamblasterId = data.options.id
    jamblaster = @findJamBlaster(jamblasterId)

    if data.option == 'auto-connect'
      context.JK.Banner.showNotice('Auto-Connect',
        'Auto-Connect is always on by default.  It can not currently configurable.')
    else if data.option == 'restart'
      context.JK.Banner.showNotice('Restart',
        'To restart the JamBlaster, you must manually cycle power (unplug, then plug).')
    else if data.option == 'name'
      context.layout.showDialog('jamblaster-name-dialog').one(context.JK.EVENTS.DIALOG_CLOSED, (e, data) =>
        @resyncBonjour()
      )

    else if data.option == 'check-for-updates'
      context.JK.Banner.showNotice('Check for Update',
        'The JamBlaster only checks for updates on start up.  Please reboot the JamBlaster')
    else if data.option == 'set-static-ports'
      context.layout.showDialog('jamblaster-port-dialog')
    else if data.option == 'factory-reset'
      context.JK.Banner.showNotice('Factory Reset',
        'The JamBlaster only checks for updates when it boots up, and if there is an update available, it will automatically begin updating.<br/><br/>Please reboot the JamBlaster to initiate an update check.')
    else
      logger.debug("unknown action")
  getInitialState: () ->
    {
    selected: 'management',
    user: null,
    userJamBlasters: [],
    localClients: [],
    clients: []
    }

  beforeHide: (e) ->


  beforeShow: (e) ->

  afterShow: (e) ->
    @resyncBonjour()

  openMenu: (client, e) ->
    logger.debug("open jamblaster options menu")
    $this = $(e.target)
    if !$this.is('.jamblaster-options-btn')
      $this = $this.closest('.jamblaster-options-btn')
    $this.btOn()

  connect: (client, e) ->
    logger.debug("beginning pairing to #{client.connect_url}")

    context.jamClient.startPairing(client.connect_url)

  disconnect: (client, e) ->
    logger.debug("disconnecting from currently paired client #{client.connect_url}")
    context.jamClient.endPairing()
  mergeClients: () ->

    clientsJsx = []
    for client in @state.clients
      if client.display_name?
        displayName = client.display_name
      else
        displayName = client.name

      if client.serial_no? && displayName? && displayName.indexOf(client.serial_no) == -1
        displayName = "#{displayName} (#{client.serial_no})"
      name = `<span className="displayNameColumn">{displayName}</span>`

      if client.isPaired
        connect = `<span className="connectColumn"><a
          onClick={this.disconnect.bind(this, client)}>disconnect</a></span>`
      else if client.has_local
        connect = `<span className="connectColumn"><a onClick={this.connect.bind(this, client)}>connect</a></span>`
      else
        connect = `<span className="connectColumn">offline</span>`

      options = `<span className="optionsColumn"><a data-jamblaster-id={client.id} className="jamblaster-options-btn"
                                                    onClick={this.openMenu.bind(this, client)}>more options
        <div className="details-arrow arrow-down"/>
      </a></span>`

      clientsJsx.push(`<tr>
        <td>{name}{options}{connect}</td>
      </tr>`)

    clientsJsx

  mainContent: () ->
    if @state.selected == @TILE_AUDIO
      @audio()
    else if @state.selected == @TILE_INTERNET
      @internet()
    else if @state.selected == @TILE_MANAGEMENT
      @management()
    else if @state.selected == @TILE_USB
      @usb()

  management: () ->
    clients = @mergeClients()
    `<div className="management-content">
      <table className="jamtable">
        <thead>
        <tr>
          <th className="jamblasterColumn">JAMBLASTERS ON YOUR NETWORK</th>
        </tr>
        </thead>
        <tbody>
        {clients}
        </tbody>
      </table>
      <p>If you don't see your JamBlaster listed above, please check to make sure you have power connected to your JamBlaster,
        and make sure your JamBlaster is connected via an Ethernet cable to the same router/network as the device on which you are viewing this application.
      </p>
    </div>`

  render: () ->
    disabled = @state.updating

    if !@state.user?.id || !@state.userJamBlasters? || !@state.localClients?
      return `<div>Loading</div>`


    `<div className="content-body-scroller">
      <div className="">
        <h2>jamblaster settings</h2>

        <div className="tiles">
        </div>

        <div className="jamclass-section">
          {this.mainContent()}
        </div>
      </div>
      <br className="clearall"/>
    </div>`
})