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

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

@@ -7,7 +7,7 @@ import {
 import { loadConfiguredDevices } from './devices.js'
 import { uiLog } from './logger.js'
 import { hideBusyUi, showBusyUi } from './modal.js'
-import { renderDiscoveredDevices } from './render.js'
+import { renderDiscoveredDevices, filterDevices, sortDevices, getDiscoveryPreferences, setDiscoveryPreferences } from './render.js'
 import { toastError, toastInfo, toastSuccess, toastWarning } from './toast.js'
 
 export async function discoverDevices(): Promise<void> {
@@ -48,6 +48,9 @@ export async function discoverDevices(): Promise<void> {
             deviceId: d.id,
             name: d.name,
             type: d.type,
+            rssi: d.rssi,
+            address: d.address,
+            model: d.model,
           })),
         )
         uiLog.info('Bulk add response:', bulkResult)
@@ -100,10 +103,130 @@ export async function discoverDevices(): Promise<void> {
     }
 
     status.textContent = `Found ${devices.length} device(s)`
-    const ul = await renderDiscoveredDevices(devices)
-    document.getElementById('discoveredDevices')?.replaceWith(ul)
-    ul.id = 'discoveredDevices'
+
+    // Create filter/sort controls
+    const controlsDiv = document.createElement('div')
+    controlsDiv.style.cssText = 'margin-bottom: 12px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center;'
+
+    // Load saved preferences
+    const preferences = getDiscoveryPreferences()
+
+    // Filter buttons
+    const filterLabel = document.createElement('label')
+    filterLabel.style.fontSize = '12px'
+    filterLabel.style.fontWeight = '500'
+    filterLabel.textContent = 'Filter:'
+
+    const filterGroup = document.createElement('div')
+    filterGroup.style.display = 'flex'
+    filterGroup.style.gap = '4px'
+
+    const filterOptions: Array<{ label: string, value: 'all' | 'ble' | 'api' | 'both' | 'ir' }> = [
+      { label: 'All', value: 'all' },
+      { label: 'BLE', value: 'ble' },
+      { label: 'API', value: 'api' },
+      { label: 'Both', value: 'both' },
+      { label: 'IR', value: 'ir' },
+    ]
+
+    for (const option of filterOptions) {
+      const btn = document.createElement('button')
+      btn.textContent = option.label
+      btn.style.padding = '4px 8px'
+      btn.style.fontSize = '11px'
+      btn.style.borderRadius = '3px'
+      btn.style.cursor = 'pointer'
+      btn.style.border = preferences.connectionType === option.value ? '2px solid #007AFF' : '1px solid #ccc'
+      btn.style.backgroundColor = preferences.connectionType === option.value ? '#f0f7ff' : '#fff'
+
+      btn.onclick = () => {
+        preferences.connectionType = option.value
+        setDiscoveryPreferences(preferences)
+        updateDiscoveryView(devices, preferences)
+        // Update button styles
+        for (const b of Array.from(filterGroup.querySelectorAll('button'))) {
+          ;(b as HTMLButtonElement).style.border = '1px solid #ccc'
+          ;(b as HTMLButtonElement).style.backgroundColor = '#fff'
+        }
+        btn.style.border = '2px solid #007AFF'
+        btn.style.backgroundColor = '#f0f7ff'
+      }
+
+      filterGroup.appendChild(btn)
+    }
+
+    // Sort dropdown
+    const sortLabel = document.createElement('label')
+    sortLabel.style.fontSize = '12px'
+    sortLabel.style.fontWeight = '500'
+    sortLabel.style.marginLeft = '8px'
+    sortLabel.textContent = 'Sort:'
+
+    const sortSelect = document.createElement('select')
+    sortSelect.style.fontSize = '11px'
+    sortSelect.style.padding = '4px 8px'
+    sortSelect.style.borderRadius = '3px'
+    sortSelect.value = preferences.sortBy
+
+    const sortOptions = [
+      { label: 'Name', value: 'name' },
+      { label: 'Signal Strength', value: 'signal' },
+      { label: 'Type', value: 'type' },
+      { label: 'Connection', value: 'connection' },
+    ]
+
+    for (const opt of sortOptions) {
+      const option = document.createElement('option')
+      option.value = opt.value
+      option.textContent = opt.label
+      sortSelect.appendChild(option)
+    }
+
+    sortSelect.onchange = () => {
+      preferences.sortBy = sortSelect.value as any
+      setDiscoveryPreferences(preferences)
+      updateDiscoveryView(devices, preferences)
+    }
+
+    // Search box
+    const searchInput = document.createElement('input')
+    searchInput.type = 'text'
+    searchInput.placeholder = 'Search by name, ID, or type...'
+    searchInput.style.fontSize = '11px'
+    searchInput.style.padding = '4px 8px'
+    searchInput.style.borderRadius = '3px'
+    searchInput.style.border = '1px solid #ccc'
+    searchInput.style.flex = '1'
+    searchInput.style.minWidth = '200px'
+    searchInput.style.maxWidth = '300px'
+    searchInput.value = preferences.searchQuery
+
+    let searchTimeout: NodeJS.Timeout
+    searchInput.oninput = () => {
+      clearTimeout(searchTimeout)
+      searchTimeout = setTimeout(() => {
+        preferences.searchQuery = searchInput.value
+        setDiscoveryPreferences(preferences)
+        updateDiscoveryView(devices, preferences)
+      }, 300) // Debounce search
+    }
+
+    // Assemble controls
+    controlsDiv.appendChild(filterLabel)
+    controlsDiv.appendChild(filterGroup)
+    controlsDiv.appendChild(sortLabel)
+    controlsDiv.appendChild(sortSelect)
+    controlsDiv.appendChild(searchInput)
+
+    // Clear list and add controls
+    list.innerHTML = ''
+    list.appendChild(controlsDiv)
+
+    // Display discovery list
     list.style.display = 'block'
