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

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

@@ -0,0 +1,367 @@
+import { DEVICE_TYPES } from './constants.js'
+import { uiLog } from './logger.js'
+
+export async function importDiscoveredDevice(device: any): Promise<{ configDeviceName: string, configDeviceType: string, address?: string } | null> {
+  return new Promise((resolve) => {
+    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 = '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 = 'Import Discovered 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 = '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 = '12px'
+    nameInput.style.padding = '8px 10px'
+    nameInput.style.borderRadius = '6px'
+    nameInput.style.fontSize = '14px'
+    nameInput.style.boxSizing = 'border-box'
+
+    const typeLabel = document.createElement('label')
+    typeLabel.textContent = 'Config Device Type'
+    typeLabel.style.display = 'block'
+    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 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'
+
+    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
+        const detectedType = (device.type || '').toLowerCase()
+        opt.selected = deviceType.toLowerCase() === detectedType
+        optgroup.appendChild(opt)
+      })
+
+      typeSelect.appendChild(optgroup)
+    })
+
+    const macLabel = document.createElement('label')
+    macLabel.textContent = 'BLE MAC Address (optional)'
+    macLabel.style.display = 'block'
+    macLabel.style.marginBottom = '6px'
+    macLabel.style.fontWeight = '500'
+    macLabel.style.fontSize = '12px'
+    macLabel.style.color = '#6b7280'
+
+    const macInput = document.createElement('input')
+    macInput.type = 'text'
+    macInput.value = device.address || ''
+    macInput.placeholder = 'AA:BB:CC:DD:EE:FF'
+    macInput.style.width = '100%'
+    macInput.style.marginBottom = '12px'
+    macInput.style.padding = '8px 10px'
+    macInput.style.borderRadius = '6px'
+    macInput.style.fontSize = '14px'
+    macInput.style.boxSizing = 'border-box'
+
+    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.className = 'secondary'
+    cancelBtn.style.background = '#6b7280'
+    cancelBtn.style.padding = '8px 16px'
+    cancelBtn.style.fontSize = '13px'
+
+    const importBtn = document.createElement('button')
+    importBtn.textContent = 'Add to Config'
+    importBtn.style.background = 'var(--switchbot-red, #ef4444)'
+    importBtn.style.padding = '8px 20px'
+    importBtn.style.fontSize = '13px'
+
+    const cleanup = (result: { configDeviceName: string, configDeviceType: string, address?: string } | null) => {
+      div.remove()
+      resolve(result)
+    }
+
+    cancelBtn.onclick = () => cleanup(null)
+    importBtn.onclick = () => cleanup({
+      configDeviceName: nameInput.value || device.name || device.id,
+      configDeviceType: typeSelect.value || device.type,
+      address: macInput.value || undefined,
+    })
+
+    div.addEventListener('click', (event) => {
+      if (event.target === div) {
+        cleanup(null)
+      }
+    })
+
+    buttons.appendChild(cancelBtn)
+    buttons.appendChild(importBtn)
+    contentDiv.appendChild(nameLabel)
+    contentDiv.appendChild(nameInput)
+    contentDiv.appendChild(typeLabel)
+    contentDiv.appendChild(typeSelect)
+    contentDiv.appendChild(macLabel)
+    contentDiv.appendChild(macInput)
+    contentDiv.appendChild(buttons)
+
+    modal.appendChild(title)
+    modal.appendChild(contentDiv)
+    div.appendChild(modal)
+    document.body.appendChild(div)
+    nameInput.focus()
+  })
+}
+
+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 = '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 = '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 = '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 = '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 = '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 = '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 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) => {
+    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 errorMessage = document.createElement('div')
+  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.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')
+      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)
+
+  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(contentDiv)
+
+  div.appendChild(modal)
+  document.body.appendChild(div)
+  nameInput.focus()
+}

package/dist/homebridge-ui/public/js/render.d.ts

