@switchbot/homebridge-switchbot 5.0.0-beta.11 → 5.0.0-beta.110

package/src/homebridge-ui/public/js/render.ts

@@ -0,0 +1,510 @@
+import type { DEVICE_TYPES } from './constants.js'
+
+/**
+ * Get RSSI signal quality level and color based on dBm value
+ * @param rssi Signal strength in dBm (typically -30 to -90)
+ * @returns Object with quality level, color, and description
+ */
+export function getRssiSignalQuality(rssi: number | undefined): {
+  level: 'excellent' | 'good' | 'fair' | 'poor' | 'unknown'
+  color: string
+  bgColor: string
+  description: string
+  bars: number
+} {
+  if (!rssi || rssi === 0) {
+    return {
+      level: 'unknown',
+      color: '#999',
+      bgColor: '#f5f5f5',
+      description: 'Signal strength unknown',
+      bars: 0,
+    }
+  }
+
+  const dbm = Math.floor(rssi)
+
+  if (dbm > -60) {
+    return {
+      level: 'excellent',
+      color: '#34a853',
+      bgColor: '#e8f5e9',
+      description: `Excellent (${dbm} dBm)`,
+      bars: 4,
+    }
+  } else if (dbm > -75) {
+    return {
+      level: 'good',
+      color: '#fbbc04',
+      bgColor: '#fffde7',
+      description: `Good (${dbm} dBm)`,
+      bars: 3,
+    }
+  } else if (dbm > -85) {
+    return {
+      level: 'fair',
+      color: '#ff9800',
+      bgColor: '#fff3e0',
+      description: `Fair (${dbm} dBm)`,
+      bars: 2,
+    }
+  } else {
+    return {
+      level: 'poor',
+      color: '#ea4335',
+      bgColor: '#ffebee',
+      description: `Poor (${dbm} dBm) - unreliable`,
+      bars: 1,
+    }
+  }
+}
+
+/**
+ * Create visual signal strength indicator bars
+ * @param rssi Signal strength in dBm
+ * @returns HTML element showing filled bars
+ */
+export function renderSignalBars(rssi: number | undefined): HTMLElement {
+  const quality = getRssiSignalQuality(rssi)
+
+  const container = document.createElement('span')
+  container.style.display = 'inline-flex'
+  container.style.gap = '2px'
+  container.style.alignItems = 'center'
+  container.style.marginLeft = '8px'
+  container.style.fontSize = '12px'
+
+  // Create 4 bars
+  for (let i = 1; i <= 4; i++) {
+    const bar = document.createElement('span')
+    bar.style.height = `${i * 3}px`
+    bar.style.width = '3px'
+    bar.style.borderRadius = '1px'
+    bar.style.border = `1px solid ${quality.color}`
+
+    if (i <= quality.bars) {
+      bar.style.backgroundColor = quality.color
+    } else {
+      bar.style.backgroundColor = 'transparent'
+    }
+
+    container.appendChild(bar)
+  }
+
+  // Add tooltip
+  container.title = quality.description
+
+  return container
+}
+
+/**
+ * Create signal quality badge with color
+ * @param rssi Signal strength in dBm
+ * @returns HTML element showing quality level
+ */
+export function renderSignalQualityBadge(rssi: number | undefined): HTMLElement {
+  const quality = getRssiSignalQuality(rssi)
+
+  const badge = document.createElement('span')
+  badge.textContent = quality.level.charAt(0).toUpperCase() + quality.level.slice(1)
+  badge.style.cssText = `
+    background: ${quality.color};
+    color: white;
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 10px;
+    font-weight: 600;
+    margin-left: 8px;
+  `
+  badge.title = quality.description
+
+  return badge
+}
+
+export function renderBadge(text: string, style: string): HTMLElement {
+  const badge = document.createElement('span')
+  badge.textContent = text
+  badge.style.cssText = style
+  return badge
+}
+
+export function renderConnectionBadge(connectionType: string): HTMLElement | null {
+  if (!connectionType) { return null }
+
+  const badge = renderBadge(connectionType, '')
+
+  if (connectionType === 'BLE') {
+    badge.style.cssText
+      = 'background: #4285f4; color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-left: 8px;'
+  } else if (connectionType === 'Both') {
+    badge.style.cssText
+      = 'background: #34a853; color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-left: 8px;'
+  } else {
+    badge.style.cssText
+      = 'background: #9e9e9e; color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-left: 8px;'
+  }
+
+  return badge
+}
+
+export function renderIRBadge(): HTMLElement {
+  return renderBadge(
+    'IR',
+    'background: #ff6b35; color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; margin-left: 8px;',
+  )
+}
+
+export async function renderDiscoveredDevices(devices: any[]): Promise<HTMLElement> {
+  const ul = document.createElement('ul')
+  ul.style.maxHeight = '400px'
+  ul.style.overflowY = 'auto'
+  ul.style.marginTop = '12px'
+  ul.style.padding = '0'
+  ul.style.listStyle = 'none'
+
+  const { addDeviceToConfig } = await import('./discovery.js')
+
+  for (const d of devices) {
+    const li = document.createElement('li')
+    li.className = 'device-item'
+    li.style.display = 'flex'
+    li.style.alignItems = 'center'
+    li.style.justifyContent = 'space-between'
+    li.style.padding = '10px 12px'
+    li.style.marginBottom = '6px'
+    li.style.borderRadius = '6px'
+    li.style.transition = 'all 0.2s ease'
+
+    const info = document.createElement('div')
+    info.style.flex = '1'
+
+    const nameContainer = document.createElement('div')
+    nameContainer.style.display = 'flex'
+    nameContainer.style.alignItems = 'center'
+    nameContainer.style.marginBottom = '4px'
+    nameContainer.style.flexWrap = 'wrap'
+    nameContainer.style.gap = '6px'
+
+    const name = document.createElement('div')
+    name.style.fontWeight = '500'
+    name.style.fontSize = '14px'
+    name.textContent = d.name || d.id
+
+    nameContainer.appendChild(name)
+
+    // Add connection type badge
+    if (d.connectionType) {
+      const badge = renderConnectionBadge(d.connectionType)
+      if (badge) { nameContainer.appendChild(badge) }
+    }
+
+    // Add IR badge if it's an IR device
+    if (d.isIR) {
+      nameContainer.appendChild(renderIRBadge())
+    }
+
+    // Add signal strength visualization (only for BLE/wireless devices)
+    if (d.rssi !== undefined && d.rssi !== null && d.rssi !== 0) {
+      nameContainer.appendChild(renderSignalBars(d.rssi))
+      nameContainer.appendChild(renderSignalQualityBadge(d.rssi))
+    }
+
+    const details = document.createElement('div')
+    details.style.fontSize = '11px'
+    details.style.opacity = '0.7'
+    details.style.marginTop = '4px'
+    details.style.fontFamily = 'monospace'
+
+    let detailsText = `ID: ${d.id} | Type: ${d.type} | Model: ${d.model || 'N/A'}`
+    if (d.hubDeviceId) { detailsText += ` | Hub: ${d.hubDeviceId}` }
+    if (d.address) { detailsText += ` | MAC: ${d.address}` }
+    details.textContent = detailsText
+
+    info.appendChild(nameContainer)
+    info.appendChild(details)
+
+    const addBtn = document.createElement('button')
+    addBtn.textContent = '+ Add'
+    addBtn.style.marginLeft = '8px'
+    addBtn.style.padding = '6px 14px'
+    addBtn.style.fontSize = '12px'
+    addBtn.style.whiteSpace = 'nowrap'
+    addBtn.style.flexShrink = '0'
+    addBtn.onclick = async () => {
+      await addDeviceToConfig(d)
+    }
+
+    li.appendChild(info)
+    li.appendChild(addBtn)
+    ul.appendChild(li)
+  }
+
+  return ul
+}
+
+/**
+ * Filter devices by connection type and search query
+ * @param devices Discovered devices array
+ * @param connectionType Filter: 'all' | 'ble' | 'api' | 'both' | 'ir'
+ * @param searchQuery Search term to match against name/id/type
+ * @returns Filtered devices array
+ */
+export function filterDevices(
+  devices: any[],
+  connectionType: 'all' | 'ble' | 'api' | 'both' | 'ir' = 'all',
+  searchQuery = '',
+): any[] {
+  let filtered = [...devices]
+
+  // Filter by connection type
+  if (connectionType !== 'all') {
+    filtered = filtered.filter(d => {
+      if (connectionType === 'ir') {
+        return d.isIR === true
+      }
+      if (connectionType === 'ble') {
+        return d.connectionType === 'BLE' || d.connectionType?.includes('BLE')
+      }
+      if (connectionType === 'api') {
+        return d.connectionType === 'OpenAPI' || d.connectionType === 'API' || d.connectionType?.includes('API')
+      }
+      if (connectionType === 'both') {
+        return d.connectionType === 'Both' || d.connectionType?.includes('Both')
+      }
+      return true
+    })
+  }
+
+  // Filter by search query
+  if (searchQuery.trim()) {
+    const query = searchQuery.toLowerCase()
+    filtered = filtered.filter(d => {
+      const name = (d.name || '').toLowerCase()
+      const id = (d.id || '').toLowerCase()
+      const type = (d.type || '').toLowerCase()
+      const model = (d.model || '').toLowerCase()
+      return name.includes(query) || id.includes(query) || type.includes(query) || model.includes(query)
+    })
+  }
+
+  return filtered
+}
+
+/**
+ * Sort devices by specified criteria
+ * @param devices Devices array to sort
+ * @param sortBy Sort criterion: 'name' | 'signal' | 'type' | 'connection'
+ * @returns Sorted devices array
+ */
+export function sortDevices(
+  devices: any[],
+  sortBy: 'name' | 'signal' | 'type' | 'connection' = 'name',
+): any[] {
+  const sorted = [...devices]
+
+  switch (sortBy) {
+    case 'signal': {
+      // Sort by RSSI descending (strongest signal first)
+      sorted.sort((a, b) => {
+        const aRssi = a.rssi || 0
+        const bRssi = b.rssi || 0
+        return bRssi - aRssi // Descending order (higher is stronger)
+      })
+      break
+    }
+    case 'type': {
+      // Sort by device type alphabetically
+      sorted.sort((a, b) => {
+        const aType = (a.type || '').localeCompare(b.type || '')
+        return aType
+      })
+      break
+    }
+    case 'connection': {
+      // Sort by connection type: Both > BLE > OpenAPI > Others
+      const connectionOrder: Record<string, number> = {
+        'Both': 0,
+        'BLE': 1,
+        'OpenAPI': 2,
+        'API': 2,
+        'Unknown': 3,
+      }
+      sorted.sort((a, b) => {
+        const aOrder = connectionOrder[a.connectionType || 'Unknown'] ?? 3
+        const bOrder = connectionOrder[b.connectionType || 'Unknown'] ?? 3
+        return aOrder - bOrder
+      })
+      break
+    }
+    case 'name':
+    default: {
+      // Sort by name alphabetically
+      sorted.sort((a, b) => (a.name || a.id || '').localeCompare(b.name || b.id || ''))
+      break
+    }
+  }
+
+  return sorted
+}
+
+/**
+ * Get filter/sort preferences from localStorage
+ * @returns Object with current filter and sort preferences
+ */
+export function getDiscoveryPreferences(): {
+  connectionType: 'all' | 'ble' | 'api' | 'both' | 'ir'
+  sortBy: 'name' | 'signal' | 'type' | 'connection'
+  searchQuery: string
+} {
+  try {
+    const stored = localStorage.getItem('discoveryPreferences')
+    if (stored) {
+      return JSON.parse(stored)
+    }
+  } catch (_e) {
+    // Ignore parse errors
+  }
+
+  return {
+    connectionType: 'all',
+    sortBy: 'name',
+    searchQuery: '',
+  }
+}
+
+/**
+ * Save filter/sort preferences to localStorage
+ * @param preferences Preferences object to save
+ */
+export function setDiscoveryPreferences(preferences: {
+  connectionType: 'all' | 'ble' | 'api' | 'both' | 'ir'
+  sortBy: 'name' | 'signal' | 'type' | 'connection'
+  searchQuery: string
+}): void {
+  try {
+    localStorage.setItem('discoveryPreferences', JSON.stringify(preferences))
+  } catch (_e) {
+    // Ignore storage errors
+  }
+}
+
+export function renderDeviceList(list: any[]): void {
+  const ul = document.getElementById('devices')
+  const status = document.getElementById('status')
+  const removeAllContainer = document.getElementById('removeAllContainer')
+
+  if (!ul || !status) { return }
+
+  if (!list.length) {
+    status.textContent = 'No devices found in config.'
+    ul.innerHTML = ''
+    // Hide remove all button when no devices
+    if (removeAllContainer) {
+      removeAllContainer.style.display = 'none'
+    }
+    return
+  }
+
+  status.textContent = `Found ${list.length} device(s)`
+  ul.innerHTML = ''
+
+  // Show remove all button when devices exist
+  if (removeAllContainer) {
+    removeAllContainer.style.display = 'block'
+  }
+
+  for (const d of list) {
+    const li = document.createElement('li')
+    li.className = 'device-item'
+
+    const info = document.createElement('div')
+    info.style.flex = '1'
+
+    const nameContainer = document.createElement('div')
+    nameContainer.style.display = 'flex'
+    nameContainer.style.alignItems = 'center'
+    nameContainer.style.flexWrap = 'wrap'
+    nameContainer.style.gap = '6px'
+
+    const name = document.createElement('div')
+    name.style.fontWeight = '500'
+    name.textContent = d.name || d.id
+
+    const code = document.createElement('code')
+    code.textContent = d.id
+    code.style.fontSize = '12px'
+    code.style.opacity = '0.75'
+    code.style.marginLeft = '8px'
+
+    nameContainer.appendChild(name)
+    nameContainer.appendChild(code)
+
+    // Add signal strength visualization if RSSI is available
+    if (d.rssi !== undefined && d.rssi !== null && d.rssi !== 0) {
+      nameContainer.appendChild(renderSignalBars(d.rssi))
+      nameContainer.appendChild(renderSignalQualityBadge(d.rssi))
+    }
+
+    const meta = document.createElement('div')
+    meta.style.opacity = '0.75'
+    meta.style.marginTop = '4px'
+    meta.style.fontSize = '12px'
+
+    const typeText = d.type ? `type: ${d.type}` : ''
+    const connText = d.connectionPreference ? `conn: ${d.connectionPreference}` : ''
+    const roomText = d.room ? `room: ${d.room}` : ''
+    meta.textContent = [typeText, connText, roomText].filter(Boolean).join(' | ')
+
+    info.appendChild(nameContainer)
+    info.appendChild(meta)
+
+    const buttons = document.createElement('div')
+    buttons.style.display = 'flex'
+    buttons.style.gap = '8px'
+
+    const editBtn = document.createElement('button')
+    editBtn.textContent = '✏️ Edit'
+    editBtn.style.padding = '6px 12px'
+    editBtn.style.fontSize = '12px'
+    editBtn.onclick = async () => {
+      const { editDevice } = await import('./modals.js')
+      await editDevice(d)
+    }
+
+    const copyBtn = document.createElement('button')
+    copyBtn.textContent = 'Copy ID'
+    copyBtn.style.padding = '6px 12px'
+    copyBtn.style.fontSize = '12px'
+    copyBtn.addEventListener('click', async () => {
+      try {
+        await navigator.clipboard.writeText(d.id)
+        copyBtn.textContent = 'Copied'
+        copyBtn.classList.add('success')
+        setTimeout(() => {
+          copyBtn.textContent = 'Copy ID'
+          copyBtn.classList.remove('success')
+        }, 1200)
+      } catch (e) {
+        alert('Failed to copy')
+      }
+    })
+
+    const deleteBtn = document.createElement('button')
+    deleteBtn.textContent = '🗑️ Delete'
+    deleteBtn.style.padding = '6px 12px'
+    deleteBtn.style.fontSize = '12px'
+    deleteBtn.style.background = '#ef4444'
+    deleteBtn.onclick = async () => {
+      const { deleteDeviceFromConfig } = await import('./devices-delete.js')
+      await deleteDeviceFromConfig(d.id, d.name || d.id)
+    }
+
+    buttons.appendChild(editBtn)
+    buttons.appendChild(copyBtn)
+    buttons.appendChild(deleteBtn)
+
+    li.appendChild(info)
+    li.appendChild(buttons)
+    ul.appendChild(li)
+  }
+}

