@switchbot/homebridge-switchbot 5.1.0-beta.0 → 5.1.0-beta.10

package/src/homebridge-ui/public/index.html

@@ -9,8 +9,57 @@
 </head>
 
 <body>
+
   <h1>🤖 SwitchBot Configuration</h1>
 
+  <!-- ...existing code... -->
+
+  <!-- Centered legacy view button at the bottom -->
+  <div class="centered-toggle-btn">
+    <button id="legacyViewBtn">Legacy View</button>
+    <button id="dynamicViewBtn" style="display: none;">Dynamic View</button>
+  </div>
+  <style>
+    .centered-toggle-btn {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      margin-top: 32px;
+      margin-bottom: 12px;
+      gap: 12px;
+    }
+    #legacyViewBtn, #dynamicViewBtn {
+      font-size: 12px;
+      padding: 4px 10px;
+    }
+  </style>
+
+  <div id="dynamicUiContainer">
+
+  <!-- v4 config incompatibility warning – shown dynamically by app.js -->
+  <div id="v4ConfigWarning" class="v4-config-warning" style="display: none">
+    <strong>⚠️ Incompatible v4 Configuration Detected</strong>
+    <p>
+      Your config.json appears to be in the <strong>v4 format</strong> (using <code>credentials</code> and
+      <code>options.devices</code> fields). This format is <strong>not compatible with v5 or newer</strong> of the
+      SwitchBot plugin. Devices will not be recognised until the config is updated.
+    </p>
+    <p>
+      Please update your config to the v5 format:
+    </p>
+    <ul>
+      <li>Move <code>credentials.token</code> → <code>openApiToken</code> (top level)</li>
+      <li>Move <code>credentials.secret</code> → <code>openApiSecret</code> (top level)</li>
+      <li>Move <code>options.devices</code> → <code>devices</code> (top level)</li>
+      <li>Rename per-device <code>connectionType</code> → <code>connectionPreference</code></li>
+      <li>Remove the <code>credentials</code> and <code>options</code> wrapper objects</li>
+    </ul>
+    <p>
+      See the <a href="https://github.com/OpenWonderLabs/homebridge-switchbot/blob/latest/MIGRATION.md" target="_blank" rel="noopener">Migration Guide</a> for full details.
+    </p>
+  </div>
+
   <div class="card compact">
     <h2>API Credentials</h2>
     <div class="credentials-row">
@@ -81,10 +130,6 @@
     <button id="discoverBtn" onclick="discoverDevices()" style="margin-bottom: 8px">
       🔍 Discover
     </button>
-    <button id="cancelDiscoverBtn"
-      style="margin-left: 6px; margin-bottom: 8px; display: none; padding: 6px 10px; font-size: 11px" class="secondary">
-      Cancel
-    </button>
     <div id="discoverStatus" style="margin-bottom: 6px; font-size: 11px"></div>
     <div id="discoverDevicesFound" style="margin-bottom: 6px; font-size: 11px; display: none"></div>
     <div id="discoverPhaseProgress" class="discover-phase-progress" style="display: none">
@@ -208,8 +253,18 @@
     </form>
   </div>
 
+  </div> <!-- end dynamicUiContainer -->
+
+  <div id="legacyViewContainer" style="display: none;">
+    <div class="card compact">
+      <h2>Legacy Config View</h2>
+      <div id="legacyConfigForm"></div>
+    </div>
+  </div>
+
   <script type="module" src="js/app.js"></script>
   <script type="module" src="js/advanced-settings.js"></script>
+  <script type="module" src="js/legacy-view.js"></script>
 </body>
 
 </html>

package/src/homebridge-ui/public/js/advanced-settings.ts

@@ -46,10 +46,11 @@ async function saveAdvancedSettings(): Promise<void> {
     if (!Array.isArray(pluginConfigBlocks) || !pluginConfigBlocks.length) {
       throw new Error('No plugin config blocks returned from Homebridge')
     }
-    // Find the SwitchBot config block
-    const idx = pluginConfigBlocks.findIndex(c => (c.platform || c.name || '').toLowerCase().includes('switchbot'))
+    // Find or add the SwitchBot config block
+    let idx = pluginConfigBlocks.findIndex(c => (c.platform || c.name || '').toLowerCase().includes('switchbot'))
     if (idx === -1) {
-      throw new Error('SwitchBot config not found')
+      pluginConfigBlocks.push({ platform: 'SwitchBot' })
+      idx = pluginConfigBlocks.length - 1
     }
     const config = pluginConfigBlocks[idx]
     // Update config values from UI

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

@@ -1,5 +1,6 @@
 // Fetch the list of configured devices from the Homebridge UI API
 import { isValidDeviceType, normalizeDeviceType } from '../../../device-types.js'
+import { isV4Config } from '../../utils/v4-detection.js'
 import './types.js'
 import { uiLog } from './logger.js'
 import { toastError } from './toast.js'
@@ -22,6 +23,35 @@ export async function fetchDevices(): Promise<any[]> {
   }
 }
 