@@ -0,0 +1,65 @@
+/**
+ * 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 declare function getRssiSignalQuality(rssi: number | undefined): {
+    level: 'excellent' | 'good' | 'fair' | 'poor' | 'unknown';
+    color: string;
+    bgColor: string;
+    description: string;
+    bars: number;
+};
+/**
+ * Create visual signal strength indicator bars
+ * @param rssi Signal strength in dBm
+ * @returns HTML element showing filled bars
+ */
+export declare function renderSignalBars(rssi: number | undefined): HTMLElement;
+/**
+ * Create signal quality badge with color
+ * @param rssi Signal strength in dBm
+ * @returns HTML element showing quality level
+ */
+export declare function renderSignalQualityBadge(rssi: number | undefined): HTMLElement;
+export declare function renderBadge(text: string, style: string): HTMLElement;
+export declare function renderConnectionBadge(connectionType: string): HTMLElement | null;
+export declare function renderIRBadge(): HTMLElement;
+export declare function renderDiscoveredDevices(devices: any[], options?: {
+    configuredIds?: Set<string>;
+}): Promise<HTMLElement>;
+/**
+ * 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 declare function filterDevices(devices: any[], connectionType?: 'all' | 'ble' | 'api' | 'both' | 'ir', searchQuery?: string): any[];
+/**
+ * Sort devices by specified criteria
+ * @param devices Devices array to sort
+ * @param sortBy Sort criterion: 'name' | 'signal' | 'type' | 'connection'
+ * @returns Sorted devices array
+ */
+export declare function sortDevices(devices: any[], sortBy?: 'name' | 'signal' | 'type' | 'connection'): any[];
+/**
+ * Get filter/sort preferences from localStorage
+ * @returns Object with current filter and sort preferences
+ */
+export declare function getDiscoveryPreferences(): {
+    connectionType: 'all' | 'ble' | 'api' | 'both' | 'ir';
+    sortBy: 'name' | 'signal' | 'type' | 'connection';
+    searchQuery: string;
+};
+/**
+ * Save filter/sort preferences to localStorage
+ * @param preferences Preferences object to save
+ */
+export declare function setDiscoveryPreferences(preferences: {
+    connectionType: 'all' | 'ble' | 'api' | 'both' | 'ir';
+    sortBy: 'name' | 'signal' | 'type' | 'connection';
+    searchQuery: string;
+}): void;
+export declare function renderDeviceList(list: any[]): void;
+//# sourceMappingURL=render.d.ts.map

package/dist/homebridge-ui/public/js/render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../../../src/homebridge-ui/public/js/render.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG;IAC9D,KAAK,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IACzD,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;CACb,CA8CA;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,CA+BtE;AAED;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,CAiB9E;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,WAAW,CAKpE;AAED,wBAAgB,qBAAqB,CAAC,cAAc,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAiBhF;AAED,wBAAgB,aAAa,IAAI,WAAW,CAK3C;AAwBD,wBAAsB,uBAAuB,CAC3C,OAAO,EAAE,GAAG,EAAE,EACd,OAAO,GAAE;IAAE,aAAa,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CAAO,GAC5C,OAAO,CAAC,WAAW,CAAC,CAiItB;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAC3B,OAAO,EAAE,GAAG,EAAE,EACd,cAAc,GAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,IAAY,EAC7D,WAAW,SAAK,GACf,GAAG,EAAE,CAmCP;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CACzB,OAAO,EAAE,GAAG,EAAE,EACd,MAAM,GAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,YAAqB,GACzD,GAAG,EAAE,CA8CP;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,IAAI;IACzC,cAAc,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,IAAI,CAAA;IACrD,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,YAAY,CAAA;IACjD,WAAW,EAAE,MAAM,CAAA;CACpB,CAeA;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,WAAW,EAAE;IACnD,cAAc,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,IAAI,CAAA;IACrD,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,YAAY,CAAA;IACjD,WAAW,EAAE,MAAM,CAAA;CACpB,GAAG,IAAI,CAMP;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,CAwHlD"}