package/src/homebridge-ui/public/js/toast.ts

@@ -0,0 +1,37 @@
+import './types.js'
+import { uiLog } from './logger.js'
+
+function showToast(
+  method: 'success' | 'error' | 'warning' | 'info',
+  message: string,
+  title = 'SwitchBot',
+): void {
+  try {
+    const toast = homebridge?.toast
+    const fn = toast?.[method]
+    if (typeof fn === 'function') {
+      fn(message, title)
+      return
+    }
+
+    uiLog.info(`[Toast:${method}] ${title} - ${message}`)
+  } catch (e) {
+    uiLog.warn(`Toast ${method} failed:`, e)
+  }
+}
+
+export function toastSuccess(message: string, title?: string): void {
+  showToast('success', message, title)
+}
+
+export function toastError(message: string, title?: string): void {
+  showToast('error', message, title)
+}
+
+export function toastWarning(message: string, title?: string): void {
+  showToast('warning', message, title)
+}
+
+export function toastInfo(message: string, title?: string): void {
+  showToast('info', message, title)
+}

package/src/homebridge-ui/public/js/types.ts

@@ -0,0 +1,26 @@
+// Global homebridge API type declarations
+declare global {
+  interface HomebridgeToastApi {
+    success?: (message: string, title?: string) => void
+    error?: (message: string, title?: string) => void
+    warning?: (message: string, title?: string) => void
+    info?: (message: string, title?: string) => void
+  }
+
+  interface HomebridgePluginUiAPI {
+    request: (endpoint: string, params?: any) => Promise<any>
+    getPluginConfig?: () => Promise<any[]>
+    updatePluginConfig?: (config: any[]) => Promise<void>
+    savePluginConfig?: () => Promise<void>
+    closeSettings?: () => void
+    showSpinner?: () => void
+    hideSpinner?: () => void
+    disableSaveButton?: () => void
+    enableSaveButton?: () => void
+    toast?: HomebridgeToastApi
+  }
+
+  let homebridge: HomebridgePluginUiAPI
+}
+
+export {}