+
+    // Initial render with saved preferences
+    await updateDiscoveryView(devices, preferences)
   } catch (e) {
     uiLog.error('Discovery error:', e)
     status.textContent = `Error: ${e instanceof Error ? e.message : 'Discovery failed'}`
@@ -117,6 +240,37 @@ export async function discoverDevices(): Promise<void> {
   }
 }
 
+/**
+ * Update discovery list with filtered and sorted devices
+ */
+async function updateDiscoveryView(
+  allDevices: any[],
+  preferences: {
+    connectionType: 'all' | 'ble' | 'api' | 'both' | 'ir'
+    sortBy: 'name' | 'signal' | 'type' | 'connection'
+    searchQuery: string
+  },
+): Promise<void> {
+  // Apply filters and sort
+  const filtered = filterDevices(allDevices, preferences.connectionType, preferences.searchQuery)
+  const sorted = sortDevices(filtered, preferences.sortBy)
+
+  // Render updated list
+  const ul = await renderDiscoveredDevices(sorted)
+  document.getElementById('discoveredDevices')?.replaceWith(ul)
+  ul.id = 'discoveredDevices'
+
+  // Update status with count
+  const status = document.getElementById('discoverStatus')
+  if (status) {
+    const totalCount = allDevices.length
+    const filteredCount = sorted.length
+    status.textContent = filteredCount === totalCount
+      ? `Found ${totalCount} device(s)`
+      : `Showing ${filteredCount} of ${totalCount} device(s)`
+  }
+}
+
 export async function addDeviceToConfig(device: any): Promise<void> {
   const { addDeviceToConfig: addDevice } = await import('./devices.js')
   await addDevice(device)

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

@@ -18,58 +18,90 @@ export async function editDevice(device: any): Promise<void> {
   const modal = document.createElement('div')
   modal.style.background = getComputedStyle(document.body).backgroundColor
   modal.style.color = getComputedStyle(document.body).color
-  modal.style.padding = '24px'
-  modal.style.borderRadius = '8px'
-  modal.style.minWidth = '400px'
-  modal.style.boxShadow = '0 10px 40px rgba(0,0,0,0.3)'
+  modal.style.padding = '0'
+  modal.style.borderRadius = '10px'
+  modal.style.minWidth = '440px'
+  modal.style.maxWidth = '90vw'
+  modal.style.boxShadow = '0 8px 32px rgba(0,0,0,0.35)'
+  modal.style.overflow = 'hidden'
+  modal.style.borderTop = '3px solid var(--switchbot-red, #ef4444)'
 
   const title = document.createElement('h3')
   title.textContent = 'Edit Device'
   title.style.marginTop = '0'
+  title.style.marginBottom = '16px'
+  title.style.padding = '20px 20px 0'
+  title.style.fontSize = '18px'
+  title.style.fontWeight = '600'
+  title.style.color = 'var(--switchbot-red, #ef4444)'
+  title.style.letterSpacing = '-0.02em'
+
+  const contentDiv = document.createElement('div')
+  contentDiv.style.padding = '0 20px 20px'
 
   const nameLabel = document.createElement('label')
   nameLabel.textContent = 'Device Name'
   nameLabel.style.display = 'block'
-  nameLabel.style.marginBottom = '8px'
+  nameLabel.style.marginBottom = '6px'
   nameLabel.style.fontWeight = '500'
+  nameLabel.style.fontSize = '12px'
+  nameLabel.style.color = '#6b7280'
 
   const nameInput = document.createElement('input')
   nameInput.type = 'text'
   nameInput.value = device.name || device.id
   nameInput.style.width = '100%'
-  nameInput.style.marginBottom = '16px'
+  nameInput.style.marginBottom = '12px'
+  nameInput.style.padding = '8px 10px'
+  nameInput.style.borderRadius = '6px'
+  nameInput.style.fontSize = '14px'
+  nameInput.style.boxSizing = 'border-box'
+  nameInput.style.transition = 'border-color 0.2s ease'
 
   // Read-only API device type field
   const apiTypeLabel = document.createElement('label')
   apiTypeLabel.textContent = 'Device Type (API - Read Only)'
   apiTypeLabel.style.display = 'block'
-  apiTypeLabel.style.marginBottom = '8px'
+  apiTypeLabel.style.marginBottom = '6px'
   apiTypeLabel.style.fontWeight = '500'
+  apiTypeLabel.style.fontSize = '12px'
+  apiTypeLabel.style.color = '#6b7280'
 
   const apiTypeInput = document.createElement('input')
   apiTypeInput.type = 'text'
   apiTypeInput.value = device.deviceType || device.type || 'Unknown'
   apiTypeInput.readOnly = true
   apiTypeInput.style.width = '100%'
-  apiTypeInput.style.marginBottom = '16px'
+  apiTypeInput.style.marginBottom = '12px'
+  apiTypeInput.style.padding = '8px 10px'
+  apiTypeInput.style.borderRadius = '6px'
+  apiTypeInput.style.fontSize = '13px'
   apiTypeInput.style.opacity = '0.6'
   apiTypeInput.style.cursor = 'not-allowed'
+  apiTypeInput.style.boxSizing = 'border-box'
+  apiTypeInput.style.backgroundColor = '#f9fafb'
 
   // Editable config device type dropdown
   const typeLabel = document.createElement('label')
   typeLabel.textContent = 'Config Device Type (Override)'
   typeLabel.style.display = 'block'
-  typeLabel.style.marginBottom = '8px'
+  typeLabel.style.marginBottom = '6px'
   typeLabel.style.fontWeight = '500'
+  typeLabel.style.fontSize = '12px'
+  typeLabel.style.color = '#6b7280'
 
   const typeSelect = document.createElement('select')
   typeSelect.style.width = '100%'
-  typeSelect.style.padding = '8px'
-  typeSelect.style.marginBottom = '16px'
-  typeSelect.style.borderRadius = '4px'
+  typeSelect.style.padding = '8px 10px'
+  typeSelect.style.marginBottom = '12px'
+  typeSelect.style.borderRadius = '6px'
+  typeSelect.style.fontSize = '14px'
   typeSelect.style.background = getComputedStyle(nameInput).background
   typeSelect.style.color = getComputedStyle(nameInput).color
   typeSelect.style.border = getComputedStyle(nameInput).border
+  typeSelect.style.boxSizing = 'border-box'
+  typeSelect.style.cursor = 'pointer'
+  typeSelect.style.transition = 'border-color 0.2s ease'
 
   // Add option groups with all API device types
   Object.keys(DEVICE_TYPES).forEach((categoryName) => {
@@ -90,24 +122,37 @@ export async function editDevice(device: any): Promise<void> {
     typeSelect.appendChild(optgroup)
   })
 
-  const buttons = document.createElement('div')
-  buttons.style.display = 'flex'
-  buttons.style.gap = '8px'
-  buttons.style.justifyContent = 'flex-end'
-
   const errorMessage = document.createElement('div')
-  errorMessage.style.color = '#ef4444'
+  errorMessage.style.color = 'var(--switchbot-red, #ef4444)'
   errorMessage.style.marginBottom = '12px'
   errorMessage.style.fontSize = '12px'
   errorMessage.style.display = 'none'
+  errorMessage.style.padding = '8px 10px'
+  errorMessage.style.background = 'var(--switchbot-red-light, #fee2e2)'
+  errorMessage.style.borderRadius = '6px'
+  errorMessage.style.fontWeight = '500'
+
+  const buttons = document.createElement('div')
+  buttons.style.display = 'flex'
+  buttons.style.gap = '10px'
+  buttons.style.justifyContent = 'flex-end'
+  buttons.style.marginTop = '18px'
+  buttons.style.paddingTop = '18px'
+  buttons.style.borderTop = '1px solid rgba(0, 0, 0, 0.08)'
 
   const cancelBtn = document.createElement('button')
   cancelBtn.textContent = 'Cancel'
-  cancelBtn.style.background = '#666'
+  cancelBtn.className = 'secondary'
+  cancelBtn.style.background = '#6b7280'
+  cancelBtn.style.padding = '8px 16px'
+  cancelBtn.style.fontSize = '13px'
   cancelBtn.onclick = () => div.remove()
 
   const saveBtn = document.createElement('button')
   saveBtn.textContent = 'Save'
+  saveBtn.style.background = 'var(--switchbot-red, #ef4444)'
+  saveBtn.style.padding = '8px 20px'
+  saveBtn.style.fontSize = '13px'
   saveBtn.onclick = async () => {
     try {
       const { updateDevice, syncParentPluginConfigFromDisk, fetchDevices } = await import('./api.js')
@@ -137,15 +182,17 @@ export async function editDevice(device: any): Promise<void> {
   buttons.appendChild(cancelBtn)
   buttons.appendChild(saveBtn)
 
+  contentDiv.appendChild(nameLabel)
+  contentDiv.appendChild(nameInput)
+  contentDiv.appendChild(apiTypeLabel)
+  contentDiv.appendChild(apiTypeInput)
+  contentDiv.appendChild(typeLabel)
+  contentDiv.appendChild(typeSelect)
+  contentDiv.appendChild(errorMessage)
+  contentDiv.appendChild(buttons)
+
   modal.appendChild(title)
-  modal.appendChild(nameLabel)
-  modal.appendChild(nameInput)
-  modal.appendChild(apiTypeLabel)
-  modal.appendChild(apiTypeInput)
-  modal.appendChild(typeLabel)
-  modal.appendChild(typeSelect)
-  modal.appendChild(errorMessage)
-  modal.appendChild(buttons)
+  modal.appendChild(contentDiv)
 
   div.appendChild(modal)
   document.body.appendChild(div)