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

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

@@ -0,0 +1,153 @@
+import { DEVICE_TYPES } from './constants.js'
+import { uiLog } from './logger.js'
+
+export async function editDevice(device: any): Promise<void> {
+  // Create modal dialog for editing
+  const div = document.createElement('div')
+  div.style.position = 'fixed'
+  div.style.top = '0'
+  div.style.left = '0'
+  div.style.width = '100%'
+  div.style.height = '100%'
+  div.style.background = 'rgba(0,0,0,0.7)'
+  div.style.display = 'flex'
+  div.style.alignItems = 'center'
+  div.style.justifyContent = 'center'
+  div.style.zIndex = '9999'
+
+  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)'
+
+  const title = document.createElement('h3')
+  title.textContent = 'Edit Device'
+  title.style.marginTop = '0'
+
+  const nameLabel = document.createElement('label')
+  nameLabel.textContent = 'Device Name'
+  nameLabel.style.display = 'block'
+  nameLabel.style.marginBottom = '8px'
+  nameLabel.style.fontWeight = '500'
+
+  const nameInput = document.createElement('input')
+  nameInput.type = 'text'
+  nameInput.value = device.name || device.id
+  nameInput.style.width = '100%'
+  nameInput.style.marginBottom = '16px'
+
+  // 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.fontWeight = '500'
+
+  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.opacity = '0.6'
+  apiTypeInput.style.cursor = 'not-allowed'
+
+  // 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.fontWeight = '500'
+
+  const typeSelect = document.createElement('select')
+  typeSelect.style.width = '100%'
+  typeSelect.style.padding = '8px'
+  typeSelect.style.marginBottom = '16px'
+  typeSelect.style.borderRadius = '4px'
+  typeSelect.style.background = getComputedStyle(nameInput).background
+  typeSelect.style.color = getComputedStyle(nameInput).color
+  typeSelect.style.border = getComputedStyle(nameInput).border
+
+  // Add option groups with all API device types
+  Object.keys(DEVICE_TYPES).forEach((categoryName) => {
+    const optgroup = document.createElement('optgroup')
+    optgroup.label = categoryName
+
+    DEVICE_TYPES[categoryName as keyof typeof DEVICE_TYPES].forEach((deviceType) => {
+      const opt = document.createElement('option')
+      opt.value = deviceType
+      opt.text = deviceType
+
+      // Select current configDeviceType if set, otherwise match API deviceType
+      const currentType = device.configDeviceType || device.deviceType || device.type || ''
+      opt.selected = currentType === deviceType
+      optgroup.appendChild(opt)
+    })
+
+    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.marginBottom = '12px'
+  errorMessage.style.fontSize = '12px'
+  errorMessage.style.display = 'none'
+
+  const cancelBtn = document.createElement('button')
+  cancelBtn.textContent = 'Cancel'
+  cancelBtn.style.background = '#666'
+  cancelBtn.onclick = () => div.remove()
+
+  const saveBtn = document.createElement('button')
+  saveBtn.textContent = 'Save'
+  saveBtn.onclick = async () => {
+    try {
+      const { updateDevice, syncParentPluginConfigFromDisk, fetchDevices } = await import('./api.js')
+      const { renderDeviceList } = await import('./render.js')
+
+      const params = {
+        deviceId: device.id,
+        configDeviceName: nameInput.value || undefined,
+        configDeviceType: typeSelect.value,
+      }
+
+      await updateDevice(params.deviceId, params.configDeviceName, params.configDeviceType)
+      await syncParentPluginConfigFromDisk()
+
+      // Refresh device list
+      uiLog.info('[Edit Device] Refreshing device list after update')
+      const list = await fetchDevices()
+      renderDeviceList(list)
+      div.remove()
+    } catch (e) {
+      uiLog.error('Update error:', e)
+      errorMessage.textContent = `Error: ${e instanceof Error ? e.message : 'Failed to update device'}`
+      errorMessage.style.display = 'block'
+    }
+  }
+
+  buttons.appendChild(cancelBtn)
+  buttons.appendChild(saveBtn)
+
+  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)
+
+  div.appendChild(modal)
+  document.body.appendChild(div)
+  nameInput.focus()
+}

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

@@ -0,0 +1,190 @@
+import type { DEVICE_TYPES } from './constants.js'
+
+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 = '300px'
+  ul.style.overflowY = 'auto'
+
+  const { addDeviceToConfig } = await import('./discovery.js')
+
+  for (const d of devices) {
+    const li = document.createElement('li')
+    li.className = 'device-item'
+
+    const info = document.createElement('div')
+    info.style.flex = '1'
+
+    const name = document.createElement('div')
+    name.style.fontWeight = '500'
+    name.textContent = d.name || d.id
+
+    // Add connection type badge
+    if (d.connectionType) {
+      name.appendChild(document.createTextNode(' '))
+      const badge = renderConnectionBadge(d.connectionType)
+      if (badge) { name.appendChild(badge) }
+    }
+
+    // Add IR badge if it's an IR device
+    if (d.isIR) {
+      name.appendChild(document.createTextNode(' '))
+      name.appendChild(renderIRBadge())
+    }
+
+    const details = document.createElement('div')
+    details.style.fontSize = '12px'
+    details.style.opacity = '0.75'
+
+    let detailsText = `ID: ${d.id} | Type: ${d.type} | Model: ${d.model || 'N/A'}`
+    if (d.hubDeviceId) { detailsText += ` | Hub: ${d.hubDeviceId}` }
+    if (d.rssi) { detailsText += ` | Signal: ${d.rssi} dBm` }
+    if (d.address) { detailsText += ` | MAC: ${d.address}` }
+    details.textContent = detailsText
+
+    info.appendChild(name)
+    info.appendChild(details)
+
+    const addBtn = document.createElement('button')
+    addBtn.textContent = '+ Add'
+    addBtn.style.marginLeft = '8px'
+    addBtn.onclick = async () => {
+      await addDeviceToConfig(d)
+    }
+
+    li.appendChild(info)
+    li.appendChild(addBtn)
+    ul.appendChild(li)
+  }
+
+  return ul
+}
+
+export function renderDeviceList(list: any[]): void {
+  const ul = document.getElementById('devices')
+  const status = document.getElementById('status')
+
+  if (!ul || !status) { return }
+
+  if (!list.length) {
+    status.textContent = 'No devices found in config.'
+    ul.innerHTML = ''
+    return
+  }
+
+  status.textContent = `Found ${list.length} device(s)`
+  ul.innerHTML = ''
+
+  for (const d of list) {
+    const li = document.createElement('li')
+    li.className = 'device-item'
+
+    const info = document.createElement('div')
+    info.style.flex = '1'
+
+    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'
+
+    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(name)
+    info.appendChild(code)
+    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 {}