package/src/homebridge-ui/server.ts

@@ -1,48 +1,16 @@
-import fs from 'node:fs'
-
 import { HomebridgePluginUiServer } from '@homebridge/plugin-ui-utils'
 
-class PluginUiServer extends HomebridgePluginUiServer {
-  constructor() {
-    super()
-    /*
-      A native method getCachedAccessories() was introduced in config-ui-x v4.37.0
-      The following is for users who have a lower version of config-ui-x
-    */
-    this.onRequest('getCachedAccessories', () => {
-      try {
-        const plugin = 'homebridge-switchbot'
-        const devicesToReturn = []
-
-        // The path and file of the cached accessories
-        const accFile = `${this.homebridgeStoragePath}/accessories/cachedAccessories`
-
-        // Check the file exists
-        if (fs.existsSync(accFile)) {
-          // read the cached accessories file
-          const cachedAccessories: any[] = JSON.parse(fs.readFileSync(accFile, 'utf8'))
+import { registerConfigEndpoints } from './endpoints/config.js'
+import { registerCredentialsEndpoint } from './endpoints/credentials.js'
+import { registerDeviceEndpoints } from './endpoints/devices.js'
+import { registerDiscoveryEndpoint } from './endpoints/discovery.js'
 
-          cachedAccessories.forEach((accessory: any) => {
-            // Check the accessory is from this plugin
-            if (accessory.plugin === plugin) {
-              // Add the cached accessory to the array
-              devicesToReturn.push(accessory.accessory as never)
-            }
-          })
-        }
-        // Return the array
-        return devicesToReturn
-      } catch {
-        // Just return an empty accessory list in case of any errors
-        return []
-      }
-    })
-    this.ready()
-  }
-}
+const server = new HomebridgePluginUiServer()
 
-function startPluginUiServer(): PluginUiServer {
-  return new PluginUiServer()
-}
+// Register all endpoints
+registerConfigEndpoints(server)
+registerDiscoveryEndpoint(server)
+registerDeviceEndpoints(server)
+registerCredentialsEndpoint(server)
 
-startPluginUiServer()
+server.ready()