source/lib/VBListPanel.js
// a change to the device table

a change to the device table
a change to the device table
updateUIDevices() {
    while (this.connectToPort.firstChild) {
      this.connectToPort.removeChild(this.connectToPort.firstChild)
    }
    const sortedPorts = Object.keys(this.portList).sort()
    for (let entry of sortedPorts) {
      const option = document.createElement('OPTION')
      const entryText = this.portList[entry]
      const displayText = entryText ? entry + ' — ' + entryText : entry
      option.value = entry
      option.appendChild(document.createTextNode(displayText))
      this.connectToPort.appendChild(option)
    }
    const option = document.createElement('OPTION')
    option.appendChild(document.createTextNode('[Use Settings to set ports]'))
    option.value = ''
    option.disabled = true
    this.connectToPort.appendChild(option)
    if (sortedPorts.includes(this.config.lastConnectedPort)) {
      this.connectToPort.value = this.config.lastConnectedPort
    }
    else {
      this.connectToPort.value = ""
    }
    const sorted = [...this.snTable.values()].sort((a, b) => a.ip32 - b.ip32)
    while (this.deviceTableBody.firstChild) {
      this.deviceTableBody.removeChild(this.deviceTableBody.firstChild)
    }
    for (let entry of sorted) {
      const tr = document.createElement('TR')
      tr.tabIndex = 0
      tr.id = 'sn-' + entry.serialNumber
      tr.addEventListener('keydown',
        e => this.onDeviceListKeydown(e)
      )
      const tdIp = document.createElement('TD')
      tdIp.appendChild(document.createTextNode(entry.ipAddr))
      tdIp.classList.add('ipAddr')
      let description = ''
      if (entry.friendlyName) {
        description = entry.friendlyName
      }
      else {
        description = entry.serialNumber
        if (entry.modelNumber) {
          description += ' / ' + entry.modelNumber
        }
      }
      const tdFn = document.createElement('TD')
      tdFn.appendChild(document.createTextNode(description))
      const tdDel = document.createElement('TD')
      tdDel.appendChild(document.createTextNode('\u24e7'))
      tdDel.title = 'Delete this device'
      tdDel.classList.add('del')
      tdDel.addEventListener('click', e => {
        e.stopPropagation()
        this.deleteDevice(entry.serialNumber)
      })
      tr.appendChild(tdIp)
      tr.appendChild(tdFn)
      tr.appendChild(tdDel)
      this.deviceTableBody.appendChild(tr)
    }
    this.displaySelectedDevice(this.connectToIp.value)
  }
updateUIDevices ( ) { while ( this . connectToPort . firstChild ) { this . connectToPort . removeChild ( this . connectToPort . firstChild ) } const sortedPorts = Object . keys ( this . portList ) . sort ( ) for ( let entry of sortedPorts ) { const option = document . createElement ( 'OPTION' ) const entryText = this . portList [ entry ] const displayText = entryText ? entry + ' — ' + e tryText : e try
 option . value = entry option . appendChild ( document . createTextNode ( displayText ) ) this . connectToPort . appendChild ( option ) } const option = document . createElement ( 'OPTION' ) option . appendChild ( document . createTextNode ( '[Use Settings to set ports]' ) ) option . value = '' option . disabled = true this . connectToPort . appendChild ( option ) if ( sortedPorts . includes ( this . config . lastConnectedPort ) ) { this . connectToPort . value = this . config . lastConnectedPort } else { this . connectToPort . value = "" } const sorted = [ ... this . snTable . values ( ) ] . sort ( ( a , b ) => a . ip32 - b . ip32 ) while ( this . deviceTableBody . firstChild ) { this . deviceTableBody . removeChild ( this . deviceTableBody . firstChild ) } for ( let entry of sorted ) { const tr = document . createElement ( 'TR' ) tr . tabIndex = 0 tr . id = 'sn-' + entry . serialNumber tr . addEventListener ( 'keydown' , e => this . onDeviceListKeydown ( e ) ) const tdIp = document . createElement ( 'TD' ) tdIp . appendChild ( document . createTextNode ( entry . ipAddr ) ) tdIp . classList . add ( 'ipAddr' ) let description = '' if ( entry . friendlyName ) { description = entry . friendlyName } else { description = entry . serialNumber if ( entry . modelNumber ) { description += ' / ' + entry . modelNumber } } const tdFn = document . createElement ( 'TD' ) tdFn . appendChild ( document . createTextNode ( description ) ) const tdDel = document . createElement ( 'TD' ) tdDel . appendChild ( document . createTextNode ( '\u24e7' ) ) tdDel . title = 'Delete this device' tdDel . classList . add ( 'del' ) tdDel . addEventListener ( 'click' , e => { e . stopPropagation ( ) this . deleteDevice ( entry . serialNumber ) } ) tr . appendChild ( tdIp ) tr . appendChild ( tdFn ) tr . appendChild ( tdDel ) this . deviceTableBody . appendChild ( tr ) } this . displaySelectedDevice ( this . connectToIp . value ) }
a change to the device table
a change to the device table
// Remove existing entries from the ports dropdown list
 // Sort the port list
 // Populate the ports drop-down list
 // Make sure the currently-selected port does not change
 // Sort the device table by ip address
 // Remove all discovered device entries from display
 // Add discovered device entries from the new sorted table
 // Needs to have tabIndex set in order to receive keydown events
 // Give the row an id based on the device serial number
 // IP address
 // Use the Friendly Name if non-blank, otherwise use Serial Number
 // Delete button (use a circle with an "x" in the middle)
 // Don't want this registering as a click to select the device
 // Add the delete device event-handler
 // Fill in the selected device details for the last selected device