+/**
+ * Detect whether the current plugin config is in the legacy v4 format.
+ *
+ * v4 configs stored credentials under a `credentials` sub-object and devices
+ * under `options.devices`. v5+ flattened these to `openApiToken`,
+ * `openApiSecret`, and a root-level `devices` array.
+ *
+ * Returns true when a v4 config block is found, false otherwise.
+ */
+export async function detectV4Config(): Promise<boolean> {
+  try {
+    if (typeof homebridge.getPluginConfig !== 'function') {
+      return false
+    }
+    const configArr = await homebridge.getPluginConfig()
+    if (!Array.isArray(configArr)) {
+      return false
+    }
+    const config = configArr.find(isSwitchBotPlatformConfig)
+    if (!config || typeof config !== 'object') {
+      return false
+    }
+    return isV4Config(config)
+  } catch (e) {
+    uiLog.warn('Error detecting v4 config:', e)
+    return false
+  }
+}
+
 /**
  * Validate and auto-correct device types in the config array before saving.
  * Returns an array of errors for devices that cannot be fixed.
@@ -270,7 +300,22 @@ export async function addDevicesInBulk(
   if (!resp || resp.success === false) {
     throw new Error(resp?.data?.message || 'Bulk add failed')
   }
-  return resp.data || resp
+  return normalizeBulkAddDevicesResponse(resp)
+}
+
+export function normalizeBulkAddDevicesResponse(resp: any): any {
+  const payload = resp?.data && typeof resp.data === 'object' ? resp.data : resp
+  const addedCount = Number(payload?.addedCount ?? payload?.added ?? 0)
+  const skippedCount = Number(payload?.skippedCount ?? payload?.skipped ?? 0)
+  const updatedCount = Number(payload?.updatedCount ?? payload?.updated ?? 0)
+
+  return {
+    ...payload,
+    success: resp?.success ?? true,
+    addedCount,
+    skippedCount,
+    updatedCount,
+  }
 }
 
 export async function updateDevice(

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

@@ -1,13 +1,56 @@
+import { detectV4Config } from './api.js'
 import { loadCredentialStatus, saveCredentials } from './credentials.js'
 import { initRemoveAllButton, loadConfiguredDevices } from './devices.js'
-import { discoverDevices, initializeDiscoverySettings } from './discovery.js';
+import { discoverDevices, initializeDiscoverySettings } from './discovery.js'
 
-(window as any).loadCredentialStatus = loadCredentialStatus;
-(window as any).saveCredentials = saveCredentials;
-(window as any).discoverDevices = discoverDevices
+// Ensure SwitchBot config block exists before any UI actions
+async function ensureSwitchBotConfigBlock(): Promise<void> {
+  try {
+    if (typeof homebridge.getPluginConfig !== 'function' || typeof homebridge.updatePluginConfig !== 'function') {
+      return
+    }
+    let configArr = await homebridge.getPluginConfig()
+    if (!Array.isArray(configArr)) {
+      configArr = []
+    }
+    const idx = configArr.findIndex(c => (c.platform || c.name || '').toLowerCase().includes('switchbot'))
+    if (idx === -1) {
+      configArr.push({ platform: 'SwitchBot' })
+      await homebridge.updatePluginConfig(configArr)
+      if (typeof homebridge.savePluginConfig === 'function') {
+        await homebridge.savePluginConfig()
+      }
+    }
+  } catch (_e) {
+    // Ignore errors
+  }
+}
+
+;
+
+(window as any).loadCredentialStatus = loadCredentialStatus
+;(window as any).saveCredentials = saveCredentials
+;(window as any).discoverDevices = discoverDevices
+
+/**
+ * Show or hide the v4 config incompatibility warning banner.
+ */
+async function checkV4Config(): Promise<void> {
+  const banner = document.getElementById('v4ConfigWarning')
+  if (!banner) {
+    return
+  }
+  const isV4 = await detectV4Config()
+  if (isV4) {
+    banner.style.display = 'block'
+  }
+}
 
 // Initialize on page load
+
 async function init(): Promise<void> {
+  await ensureSwitchBotConfigBlock()
+  await checkV4Config()
   await loadCredentialStatus()
   await initializeDiscoverySettings()
   await loadConfiguredDevices()

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

@@ -63,14 +63,20 @@ export async function saveCredentials(): Promise<void> {
     if (typeof homebridge.getPluginConfig !== 'function' || typeof homebridge.updatePluginConfig !== 'function') {
       throw new TypeError('Homebridge UI API not available')
     }
-    const configArr = await homebridge.getPluginConfig()
-    if (!Array.isArray(configArr) || configArr.length === 0) {
-      throw new Error('No plugin config found')
+    let configArr = await homebridge.getPluginConfig()
+    if (!Array.isArray(configArr)) {
+      configArr = []
+    }
+    let idx = configArr.findIndex(c => (c.platform || c.name || '').toLowerCase() === 'switchbot')
+    if (idx === -1) {
+      // Add new SwitchBot platform config
+      configArr.push({ platform: 'SwitchBot' })
+      idx = configArr.length - 1
     }
-    const config = configArr[0]
+    const config = configArr[idx]
     config.openApiToken = token
     config.openApiSecret = secret
-    await homebridge.updatePluginConfig([config])
+    await homebridge.updatePluginConfig(configArr)
     if (typeof homebridge.savePluginConfig === 'function') {
       await homebridge.savePluginConfig()
     }

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

@@ -394,7 +394,6 @@ function setDiscoveryGroupExpanded(groupKey: string, expanded: boolean): void {
 
 export async function discoverDevices(): Promise<void> {
   const btn = document.getElementById('discoverBtn') as HTMLButtonElement
-  const cancelBtn = document.getElementById('cancelDiscoverBtn') as HTMLButtonElement | null
   const status = document.getElementById('discoverStatus')
   const phaseProgress = document.getElementById('discoverPhaseProgress') as HTMLElement | null
   const phaseFill = document.getElementById('discoverPhaseFill') as HTMLElement | null
@@ -424,7 +423,6 @@ export async function discoverDevices(): Promise<void> {
   const startedAt = Date.now()
   let phaseStartedAt = startedAt
   let phase = 'Preparing discovery...'
-  let cancelled = false
 
   // --- Real-time RSSI polling additions ---
   // (bleScanDurationSeconds is now only used in bleSettings below)
@@ -936,32 +934,8 @@ export async function discoverDevices(): Promise<void> {
       devicesFoundDisplay.classList.remove('discovery-scanning-pulse')
     }
 
-    if (cancelBtn) {
-      cancelBtn.style.display = 'inline-block'
-      cancelBtn.disabled = false
-      cancelBtn.onclick = () => {
-        cancelled = true
-        const totalSeconds = Math.max(0, Math.floor((Date.now() - startedAt) / 1000))
-        status.textContent = `Discovery cancelled (${totalSeconds}s total)`
-        if (phaseProgress) {
-          phaseProgress.style.display = 'none'
-        }
-        if (devicesFoundDisplay) {
-          devicesFoundDisplay.style.display = 'none'
-          devicesFoundDisplay.classList.remove('discovery-scanning-pulse')
-        }
-        cancelBtn.style.display = 'none'
-        btn.disabled = false
-        btn.textContent = '🔍 Discover Devices'
-        hideBusyUi()
-      }
-    }
-
     if (bleSettings.bleEnabled) {
       const bleDevicesRaw = await apiDiscoverDevices('ble', bleSettings)
-      if (cancelled) {
-        return
-      }
 
       discoveredDevices = dedupeById(bleDevicesRaw)
       uiLog.info('BLE discover response:', bleDevicesRaw)
@@ -988,9 +962,6 @@ export async function discoverDevices(): Promise<void> {
 
     try {
       const openApiDevicesRaw = await apiDiscoverDevices('openapi')
-      if (cancelled) {
-        return
-      }
 
       uiLog.info('OpenAPI discover response:', openApiDevicesRaw)
       discoveredDevices = mergeDiscoveredDevices(discoveredDevices, openApiDevicesRaw)
@@ -1096,9 +1067,6 @@ export async function discoverDevices(): Promise<void> {
     setDiscoveryCache(discoveredDevices)
     updateLastScannedStatus()
   } catch (e) {
-    if (cancelled) {
-      return
-    }
     uiLog.error('Discovery error:', e)
     status.textContent = `Error: ${e instanceof Error ? e.message : 'Discovery failed'}`
     status.classList.add('error')
@@ -1123,11 +1091,6 @@ export async function discoverDevices(): Promise<void> {
     }
     btn.disabled = false
     btn.textContent = '🔍 Discover Devices'
-    if (cancelBtn) {
-      cancelBtn.disabled = false
-      cancelBtn.style.display = 'none'
-      cancelBtn.onclick = null
-    }
   }
 }
 

package/src/homebridge-ui/public/js/legacy-view.js

@@ -0,0 +1,152 @@
+// --- Inlined legacy view logic to avoid ES module import/export issues ---
+
+let legacySchema = null
+async function loadLegacySchema() {
+  if (legacySchema) {
+    return legacySchema
+  }
+  const resp = await fetch('config.schema.json')
+  if (!resp.ok) {
+    throw new Error('Failed to load config.schema.json')
+  }
+  legacySchema = await resp.json()
+  return legacySchema
+}
+
+async function renderLegacyView() {
+  const container = document.getElementById('legacyConfigForm')
+  if (!container) {
+    const legacyContainer = document.getElementById('legacyViewContainer')
+    if (legacyContainer) {
+      legacyContainer.innerHTML = '<div style="color:red;font-weight:bold">[SwitchBot UI] Error: legacyConfigForm container not found</div>'
+    }
+    console.error('[SwitchBot UI] Error: legacyConfigForm container not found')
+    return
+  }
+  container.innerHTML = ''
+  const schema = await loadLegacySchema()
+  const { properties } = schema.schema
+  const layout = schema.layout || []
+  const form = document.createElement('form')
+  for (const section of layout) {
+    const fieldset = document.createElement('fieldset')
+    if (section.title) {
+      const legend = document.createElement('legend')
+      legend.textContent = section.title
+      fieldset.appendChild(legend)
+    }
+    for (const key of section.items) {
+      const prop = properties[key]
+      if (!prop) {
+        continue
+      }
+      if (prop.type === 'array' && prop.items && prop.items.properties) {
+        // Render array of devices as a table
+        const table = document.createElement('table')
+        table.style.marginBottom = '12px'
+        const thead = document.createElement('thead')
+        const headerRow = document.createElement('tr')
+        for (const colKey of Object.keys(prop.items.properties)) {
+          const th = document.createElement('th')
+          th.textContent = prop.items.properties[colKey].title || colKey
+          headerRow.appendChild(th)
+        }
+        thead.appendChild(headerRow)
+        table.appendChild(thead)
+        // No data rows (read-only legacy view)
+        fieldset.appendChild(table)
+        continue
+      }
+      const label = document.createElement('label')
+      label.textContent = prop.title || key
+      label.style.display = 'block'
+      let input
+      if (prop.enum) {
+        const select = document.createElement('select')
+        select.name = key
+        for (const opt of prop.enum) {
+          const option = document.createElement('option')
+          option.value = opt
+          option.textContent = opt
+          select.appendChild(option)
+        }
+        input = select
+      } else if (prop.type === 'boolean') {
+        const checkbox = document.createElement('input')
+        checkbox.type = 'checkbox'
+        checkbox.name = key
+        if (prop.default) {
+          checkbox.checked = true
+        }
+        input = checkbox
+      } else {
+        const text = document.createElement('input')
+        text.name = key
+        text.type = prop.format === 'password' ? 'password' : 'text'
+        if (prop.default) {
+          text.value = prop.default
+        }
+        input = text
+      }
+      label.appendChild(input)
+      fieldset.appendChild(label)
+    }
+    form.appendChild(fieldset)
+  }
+  container.appendChild(form)
+}
+
+async function enableLegacyView() {
+  document.getElementById('dynamicUiContainer').style.display = 'none'
+  document.getElementById('legacyViewContainer').style.display = 'block'
+  await renderLegacyView()
+}
+
+function disableLegacyView() {
+  document.getElementById('dynamicUiContainer').style.display = 'block'
+  document.getElementById('legacyViewContainer').style.display = 'none'
+}
+
+// Toggle button visibility and view containers
+function updateViewButtons() {
+  const legacyBtn = document.getElementById('legacyViewBtn')
+  const dynamicBtn = document.getElementById('dynamicViewBtn')
+  const legacyContainer = document.getElementById('legacyViewContainer')
+  if (legacyContainer && legacyContainer.style.display === 'block') {
+    if (legacyBtn) {
+      legacyBtn.style.display = 'none'
+    }
+    if (dynamicBtn) {
+      dynamicBtn.style.display = 'inline-block'
+    }
+  } else {
+    if (legacyBtn) {
+      legacyBtn.style.display = 'inline-block'
+    }
+    if (dynamicBtn) {
+      dynamicBtn.style.display = 'none'
+    }
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const legacyBtn = document.getElementById('legacyViewBtn')
+  const dynamicBtn = document.getElementById('dynamicViewBtn')
+  if (legacyBtn) {
+    legacyBtn.addEventListener('click', () => {
+      // eslint-disable-next-line no-console
+      console.log('[SwitchBot UI] Legacy View button clicked')
+      enableLegacyView()
+      updateViewButtons()
+    })
+  }
+  if (dynamicBtn) {
+    dynamicBtn.addEventListener('click', () => {
+      // eslint-disable-next-line no-console
+      console.log('[SwitchBot UI] Dynamic View button clicked')
+      disableLegacyView()
+      updateViewButtons()
+    })
+  }
+  updateViewButtons()
+})

package/src/homebridge-ui/public/js/legacy-view.ts

@@ -0,0 +1,107 @@
+// legacy-view.ts
+// Renders the config UI from config.schema.json and toggles between legacy and dynamic UI
+
+import schema from '../../../../config.schema.json'
+
+function renderLegacyView() {
+  const container = document.getElementById('legacyConfigForm')
+  if (!container) {
+    const legacyContainer = document.getElementById('legacyViewContainer')
+    if (legacyContainer) {
+      legacyContainer.innerHTML = '<div style="color:red;font-weight:bold">[SwitchBot UI] Error: legacyConfigForm container not found</div>'
+    }
+    console.error('[SwitchBot UI] Error: legacyConfigForm container not found')
+    return
+  }
+  container.innerHTML = ''
+  const { properties } = schema.schema
+  const layout = schema.layout || []
+  const form = document.createElement('form')
+  for (const section of layout) {
+    const fieldset = document.createElement('fieldset')
+    if (section.title) {
+      const legend = document.createElement('legend')
+      legend.textContent = section.title
+      fieldset.appendChild(legend)
+    }
+    for (const key of section.items) {
+      const prop = properties[key]
+      if (!prop) {
+        continue
+      }
+      if (prop.type === 'array' && prop.items && prop.items.properties) {
+        // Render array of devices as a table
+        const table = document.createElement('table')
+        table.style.marginBottom = '12px'
+        const thead = document.createElement('thead')
+        const headerRow = document.createElement('tr')
+        for (const colKey of Object.keys(prop.items.properties)) {
+          const th = document.createElement('th')
+          th.textContent = prop.items.properties[colKey].title || colKey
+          headerRow.appendChild(th)
+        }
+        thead.appendChild(headerRow)
+        table.appendChild(thead)
+        // No data rows (read-only legacy view)
+        fieldset.appendChild(table)
+        continue
+      }
+      const label = document.createElement('label')
+      label.textContent = prop.title || key
+      label.style.display = 'block'
+      let input: HTMLElement
+      if (prop.enum) {
+        const select = document.createElement('select')
+        select.name = key
+        for (const opt of prop.enum) {
+          const option = document.createElement('option')
+          option.value = opt
+          option.textContent = opt
+          select.appendChild(option)
+        }
+        input = select
+      } else if (prop.type === 'boolean') {
+        const checkbox = document.createElement('input')
+        checkbox.type = 'checkbox'
+        checkbox.name = key
+        if (prop.default) {
+          checkbox.checked = true
+        }
+        input = checkbox
+      } else {
+        const text = document.createElement('input')
+        text.name = key
+        text.type = prop.format === 'password' ? 'password' : 'text'
+        if (prop.default) {
+          text.value = prop.default
+        }
+        input = text
+      }
+      label.appendChild(input)
+      fieldset.appendChild(label)
+    }
+    form.appendChild(fieldset)
+  }
+  container.appendChild(form)
+}
+
+export function enableLegacyView() {
+  document.getElementById('dynamicUiContainer')!.style.display = 'none'
+  document.getElementById('legacyViewContainer')!.style.display = 'block'
+  renderLegacyView()
+}
+
+// DEBUG: assign to window for browser access
+// eslint-disable-next-line ts/ban-ts-comment
+// @ts-ignore
+window.enableLegacyView = enableLegacyView
+// eslint-disable-next-line ts/ban-ts-comment
+// @ts-ignore
+window.disableLegacyView = disableLegacyView
+
+export function disableLegacyView() {
+  document.getElementById('dynamicUiContainer')!.style.display = 'block'
+  document.getElementById('legacyViewContainer')!.style.display = 'none'
+}
+
+// (window assignment removed; handled in .js entry point)